Angular2コンポーネントの基本コード

Angularはコンポーネントが基本である。これはHTML、スクリプト、スタイルシートファイルで構成される。その基本を説明する。
Tags:

app.component.ts

前回はAngularの基本的なファイル構成について説明した。そこで、srcフォルダ内のappフォルダにコンポーネントファイルが用意され、サンプルにはapp.componentというコンポーネントファイルが含まれていることが分かった。

このapp.componentの内容が分かれば、コンポーネントがどのように作られているかを理解できる。ではapp.component.tsを見てみよう。

app.component.tsはTypeScriptのスクリプトファイルである。デフォルトで書かれている内容は次のとおりである。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

これがAngularコンポーネントのソースコードである。少し整理すると次のようになる。

import { Component } from '@angular/core';

@Component(...設定情報...)
export class コンポーネント名 {
    ...必要な情報...
}

最初のimportはモジュールをロードするためのものである。Angularにはさまざまな機能が用意されており、すべてモジュール化されている。モジュールはこのimportを使ってロードする。これは次のように書く。

import ロードするオブジェクト from モジュール指定;

ロードするオブジェクトは{}の中にカンマで区切って複数書くことができる。

ここでは@angular/coreというモジュールにあるComponentをロードしている。これは次に出てくる@Componentというアノテーションオブジェクトである。

アノテーションとは、コードにさまざまな情報を追加するためのものである。この@Componentは、下に定義されたクラスをコンポーネントとして使うための複数の機能を含んでいる。簡単に言えば、クラス定義の前に@Componentアノテーションを指定すると、そのクラスはコンポーネントとして認識される。

@Componentの設定とexportされるクラス

では、@Componentアノテーションを見てみよう。このアノテーションの後ろの()には、引数としてオブジェクトが指定されている。このオブジェクトには、コンポーネントに渡される各種設定情報が含まれる。ここで指定されている項目は次のとおりである。

  • moduleId: モジュール名を指定する。ここではmodule.idの値が指定されている。モジュールのIDをそのままmoduleIdとして設定する。
  • selector: コンポーネントを識別するための名前である。ここではapp-rootが指定されているため、このコンポーネントはapp-rootという名前で識別される。これは<app-root>というタグでこのコンポーネントを使えるということである。
  • templateUrl: コンポーネントの表示に使うテンプレートファイルのURLを指定する。ここではapp.component.htmlを指定している。
  • styleUrls: スタイルシートのURLを指定する。これは配列になっており、使用するCSSファイルをまとめて指定する。ここではapp.component.cssだけを使うようになっている。

この中で特に重要なのはselectorとtemplateUrlである。selectorはコンポーネントをHTMLに配置するときのカスタムタグ名を指定し、templateUrlは使用するテンプレートファイルを指定する。この2つが分からないと、どのファイルをどのように修正すればよいか分からない。

exportによるクラスの公開

ところで、@Componentアノテーションを付けて生成されるのはAppComponentというクラスである。これはexport class クラス名という形で書かれている。exportはオブジェクトを外部で使えるように公開するものである。exportしたクラスは、別の場所からimportでロードして利用できる。

ここではAppComponentクラスをexportするときに、titleという変数へ値を代入している。ここに代入された値は、後でテンプレートから使用できる。

これで、AppComponentというコンポーネントの基本ソースコードがどのような構成になっているか分かった。

HTMLとスタイルシート

スクリプトについて説明したので、次はHTMLとCSSについて説明する。

app.component.html app.component.htmlがどうなっているかを見ると、次のようになっている。

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
.... 以下省略 ...

<h1>タグを出力しており、その内容には{{ title }}が書かれている。この{{}}という記号は、JavaScriptの式を書いてその結果を出力するために使われる。

ここではtitleの値を出力しており、これは先ほど説明したスクリプトのexport classで作成した変数である。スクリプトで作った変数を、このようにテンプレートで利用できる。

省略された残りの部分にはロゴ画像やAngularに関連するいくつかのリンクがある。特別なものではないので、ここでは省略する。

app.component.css 次にスタイルシートであるapp.component.cssを開いてみると、内容は空である。必要に応じてここにスタイルを書けばよい。

表示のカスタマイズ

ここまででコンポーネントの基本構造が分かった。では少し応用して、コンポーネントの表示を少し変更してみよう。

以下にapp.component.htmlとapp.component.cssの例を示す。

app.component.html

<div class="rect">
    <h1>AppComponent</h1>
    <p>{{'これは、"' + title + '"というコンポーネントです。'}}</p>
</div>

app.component.css

.rect {
    border: 1px solid lightgray;
    padding: 10px 5px;
    margin: 10px 5px;
    color: darkgray;
}

このようにファイルを修正して、アプリケーションを再表示してみよう。今回は四角い枠の中にタイトルとメッセージが表示される。

ここではapp.component.cssにrectというクラスを定義し、それをapp.component.htmlで<div class="rect">のように指定して使用している。これにより、HTMLとスタイルシートを書き換えるだけで、簡単にコンポーネントの表示をカスタマイズできる。

ところで、HTMLファイルのテンプレートにはapp.component.cssを読み込むためのタグがないことを不思議に思った人もいるかもしれない。これはapp.component.tsスクリプトの@Componentアノテーションで、次のように設定されていたためである。

styleUrls: ['app.component.css']

これによってスタイルシートがロードされるため、スタイルシートを読み込むタグを別に書く必要はない。