Angularの基本構造を理解して、アプリ開発を始めるには？：Angular TIPS

連載目次

　別稿「TIPS：Angularの特徴とは？ 開発環境を構築するには？」（以降、準備編）では、Angularとは、に始まり、Angular QuickStart Source（以降、QuickStart）を利用して、Angularアプリの骨格を準備、インストールするまでを済ませました。本稿では、準備編で作成したアプリにあらかじめ用意されているサンプルアプリ（つまりQuickStartに含まれているソースコード）を読み解き、実際に動作させるまでを見ていきます。実践でAngular開発をしていく場合には基本的にQuickStartからスタートすればよく、本稿で説明する【1】〜【4】の作業は不要ですが、本稿では「実際にゼロから開発する場合の流れ・手順」でソースコードを読み解いていきます。

　QuickStartで用意されているのは、「Hello Angular」を表示するだけの、ごく基本的なサンプルです（図1）。誤解のしようもない基本的なサンプルなので、「またか」と思わず、Angularアプリの基本的な構造を理解してください。

図1　決められたメッセージを表示するだけのサンプル

【1】モジュールを準備する

　モジュールとは、アプリを構成するオブジェクト（＝コンポーネント）を束ねるための仕組みです。Angularそれ自体も複数のモジュールから構成されており、アプリの要件に応じて必要なモジュールをインポートして利用することになります。

　もちろん、モジュールはアプリ開発者が自ら定義することもできます。原則として、Angularアプリは、1つ以上のモジュールから構成されていなければなりません。アプリを起動する際に呼び出されるモジュールのことを、ルートモジュールとも呼びます（いわゆる、アプリのエントリーポイントを内包するメインモジュールです）。

　以下に、その具体的なコードを示します（※なお、このコードは/src/appフォルダーに含まれているapp.module.tsファイルです）。

　まず、import命令で、Angularアプリを動作させるのに必要となるモジュール／コンポーネントをインポートします。

　［1］の@angular/〜はAngularが提供する標準モジュールです。最低限、モジュールを定義するためのNgModule、ブラウザー上でアプリを動作させるためのBrowserModuleをインポートしておきましょう*1。

　［2］のAppComponentは、アプリの本体を表すコンポーネントです。後からあらためて説明します。

　そして、［3］でAppModuleという名前のルートモジュール（＝モジュールクラス）を準備しています。他のモジュールから呼び出す際などには、ここで宣言した名前（AppModule）を利用します。

　ただし、これだけではモジュールと見なされません。@NgModuleデコレーターでモジュールとしての情報を宣言しておきましょう（［4］）。デコレーターは、モジュールやクラスなどの要素に対してメタ情報を付与するための仕組みです。Javaでいうところのアノテーションに相当する仕組み、と考えると、分かりやすいかもしれません。デコレーターには「パラメーター名: 値」のハッシュ形式で、あらかじめ決められたパラメーター情報を指定できます。

　@NgModuleデコレーターで利用できるパラメーターには、以下のようなものがあります。

　この例であれば、「BrowserModuleを参照して」「ルートコンポーネントとしてAppComponentを含んだ」AppModuleモジュールを定義する、という意味になります。

【2】コンポーネントを準備する

　手順【1】で保留にしていたルートコンポーネントを作成します（リスト2）。ルートコンポーネント（もしくはメインコンポーネント）とは、アプリで最初に呼び出される、いわゆるエントリーポイントです。

　まず、［1］はコンポーネントを定義するために必要となるオブジェクトをインポートしています。

　コンポーネントの本体は、［2］です。ここでは、先ほどAppModuleモジュールで指定したAppComponentという名前でコンポーネントクラスを作成しています。モジュールから参照できるよう、exportキーワードで外部に公開していることに注意してください。

　ただし、このままではコンポーネントとして動作させることはできません。モジュールのときと同じく、コンポーネントの構成情報を@Componentデコレーターで定義しておきましょう（［3］）。@Componentデコレーターでは、さまざまなパラメーターを指定できますが、ここで利用しているのは、以下の2個です*2。

　この例であれば、「<app-root>要素に対して、『「<h1>Hello {{name}}</h1>」』というテンプレートを適用」するためのAppComponentコンポーネントを定義したことになります。

　テンプレートの中の{{……}}はInterpolation（補間）と呼ばれる構文で、主に、コンポーネントクラスで用意されたプロパティ（ここではname。［4］）などを反映させるために利用します。Interpolationの詳細は、別稿「TIPS：コンポーネントの値をビューに反映させるには？」も併せて参照してください。

【3】スタートアップコードを準備する

　ルートモジュールとルートコンポーネントを準備できたところで、これらを起動するためのスタートアップコードを準備します。

　まず、アプリ起動のために必要なモジュールをインポートします（［1］）。platformBrowserDynamicはブラウザーでアプリを起動するための関数、AppModuleは自分で作成したルートモジュールです（ルートコンポーネントはAppModule経由でインポートされますので、ここではインポート不要です）。

　必要なモジュールをインポートできたら、あとは、platformBrowserDynamic#bootstrapModuleメソッドでモジュールを起動します（［2］）。

【4】メインページを準備する

　最後に、アプリを動作させるためのメインページを用意します。メインページは、（/src/appフォルダーではなく）アプリケーションルート直下（つまり/srcフォルダー）に配置するものとします。

　まず、Angularアプリを動作させるためのライブラリをインポートします（［1］）。shim.min.jsファイルはレガシーなブラウザーのためのポリフィル（＝足りない機能の穴埋め）、zone.jsファイルとSystem.src.js（SystemJS）ファイルはAngularの動作に必要となるライブラリです。

　［2］ではSystemJSの設定情報（＝systemjs.config.js、前回の表1と図1を参照）を読み込むと共に、System.importメソッドで/src/appフォルダー配下のmain.jsを起動しています。catchメソッドはmain.jsを読み込めなかった場合の処理で、ここではエラー情報をログに出力しています。

　そして、［3］がルートコンポーネントを表示するための領域です。これによって、先ほど@Componentデコレーターのセレクター指定（selectorパラメーター）に合致した要素（ここでは<app-root>要素）に対して、テンプレート（templateパラメーター）の内容が反映されます。

　<app-root>要素配下には、Angularが初期化される前に表示されるよう、一般的にはロード待ちのコンテンツを記載しておきます（コンポーネントが処理された後は、要素配下はテンプレートの内容で置き換えられます）。

【5】アプリを起動する

　以上でアプリを起動するための準備は完了です。コマンドプロンプト（Windows）やターミナル（Mac）などを使ってnpm startコマンドを実行してください。これにより、リスト6のように実行されます。

　これによって、TypeScriptスクリプト（.tsファイル）がコンパイルされると共に、Angular標準の開発用サーバー（lite-server）が起動して、以下のようにアプリが表示されます。この状態で、ソースコード（例えばindex.htmlファイル）を書き換えると、自動的にこれを認識して、ページがリロードされることも確認してみましょう。

図2　Angularアプリを実行した結果

　.tsファイルがコンパイルされた結果、/src/appフォルダー配下には、

ができていることも確認しておきましょう。

　以上、QuickStartをベースにして、Angularアプリの構造を理解すると共に、アプリを実際に起動させるまでの基本的な開発の流れを見てみました。

　こうして見てみると、「簡単なアプリを動かすにも、さまざまなファイルが絡み合っているので、Angularは難しい！」と思われるかもしれません。しかし、ここまでの内容は、一般的なアプリではほぼ共通です。QuickStartをスケルトンとして、以降のコードを追加していくようにすると、開発を効率化できるでしょう。

　本連載でも、以降、QuickStartのコードを前提として、そこからの差分を解説していきます。

「Angular TIPS」