[Sy] Vue.js でコンポーネントを作ってみる（一番簡単な方法）

2018/02/18

Vue.js を使うと、 コンポーネント と呼ばれる「部品」を組み合わせてページを構築しやすくなります。今回は一番簡単だと思う方法でコンポーネントを作ってみます。

0. 事前準備

Vue.js のインストール＆動作確認は以下の記事を参考にしてください。

⇒ [Sy] はじめての Vue.js（ yarn でインストール＆動作確認）

1. HTMLファイルを作成する

新しく list.html という名前でファイルを作成します。

シンプルな<ul>と<li>を使ったリストを作っていきます。

$ vim list.html

(list.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue.js コンポーネントを使ってリスト作成</title>
</head>
<body>

  <div id="app">
    <p>{{ msg }}</p>
    <ul>
      <list-item :item="'ひとつめ'"></list-item>
      <list-item :item="'ふたつめ'"></list-item>
      <list-item :item="'みっつめ'"></list-item>
    </ul>
  </div>

  <script src="/node_modules/vue/dist/vue.min.js"></script>
  <script src="/components/ListItem.js"></script>
  <script src="/app.js"></script>

</body>
</html>

<ul>タグの中に、<list-item> という HTMLには存在しない名前のタグがあります。

これがコンポーネントと呼ばれるもので、この後の JavaScriptのコードで、 <li>タグに変換されるように書いていきます。

2. コンポーネント用の JavaScript を作成する

コンポーネント用に新しく componentsディレクトリを作成して、その下に ListItem.js というファイルを用意します。

$ mkdir components
$ vim components/ListItem.js

ListItem.js の中身はこのようなコードを書きます。

(ListItem.js)

Vue.component('list-item', {
  props: {
    item: String
  },
  template: '<li>{{ item }}のアイテム</li>'
});

このコードで、以下のことを定義しています。

list-item という名前のコンポーネントを作る
item という文字列のパラメータを受け取る（HTML側で :item="'ひとつめ'" と書いている部分でパラメータに値を渡している）
HTMLで <list-item>と書かれたところに、<li>{{ item }}のアイテム</li> という部品を埋め込む（{{ item }}の部分には itemに渡された値が入る）

注意点としては、 コンポーネントの名前は必ず一つ以上のハイフンを使って複数の単語で付ける必要がある というところです。

例えば <listitem> はダメです。動きません。

もう1点、HTML側の話に戻りますが、scriptタグの順番は、

Vue.js本体(vue.min.js)
コンポーネント用のスクリプト(components/ListItem.js)
アプリケーション全体用のスクリプト(app.js)

としてください。

3. 動作確認

では動かしてみます。

このように表示されればうまくコンポーネントを作ることができています。