私がMacでAngular開発を始めた時の環境構築手順をまとめました。
1. Node.jsのインストール
最初にNode.jsのインストールをします。Node.jsのバージョン切り替えを簡単に行えるようにするため、私はnodebrewを使ってインストールしています。
nodebrewを使ったインストール手順については、下記の記事をご参照ください。
[Mac, Homebrew] Node.jsのバージョン管理ツール、nodebrew導入手順
nodebrewを使用しない場合は、公式サイトからダウンロードできます。
2. (お好みで)Yarnのインストール
私はYarnを使っています。お好みでインストールしてください。
下記のコマンドでインストールできます。
$ npm install -g yarn
インストール後下記のコマンドを実行して、バージョン情報が出力されれば正しくインストールされています。
$ yarn -v
3. Angular CLIのインストール
次に、Angular CLIをインストールします。Angular CLIを使えば、新規プロジェクト作成やComponent、Serviceの追加などがコマンドで簡単にできるので非常に便利です。
npm install -g @angular/cli
インストール後下記のコマンドを実行して、アスキーアートと各種バージョン情報が出力されればOKです。
$ ng -v
(＊ Yarnをお使いの方のみ実行) packageManagerをYarnに切り替えます
$ ng set --global packageManager=yarn
npmに戻したい場合は、$ ng set --global packageManager=npmでできます。
4. Visual Studio Codeのダウンロード
Visual Studio CodeはAngular向けの拡張機能が豊富なため、Angular開発と相性が良いです。公式サイトで「Download for Mac Stable Build」ボタンを押し、ダウンロードしたZipファイルを解凍してアプリケーションフォルダに入れます。(余談ですが、2017年9月にリリースされたversion 1.17からアイコンが新しくなったみたいですね。)
5. Visual Studio CodeにAngular Essentialsを入れる
Visual Studio Codeの拡張機能には、Angular EssentialsというAngular開発に便利な拡張機能一式をまとめてダウンロードしてくれるものがあるので、それをインストールしておくとAngularの開発がしやすくなります。
Visual Studio Codeを開いて、サイドメニューの一番下、拡張機能アイコンを押します。
左上に検索バーがあるので、「Angular Essentials」と入力してAngular Essentialsを検索します。
上記の画面にある「インストール」ボタンを押して、インストール完了後に「再読み込み」(ウィンドウの再読み込み)をします。
Angular Essentialsに含まれる拡張機能は以下の9つです。各拡張機能の詳細については、各リンク先のMarketplace上の情報をご参照ください。
Angular v4 Snippets
Angular Language Service
Editor Config
tslint
Chrome Debugger
Bracket Pair Colorizer
Path Intellisense
Angular Inline
Angular Material Theme
6. (お好みで) Visual Studio Codeに「Auto Import」を入れる
Angular Essentialsに加えて、個人的に非常に気に入っているのがAuto Importという拡張機能です。これがあればWebStormのように、インポート文を自動で追加してくれます。これのおかげでより高速に開発ができるので、とても助かっています！
＊注意事項： 「Auto Import」は、TypescriptとTSXで動作する拡張機能です。
先程と同じくVisual Studio Codeを開いてサイドメニューの一番下、拡張機能アイコンを押し、左上の検索バーに「Auto Import」と入力して、Auto Importを検索します。
上記の画面にある「インストール」ボタンを押して、インストール完了後に「再読み込み」(ウィンドウの再読み込み)をします。
以上で環境構築は終了です。
ここまでできたら公式のAngular - QuickStartのStep2から順に進めて、簡単なAngularアプリケーションを実行してみましょう。
おわりに
以上が、Angular開発環境構築時の流れです。私はこれで十分快適に開発できています。ぜひさくっとAngularの開発環境を構築して、Angular開発の第一歩を踏み出してみてください！