Vue.js入門 ―最速で作るシンプルなWebアプリケーション

第6回 Vue.jsの高度なアプリケーション開発

この記事を読むのに必要な時間:およそ 8.5 分

単一ファイルコンポーネントによるモジュール化

vue-cliでVue.jsアプリケーションプロジェクトをセットアップし開発の準備ができました。

単一ファイルコンポーネントとは

早速実践として開発の紹介に入りたいところですが,ここではvue-cliを使った開発では理解の欠かせない単一ファイルコンポーネントについて紹介します。

vue-cliでセットアップしたVue.jsアプリケーションプロジェクトでは,コンポーネントのモジュール管理は単一ファイルコンポーネント(Single File Components)で行います。

単一ファイルコンポーネントとは,.vue拡張子ファイル内に定義したコンポーネントで,以下の例のような要素で構成されたHTMLベースのシンタックスのものです。

  • <template>タグ: コンポーネントにおいてUIのセマンティックな構造をテンプレートとして定義する要素です。HTMLの他,Mustache記法,v-ifなどのVue.jsで提供する文法がそのまま利用可能です。
  • <style>タグ: コンポーネントにおいてUIの見た目を制御する要素です。CSSを使用して定義することができます。
  • <script>タグ: コンポーネントにおいてUIの振る舞いを制御する要素です。JavaScriptを使用することができ,連載第3回で解説した同じ作法でコンポーネント定義が必要です。

単一ファイルコンポーネントの例を以下に示します。

<template>
  <p class="message">メッセージ: {{ msg }}</p>
</template>

<style>
.message { color: #42b983; }
</style>

<script>
export default {
  data () {
    return { msg: 'こんにちは!' }
  }
}
</script>

従来のWeb標準の技術構成(HTML, CSS, JavaScript)でコンポーネントを定義することができるので学習コストはほぼありません。単一ファイルコンポーネントはその名の通り,1つのファイルに1つしかコンポーネントを定義できません。

第3回で,Vue.component/componentsオプションによるUIをコンポーネント化する仕組みを紹介しましたが,この仕組みとexport/import(commonJSの場合はrequire)を使用することによりモジュール化は可能です。

しかしながら,単一ファイルコンポーネントは先の例の通り,要素を役割ごとに明確に区分してファイルごとに定義できるため,保守性と再利用性の高いコンポーネントの実装ができる点でより優れていると言えるでしょう。

vue-cliによりセットアップされたアプリケーションプロジェクトでは,標準で単一ファイルコンポーネントを利用するための環境がセットアップされています。使わない理由はありません。

単一ファイルコンポーネントの使用方法

単一ファイルコンポーネントは,バンドルツールとして,webpackならvue-loaderbrowserifyの場合はvueifyを使って最終的にVue.jsのVue.component/componentsオプションに登録可能なオブジェクトに変換します。このため,コンポーネントの利用方法は従来と変わりません。以下は,単一ファイルコンポーネントを使用する例です。

// 単一ファイルコンポーネントでモジュール化されたHello.vueをインポート
import Hello from './Hello' 

// インポートされた該当コンポーネントを使用対象となるVueコンポーネントに登録
new Vue({
  components: { Hello }
}).$mount('#app')
<div id="app">
  <hello></hello>
</div>

単一ファイルコンポーネントのその他機能

その他に,単一ファイルコンポーネントは以下のような開発をより効率化する機能を提供しています。

  • BabelによるES2015以降のJavaScript
  • スコープ付きCSS(Scoped CSS)
  • PostCSSによるCSSプロセッサ
  • CSS ModulesによるCSSのモジュール化
  • プリプロセッサ(Pre-Processor)による多言語(Pug/SaSS/CoffeeScriptなど)による単一ファイルコンポーネントの使用
  • ホットリロード(Hot Reload)による開発時のライブリロード

これらを使用することでさらに生産性と再利用性の高いコンポーネントのモジュール化が可能になります。詳細についてはドキュメント(vue-loader)を参照してください。

単一ファイルコンポーネントの作成

単一ファイルコンポーネントについて簡単ですが解説しました。vue-cliでセットアップしたVue.jsアプリケーションプロジェクトをベースに開発できる状態になったので,実際に単一ファイルコンポーネントを実装してみましょう。先ほど単一ファイルコンポーネントの解説で使用した単純なメッセージを表示するコンポーネントを少し改造して,以下のようなmsgプロパティ経由でメッセージが表示し,デフォルトメッセージを持ったHelloコンポーネントを実装します。

<template>
  <p class="message">メッセージ: {{ msg }}</p>
</template>

<style>
.message { color: #42b983; }
</style>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: 'こんにちは!'
    }
  }
}
</script>

vue-cliによってHelloコンポーネントとしてセットアップされているので,このコンポーネントの実装内容を先の今回の実装のものに置き換えます。エディタでsrc/components/Hello.vueを開いて置き換えて保存してください。その結果,ブラウザには図2のような画面が出力されるかと思います。

図2 Helloコンポーネント1

図2 Helloコンポーネント1

'こんにちは!'というメッセージがVue.jsのロゴの下に表示されるのをブラウザで確認できましたでしょうか?表示内容が初期のものと変わっていることを確認できたと思います。これは,アプリケーションのコード変更を検知して更新するホットリロードと呼ばれるもので,本稿でセットアップしたwebpackアプリケーションプロジェクトの開発環境に含まれています。リロードの手間がなくなり,開発生産性を大きく高めてくれます。

さて,Helloコンポーネントはmsgプロパティに文字列値を設定するとその文字列値が表示される仕様になっているので,ここでmsgプロパティに文字列値を設定してみましょう。エディタで,src/App.vueを開いて内容をtemplateタグの実装内容を以下のように変更してください。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello msg="ようこそ!"></hello>
  </div>
</template>

この結果,図3のように'ようこそ!'というメッセージがVue.jsのロゴの下に表示されるのを確認できるかと思います。

図3 Helloコンポーネント2

図3 Helloコンポーネント1

単一ファイルコンポーネント作成を体験することができました。初期にセットアップされているコンポーネントで単一ファイルコンポーネントを実装していきました。新規にコンポーネントを作成する場合は,アプリケーションプロジェクトとしてセットアップされたコードが管理されるsrcディレクトリ配下に,新規に.vueファイルを作成してコンポーネントを実装するとよいでしょう。

著者プロフィール

川口和也(かわぐちかずや)

株式会社 CUUSOO SYSTEM 最高技術責任者。

Vue.jsコアチームメンバーとしてVue.js関連のOSS活動を積極的に行っている。日本Vue.jsユーザーグループvuejs-jpの代表であり,国内の普及啓もう活動も進めている。最近は自称emojineerとしてemojiを使ったソフトウェア開発プロセスにも関心がある。

GitHub:kazupon
Twitter:@kazu_pon