Help us understand the problem. What is going on with this article?

[Mac] Angular開発環境構築

More than 1 year has passed since last update.

私が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」と入力して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を検索します。
検索バーに「Auto Import」と入力して、Auto Importを検索

上記の画面にある「インストール」ボタンを押して、インストール完了後に「再読み込み」(ウィンドウの再読み込み)をします。

以上で環境構築は終了です。

ここまでできたら公式のAngular - QuickStartのStep2から順に進めて、簡単なAngularアプリケーションを実行してみましょう。

おわりに

以上が、Angular開発環境構築時の流れです。私はこれで十分快適に開発できています。ぜひさくっとAngularの開発環境を構築して、Angular開発の第一歩を踏み出してみてください!

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away