WebStromとAngular CLIでAngular2アプリケーションを作ってみよう

こんにちわ、メトロノームかわかみ（@saruyama_monki）です。
Angularアドベントカレンダーの７日目は、WebStromとAngular CLIを使ってAngular2アプリケーション作ることを解説します。

# WebStrom 2016.3について

[WebStorm](https://www.jetbrains.com/webstorm/)についての紹介は割愛させて頂きますが有料のIDEになります。
11月14日にバージョン2016.3のアップデードが入りまして、Angular CLIが使えるようになりました。

![228f0489496e029a9020649e5e99d791.png](https://qiita-image-store.s3.amazonaws.com/0/25625/9240f09d-a9fa-96fc-433b-54f350fe249a.png)

WebStormは、他の製品（PhpStorm、RubyMineなど）にも梱包されておりますので同じように使えます。
有料は。。。と思われる方は、まずは30日のFree Trial版を使ってみて下さい。プログラミングがもっともっと好きになると思います。

# Angular2プロジェクトの作成

WebStromを立ち上げますと、プロジェクトの作成画面が立ち上がります。

![dc29ff9bfd3c5a5b370f5f5a9da26624.png](https://qiita-image-store.s3.amazonaws.com/0/25625/f158e1df-688d-63d9-a6a6-920ec53587df.png)

Create New Projectをクリックすると、どのボイラーテンプレートで作成するかを選択できます。

![e4ee0386f86aa98e76b6999bcc811ca9.png](https://qiita-image-store.s3.amazonaws.com/0/25625/3b2cfa75-1fa6-3957-7dbe-63a4939cce79.png)

数々のテンプレートの中から、Angular CLIを選択し、プロジェクト名を入力してCreateボタンを押すと、プロジェクトが作成されます。

# プロジェクトの初期設定

プロジェクトが作成されますと、自動的にAngular２環境が作られていきます。

<img width="1226" alt="759b5ce0dd18fd5487fbc32643149654.png" src="https://qiita-image-store.s3.amazonaws.com/0/25625/06419f76-33b8-6687-d7c5-fa8a98edce4f.png">

これは、以下のAngular CLIコマンドをWebStormが実行してくれております。全てが整うのに約３分ほどかかります。

```
$ ng init --name=AdvetCalendar
```

<img width="148" alt="9ce2058d254c0226ed8cc8b175efe303.png" src="https://qiita-image-store.s3.amazonaws.com/0/25625/05b4e846-d069-b04b-d026-8160240cb0ff.png">

実行が終わりますと上記のファイル構成になります。

# 起動してみましょう

では、このままアプリケーションを起動してみましょう

<img width="1252" alt="2fa81d17cdb695f22154e4d4f3a7a4e9.png" src="https://qiita-image-store.s3.amazonaws.com/0/25625/b0fa9ac2-f140-effb-f0e4-7b6f74fc3ee5.png">

左隅のメニューから「npm」をクリックすると、左側にnpm scriptの一覧が載ったウィンドウが現れます。その中から、「start」をダブルクリックします。
ダブルクリックすると、下部からコンソールが現れてscriptが実行されている様子が表示されます。startは、以下のコマンドを実行しています。

```
$ ng serve
```

実行が終わりましたら、コンソールを一番上にスクロールし、そこに表示されているURLをブラウザで開きます。

![42a49c346b07ef0b10637c03a0199241.png](https://qiita-image-store.s3.amazonaws.com/0/25625/fb2663a0-a3c3-9eae-6b8b-4e00bf6e19b0.png)

Angular2アプリケーションが起動して、AppComponentが表示されました。
このServerは、Live Development Serverとなっておりますので、Componentを追加したり、編集したりしてもブラウザをリロードしなくても反映されるようになっております。

# Componentを追加してみましょう

次に何か新しいコンポーネントを追加してみましょう。

<img width="674" alt="スクリーンショット 2016-12-06 20.50.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/25625/51b4ae92-3e78-8aaf-cb1c-8f40540a0174.png">

ファイル一覧から、appディレクトリを右クリック。NewメニューからAngukar CLI...を選択します。

<img width="554" alt="ed7a248559f42621842b1ae1054263bb.png" src="https://qiita-image-store.s3.amazonaws.com/0/25625/7d2637a6-1785-d43e-fc51-0b280e35dd90.png">

選択すると、Angular2の部品の一覧が載ったウィンドウが表示されますので、componentをダブルクリックします。

<img width="300" alt="ea68b8802cdcf5d8fc57bd049b881d89.png" src="https://qiita-image-store.s3.amazonaws.com/0/25625/fd9663db-6298-b3fb-2a92-fc09a77fb355.png">

コンポーネント名を決めるダイアログが立ち上がりますので、コンポーネント名を入力してOKボタンを押します。

<img width="751" alt="d38701ce6282ca7df5c70b8cc9125f23.png" src="https://qiita-image-store.s3.amazonaws.com/0/25625/6c334edc-e92b-55f4-fe6b-5fd97cdb0944.png">

OKボタンを押すと、Angular CLIが立ち上がり以下のコマンドが実行され、Componentが作成されます。

```
$ ng generate component advent_calender.component
```

<img width="600" alt="f7a18b62de2c7a1074e9077f95f4f90f.png" src="https://qiita-image-store.s3.amazonaws.com/0/25625/ab892eb9-bb56-5419-9249-409e1a277976.png">

また、Angular CLIでComponentを作成した場合、NgModuleに自動的にdeclarationされます。

# Angular2のチュートリアルを試してみる

ここまでで、WebStromでAngular CLIを使用することが出来ましたので、次はAngular2のチュートリアルをやってみましょう。[公式サイト](https://angular.io/docs/ts/latest/tutorial/)のチュートリアルも良いのですが、英語が苦手な方は、ng-japanの[ハンズオン資料](https://github.com/ng-japan/ng2-hands-on-seed/tree/master/courses/tutorial)をチャレンジしてみましょう！