Angular入門 未経験から1ヶ月でサービス作れるようにする  その1. インストール

## はじめに

本入門では、わかりやすさを担保するために、常に動くコードと共に書いていきます。
インストールから、実際にログインなどを含めたAPI通信を行ってフロントのコードを完成させ、インフラ構築するまでを紹介していく予定です。

今回の記事でできるコードは、下記で参照できます。

https://github.com/seteen/AngularGuides/tree/%E5%85%A5%E9%96%80%E3%81%9D%E3%81%AE01

(すべての記事はブランチごとに管理していきます）

## Angular とは

Angularは、Googleが開発しているSPA(Single Page Application)のJavascriptフレームワークです。
最近では、React, Vue などに人気を持っていかれていますが、Angularの一番の特徴は、
**Angularを覚えるだけで良い** に尽きると思います。（だから世界一わかりやすい）
フルスタックなフレームワークなので、Angularだけでほとんどなんでもできます。
React や Vue は、シンプルで良いと言われますが、現実的にReact, Vueだけを使って開発するなんてことはありません。
確実にAPI通信を始め、周辺技術の取捨選択が必要になります。ここには知識や知恵が必要です。
Angularは、とりあえずAngularだけを覚えれば、ほぼすべてのことができます。

また、スタートアップで何よりも大切な **「開発スピード」** の点においても、他のSPAフレームワークを圧倒的に凌いでいると思っています（言い過ぎ）。

## Angularのバージョン

この記事で取り扱うAngularのバージョンは、6です。（バージョンが上がれば随時上げていきます）

## 誰に向けて書いているか

- Angularに興味はあるけど書いたことないという方
- SPA書いたことないという方
- React, Vue しか触ったことないという方
- AngularJS(1) は触ったことあるけど、2以降は触ったことないという方
- 今現在Angularを使っているけど、より深くAngularを勉強したいという方

幅広い方に読んでいただき、Angularの良さを伝えていけたらと思っています。

## Nodeのインストール
まずは、何よりも最初にNodeをインストールしていきましょう。何かよくわからない人も、とりあえずここはインストールしておきましょう。
この記事では、Angularの入門なのでここは簡単な紹介だけ行います。

### 英語読みたくないという方
英語読みたくない、という方は、QiitaでNodeのインストール記事を検索してみましょう！
https://qiita.com/search?utf8=%E2%9C%93&sort=&q=node+%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB+stocks%3A%3E100

### [推奨] nvmを使う
Mac をお使いの人は、
nvmという、nodeのバージョンマネージャーを使うことを推奨します。
https://github.com/creationix/nvm
ここに従ってインストールしましょう。

### 公式ページからインストールしたい方
下記ページからダウンロードしてインストールすることができます。Angular6では、Nodeのバージョンが8以上でないと動きません。
https://nodejs.org/

## yarnのインストール
次に、Nodeのパッケージマネージャである、yarnをインストールしましょう。
ここも本筋ではないので、別の記事に役割を投げます。

### 英語読みたくないという方
Qiitaで100以上ストックされている記事検索のリンク↓
https://qiita.com/search?utf8=%E2%9C%93&sort=&q=yarn+%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB+stocks%3A%3E100
https://yarnpkg.com/lang/en/

### 公式ページからインストールしたい方
https://yarnpkg.com/lang/en/

# Angular CLI のインストール
Node, yarnの準備ができたら、Angular CLIをインストールしていきましょう。
Angular CLI というのは、Angularの Command Line Interface です。ようするに、コマンドで簡単にAngularのプロジェクト作ったり、ビルドしたりするのを提供してくれてます。
Angularのこのあたりの親切さも好きな部分です。（Vueもありますが）

### インストール手順
ターミナルを開き、コマンドライン上で、下記コマンドを実行します。

```
yarn global add @angular/cli
```

```
yarn global v1.3.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Installed "@angular/cli@6.0.8" with binaries:
      - ng
✨  Done in 5.66s.
```

## プロジェクトを作成する
下記コマンドで、プロジェクトを作成する。

```
ng new angular-sample
```

ng new の後の文字列が、プロジェクト名になります。下記のような出力が行われて、フォルダが作成されるはずです。

```
CREATE angular-sample/README.md (1023 bytes)
CREATE angular-sample/angular.json (3548 bytes)
CREATE angular-sample/package.json (1310 bytes)
CREATE angular-sample/tsconfig.json (384 bytes)
CREATE angular-sample/tslint.json (2805 bytes)
CREATE angular-sample/.editorconfig (245 bytes)
CREATE angular-sample/.gitignore (503 bytes)
CREATE angular-sample/src/environments/environment.prod.ts (51 bytes)
CREATE angular-sample/src/environments/environment.ts (631 bytes)
CREATE angular-sample/src/favicon.ico (5430 bytes)
CREATE angular-sample/src/index.html (293 bytes)
CREATE angular-sample/src/main.ts (370 bytes)
CREATE angular-sample/src/polyfills.ts (3194 bytes)
CREATE angular-sample/src/test.ts (642 bytes)
CREATE angular-sample/src/assets/.gitkeep (0 bytes)
CREATE angular-sample/src/styles.css (80 bytes)
CREATE angular-sample/src/browserslist (375 bytes)
CREATE angular-sample/src/karma.conf.js (964 bytes)
CREATE angular-sample/src/tsconfig.app.json (194 bytes)
CREATE angular-sample/src/tsconfig.spec.json (282 bytes)
CREATE angular-sample/src/tslint.json (314 bytes)
CREATE angular-sample/src/app/app.module.ts (314 bytes)
CREATE angular-sample/src/app/app.component.css (0 bytes)
CREATE angular-sample/src/app/app.component.html (1141 bytes)
CREATE angular-sample/src/app/app.component.spec.ts (989 bytes)
CREATE angular-sample/src/app/app.component.ts (207 bytes)
CREATE angular-sample/e2e/protractor.conf.js (752 bytes)
CREATE angular-sample/e2e/src/app.e2e-spec.ts (302 bytes)
CREATE angular-sample/e2e/src/app.po.ts (208 bytes)
    Directory is already under version control. Skipping initialization of git.
```

### 起動してみる
作成されたフォルダに移動し、起動してみます。

```
cd angular-sample
ng serve —-open
```

ブラウザが開き、下記のような画面が開くはずです。

![スクリーンショット 2018-07-07 23.45.29.png](https://qiita-image-store.s3.amazonaws.com/0/67424/ea685902-72da-25dc-7453-1bc4544a87a7.png)


なお、 `—-open` というのは、起動してブラウザでそのページを開くという意味ですが、
Angularはデフォルトでは、 `4200` 番ポートで立ち上がるので、

```
ng serve
```

で起動だけして、 `http://localhost:4200` に直接アクセスすることで開くこともできます。

## おまけ。WebStorm のプラグインのインストール
私がAngularを開発する上で推奨する開発環境は、WebStorm です。RubyMineなどでも大丈夫です。

補完を強化してくれるなど、Angularを開発する上でとても役に立つPluginが提供されています。

### インストール手順


設定→Plugins→ Browse repositoties ...
を選択します。

![スクリーンショット 2018-07-07 23.48.07.png](https://qiita-image-store.s3.amazonaws.com/0/67424/e039f78a-4ceb-e876-fbfc-312e1678347b.png)

その後、Angularで検索して、下記のプラグインをインストールします。

![スクリーンショット 2018-07-07 23.48.43.png](https://qiita-image-store.s3.amazonaws.com/0/67424/2fc98019-e157-9d50-ef19-9f5b3f2e1697.png)

かなり便利なので、Web StormやRubyMineなどをお持ちの方はぜひインストールしてみてください。


## 次回
次回は、 ディレクトリ構造とコンポーネント基礎 の解説をしていきます！

[Angular入門 未経験から1ヶ月でサービス作れるようにする その2. ディレクトリ構造とコンポーネントの基礎](https://qiita.com/seteen/items/ef41c321bff47d66a443)

## 入門記事一覧
「Angular入門 未経験から1ヶ月でサービス作れるようにする」は、記事数が多いため、[まとめ記事](https://qiita.com/seteen/items/43908e33e08a39612a07) を作っています。
https://qiita.com/seteen/items/43908e33e08a39612a07