【Angular入門(3)】開発環境をMacに構築してみる

はじめに

前回までは WindowsPCで開発環境構築したりHelloWorldする手順を説明しました。

【Angular入門(1)】開発環境をWindowsに構築してみる

MacPCを利用する場合に触れていなかったので、

本記事ではAngular開発環境構築手順(for Mac)について説明します。

 

 

環境

  • OS:OS X 10.11 El Capitan

 

 

手順

  1. homebrewインストール
  2. nodebrewインストール
  3. nodejsインストール
  4. Angular CLIインストール
  5. Visual Studio Codeインストール

1.homebrewインストール

ターミナルからhomebrewをインストールします。

command
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

以上でhomebrewインストールは完了です。

 

2.nodebrewインストール

ターミナルからnodebrewをインストールします。

command
$ brew install nodebrew

 

nodebrewのバージョンを確認します。

command
$ nodebrew -v

バージョンが確認できたらnodebrewインストールは完了です。

 

3.nodejsインストール

ターミナルからホームディレクトリ配下に.nodebrew/srcを作成します。

command
$ cd ~
$ mkdir .nodebrew
$ mkdir .nodebrew/src

 

nodejsをインストールします。

command
$ nodebrew install-binary latest
Fetching: http://nodejs.org/dist/v8.1.0/node-v8.1.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

 

インストールしたnodejsのバージョンを確認します。

command
$ nodebrew list
v8.1.0

current: none

 

インストールしたnodejsのバージョンを有効化します。

command
$ nodebrew use v8.1.0
use v8.1.0

 

バージョンが有効化できたことを確認します。

command
$ nodebrew list
v8.1.0

current: v8.1.0

 

nodeコマンドパスをbashrcへ保存します。

command
$ echo 'export PATH=$PATH:/Users/xxxxx/.nodebrew/current/bin' >> ~/.bashrc

※xxxxxは各環境のホームディレクトリに合わせてください。

/Users/xxxxx/.bash_profileに下記を記述します。(.bash_profileから.bashrcを読み込ませる設定)

command
if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi

 

ターミナルを再起動し、nodejsとnpmのバージョンを確認します。

command
$ node -v
v8.1.0
$ npm -v
v5.0.3

バージョンが確認できたらnodejsインストールは完了です。

 

4.Angular CLIインストール

ターミナルからAngular CLIをインストールします。

command
$ npm install -g @angular/cli

 

Angular CLIのバージョンを確認します。

command
$ ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.1.1
node: 8.1.0
os: darwin x64

バージョンが確認できたらAngular CLIインストールは完了です。

 

5.Visual Studio Codeインストール

Visual Studio CodeダウンロードページよりVisual Studio Codeをダウンロードします。

 

ダウンロードしたファイルを展開し、Visual Studio Codeを起動します。

Visual Studio Codeが起動したらインストール完了です。

以上でAngular開発環境構築は完了です。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください