とりあえず動くWebサイトをAngularで作ってみたよ。

今回の記事では、Angularを使ってとりあえず動くWebサイトを作ります！
本当に「とりあえず」です、細かい説明はすっ飛ばします！

# 下準備
・Node.jsを入手しておく
開発に必要なプログラム群みたいなものです（かなり適当）。
最新版を公式サイトからダウンロード、インストール！

・Angularの作業場となるフォルダを作っておく
この記事では```C:\angular_projects```とします。

・テキストエディタを用意しておく
あとでソースコードを書き換えたりするので。今回の記事の内容程度ならメモ帳でもできるけど、やはり定番はVisual Studio Codeなのか？

# TypeScriptとAngularCLIをインストールしましょ
これら２つはAngularの開発で必須なのでインストールします。
コマンドプロンプトを起動、下記のコマンドを打つだけです。

```
npm install -g typescript
```

```
npm install -g @angular/cli
```
![キャプチャ02.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600213/b08586dc-d9dc-d6e8-9c75-25109922efc7.png)
これで開発の準備完了！

ちなみに何らかの理由でアンインストールしたいときは```install```の代わりに```uninstall```で行けます。
![キャプチャ01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600213/b87c11ed-f162-764d-418c-e390ba559352.png)

# 新しいプロジェクトを作りましょ
今回はサンプルとして、**自分のペットを紹介するWebサイト**を作ろうと思います。
**実際はペット飼ってないけどね！！！**
プロジェクト名は```petpage```にしましょう。
コマンドプロンプトで作業場フォルダ```C:\angular_projects```に移動し、下記のコマンドを打ちます。
（```ng```は、A "ng" ularからきているそう）

```
ng new petpage
```
![キャプチャ03.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600213/9d5fe127-6373-03db-f49d-96c39666ae01.png)
この画像のように、プロジェクト作成中に質問を２回されました。
「Would you like to add Angular routing?」（ルーティングしたい？）
⇒Yesを選択しました。おそらくこうすることで、あとでいじることになる```app-routing.module.ts```ファイルが自動作成されるんだと思います。
「Which stylesheet format would you like to use?」（スタイルシートは何を使いたい？）
⇒CSSを選択しました。CSS以外知らないんで…。

あとこの画像では最後になんかエラーが出てるけど、とりあえずプロジェクト作成は終わったっぽいのでヨシ！
フォルダ```C:\angular_project\petpage```が自動作成されて、その中身にいろいろファイルが自動作成されました。
次に進みます。

# 新しいコンポーネントを２つ作りましょ
ペット紹介サイトには犬のページと猫のページを用意したいと思います。
そこで犬のコンポーネントと猫のコンポーネントを作ります。
Angularではこんなふうに、コンテンツを「コンポーネント」という単位で考えるんですねえ。

コマンドプロンプトでフォルダ```C:\angular_project\petpage```に移動し、下記２つのコマンドを。

```
ng generate component dog
```
```
ng generate component cat
```
![キャプチャ04.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600213/4dccce8c-aef1-a3da-67f8-6858acff5601.png)

自動でどんどんファイルができあがっていく。ラクラクですな。

# いくつかファイルを書き換えましょ
ファイルができあがったらいよいよプログラミング！
今回は４つのファイルをいじります。順番にやっていきましょ。

## (1) app-routing.module.ts
まずは```C:\angular_projects\petpage\src\app\app-routing.module.ts```です。
このファイルにはルーティング情報、つまり犬や猫へのURLパス割り当てを書きます。

```TypeScript:app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// 猫コンポーネントと犬コンポーネントを参照できるようにインポート
import { CatComponent } from './cat/cat.component';
import { DogComponent } from './dog/dog.component';

// それぞれのコンポーネントにURLパスを対応付け
const routes: Routes =
  [
    { path: 'dog-page', component: DogComponent },
    { path: 'cat-page', component: CatComponent },
    { path: '', redirectTo: '/dog-page', pathMatch: 'full' }
  ];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

```

今回は```dog```と```cat```の２つのコンポーネントがありましたよね。
それらをインポートして、```DogComponent```のような名前を付け、```dog-page```というURLパスを割り当てている感じです。

## (2) app.component.html
次は```C:\angular_projects\petpage\src\app\app.component.html```です。
サイトを開いたときに表示される内容を書きます。

```TypeScript:app.component.html
こんにちは！<br>
<router-outlet></router-outlet><br>
```

今回はサンプルなので、上記のように２行だけの超簡潔なものにしておきましょうｗ
```<br>```は改行ですよね。
```<router-outlet></router-outlet>```が大事。その秘密はあとで分かります。

## (3) dog.component.html
続いて```C:\angular_projects\petpage\src\app\dog\dog.component.html```です。
犬のページを作ります。

```TypeScript:dog.component.html
いぬはかわいい！<br>
わんわん！<br>
```

## (4) cat.component.html
最後に```C:\angular_projects\petpage\src\app\cat\cat.component.html```です。
猫のページを作ります。

```TypeScript:cat.component.html
ねこもかわいい！<br>
にゃーにゃー！<br>
```

これですべて完成です！

# 動作確認してみましょ

## (1) ローカル環境で動かしてみる
コマンドプロンプトでフォルダ```C:\angular_project\petpage```に移動し、下記のコマンドを。

```
ng serve --open
```
![キャプチャ05.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600213/ac54bf1e-fd44-792a-7a24-fc2f2bac77ce.png)
そのまま待機（初回は３分くらいかかるかも）していると…
![キャプチャ07.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600213/c734d897-9edf-0b37-ed79-aed3aa517737.png)
上の画像のようにコンパイルがされて…
![キャプチャ06.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600213/7d9e85c9-2b9e-ea71-fc05-b93bdefc0e94.png)
ブラウザが自動的に起動。
ペット紹介ページが表示されました！

webサーバをわざわざ用意しなくてもさきほどのコマンド```ng serve --open```を使えばこんなふうにローカル環境で気軽に表示を確認できるし、
しかもこの状態のままさっきいじったファイル（```app.component.html```とか）を修正すると自動的に再コンパイルが走り出します（つまり```ng serve --open```は一度実行しておくだけでＯＫ）。
なんて便利！

## (2) ページの内容を確認

```TypeScript:app.component.html
こんにちは！<br>
<router-outlet></router-outlet><br>
```
の```<router-outlet></router-outlet>```のところに

```TypeScript:dog.component.html
いぬはかわいい！<br>
わんわん！<br>
```
が埋め込まれて
![キャプチャ06.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600213/7d9e85c9-2b9e-ea71-fc05-b93bdefc0e94.png)
になりましたね。

こんなふうにコンポーネントを差し込んでひとつのWebサイトを構築していくのがAngularの面白いところ。
大きなひとつのモノを作るのではなく、部品の集まり。チームでの開発もやりやすいんだろうな。

## (3) URLパスを確認

そうそう、ルーティングのところ（URLパス割り当て）も確認しておきましょうか。
さっき```app-routing.module.ts```で```dog-page```と```dog-page```を定義しておいたので、
アドレスバーの「localhost:4200/dog-page」を「localhost:4200/cat-page」に書き換えると…
![キャプチャ08.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600213/a8d8df21-7ca8-a570-d892-6fe9958bd664.png)
いい感じ。

# おわりに
この記事ではAngularで「動くもの」が作れるまでを駆け足でやってみました。
なぜ動いたのか、ファイル構成はどうなっているのか、コンポーネント同士がどうやって噛み合っているのか、スタイルシートはどうなったのか、データバインドはどうするのか…
そのへんはまた別に記事に書きたいなぁ。