はじめに
Angularの開発環境をはじめて構築する人に向けて書いています。
この記事を読むと，MacでのAngularの開発環境を構築できるようになります！！
この記事を実施した環境
・macOS Catalina 10.15.7
・Homebrew 2.4.12
・Nodebrew 1.0.1
・Nodo.js 12.13.1
・npm package manager 6.14.8
・Angular CLI 10.0.6
・Angular 10.0.6
ロードマップ
- Homebrewのインストール
- Nodebrewのインストール
- Nodebrewを用いたNodo.jsのインストール
- npmを用いたAngular CLIの導入
- 新規プロジェクトの立ち上げ
1. Homebrewのインストール
※ Homebrewが既にインストールされている方は，インストール済みまでスキップして下さい。
・Homebrewとは
HomebrewはMacで広く使われているパッケージマネージャです。
ソフトウェアのインストールを単純化し一元管理してくれます。
今回はNodebrewをインストーるするために使用します。
http://brew.sh/index_ja.html
手順
Homwbrew HPのインストールコマンドを実行する。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
※ 2020年10月23日現在に記載されているインストールコマンドです。
Xcodeのcommand linet toolがインストールされてない場合は自動でインストールされます。
brew -v
Homebrew 2.4.12 #バージョンが表示されれば，ひとまずインストール完了
インストール済みに続く…
インストール済みの場合
Homebrewの状態をチェックします。
brew doctor
Your system is ready to brew. #このメッセージが出ればbrewは正常な状態です。
brew doctorで警告メッセージが出る場合は，関連するパッケージが古くなっているか，または何らかの問題があります。メッセージに従って警告を解消して下さい。
Homebrewを最新状態にしておきます。
brew update #Homebrew自体のupdate
brew upgrade #Homebrewに関連するパッケージを含むupdate
2. Nodebrewのインストール
・Nodebrewとは
Node.jsのバージョン管理ツールです。
プロジェクトによりNode.jsのバージョンを管理したい時に便利です。
今回はNodebrew経由でNode.jsをインストーします。
https://github.com/hokaccha/nodebrew
brew install nodebrew
nodebrew -v #このコマンドでバージョンが表示されればインストール完了
3. Nodebrewを用いたNodo.jsのインストール
・Node.jsについて
Angularのプロジェクトを動かすにはNode.jsが必要です。
Node.jsをとても簡単に説明すると「サーバーサイドでjavascriptを使えるようにしたもの」です。Node.jsを利用するとリアルタイム通信やスケーラブルなネットワークプログラムを実現することができます。
インストール
Node.jsをインストールして行きましょう。
次のコマンドで，インストール可能なNode.jsのバージョンを確認することができます。
nodebrew ls-remote
インストールは次のいずれかのコマンドを実行して下さい。
nodebrew install-binary バージョン番号（例：v15.0.1） #バージョンを指定する場合
nodebrew install-binary latest #最新版を取得する場合
nodebrew install-binary stable #安定版を取得する場合
次にインストールされてたバージョンを確認します。
nodebrew ls
v12.13.1 #インストールされているバージョンがリストアップされる
current: none #現在採用されているバージョンが表示される。インストール仕立ての場合はnone
有効化
次にインストールしたバージョンを有効化します。
インストールされたNode.jsリストの中で使用するバージョンを次のコマンドで有効化して下さい。
nodebrew use v12.13.1
nodebrew ls #有効化されたか確認
v12.13.1
current: v12.13.1 #v12.13.1が設定された
パスを通す
次のコマンドで，nodeが使えるように環境パスを通します。（Catalina標準のzsh版）
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
ターミナルを再起動して変更を反映させた後、nodeコマンドが使えるか確認
node -v #バージョンが表示されればOK！
4. npmを用いたAngular CLIの導入
・npm Node Package Manager とは？
Node.jsのパッケージ（予め用意された便利な機能をまとめたもの）をインストールしたり管理するためのツールです。Node.jsをインストールした段階で同時にインストールされています。
・Angular CLI とは？
Angular CLIはAngularを構築するためのファイル群を自動生成してくれるツールです。
コマンド一つでAngularプロジェクトを構築してくれます。
このステップでは，Angular CLIパッケージをnpmを用いてインストールします。
npm install -g @angular/cli #バージョンを指定したい場合は「cli@バージョン」と記述します。
途中でGoogleに使用状況の共有を許可するか聞かれます。許可する場合はyを入力して先に進んでください。
5. 新規プロジェクトの立ち上げ
いよいよ，Angularプロジェクトの立ち上げです。
プロジェクトを立てるディレクトリに移動し，次のコマンドを実行して下さい！
ng new my-app
? Would you like to add Angular routing? Yes #ルーティングファイルを作るか聞かれます
? Which stylesheet format would you like to use? SCSS #プロジェクトで使うCSS形式を選択
プロジェクトのディレクトリに移動して、サーバーを起動しましょう。
cd my-app
ng serve #ファイルのコンパイルに少し時間がかかる
ブラウザでlocalhost:4200にアクセスしてページが表示されたらOKです！
まとめ
お疲れ様でした!
Angularの環境構築完了です。