Vue.jsでWebサイトをサクッと作る

アプリをストア申請するにあたり、Webサイトがあった方がよさそうだったのでVue.jsで作りました。制作期間は2-3日くらい。

f:id:jyuko49:20180422182043p:plain

Vue.js

JSフレームワークを選定するにあたり、軽くて扱いやすいライブラリを用いたかったので、Vue.jsにしました。

jp.vuejs.org

Angular.jsとReact.jsは今までに触ったことがあるのですが、いずれも学習コストは若干高めに感じましたし、Reactに至ってはJSXとなかなか仲良くなれない。
せっかくならば・・・と使ったことのないVue.jsを試してみたら、かなり良かったです。

Vue.jsの特徴としては、

軽い
扱いやすい
拡張性がある

軽量なライブラリの方が、サイト表示のレスポンスを向上させやすく、AWSなどのクラウドサービスで運用する際に通信量＝コストを抑えられます。

Vue.jsのインストール

開発環境はMacです。Node.js、npmを使った開発の基本的な知識があることを前提として書いていきます。

npm install vueでもインストールできますが、必要なライブラリをまとめてセットアップしてくれるvue-cliを使った方が便利です。
グローバルにインストールしてvue initコマンドでプロジェクトを作成します。

以下、プロジェクトテンプレートにwebpackを選択した例となります。

$ npm install -g vue-cli
$ vue init webpack vue-template

実際にコマンドを実行すると、テンプレートに合わせてインストールするライブラリの選択肢が順に表示され、必要なものだけを選べます。

vue-router
eslint
karma+mocha
Nightwatch
npm、yarn

プロジェクトを作成したら、ディレクトリに移動してnpm installでライブラリをインストール、npm run devでwebpack-dev-serverが立ち上がり、ローカルで動作確認できます。

$ cd vue-template
$ npm install
$ npm run dev

...

 DONE  Compiled successfully in 2205ms                                  11:53:06

 I  Your application is running here: http://localhost:8080

プロセスのURL（上記実行例だと、http://localhost:8080）をブラウザで開いてみます。
インストールが問題なくできていれば、以下のようなページが表示されます。

f:id:jyuko49:20180422170404p:plain

Elementのインストール

Vue.js向けのコンポーネントライブラリを追加します。

Element - The world's most popular Vue UI framework

npm installでインストールできます。

$ npm install --save element-ui

アプリケーションで利用する際にはimportが必要です。

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/ja'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element, { locale })

アプリケーションの作成

今回は導入ということでVirtual DOMの概念にはあまり触れずに、ヘッダ、フッタと複数のページからなるシンプルなWebサイトを作りました。
コンテンツを入れる前のテンプレート的なコードをGithubにアップしています。

Componentの作成

/src/componentsには初期構築時でファイル拡張子が.vueのHelloWorld.vueがあるはずです。このファイルがnpm run dev実行時に表示された画面のコンポーネントです。
ここにTop.vue、Info.vueなど各ページのコンポーネントを追加していきます。

.vueファイルの構成は、一般的なWebと同様、HTML+JS+CSSになっていると思えばよいです。

<template>
  <!-- HTMLを記述 -->
</template>

<script>
  // JSを記述
</script>

<style scoped>
  /* CSSを記述 */
</style>

templateはVue.js、Elementのコンポーネントを使って簡単にUIが実装できますし、通常のHTMLを書いていっても問題ありません。

scriptの主な役割は、子コンポーネントのimport、親コンポーネントからのpropの受け渡し、templateで利用する変数のセットなどです。

styleにはtemplateで利用するCSSを記述します。scopedにしておくとそのコンポーネント以下にのみスタイル適用されて、副作用を防げるらしい。

Routerの設定

特定のURLを叩いた際にコンポーネントが表示されるようルーティングを行います。

プロジェクト作成時、vue-routerをインストールしていれば、/src/router/index.jsが既に作られているはずなので、URLのパスとコンポーネントを紐付けます。

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

// 自作したコンポーネントをimport
import Top from '@/components/Top'
import Info from '@/components/Info'

Vue.use(Router)

export default new Router({
  routes: [
    // デフォルトの定義（不要なら削除）
    {
      path: '/', 
      name: 'HelloWorld',
      component: HelloWorld
    },
    // URLパスに対応するコンポーネントを定義
    {
      path: '/top', 
      name: 'Top',
      component: Top
    },
    {
      path: '/info', 
      name: 'Info',
      component: Info
    }
  ]
})

再度、npm run devを実行します。

webpack-dev-serverのURLがhttp://localhost:8080だとすると、

http://localhost:8080/top → Top.vueに記述したコンテンツ
http://localhost:8080/info → Info.vueに記述したコンテンツ

が表示されるはず。

eslintを入れているとnpm run dev時に構文チェックでエラーが出ることがありますが、スペースの入れ方や不要なセミコロンなどの指摘なので、コードを綺麗に保つために放置せず潰していくべし。

共通ヘッダの作成

ヘッダは全ページで利用するので共通のコンポーネントにします。

f:id:jyuko49:20180422174829p:plain

まず、Header.vueを作成し、ヘッダ部分だけのtemplateを記述します。

作成できたら、/src/App.vueを修正します。

<template>
  <div id="app">
    <Header/>　・・・追加
    <router-view/>　・・・routerでセットされたコンポーネント
  </div>
</template>

<script>
import Header from '@/components/Header'　・・・追加
export default {
  name: 'App',
  components: {
    Header　・・・追加
  }
}
</script>

<style>
（省略）
</style>

Headerコンポーネントをimportし、exportで使えるようにします。

App.vueはアプリケーションのメインビューで<router-view>にrouterでURLパスに応じたコンポーネントがセットされます。
共通ヘッダをその上に記述しておけば、URLパスに関係なく表示されることになります。