4入門」シリーズはAngular公式サイトの「TUTORIAL」をもとに、説明の仕方や進め方を手直ししたものです。コードの動きは段階を細かく分けて確かめるようにし、TypeScriptの構文についても補いました。本稿では、基本的な機能であるデータバインディングについてご説明します。4でコードを書いて動かす」を先に読まれるとよいでしょう。編集ページをつくる」をお読みください。4でコードを書いて動かす」でつくったファイル(コード001およびコード002)に手を加えるかたちで進めます(中身はAngular公式サイトの「QUICKSTART」と同じです)。ファイルの構成は、つぎの図001のとおりです。プロジェクトのフォルダの名前は、どのように変えても構いません。Codeでビルドしてアプリケーションを起ち上げる」参照)には、launch.jsonファイルにつぎのように"cwd"属性を加えてください。デバッグされるプログラムの作業ディレクトリへの絶対パスを定めます。bs-config.jsonが見つからないというエラーにより、正しくデバッグできない問題を避けるためです。HTMLドキュメントを書き替えるまず、HTMLドキュメントの<head>要素は、つぎのように書き替えます。もとのファイルと組み立てはほぼ同じです。変わったのは、JavaScriptライブラリ3つをCDN(unpkg)から読み込んでいます。サーバーで試すときも、ライブラリのアップロードは要りません。index.html全体は、以下のコード001にまとめました。...</my-app></body></html>なお、CSSファイル(styles.css)については、「TUTORIAL」(Plunker)からコピーして使うことにしましょう。コンポーネントのクラスに定めたプロパティの値を要素に差し込むつぎに、コンポーネントのクラス(AppComponent)に、つぎのようにプロパティ(titleとheroine)を加えます。この値は、クラスのデコレータに定めたComponent()関数で、引数オブジェクトに定めたテンプレート(template)の中から取り出せます。二重波括弧{{}}でプロパティをくくるのが参照の仕方です。ビルドしてアプリケーションを試すと、以下の図002のようにコンポーネントのクラスのプロパティ値が、差し込まれた要素のテキストとして示されます。デコレータ(Decorator)を使う」参照)。exportはファイルに分けたモジュールを、別のモジュールから使えるようにする仕組みです。exportとimport」参照)。プロパティにオブジェクトを与えれば、複数の値が含められます。そこで、つぎのように新たなクラス(Heroine)を定め、そこにプロパティ(idとname)を加えました。コンポーネントのクラス(AppComponent)のプロパティ(heroine)は、その型づけにしてオブジェクトを与えています。そのオブジェクトは新しいクラスのインスタンスではありません。アプリケーションから表示されるページは、とくに変わりありません(前掲図002)。コンポーネントのテンプレートに値の入ったラベルとテキスト入力フィールドを加えるさらに、コンポーネントのテンプレートに要素を加えます。デコレータ関数(Component())の引数オブジェクトに与えたtemplateに、タグを書き足すということです。値の文字列には、バックティック(`)が使ってありました。literal)が入力できるのです。クォーテーション("や')と異なり、空白文字が無視されるので、つぎのようにHTMLのタグと同じように改行やインデントで書式を見やすく整えられます。`<h1>{{title}}</h1><h2>{{heroine.name}}の情報</h2>`})アプリケーションをビルドして試すと、コンポーネントから差し込まれる要素にラベルとテキストが加わり、コンポーネントのクラス(AppComponent)のプロパティから得られた値が示されます(図003)。クラスのデータを要素に結びつけることは「バインディング」といいます。編集されたテキストをコンポーネントに反映するテストのひとつをテキスト入力フィールドにして、打ち込んだテキストをクラスのプロパティ値にバインディングしましょう。2のモジュールからFormsModuleクラスをimportします。そいて、アプリケーションのクラス(AppModule)に定めたデコレータ関数(NgModule())で、引数オブジェクトのプロパティimportsに配列要素として加えます。関数NgModule()の詳細は、「NgModule導入について」をご参照ください。{}FormsModuleクラスのNgModelディレクティブを使うと、双方向のバインディングができます。コンポーネント(AppComponent)のテンプレート(template)は、要素をつぎのように書き替えます。テキスト入力フィールド(<input>要素)には[()]でくくったディレクティブを加え、プロパティの参照を文字列で定めます。プロパティは{{}}でくくらないことにご注意ください。{}アプリケーションをビルドして確かめると、テキストフィールドに入力したテキストでコンポーネントのクラス(AppComponent)のプロパティ(heroine.name)値が書き替わり、その値を参照する他の要素(<h2>)の表示に反映されます(図004)。ここまで書き上げたアプリケーションとコンポーネントのモジュールは、以下のコード002にまとめました。併せて、Plunkerに作例のコードを掲げています。06「編集されたテキストをコンポーネントに反映する」に「NgModule導入について」の参照を追加。