コンポーネントの基本コードを理解する (2/6)
作成:2016-08-13 09:34
更新:2016-08-13 09:34
更新:2016-08-13 09:34
■@Componentの設定とexportされるクラスの値
では、@Componentアノテーションを見てみましょう。このアノテーションでは、その後の()の引数内にオブジェクトが用意されています。このオブジェクトの中に、コンポーネントに渡す各種の設定情報が記述されます。ここで用意しているのは以下のような項目です。
moduled――モジュール名を指定します。ここでは、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では使用するテンプレートファイルを指定します。これらがわかっていないと、どのファイルをどう修正すればいいのかわかりません。
さて、@Componentアノテーションをつけて作成されているのは、「AppComponent」というクラスです。これは、「export class ○○」という形で書かれています。exportは、オブジェクトをエクスポートする(外部から利用できるようにする)ものです。exportしたクラスは、importで他の場所からロードし利用できるようになるのです。
ここでは、AppComponentクラスをexportする際、titleという変数を用意してあります。ここに用意した値は、後にテンプレート側で利用できるようになります。
――これで、AppComponentというコンポーネントの基本的なソースコードがどうなっているかわかってきました。
moduled――モジュール名を指定します。ここでは、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では使用するテンプレートファイルを指定します。これらがわかっていないと、どのファイルをどう修正すればいいのかわかりません。
■exportによるクラスのエクスポート
さて、@Componentアノテーションをつけて作成されているのは、「AppComponent」というクラスです。これは、「export class ○○」という形で書かれています。exportは、オブジェクトをエクスポートする(外部から利用できるようにする)ものです。exportしたクラスは、importで他の場所からロードし利用できるようになるのです。
ここでは、AppComponentクラスをexportする際、titleという変数を用意してあります。ここに用意した値は、後にテンプレート側で利用できるようになります。
――これで、AppComponentというコンポーネントの基本的なソースコードがどうなっているかわかってきました。
(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!'; }
※関連コンテンツ