イントロダクション・プロジェクトの作成　Angular チュートリアル

# 参考

https://angular.jp/tutorial

# イントロダクション

## ツアー・オブ・ヒーローズ アプリケーションとチュートリアル

このツアー・オブ・ヒーローズのチュートリアルでは、ローカル開発環境をセットアップし、 [Angular CLI ツール](https://angular.jp/cli) を使用してアプリケーションを開発する方法を示し、 Angular の基本を紹介する。

作成したツアー・オブ・ヒーローズアプリケーションは、人材派遣会社がヒーローの安定を管理するのに役立つ。
アプリケーションには、データ駆動型アプリケーションで見つかると思われる多くの機能がある。
完成したアプリケーションは、ヒーローのリストを取得して表示し、選択したヒーローの詳細を編集し、ヒーローデータの様々なビュー間を移動する。

このチュートリアルが終わるときには、次のことができるようになる。

* 要素を表示・隠蔽する、そしてヒーローデータのリストを表示するための組み込み Angular [ディレクティブ] を使う
* ヒーローの詳細やヒーローのリストを表示するための Angular [コンポーネント](https://angular.jp/guide/glossary#component) を作成する
* 読み取り専用データのための単方向 [データバインディング](https://angular.jp/guide/glossary#data-binding) を使用する
* 双方向データバインディングを用いて、モデルを更新するための編集可能なフィールドを設置する
* キー入力やクリックといったユーザーのイベントに対し、コンポーネントが持つメソッドをバインドする
* ユーザーがマスターリストからヒーローを選択し、詳細画面でそのヒーローを編集できるようにする
* [パイプ](https://angular.jp/guide/glossary#pipe) によりデータを整形する
* ヒーローを組み立てるための共有 [サービス](https://angular.jp/guide/glossary#service) を作成する
* 様々なビューとそれらのコンポーネント間を遷移可能にするために [ルーティング](https://angular.jp/guide/glossary#router) を使用する

Angular を始めるために Angular のことを十分に学ぶと、 Angular は必要なことをなんでもできると確信するだろう。

## これから何を作るか

ダッシュボード上の2つのリンク ("Dashboard" と "Heroes") をクリックすることができ、このダッシュボード画面とヒーローの画面を遷移する。

ダッシュボードで "Magneta" というヒーローをクリックしたら、ルーターはヒーローの名前を編集できる "Hero Details" 画面を開く。

"Back" ボタンをクリックすることで、ダッシュボードに戻る。
上部にあるリンクは個々のメインビューに遷移させる。
"Heroes" をクリックしたら、アプリケーションは "Heroes" のマスターリストのビューを表示する。

別のヒーローの名前をクリックすると、リストの下にある読み取り専用の小さな詳細ビューが、新しく選択されたものを反映する。

"View Details" ボタンをクリックすることで、選択されたヒーローを編集可能な詳細ビューに移る事ができる。

# プロジェクトの作成

まず、 Angular CLI を使用して初期アプリケーションを作成する。
このチュートリアルでは、スターターアプリケーションを修正して拡張し、 Tour of Heroes アプリケーションを作成する。

チュートリアルのこの部分では、次のことを行う。

1. 環境を設定する。
1. 新しいワークスペースと初期アプリケーションプロジェクトを作成する。
1. アプリケーションをサーブする。
1. アプリケーションを変更する。

##　環境を設定する

https://angular.jp/guide/setup-local

## 新しいワークスペースと初期アプリケーションリンクを作成する

Angular ワークスペースのコンテキストでアプリケーションを開発する。
[ワークスペース](https://angular.jp/guide/glossary#workspace) には、1つ以上の [プロジェクト](https://angular.jp/guide/glossary#project) のファイルが含まれる。
プロジェクトとは、アプリケーション、ライブラリ、またはエンドツーエンド (e2e) のテストを構成する一連のファイル。
このチュートリアルでは、新しいワークスペースを作成する。

新しいワークスペースと初期のアプリケーションプロジェクトを作成するには、

1. Angular ワークスペースフォルダにないことを確認する。
    1. 例えば、 Getting Started ワークスペースを以前に作成した場合は、そのフォルダの親フォルダに変更する。
1. CLI コマンド `ng new` を実行し、次に示すように、 `angular-tour-of-heroes` という名前を指名する。
1. `ng new` コマンドを実行すると、最初のアプリケーションプロジェクトに含める機能に関する情報が表示される。
    1. Enter キーまたは Return キーを押してデフォルト値を受け入れる。

```:Terminal
ng new angular-tour-of-heroes
```

Angular CLI は、必要な Angular npm パッケージおよびその他の依存関係をインストールする。
これには数分かかる事がある。

また、次のワークスペースとスタータープロジェクトファイルも作成される。

* `angular-tour-of-heroes` という名前のルートフォルダがある新しいワークスペース。
* 初期スケルトンアプリケーションプロジェクト。 (`src/app` サブフォルダ内)
* 関連する設定ファイル。

最初のアプリケーションプロジェクトには、すぐに実行できる簡単なウェルカムアプリケーションが含まれている。

## アプリケーションをサーブする

ワークスペースディレクトリに移動し、アプリケーションを起動する。

```:Terminal
$ cd angular-tour-of-heroes
$ ng serve --open
```

> `ng serve` コマンドはアプリケーションをビルド、開発用サーバーを起動し、ソースファイルを監視する。
> 監視されているファイルに変更を行ったときには、変更があったファイルに対し再ビルドを行う。
> `--open` フラグを指定すると、 `http://localhost:4200` がブラウザで開かれる。

ブラウザ上でアプリケーションが動いていることを確認しよう。

## Angular のコンポーネント

表示されているページは *アプリケーションシェル* 。
このシェルは、 `AppComponent` という名前の Angular **コンポーネント** から操作される。

*コンポーネント* は Angular アプリケーションの基礎的な構成要素。
コンポーネントはスクリーン上にデータを表示し、ユーザーの入力を待ち受け、その入力に対しアクションを取る。

## アプリケーションを変更する

スターターアプリケーションをいくつか変更するために、好きなテキストエディタまたは IDE でプロジェクトを開き、 `src/app` に移動しよう。

次の3つのファイルに分割された、 `AppComponent` シェルの実装が見つかる。

1. `app.component.ts` - TypeScript で書かれたコンポーネントクラスのコード。
1. `app.component.html` - HTML で書かれたコンポーネントのテンプレート。
1. `app.component.css` - このコンポーネント専用の CSS 。

### アプリケーションのタイトルを変更する

コンポーネントクラスファイル (`app.component.ts`) を開き、 `title` プロパティ の値を `Tour of Heroes` に変更しよう。

```typescript:app.component.ts
title = 'Tour of Heroes';
```

コンポーネントのテンプレートファイル (`app.component.html`) を開き、 Angular CLI により生成されたデフォルトのテンプレートを削除しよう。
代わりに次の HTML を配置しよう。

```html:app.component.html
<h1>{{title}}</h1>
```

二重の波括弧は Angular の *補間バインディング* の構文。
この補間バインディングはコンポーネントの `title` プロパティの値を、 HTML の header タグの中に渡す。

ブラウザがページを更新し、新しいアプリケーションのタイトルが表示される。

### アプリケーションのスタイルを追加する

ほとんどのアプリケーションは、アプリケーション全体で一貫した見た目を目指している。
CLI はこの目的のために、空の `style.css` を生成した。
アプリケーション全体に適用するスタイルをそこに記述しよう。

`src/style.css` を開き、次のコードをファイルに追加する。

```css:src/style.css
/* Application-wide Styles */
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[type="text"], button {
  color: #333;
  font-family: Cambria, Georgia, serif;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}
```

## 最終的なコードのおさらい

```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 = 'Tour of Heroes';
}
```

```html:src/app/app.component.html
<h1>{{title}}</h1>
```

```css:src/style.css
/* Application-wide Styles */
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[type="text"], button {
  color: #333;
  font-family: Cambria, Georgia, serif;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}
```

## まとめ

* Angular CLI を用いて初期アプリケーションの骨組みを作成した。
* Angular のコンポーネントがデータを表示することを学んだ。
* アプリケーションのタイトルを表示するために二重波括弧による補間を使った。