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

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

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

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

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

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

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

パッケージを色々指定していますが、これについてはあまり触れません。
簡単に説明すると以下の通りです。
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」を作成し、以下を記載してください。

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

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

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

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

5. Vue.jsファイル作成

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

一番上のimport文はES2015で利用できる他モジュールの指定方法です。
前回は<script>タグで呼び出していたVue.jsのコアライブラリをここで呼び出します。

また、componentsで先ほど作成した.vueファイルを読み込みます。
HTMLのタグにこの値を使ってデータをバインドしますが、JS上はキャメルケース(girlData)、HTML上はケバブケース(girl-data)になることが注意点です。

6. ビルド実行

先ほどpackage.jsonで定義したファイルをここで実行します。

public/jsapp.jsが生成されればOKです。

7. HTMLを作成して確認

プロジェクトルートにindex.htmlを作成します。

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


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

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

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

コメントを残す

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

CAPTCHA