2」の活用方法をサンプルとともに紹介しています。1)と比較しながら説明します。1)の次期バージョンです。2016年8月時点のバージョンは2.0.0-rc.5で、まもなく正式リリースという状況になっています。1に対して多くの変更点があり、コードの記述法も基本的に異なります。1ではビューとデータモデルを関連付けるデータバインディングや、ディレクティブと呼ばれる独自のHTML記述が利用できました。2でももちろん利用できます。記述方法が微妙に異なっており、最初は違和感を感じるかもしれません。1と比較しながら説明していきます。2はJavaScriptのフレームワークですが、公式WebサイトのドキュメントやサンプルはTypeScriptが先行して整備される場合が多く、本連載でもTypeScriptでコードを記述していきます。サンプルの実行にはNode.jsが必要になります。今回は以下の環境で動作を確認しています。QUICKSTART」を公開しており、本記事も基本的にこのクイックスタートで作成したファイル一式をベースにサンプルコードを記述します。クイックスタートの実行方法については前回記事も参照してください。2016年8月現在の手順で作成したクイックスタートプロジェクト(angular2-quickstart)を、ダウンロードできるサンプルコードに含めています。2.0.0-rc.5でのクイックスタートの変更点2.0.0-rc.5のリリースとともに、クイックスタートの内容も変更されています。参照するモジュールのバージョンが変更されたほか、Webアプリのモジュールを定義するapp/app.module.tsファイルが追加され、そのモジュールをapp/main.tsのアプリ起動処理が参照するようになっています。クイックスタートプロジェクトのapp.module.tsはリスト1のようになっており、Webブラウザーでアプリを実行するためのBrowserModuleモジュールと、app.component.tsに実装されたコンポーネントAppComponentを参照して、WebアプリのモジュールAppModuleを定義しています。}app.module.tsのモジュール記述については次回の連載で詳しく説明します。本記事のサンプルコードではリスト1をもとに、フォームを利用するサンプルではフォームのモジュール(FormsModule)を追加しています。記述法がちょっと違うデータバインディングデータバインディングは、コンポーネントが公開している変数やメソッドをWebコンテンツ(HTML)から参照・更新する仕組みです。2でデータバインディングを利用するシンプルな例をリスト2に示します。2のコンポーネント定義については前回記事の説明も参考にしてください。"こんにちは!";}(1)内のtemplateパラメータが、コンポーネントの表示を定義するHTMLです。バッククォート(`)で囲むと複数行を記述できます。}}」で変数名を囲んで記述します。HTMLで変数の参照と変更を両方行う(双方向データバインディング)場合は、(3)のようにタグの「[(ngModel)]」属性に変数名を記述します。データバインディングの対象となる変数messageは(4)で定義されています。リスト2を実行すると、変数messageの内容がラベル(pタグ要素)とテキストボックスに表示されます。テキストボックスの内容を書き換えると、ラベルの表示も連動して変更されます。1では、片方向データバインディングは同一の記述ですが、双方向データバインディングはリスト3のように、[(ngModel)]の代わりにng-model属性を利用します。リスト3を含むコード全体はダウンロードできるサンプルコードに含まれています。テンプレートのHTMLを外出しするリスト2ではコンポーネントファイル内のtemplate属性に直接テンプレートのHTMLを指定しましたが、HTMLを別ファイルに外出しして、templateUrl属性にHTMLファイルのパスを指定することもできます。コードが大規模になった場合に、表示とロジックを分離して整理できます。app/template.htmlにHTMLが記述されている})リスト4を含むコード全体(angular2-001a-templateUrl)はダウンロードできるサンプルコードに含まれています。本記事ではサンプルコードの処理全体を見通せるようにするため、リスト2のようにtemplate属性にHTML記述を直接指定しています。