Angular公式チュートリアルのローカル環境構築

[株式会社ピー・アール・オーのアドベントカレンダー](https://qiita.com/advent-calendar/2021/pro-japan1)15日目です。

# はじめに
プログラミングほぼ未経験でHTMLとJavaScriptの基礎知識しかない私が、Angularを学習するにあたり、何から始めたら良いかわからなかたので、とりあえず実際に動かしながらの方が覚えが早いと思い、[Angular公式チュートリアル(Tour of Heroes)](https://angular.jp/tutorial)の内容を実践しました。その中でローカル環境の設定時に起こったエラーで手こずったので、そのエラー対策とローカル環境構築についてアウトプットも兼ねて素人なりに解説させていただきます。

###Angularとは
Angular（アンギュラー）は、Googleと個人や企業のコミュニティによって開発されているTypeScriptベースのオープンソースのフロントエンドWebアプリケーションフレームワークである。[Wikipediaより]

本当はAngularについて語りたくて色々調べましたが、難しい単語が多くてうまく解説できませんでした。。。
なのでAngularについてあまり知らない方や詳しく知りたい方は、[Angular公式](https://angular.jp/guide/what-is-angular)を参照してみて下さい。

## 環境設定
### 1.Node.js / npmのインストール
ローカルシステムにAngularをインストールするには、npmが必要になります。
npmとはNode.jsのパッケージ（Package ）を管理する（Manager）ツールのことです。
まず初めに[node.js](https://nodejs.org/en/download/)を開きDownloadsから自身のPCに合ったinstallerをクリックしダウンロードします。

![スクリーンショット 2021-12-07 20.57.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336496/01d1014a-9ad9-f6f9-0a0d-625c46e907bd.png)
ダウンロードを完了すると、ターミナルから下記のコマンドを実行します。
`npm --version`

バージョンが表示されればインストールは成功です。

### 2. Angular CLIのインストール
Angular CLIとは、効率よく新規Angularアプリを作成する公式コマンドラインツールです。

ターミナルを開き、次のコマンドを実行します。
`npm install -g @angular/cli`

実行することで、Angular CLIをインストールされます。
問題なく実行できた方は、**3.ワークスペースと初期アプリケーションを作成**までスキップしてください。

私はここで以下のようなエラーに遭遇しました。

```
EACCES: permission denied, access ‘/usr/local/lib/node_modules/npm/node_modules/<パッケージ名>
```

調べてみると、[公式ドキュメント](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally)に対策が載っていました。

Macで起こるエラーなのかな？
1.グローバルインストールのためのディレクトリを作成する
`mkdir ~/.npm-global`
2. 新しいディレクトリを使う設定をnpmで行う
`npm config set prefix ‘~/.npm-global’`
3. ~/.profileを開くか作成し，以下の行を:数珠:追加する
`export PATH=~/.npm-global/bin:$PATH`
4. 2の変更を反映する
`source ~/.profile`
5. 新しい設定を確認するために sudo なしで公式ドキュメントに合わせて`jshint`をインストールします
`npm install -g jshint`

npmのデフォルトディレクトリを手動で変更することで解決できました。

### 3. ワークスペースと初期アプリケーションを作成
次に、ngコマンドでワークスペースフォルダを作成していきます。

ngコマンド`ng new`で `my-app`というワークスペースフォルダを作成します。
以下のコマンドを実行。
`ng new my-app`

ng new コマンドを使用すると、最初のアプリケーションに含める機能に関する情報を入力するよう求められます。 EnterキーまたはReturnキーを押してデフォルトを受け入れます。
`ng new`ができた方は**4.アプリケーションの実行**にスキップしてください。

私はここでCLIのngコマンドを入力したところ、以下のようにコマンドが見つからないと表示されました。

```
ng: command not found
```

調べてみると、どうやらngコマンドのPATHが通っていないみたいです。
そう言えば先ほど、**2.Angular CLIのインストール**でAngularのCLI（ngファイル）がインストールした時に保存先を`~/.npm-global`にしました。

この問題はngコマンドのPATHを通すことで解決しました。
1.ターミナル起動時に読み込まれるbash設定を開きます。
`vi ~/.bash_profile`
2..bash_profileに以下を追記する。
`alias ng=“~/.npm-globa/bin/ng”`
追記が完了したらviでファイルを保存して抜ける。
3..bash_profileをすぐに反映するために、sourceコマンドを実行する。
`source ~/.bash_profile`

ngコマンドのPATHが通すことができたのでようやくワークスペースフォルダを作成することができます。

CLIコマンド`ng new`が完了すると、新しいワークスペースと簡単なWelcomeアプリケーションが作成され、すぐに実行できます。

### 4.アプリケーションの実行
作成したワークスペースフォルダ（my-app）に移動します。
`cd my-app`

ng serve コマンドでサーバーを起動します。
`ng serve --open`

`ng serve`コマンドは、サーバーを起動し、ファイルを監視し、 それらのファイルを変更したときにアプリケーションを再ビルドします。
`--open`オプションは、ブラウザ http://localhost:4200/ を自動的で開きます。

インストールとセットアップが成功すると、以下のようなページが表示されます。
これでローカル環境の設定が完了しました。
ローカル環境が準備できればあとはコードを書いて実際に動かすことができます！
![app-works.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336496/936ff65c-ae7d-5f83-39f4-8973ad32976b.png)

##まとめ
Angularのローカル環境構築についてアウトプットさせていただきました。
ついでにAngularのローカル環境構築時に起きたエラーなどもまとめさせていただきました。

これからAngular始めようとしてる方はぜひ[Angular公式チュートリアル(Tour of Heroes)](https://angular.jp/tutorial)で学習してみて下さい！

https://angular.jp/tutorial