Part3: スクールアイドルエディタ

海未「では実際にコードを書いていきましょう」

海未「まずは画面に何か表示してみます。最初に用意したスターターキットの中にsrc/appというディレクトリがありますが、アプリケーションのコードはその中に納まります」
ことり「他にもたくさんファイルあるけど・・・」
海未「それはAngularの実行環境だと思えばいいでしょう。ローカルでサーバを動かして開発するために必要なファイルなので、基本的には触りません」

海未「app.component.tsというファイルを編集します」

海未「最初はこのようになっているはずなので、これを編集していきます」

海未「エディタで変更して保存すると自動的に画面が更新されます。最初にやったようにnpm startしておいてくださいね」
ことり「いちいちリロードしなくていいんだね」
穂乃果「ハイテクだねっ」

海未「まずは穂乃果の名前を画面に表示することができました。このtemplateの部分が、画面に表示されているHTMLの雛形です」
穂乃果「何がどう置き換わってるのか、見れば何となくは分かるんだけど・・・」
海未「{{title}}のように書かれている部分が変数のように置き換えられる箇所です。この場合はAppComponentクラスのtitleプロパティの値で置き換わります」
ことり「でも、そのテンプレートとAppComponentってどうやって繋がってるの?」
海未「@Componentという書き方がされていますが、これはデコレータといって、後に続くクラスを修飾するものです。この場合はAppComponentクラスを修飾している形ですね」
ことり「アノテーションとかそういう感じなんだね」
海未「デコレータはこの先もよく出てきますから、ここで感じを掴んでおいてください」


海未「さて、今のコードでは穂乃果は単なる文字列ですが、アイドルとしての属性を扱っていくためにクラスにしておきましょう。MVCの分かる方はモデルだと考えてください」

海未「このクラスの定義を、app.component.tsimportの下に追加してください。それから、AppComponentクラスのidolプロパティを」

海未「このように、Idolクラスを使うように修正します。まずは値は固定でいいでしょう」
穂乃果「うぅ、TypeScriptの復習が要るよう・・・」
海未「この段階で根を上げていてどうするのですか!」

ことり「テンプレートも直さなきゃ、なんだよね」
海未「さすがことりは物わかりがいいですね。はい、テンプレートもこのように修正します」

海未「この状態でブラウザで確認すると、最初と同じ表示になっているはずです」


海未「では、少しテンプレートを拡張してみましょう」

穂乃果「穂乃果覚えてるよ!TypeScriptで複数行文字列書けるの!」
ことり「そういえば、最初からさりげなくtemplateだけバッククオートで括ってあったよね」
海未「テンプレートはこのように複数行にわたって書くことが多いですから、複数行文字列の書き方も思い出しておいてくださいね」


海未「データの表示の仕方はなんとなく掴めてきたと思いますが、今度は編集をやってみましょう」

海未「最初に入力用のテキストボックスを用意します。名前を初期値として入れておきましょう」
穂乃果「属性にも{{idol.name}}って書けるんだね」
海未「HTML的に値として扱われる場所であればどこにでも書けます。さて、テキストボックスを置いただけでは入力しても当然何も起きませんね」
ことり「うーん、普通のテキストボックスだよね・・・」
海未「では編集機能を追加していきます。app.module.tsというファイルを開いてください」

海未「このようになっているはずです。ここで、フォームの処理を行うFormsModuleをインポートします」

穂乃果「ところでさ、コンポーネントとかモジュールとかっていうのは何なの?」
海未「アプリケーションの構成単位、といったところでしょうか。一般にAngularのアプリケーションは1つのモジュールで、複数のコンポーネントから構成されている、と考えておけばよいでしょう」
ことり「最初に編集してたapp.component.tsがコンポーネントで、今編集してるapp.module.tsがモジュールなんだよね。そっか、それでapp.module.tsAppComponentをインポートしてるんだ」
海未「そうですね。この先実装するコンポーネントや利用する外部のコンポーネントは、このapp.module.tsに追記していくことになります」
穂乃果「@Componentがついてるのがコンポーネントで、@NgModuleがついてるのがモジュールかな」
海未「はい。@NgModuleはモジュールを表すデコレータです」

海未「app.component.tsに戻りましょう。テンプレートを修正します」

海未「この[(ngModel)]を使うことで、モデルとビューのバインディング、結びつけが行われます」
穂乃果「よくわかんないよー」
海未「テキストボックスの内容とAppComponentのプロパティの値が連動するようになるということです。実際にやってみてください」
ことり「ええっと、テキストボックスの値を変更すればいいんだよね。じゃあ・・・わっ!」
穂乃果「どれどれ・・・わっ!なんかすごい!ただ入力しただけでリアルタイムに表示が変わるんだ!」
海未「データとフォームの双方向バインディングが、こんなに簡単に実現できるのです」

School idol editor


海未「今回は情報の表示と編集を見てみました。次回は一覧画面を作って複数のアイドルを扱ってみましょう」


LINEで送る
Pocket