恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

【Vue.js】VueCLI + Vue Router + Webpackで簡単SPA開発

投稿日:




vue-cli

今回はVue.jsを使ったSPAの開発を紹介したいと思います。

Vue.js(ビュー)とは

React、Angularと並ぶJavaScriptの3大フレームワークの1つです。

有名どころだと、一休のサイトなんかはVueで作られていますね。

Vueの主な特徴は以下です。

  • 自由度が高く管理しやすい
  • 動作が軽い
  • 学習コストが低い
  • データバインディングによるリアルタイム更新が可能
  • ライブラリが豊富
  • 日本のコミュニティが活発

特に、単一のページでコンテンツの表示切替を行うSPA(シングルページアプリケーション)を制作する際によく使われています。

SPAでは、ページ遷移の際はAJAX非同期通信を行い、HTMLの一部を切り替えています。動的でサクサク動きます。

これを実現するために素のJavaScriptでコードを書くと大量になってしまうため、フレームワークを使用することが多いです。

さて、それでは早速使い方を見ていきましょう。

使い方

Node.jsとnpmが入っている方はターミナルでVueCLIをグローバルにインストールします。

Node.jsについてよくわからない方は以下の記事を参考にしてみて下さい。

nodistでNode.jsをインストールしてバージョン管理(Windows向け)

VueCLIはVue.jsでの開発環境を簡単に構築してくれるコマンドラインインターフェースです。

npm install -g vue-cli

インストールできたらバージョン確認もしておきましょう。

vue --version

本記事ではバージョン2.9.6を使用しています。

バージョン3以降は現在開発中のベータ版となっており仕様に変更が入る可能性があり、

バージョン3未満とプロジェクトの作成方法やディレクトリの構造も異なってきます。

ここでは、バージョン3未満の説明で統一していきます。

では、プロジェクトを作成していきましょう。

vue init 【テンプレートの名前】 【プロジェクトの名前】

テンプレートは色々ありますが、ここではWebサイトやWebアプリでよく使われているwebpackとします。

プロジェクトの名前は任意の名前を入れて下さい。ここではcompanyとします。

vue init webpack company

色々と質問されますが、全てEnterでも問題ありませんのでここでは質問の内容は省略します。

インストールが終わったらプロジェクトフォルダに移動し、

cd company

サーバーを立ち上げます。

npm run dev

ターミナルに表示されたURLにアクセスすると以下のようなページを確認できます。

vue-cli02

プロジェクトフォルダにはいろいろインストールされていると思いますが、

いじっていくのはsrcの中だけになります。

また、Vue Routerという非同期通信を実装するための便利なライブラリがあるのでインストールしておきます。

npm install vue-router

バージョンを指定する場合はvue-routerのあとに@3.0.2などを付けると、そのバージョンをインストールします。

何もつけなかった場合は最新版をインストールします。

本記事では3.0.2を使っています。

インストールできたら、srcフォルダ直下にrouter.jsファイルを作成して以下を記述します。

router.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

これはVue-routerを使いますという記述です。

そして、src直下にコンポーネントをまとめておくためのフォルダーを作成します。

任意の名前で結構です。今回はcomponentsとしてあげます。

そしてcomponentsフォルダーの中にHome.vueファイルとAbout.vueファイルを作成し、以下を記述します。

Home.vue

<template>
  <div class="home">
    これはHomeのページです
  </div>
</template>

About.vue

<template>
  <div class="about">
    これはAboutのページです
  </div>
</template>

そして、router.jsにも追記していきましょう。

router.js

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
Vue.use(Router)

export default new Router({
  routes: [
    { 
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

これはコンポーネントを読み込み、URLのパスで表示するコンポーネントを分別する設定です。

既にTOPページの表示が変わっていると思います。

試しに、URLに/aboutと入れてみると、About.vueのコンポ―ネントが描画されるはずです。

表示がでない場合は、srcフォルダ直下のmain.jsに下記を記述してみてください。

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

最後に、コンポーネントを切り替えるヘッダーメニューを作っていきましょう。

src直下のApp.vueを下記のように編集します。

ヘッダーもコンポーネント化してもいいのですが、全ページに共通のものはApp.vueに直接書いてもいいので、

今回はApp.vueの中に直接ヘッダーを作成しています。

App.vueを以下のように編集します。

App.vue

<template>
  <div id="app">
    <header>
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
     </ul>
    </header>
    <router-view/>
  </div>
</template>

<style scoped lang="scss">
#app {
  header{
    background : #777;
    ul{
      margin: 0;
      padding: 0;
      display: flex;
      list-style: none;
        li{
          margin: 10px;
            a{
               color: #fff;
            }
        }
     }
  }
}
</style>

これでヘッダーメニューができました。

vue-cli03

ボタンを押すとURLが変わり、それぞれコンポーネントが描画されると思います。

router-viewはルートとマッチしたコンポーネントをそこに描画するタグです。
つまりこの場合はURLによって描画をHomeとAboutで分岐します。

router-linkはルートのリンクを作成します。

実はこの二つはVue Routerを読み込むことで使えるタグです。便利ですね。

ちなみにcssでsassを使いたい場合はターミナルで以下のコマンドを入力します。

npm install sass-loader node-sass --save-dev

sass-loaderをインストールし、styleタグに以下のように記述すればOKです。

<style scoped lang="scss">

また、コンポーネントが切り替わる部分にフェードイン・アウトのアニメーションを付けてあげましょう。

App.vue

<template>
  <div id="app">
    <header>
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
      </ul>
    </header>
    <transition mode="out-in">
      <router-view/>
    </transition>
  </div>
</template>

<style scoped lang="scss">
#app {
  header{
    background : #777;
      ul{
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
          li{
            margin: 10px;
              a{
                color: #fff;
              }
          }
      }
  }
  .v-enter-active, .v-leave-active {
    transition: opacity .5s;
  }
  .v-enter, .v-leave-to {
    opacity: 0;
  }
}
</style>

router-viewをtransitionタグで囲み、CSSにアニメーションをつけていきます。

vueにはトランジションクラスという便利なクラスを使うことができます。

詳しくは公式サイトに色々載っているので、見てみて下さい。

modeの”out-in”は、最初に現在の要素がトランジションアウトして、

それが完了したら、新しい要素がトランジションインするという設定を加える事ができます。

ビルドする

それでは最後に、開発が一息ついた、または終わったところでビルドしましょう。

Ctrl+Cでサーバーを止めてあげて、以下をターミナルに入力します。

npm run build

すると、buildフォルダーの中に作成されているフォルダやファイルがバンドルされたものが入っています。

本アップはこれらのファイルをアップロードするだけでOKです。簡単ですね。

まとめ

こんな感じでポートフォリオサイトなどでよく見られるSPA構築が楽に行えるので、

jQueryからのステップアップをしたい方はぜひVueに挑戦してみてください。

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー。英語がちょっと話せます。 HTML/CSS(SASS), JavaScript(jQuery, Node.js, WebGL), PHP(Laravel), Ruby(Ruby on rails), MySQL, Swift, SEO, Wordpress, Photoshop, Illustrator, Indesignを扱います。