HTML5テクニカルノート

Angular 6入門 01: アプリケーションの枠組みをつくる

ID: FN1805005
Technique: HTML5 / JavaScript
Package: Angular 6.0.0

「Angular 6入門」シリーズはAngular公式サイトの「Tutorial」をもとに、説明の仕方や進め方を手直ししたものです。コードの動きは段階を細かく分けて確かめるようにし、TypeScriptの構文についても補いました。本稿でつくるのは、Tutorialをとおして構築するアプリケーションの枠組みです。Angular CLIをつかいますので、まだ環境ができていない方は、「Angular 6: Angular CLIで手早くアプリケーションをつくる」を先にお読みください。

01 ひな形のアプリケーションをつくる

まず、Angular CLIでひな形のアプリケーションをつくります。コマンドラインツールでアプリケーションのプロジェクトを納めるディレクトリに移動し、つぎのようにng newコマンドを打ち込みます。アプリケーションのフォルダ名は「angular-tour-of-heroines」としました。


ng new angular-tour-of-heroines

つぎに、でき上ったアプリケーションのフォルダに切り替えて、つぎのようにng serveコマンドでローカルサーバーを起ち上げます。このコマンドはアプリケーションをビルドして、ソースファイルを監視します。ファイルに手を加えると、ビルドし直されてアプリケーションに反映されるということです。--openオプションは、ブラウザでアプリケーションを開きます(図001)。ローカルサーバーのアドレスはhttp://localhost:4200/です。


cd angular-tour-of-heroines
ng serve --open

図001■ブラウザで開いたひな形のアプリケーション

02 コンポーネントに手を加える

コンポーネントはAngularアプリケーションの基本となる構成要素です。ページにデータを表示し、ユーザーの操作を待ち受けて、インタラクティブに処理します。ひな形のアプリケーションに加えられているコンポーネント(app.component)はひとつです。3つのファイルから組み立てられています。ただし、書き出されたひな形のCSSファイルは中身が空です。

アプリケーションのページに示されるテキストの一部は、コンポーネントのTSファイルのクラス(AppComponent)にプロパティ(title)として定められています。この値をつぎのように書き替えましょう。

src/app/app.component.ts


export class AppComponent {
    title = 'ヒロイン一覧';  // 'app';
}

コンポーネントのテンプレートに書かれているHTMLコードは20行弱です。これらはバッサリと削って、つぎのように<h1>要素ひとつにします。クラスのプロパティ(title)を参照するのが二重波かっこ{{}}の役割です。アプリケーションのデータをHTML要素に結びつけることは「バインディング」(interpolation binding)と呼ばれます。

src/app/app.component.html


<!--<div style="text-align:center">
    <h1>
        Welcome to {{ title }}!
    </h1>

</div>

<ul>


</ul>-->
<h1>
	{{title}}
</h1>

03 アプリケーションにスタイルを与える

アプリケーションにスタイルを与えましょう。コンポーネントだけでなく、全体を統一するスタイルです。ひな形のsrcフォルダには空のCSSファイルstyles.cssがつくられていますので、以下のコード001のように定めることにします。すると、コンポーネントのクラスのプロパティに定めたテキスト(<h1>要素)にスタイルが与えられてページに示されます(図002)。

図002■コンポーネントのクラスのプロパティ値が要素のテキストに差し込まれた

コード001■アプリケーション全体に与えるスタイル

src/styles.css


h1 {
	color: #369;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 250%;
}
h2, h3 {
	color: #444;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: lighter;
}
body {
	margin: 2em;
}
body, input[text], button {
	color: #888;
	font-family: Cambria, Georgia;
}
* {
	font-family: Arial, Helvetica, sans-serif;
}

04 TypeScriptとAngularの構文

「Angular 6: Angular CLIで手早くアプリケーションをつくる」06「アプリケーションの組み立て」で、ひな形のアプリケーションがどのようにつくられているか、ファイルやコードの流れや役割について簡単に触れました。それをもう少し補うかたちで、TypeScriptとAngularの構文についてご説明しましょう。まず、コンポーネント(app.component)のTypeScriptの記述は以下のコード002のとおりです。

クラス(AppComponent)はclassキーワードで定めます。クラスにインスタンスのプロパティ(title)を宣言するとき、変数のようなキーワード(var)は添えません(「TypeScript: クラス」)。プロパティや変数の宣言には、識別子のあとにコロン(:)を添えてデータ型が決められます。けれど、初期値を代入すれば型推論が働くので、省いても構いません。

TypeScriptはコードをモジュールというかたちで、ファイルに分けて扱います。モジュールの中のクラスや変数、関数などを他のモジュールから参照できるようにするには、export宣言しなればなりません。そして、使う側はその識別子と属するモジュールを、あらかじめimportで宣言しておくのです(「TypeScript入門 10: モジュールー exportとimport」)。

@がつけられた関数はデコレータと呼ばれます。すぐあとに定められたクラスやメソッド、プロパティなどに対して、実行時に処理を加えるのです(「TypeScript入門 12: デコレータ(Decorator)を使う」)。Component()関数は、クラス(AppComponent)をAngularのコンボーネントにしたうえで、引数オブジェクトがつぎのようなメタデータを与えます。

selector: コンポーネントのタグ
templateUrl: HTMLテンプレートのパス
styleUrls: CSSファイルのパスの配列

コード002■コンポーネントのTypeScriptコード

src/app/app.component.ts


import {Component} from '@angular/core';
@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})
export class AppComponent {
	title = 'ヒロイン一覧';
}

つぎに、コンポーネント(app.component)のテンプレートとアプリケーションのHTMLドキュメントは、以下のコード003のとおりです。テンプレートの要素(<h1>)にはコンポーネントのプロパティ(title)の値がバインドされ、HTMLドキュメントのタグ(<app-root>)に差し込まれます。

コード003■コンポーネントのテンプレートとアプリケーションのHTMLドキュメント

src/app/app.component.html


<h1>
	{{title}}
</h1>

src/index.html


<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>AngularTourOfHeroines</title>
	<base href="/">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
	<app-root></app-root>
</body>
</html>

最後に、アプリケーションのTypeScriptモジュール(app.module)がコード004です。デコレータ関数NgModule()は、使われるモジュールを宣言します(「NgModule導入について」)。引数オブジェクトに加えたのはつぎのようなプロパティで、値はすべて配列です。このアプリケーションが起ち上がると、コンポーネントがページに差し込まれて動きます。なお、BrowserModuleクラスは、ブラウザアプリケーションを動かすために用いられます(「Should I import BrowserModule or CommonModule?」)。

declarations: モジュールに属するコンポーネントやディレクティブなど
imports: 取り込む外部のAngularモジュール
providers: サービスなどのモジュールで、使うものがなければ配列を空にする
bootstrap: モジュールとともに起動するコンポーネント

コード004■アプリケーションのTypeScriptコード

src/app/app.module.ts


import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
@NgModule({
	declarations: [
		AppComponent
	],
	imports: [
		BrowserModule
	],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule {}

Angular 6入門

作成者: 野中文雄
作成日: 2018年5月10日