コンポーネントの基本コードを理解する (1/6)

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

このapp.componentの中身がどうなっているかわかれば、コンポーネントがどのように作られているのかがわかります。では、さっそくapp.component.tsから見てみましょう。

app.component.tsは、TypeScriptのスクリプトファイルです。下のリスト欄に、デフォルトで書かれている内容を挙げておきます。これが、Angularのコンポーネントのソースコードなのです。これをもう少し整理すると、以下のようになるでしょう。

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

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

最初にある「import」は、モジュールをロードするためのものです。Angularでは、さまざまな機能が用意されていますが、それらはすべてモジュール化されています。モジュールは、このimportというものを使ってロードし利用します。これは、

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

このような形で記述します。ロードするオブジェクトは、{}内にカンマで区切って複数記述することもできます。

ここでは、@angular/coreというモジュールにあるComponentというものをロードしています。これは、その後にある@Componentというアノテーションのオブジェクトです。

アノテーションというのは、コードに様々な情報を付加するためのものです。この@Componentは、その下に定義されているクラスに、コンポーネントとして扱うための諸機能を組み込むためのものです。わかりやすくいえば、クラス定義の前に@Componentというアノテーションを付けてやれば、そのクラスはコンポーネントとして認識されるようになる、というわけです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

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

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