[超初心者が行く] Angular5 Tutorialしてみた3

Angular5 Tutorial 入力を反映させる!

Angular – Tutorial: Tour of Heroes を翻訳(意訳多め)しています。

[超初心者が行く] Angular5 Tutorialしてみた2の続き

前回は Angular のTutorialで アプリケーションシェル を作りました。

今回は、入力した情報を反映させるコンポーネントを作っていきます。

ここからが翻訳になります。

ビックリマークの部分は個人的にわからない用語の意味を載せています。

これは、本家Angularのサイトには記載のない情報です。

では、チュートリアルやっていきましょう!

ヒーローエディターを作ろう!

前回、アプリケーションに基本的なタイトルが追加されました。 次に、ヒーロー情報を表示するための新しいコンポーネントを作成し、そのコンポーネントをアプリケーションシェルに配置します。

ヒーローズコンポーネントを作成する

Angular CLIを使用して、「heroes」という名前の新しいコンポーネントを生成します。

コマンド ng generate component heroes

CLIは新しいフォルダを./src / app / heroes /に作成し、HeroesComponentとして3つのファイルを生成します。

HeroesComponentクラスファイルは次のとおりです。

app/heroes/heroes.component.ts (initial version)

AngularコアライブラリからComponentをインポートし、コンポーネントクラスに@Componentで注釈を付けます。

@Componentは、コンポーネントのAngularメタデータを指定するデコレータ関数です。

CLIは3つのメタデータプロパティーを生成しました。

ある機能を実行するために必要な関数などのライブラリのこと。この場合は、Angularを成立させる基本的で重要なライブラリのこと。@angular/coreとも表記する。

メタデータは Angular にクラスをどのように処理するか教えるためのものです。

例えば、Angular システムでいう「モジュール」も 「コンポーネント」もどちらも、言い方を変えれば 「TypeScript のクラス」です。

しかし、メタデータをアタッチすることで、「Angular モジュール」とか「Angular コンポーネント」になります。

メタデータ – Angular 入門

リンク先にわかりやすい例があります。

アタッチ

「アタッチ」とは、接続する・付属する・取り付ける等の意味合いがあり、反対語の「デタッチ」は切り離す・分離する・外すといった対称的な意味を持っています。

アタッチ/デタッチとは | クラウド・データセンター用語集/IDCフロンティア

デコレータ関数

デコレータは、クラスやメソッド、プロパティ(アクセサ)などに対して、実行時に処理が加えられます。

FN1611003 | TypeScript入門 12: デコレータ(Decorator)を使う | HTML5 : テクニカルノート

デコレータに必要な付属情報
 翻訳に戻ります。
3つのメタデータプロパティー
  1. selector – このコンポーネントを指し示すCSSセレクターの名前を指定する
  2. templateUrl-コンポーネントのテンプレートファイルの場所
  3. styleUrls – コンポーネントのプライベートCSSスタイルの場所

CSSセレクタ「app-heroes」は、親コンポーネントのテンプレート内でこのコンポーネントを識別するHTML要素の名前になります。

ngOnInitはライフサイクルフックです。Angularは、コンポーネントの作成直後にngOnInitを呼び出します。 初期化ロジックを置くのに適しています。

AppModuleなどを使って、いつでもコンポーネントクラスをエクスポートして他の場所にインポートできます。

ngOnInit()

Angularがデータバインドプロパティを最初に表示し、ディレクティブ/コンポーネントの入力プロパティを設定した後で、ディレクティブ/コンポーネントを初期化します。

最初のngOnChanges()の後に1回呼び出されます。

よくわかりません。

ライフサイクルフック

わかりません。

Angular – Lifecycle Hooks

ヒーロープロパティを追加する

“Windstorm”というヒーローのヒーロープロパティをHeroesComponentに追加します。

heroes.component.ts (hero property)

heroを見よう

 heroes.component.htmlテンプレートファイルを開きます。 Angular CLIによって生成されたデフォルトテキストを削除し、新しいヒーロープロパティへのデータバインドで置き換えます。
heroes.component.html

HeroesComponentを表示する

HeroesComponentを表示するには、それをシェルAppComponentのテンプレートに追加する必要があります。

app-heroesはHeroesComponentの要素セレクタです。 そのため、AppComponentテンプレートファイルのタイトルのすぐ下に<app-heroes>要素を追加します。

src/app/app.component.html

CLI ng serveコマンドがまだ実行されているならば、ブラウザはアプリケーションタイトルとヒーロー名の両方を更新して表示することになります。

このように表示されているでしょう。

ヒーロークラスを作成する

本物のヒーローに名前以外の情報も追加しましょう。

src / appフォルダ内の独自のファイルにHeroクラスを作成し、idとnameプロパティを付けます。

src/app/hero.ts

HeroesComponentクラスに戻り、Heroクラスをインポートします。

コンポーネントのヒーロープロパティをHero型にリファクタリングします。 IDを1と名前を「Windstorm」というで初期化します。

リファクタリング
リファクタリング (refactoring) とは、コンピュータプログラミングにおいて、プログラムの外部から見た動作を変えずにソースコードの内部構造を整理することである。

書き直したHeroesComponentクラスファイルは、次のようになります。

src/app/heroes/heroes.component.ts

今の段階では次のように表示されているでしょう。

正しくバインディングされていないためこのように表示されます。

ヒーローオブジェクトを表示する

IDと名前の両方を詳細レイアウトに表示するには、テンプレートのバインディングを次のように更新します。

heroes.component.html (HeroesComponent’s template)

ブラウザが更新され、ヒーローの情報が表示されます。

UppercasePipeで書式設定する

次のようにhero.nameバインディングを変更します。

heroes.component.html (HeroesComponent’s template)

ブラウザが更新され次のようになります。

ブラウザが更新され、英雄の名前が大文字で表示されるようになりました。

大文字にするには、補間バインディングのあとにパイプ演算子(|UppercasePipe)を組み込みます。

パイプは文字列の書式を設定するのに適しています。例えば、通貨の金額、日付などです。

複数のビルトインパイプを備えたAngularでは、独自のパイプを作ることができます。

ビルトイン

ビルトイン(built-in)とは、建築段階からあらかじめ家具や設備が壁面などに組み込んで用いられる方式、すなわち造り付けのこと。収納家具や設備機器が建物の構造部分と一体化するように設置されていることをさす。

もともとは「造り付けの」「組み込まれている」という意味。

ビルトイン – Wikipedia

ヒーローを編集する

ユーザーは<input>テキストボックスを使用し、英雄の名前を編集できるようにしましょう。

テキストボックスにはヒーローの名前プロパティが表示され、ユーザーの入力時にそのプロパティが更新されます。これは、コンポーネントクラスから画面へ、画面からクラスへのデータの流れを意味します。

そのデータフローを自動化するには、<input>フォーム要素とhero.nameプロパティの間に双方向データバインディングを設定します。

双方向バインディング

HeroesComponentテンプレートの変更部分をリファクタリングすると、次のようになります。

src/app/heroes/heroes.component.html (HeroesComponent’s template)

[(ngModel)]は、Angularの双方向データバインディング構文です。

ここでは、hero.nameプロパティーをHTMLテキストボックスにバインドして、hero.nameプロパティーからtextboxに、テキストボックスからhero.nameに戻るようにデータを双方向に流すことができます。

コードを変更するとブラウザには何も表示されなくなります。

欠けているFormsモジュール

[(ngModel)]を追加したときにアプリが機能しなくなったことに注目してください。

エラーを表示するには、ブラウザ開発ツールを開き、コンソールで次のようなメッセージを探します。(Chromeの場合、F12のConsole)

Template parse errors:
Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

ngModelは有効なAngularディレクティブですが、デフォルトでは使用できません。

これはオプションのFormsModuleに属しており、それを使用するようオプトインする必要があります。

オプトイン
何らかの選択を望んですること。

AppModule

Angularでは、アプリケーションの部分がどのようにフィットするか、アプリケーションに必要なその他のファイルやライブラリを知る必要があります。 この情報はメタデータと呼ばれます

一部のメタデータは、コンポーネントクラスに追加した@Componentデコレータ内にあります。 その他の重要なメタデータは@NgModuleデコレータにあります。

最も重要な@NgModuleデコレータは、トップレベルのAppModuleクラスに注釈を付けます。

Angular CLIは、プロジェクトを作成するときにsrc / app / app.module.tsにAppModuleクラスを生成しました。 ここでFormsModuleをオプトインします。

Import FormsModule

AppModule(app.module.ts)を開き、@ angular / formsライブラリからFormsModuleをインポートします。

app.module.ts (FormsModule symbol import)

その後、FormsModuleを@NgModuleメタデータのimport配列に追加します。この配列には、アプリケーションに必要な外部モジュールのリストが含まれています。

app.module.ts ( @NgModule imports)

ブラウザが更新されると、アプリは再び動作するはずです。 ヒーローの名前を編集し、テキストボックスの上にある<h2>に変更が反映されていることを確認できます。

HeroesComponentを宣言する

すべてのコンポーネントは、1つのNgModuleで宣言されなければなりません。

あなたはHeroesComponentを宣言していません。

では、なぜアプリケーションは動作したのでしょうか?

それはAngular CLIがそのコンポーネントを生成したときにAppModuleのHeroesComponentを宣言したために機能しました。

src / app / app.module.tsを開き、先頭付近でHeroesComponentをインポートします。

import { HeroesComponent } from ‘./heroes/heroes.component’;

HeroesComponentは、@ NgModule.デコレータ配列で宣言されています。

declarations: [ AppComponent, HeroesComponent ],
AppModuleはAppComponentとHeroesComponentの両方のアプリケーションコンポーネントを宣言しています。

最終的なコードの確認

あなたのアプリはこのライブサンプル/ダウンロードの例のようになります。 このページで解説するコードファイルは次のとおりです。

src/app/heroes/heroes.component.ts

src/app/heroes/heroes.component.html

src/app/app.module.ts

src/app/app.component.ts

src/app/app.component.html

src/app/hero.ts

まとめ

  • CLIを使用して、HeroesComponentを作成しました。
  • HeroesComponentをAppComponentシェルに追加して表示しました。
  • UppercasePipeを適用して名前をフォーマットしました。
  • ngModelディレクティブで双方向データバインディングを使用しました。
  • AppModuleについて学びました。
  • AppModuleにFormsModuleをインポートして、AngularがngModelディレクティブを認識して適用するようにしました。
  • AppModuleでコンポーネントを宣言することの重要性を学び、CLIがそれを宣言したことを確認しました。

次回はヒーローをもっと追加する

今回はangular特有のバインディングについて見てきました。

複雑でわかりにくいですが、アプリ制作においてはとても便利な機能なので覚えたいところです。

では、次回はデータを増やしてみて「追加や編集」をクライアント側でできるようにします。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする