Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。2」の活用方法をサンプルとともに紹介しています。2のコンポーネントにURLのパスを対応付けて、一般的なWebページのリンクと同じ操作でコンポーネントを切り替え表示できる、ルーターの機能について紹介します。1)の次期バージョンです。1に対して多くの変更点があり、コードの記述法も基本的に異なります。2では、Webページ内にコンポーネントを配置して画面を構成します。このときに「ルーター」機能を利用すると、コンポーネントにそれぞれURLのパスを対応付けて、Webページのリンクでコンポーネントを切り替え表示できます。Webブラウザの履歴機能も利用でき、通常のWebページ遷移と同じように操作できるメリットがあります。2はJavaScriptのフレームワークですが、公式WebサイトのドキュメントやサンプルはTypeScript向けが先行して整備される場合が多く、本連載でもTypeScriptでコードを記述していきます。サンプルの実行にはNode.jsが必要になります。今回は以下の環境で動作を確認しています。2で開発を始めるもととなる、クイックスタートプロジェクト(angular-quickstart)を含めています。start」コマンドで実行できます。プロジェクトの実行方法については過去記事も参照してください。2の各バージョンに対応したクイックスタートプロジェクトが、GitHubで公開されています。最初に、複数のコンポーネントを切り替える単純なサンプル(angular-001-router1)で、ルーターの利用方法を説明します。このサンプルでは、図1のように、画面上部のリンクをクリックして、画面下部のコンポーネントを切り替え表示できます。このとき、コンポーネントに対応するURLがブラウザーのアドレスバーに表示されます。ブラウザーの「戻る」「進む」ボタンで画面遷移できます。ルーターでコンポーネントを切り替え表示(angular-001-router1)まず、ルーターが内部的にページ履歴操作で利用しているHTML5のpushStateメソッドが正しく動作するように、index.htmlのhead要素先頭にbaseタグを追加します。baseタグは相対パスで記述されたURLの基準を指定するもので、このサンプルのURLには「http://localhost:xxxx/」のようにサブパスがないため、"/"と指定します。-->(以下略)次に、Webページのルートモジュールを定義するapp.module.tsに、コンポーネントとルーターの定義をリスト2のように記述します。2のモジュールを参照しています。モジュール定義に用いるNgModule、Webブラウザーでの実行に必要となるBrowserModuleに加えて、ルーターの定義に必要なRouterModuleを参照しています。(2)はWebページのルートコンポーネント(AppComponent)と、ルーターで切り替え表示する各コンポーネントの参照です。AppComponent以外は、HTMLテンプレートだけが指定された単純なコンポーネントです。ルーターの設定記述は(3)になります。RouterModule.forRootの中に「コンポーネントに対応するパスの情報」を指定します。このような情報を「ルート」と呼びます。ルートコンポーネント(AppComponent)以外のコンポーネントにルートを設定する場合は、forRootの代わりにforChildメソッドを用います。リスト2(3)の指定内容は表1のようになります。ErrorComponent例えば、URLが「http://localhost:xxx/comp2」の場合、Comp2Componentコンポーネントが表示されます。ルートは上から順に評価されるため、ホームを表す空文字や、「その他」を表す**のルートは、最後に指定する必要があります。forRoot/forChildメソッドに指定するルートのオブジェクトには、pathとcomponentのほかに表2のようなオプションを指定できます。outletオプションと<router-outlet>タグについては後述します。childrenオプションを利用すると、「/comp1/child1Comp1」のようなサブパスに対応するルート(子ルート)を指定できます。詳細は公式ドキュメントを参照してください。ルートにサブパスが指定したときに評価される子ルートのリスト表示を切り替えるリンクや、コンポーネントの表示場所は、リスト3のように記述します。...(2)--><router-outlet></router-outlet>(1)のように、aタグのrouterLink属性にパスを「/comp1」のように指定します。routerLinkActive属性は、対応するコンポーネントが画面表示されているときに、リンクに設定されるCSSクラスです。ここでは「active」クラスを指定して、赤色太字になるようにCSS(styles.css)に記述しています。(2)の<router-outlet>タグは、ルーターがコンポーネントを表示する場所の指定です。<router-outlet>タグにname属性で名前をつけて、表2のoutletパラメーターにその名前を指定すると、ルーターがコンポーネントを出力する<router-outlet>タグを指定できます。リスト1~3を実行すると、初期状態では表1のNo.3に対応するHomeComponentが表示され、画面上部のリンク押下で、リンクのパスに対応するコンポーネントが切り替え表示されます。「不正なURL」リンクのパス「/dummy」は明示的に定義されていないので、表1のNo.4(その他すべて)に対応するErrorComponentが表示されます。