要件定義の不安をなくす。要件定義の不安をなくす。ユニファのバックエンド分割に学ぶイノベーションメタバース開発に必要な技術の基本知識をおさらい。Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。MB)本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回紹介したバージョン12・13に引き続き、今回は2022年6月にリリースされたバージョン14について、変更点や新機能を紹介していきます。リアクティブフォームでコンポーネントにフォームモデルを記述するには、フォーム内のコントロール、そのグループ・配列を、FormControl、FormGroup、FormArrayに紐づけて記述します。図2のサンプルで説明します。DevToolsのオフライン利用、Firefoxサポートまとめ参考資料はじめにAngularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。1)と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。2022年4月の前回記事では、2021年5月リリースのバージョン12と、同11月リリースのバージョン13について紹介しました。14)は、バージョン13から約半年後の2022年6月に、これまで通りのサイクルでリリースされました。14で導入された主要な変更点や新機能を説明していきます。全ての変更内容については、公式ドキュメントを参考にしてください。必要な環境Angularの開発では、一般にTypeScript(変換してJavaScriptを生成する、いわゆるAltJSの一種)が利用されます。本記事のサンプルコードもTypeScriptで記述しています。今回は以下の環境で動作を確認しています。serve」コマンドを実行して、「https://localhost:4200」をWebブラウザーで表示します。コンポーネントをモジュールから解放するスタンドアロンコンポーネントこれまでAngularのコンポーネントは、モジュール(NgModule)の一部として扱われ、インポートもモジュール単位で行ってきました。14で導入された「スタンドアロンコンポーネント」では、モジュールを利用せずにコンポーネントを単体で実装できるようになります。14のスタンドアロンコンポーネントは「開発者プレビュー」なので、正式版では記述方法などが変更される可能性があります。図1のサンプルで、スタンドアロンコンポーネントの利用法を説明します。このサンプルは画面全体のAppComponent、リストの1行に対応するPhoneComponent、各行下部ボタンに対応するActionsComponentの3種のコンポーネントから構成されます。MaterialのCard、Buttonコンポーネントを利用します。スタンドアロンコンポーネントのサンプル(p001-standalone)AppComponentでは、リスト1の<app-phone>でPhoneComponentを複数利用します。PhoneComponentにはname(名前)とvendor(メーカー)を指定します。vendor="Xiaomi"></app-phone>リスト1で利用されるPhoneComponentの実装はリスト2の通りです。'';}スタンドアロンコンポーネントにするには、(1)のstandaloneをtrueにします。従来モジュールで行っていたインポートの指定を、コンポーネントのimports(2)に記述します。このimportsには、使用するモジュールや別のスタンドアロンコンポーネントを指定します。Materialのモジュール、(2b)でコンポーネントに含める別のスタンドアロンコンポーネントを指定しています。(3)はコンポーネントに渡される変数で、リスト1のname、vendor属性に対応します。(2b)で指定されているActionsComponent(actions.component.ts)も、リスト2と同様の記述でスタンドアロンコンポーネントにしています。詳細はサンプルコードを参照してください。最上位のコンポーネント(ルートコンポーネント)をスタンドアロンコンポーネントにすることもできます。standalone属性をtrueに設定してAppComponent(app.component.ts)をスタンドアロンコンポーネントにした後、起動処理を記述するmain.tsファイルを、リスト3の通り修正します。console.error(err));従来は(1)の通り、モジュール(AppModule)を指定して起動していましたが、ルートコンポーネントがスタンドアロンコンポーネントの場合は(2)の通り、bootstrapApplicationメソッドにルートコンポーネントを指定して実行します。14のトピックとして、「リアクティブフォームで型情報が有効になった」ことがあげられます。以下ではリアクティブフォームを大まかに説明した後で、型付きリアクティブフォームのメリットを紹介していきます。Angularの「テンプレート駆動フォーム」と「リアクティブフォーム」Angularでは、「テンプレート駆動フォーム」と「リアクティブフォーム」の2種類のフォームが利用できます。テンプレート駆動フォームは、テンプレートに記述したフォームコントロールに[(ngModel)]ディレクティブを設定して、フォームの値をコンポーネントのプロパティに紐づけます(過去記事も参照してください)。コントロールの個数が少ない小規模なフォームに向いています。一方でリアクティブフォームでは、フォームとその構成要素を表すモデルを直接コンポーネントに記述して、テンプレート上のフォームと紐づけます。フォーム値の変更に反応して(リアクティブに)フォーム全体の値を受け取ったり、モデルを操作してフォームコントロールを動的に追加したりできます。コントロールの個数が多く複雑なフォームに向いています。リアクティブフォームの例リアクティブフォームでコンポーネントにフォームモデルを記述するには、フォーム内のコントロール、そのグループ・配列を、FormControl、FormGroup、FormArrayに紐づけて記述します。図2のサンプルで説明します。リアクティブフォームのサンプル(p002-reactive-form)図2のフォームは、リスト4の構造を持っています。</div>(略)</form>(1)の[formGroup]で、後述するリアクティブフォームの変数formを割り当てます。(2)ではformControlNameでフォームコントロール名を、(3)ではformGroupName属性でフォームグループ名を、(4)ではformArrayNameでフォーム配列名を割り当てています。リスト4に対応するリアクティブフォームの実装は、FormControl、FormGroup、FormArrayクラスのオブジェクトを利用してリスト5の通り行います。リスト4とリスト5は相似の階層構造を持っており、(1)~(4)がそれぞれ対応します。)});リスト4、5の通りリアクティブフォームの変数を定義してテンプレートのフォームと紐づけると、リスト6の通り、フォームやその内容を操作できるようになります。});}(1)はフォームに含まれるaliasesをFormArrayとして取得するGetterメソッドです。これを利用して(2)では、aliasesに新たなFormControlを追加して、フォームにテキストボックスを動的に増やしています。(3)では、form.patchValueメソッドを利用して、フォーム内の複数コントロールに一括で値を設定しています。14では、リアクティブフォームの要素や型を、開発環境やコンパイラが認識します。リスト6(3)の処理を記述する際に、要素の候補を表示できます。文字列が入るフォームに数字を代入しようとするとエラーが表示されます(図3)。型付きリアクティブフォームを活用する様子(p002-reactive-form/src/app/app.component.ts)なお、型情報がないリアクティブフォームを実装するには、UntypedFormGroup、UntypedFormControl、UntypedFormArrayクラスを利用します。サンプルコードに含まれるp002a-reactive-form-untypedサンプルでは、これらを利用して図2と同じフォームを実装しているので参考にしてください。このサンプルでは、図3に示した候補の表示や型不一致エラーの検出が行われません。リアクティブフォームでコンポーネントにフォームモデルを記述するには、フォーム内のコントロール、そのグループ・配列を、FormControl、FormGroup、FormArrayに紐づけて記述します。図2のサンプルで説明します。