2.4.4コンポーネントは、Vue.jsのコードとHTML要素を使い回しができる部品に切り分けたものです。データを項目ごとに削除する」でつくったTodoリストのアプリケーション(サンプル001)から、ふたつの部分をコンポーネント化してみましょう。07」のコード001では、<script>要素は以下のように<body>の終わりに加えてありました。VueアプリケーションはHTML要素の参照を得て定められるため、<body>要素が先に読み込まれていなければならないからです(図001)。'#app',});</script>アプリケーションは<head>要素にまとめた方が管理しやすいでしょう。vm.$mount()メソッドを使うと、アプリケーションにelプロパティを加えることなく、あとからHTML要素に定められます。引数に渡すのは要素の参照またはセレクタです。つぎのように、DOMContentLoadedイベントのリスナー関数で呼び出せば、HTMLドキュメントを読み込み終わってから要素にアプリケーションが定められます。これで、JavaScriptコードは<head>要素に移しても大丈夫です。ヘッダをコンポーネントにするコンポーネントはVue.extend()メソッドでつくります。引数に渡すのは、コンポーネントオプションをプロパティに定めたオブジェクトです。コンポーネントのHTML記述はtemplateプロパティに文字列で与えます。バックティック``でテンプレート文字列にすれば、HTMLと同じように半角スペースやタブ、改行などのホワイトスペースが含められます。アプリケーションのVue()コンストラクタには、引数のオプションオブジェクトにcomponentsプロパティでコンポーネントのセレクタと参照を定めます。コンポーネント},});コンポーネントをつくったら、考えなければならないのはデータのやり取りです。コンポーネントが使い回せるためには、できるだけ他と切り離されていなければなりません。データの受け渡しは、決められたやり方にしたがう必要があるのです。親から子のコンポーネントへはデータをプロパティで渡し、子から親へはイベントにより伝えることになります。親から受け取るプロパティは、子コンポーネントのVue.extend()メソッドの引数オブジェクトに、propsプロパティで配列に文字列要素として加えます。親は子コンポーネントのテンプレートにv-bindディレクティブでプロパティをバインドして、データを渡せばよいのです(「コンポーネント」の「プロパティ」参照)。v-bind:プロパティ=親のデータ></コンポーネントセレクタ>子コンポーネントから親へは、vm.$emit()メソッドで引数の文字列のイベントを送ります。v-on:イベント="メソッド"></コンポーネントセレクタ>ヘッダをコンポーネントに切り分けるコードは、つぎに抜き書きしたとおりです。07」のコード001と変わりません(図002)。リスト項目をコンポーネントにするつぎに、リスト表示されるTodo項目をコンポーネントにします。考え方は前項のヘッダと同じです。vm.$emit()メソッドから親にイベントとともに送るデータがあるときは、つぎのコードの抜き書きのように第2引数(todo)として渡せます。すると、親から呼び出すメソッド(removeTodo())が引数に受け取れるのです。v-on:remove-todo="removeTodo"></todo-item></li></ul></div>アプリケーションからヘッダ(listHeader)とリスト項目(todoItem)をコンポーネントに切り出す書き替えは、つぎのコード001にまとめました。アプリケーションの<body>要素は、コンポーネントを分けた分すっきりしました。子コンポーネントのセレクタにディレクティブv-bindとv-onを加えてデータのやり取りをします。子は、コンポーネントオプションのpropsとvm.$emit()メソッドにより受け渡しをするわけです。以下のサンプル002をjsdo.itに掲げました。6に書き替えましょう。変数の宣言には、letとconstが使えるようになりました。ともにブロックレベルのスコープをもちます。constは定数を定め、初期値は代入で書き替えられません(「JavaScript『再』入門」の「変数」参照)。オブジェクトにメソッドを備えるとき、コロン(:)とfunctionキーワードが省けます(「メソッドの定義」)。todo);}}});Array.filter()メソッドは、引数に渡すコールバック関数から論理(ブール)値を返すように定めます。すると、配列要素は順に関数の引数に渡され、trueが返された要素からなる新たな配列が返されるのです。名前のない(匿名)関数には、アロー関数式が使えます。functionキーワードが要らず、関数本体がreturn文だけのときはreturnと波かっこ{}も省いてしまって構いません。!todo.done);}},});ここで、Vue.jsのテンプレートにも「省略記法」を用いることにしましょう。ディレクティブv-bindはコロン(:)ひとつ、v-onは@記号に替えることができます。以上の書き替えを加えたのが、つぎのコード002です。jsdo.itのコードは、以下のサンプル003に掲げました。