Vue.jsをはじめよう・その2

遅くなりましたが、前回の続きです。
前回はブラウザ上でVue.jsを実行しましたので、今回はもう少し踏み込んだやり方を紹介します。

大きな流れとしては以下の通りです。

  1. プロジェクトの準備
  2. 必要なパッケージのインストール
  3. JSのビルド準備
  4. コンポーネントの定義
  5. Vue.jsファイル作成
  6. ビルド実行
  7. HTMLを作成して確認

ちなみに、Go to Everyone!のメンテナンスツールでも似たようなことをやっています。

1. プロジェクトの準備

今回は簡単なサンプルとして、「ご注文はうさぎですか?」のメインキャラ5人のプロフィールを表示します。
テーマに深い意味はありません。個人的な趣味です(笑)。

もろもろ準備するために、Node.js(とnpm)をインストールします。
Node.js

インストール後、パスが通っていれば以下コマンドでバージョンが確認できます。

npm -v

適当なフォルダを作成し、以下コマンドでプロジェクトの初期化をします。

npm init

色々聞かれますが基本的にEnter連打で問題ありません。
()内はデフォルト値です。

package name: (gochiusa)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\Kazuki_Kamizuru\repo\gochiusa\package.json:

{
  "name": "gochiusa",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

「package.json」が生成されればOKです。

2. 必要なパッケージのインストール

以下コマンドでパッケージをインストールします。
最近はこういう依存管理ツールが多くてとても助かりますね。

npm install --save-dev vue vue-loader css-loader vue-template-compiler webpack buble buble-loader

パッケージを色々指定していますが、これについてはあまり触れません。
簡単に説明すると以下の通りです。
webpack…ビルドツール
vue-loader、css-loader、vue-template-compiler…vueファイルをwebpackで扱うために必要
buble…ブラウザが認識できるJSに変換

–save-devはpackage.json内の開発用依存パッケージ:devDependenciesに追加してねという指定です(指定が無いと本番用の依存パッケージ:dependenciesに追加されます)。

3. JSのビルド準備

webpackでJSをビルドする設定を記載します。
プロジェクトのルートディレクトリに「webpack.config.js」を作成し、以下を記載してください。

const path = require('path');

module.exports = {
    entry: './assets/js/app.js',
    output: {
        path: path.join(__dirname, 'public/js'),
        filename: 'app.js',
    },
    resolve: {
        extensions: ['.vue', '.js'],
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        js: 'buble-loader'
                    }
                },
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'buble-loader',
            },
        ],
    },
};

「package.json」には簡単なスクリプトを記載することができます。
ここに、ビルド用のスクリプトを記載しておきます。

~~~省略~~~
  "scripts": {
    "webpack": "webpack --colors --config=./webpack.config.js"
  },
~~~省略~~~

4. コンポーネントの定義

キャラクターの情報を表示する箇所は再利用可能なので、コンポーネントに分割することで冗長さを無くします。
assets/jsapp.vueを作成します。
今回は血液型に応じて背景色をつけるようにしてみます。

%MINIFYHTML12cd131d41621ff442e088bc842aede59%

v-forはループ処理です。
.vueファイルではtemplateに利用するHTML、scriptにJS、styleにCSSを書き、このファイル内の閉じたスコープで状態を管理できます(厳密にはJSやCSSプリプロセッサでも記載可)。
propsは親から受け継ぐプロパティです。

5. Vue.jsファイル作成

assets/jsapp.jsを作成します。

import Vue from 'vue/dist/vue';
import Girls from './app.vue';

new Vue({
    el: '#app',
    data: {
        girls: [
            {
                name: 'ココア',
                age: 16,
                blood: 'B',
                birthday: '4月10日',
            },
            {
                name: 'チノ',
                age: 14,
                blood: 'AB',
                birthday: '12月4日',
            },
            {
                name: 'リゼ',
                age: 17,
                blood: 'A',
                birthday: '2月14日',
            },
            {
                name: '千夜',
                age: 16,
                blood: 'O',
                birthday: '9月19日',
            },
            {
                name: 'シャロ',
                age: 16,
                blood: 'A',
                birthday: '7月15日',
            },
        ],
    },
    components: {
        girlData: Girls,
    },
});

一番上のimport文はES2015で利用できる他モジュールの指定方法です。
前回は

ここで先ほど生成したjsファイルを読み込んでいます。
:girlsはコンポーネントに対して渡す値です(app.vue側propsで受け取っていた値です)。


index.htmlを開き、上記のように表示されればOKです。

かなりざっくり見てきましたが、いかがでしょうか。
webpackで変更を監視するとか、コンポーネント間でデータをやりとりするとか、本格的にやるならもっとたくさんのことができます。
今後も気になったことは随時ここで展開していこうと思います。

なお、今回のサンプルソースは以下にあります。
Github

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA