Angular開発環境構築手順(for Mac)

今回はAngular開発環境構築手順(for Mac)についてまとめました。

Angular開発環境構築手順

本記事ではAngular開発環境構築手順(for Mac)について説明します。 お使いのPCがWindowsの場合は以下の記事にAngular開発環境構築手順について記載しているので参考にして下さい。

>>Angular開発環境構築手順(for Windows)

Angularの良い所

僕は普段の仕事で、超マニアックなJava Scriptのソースコードや、 グローバル領域を汚しまくったり、めちゃくちゃしてるJava Scriptのソースコードなどをよく見かけます。。。

Java Scriptは手軽に自由に書ける反面、書く人によって出来上がるものに差が出やすく、メンテナンスがしずらくなることが。。。(実際に僕は最近ひどい目に合いました、、)

そこで、 Java言語のように型の定義がきっちりしていて、オブジェクト指向で、行儀の悪いことはできなくて、 誰がコードを書いてもある程度同じようになるフロントエンドのフレームワークを探していると、それがAngularでした。

そんな素敵なものがあるのか、、と思いAngularについて現在勉強中です。最終的にはお試しで簡単なWebアプリのフロントエンドをAngularで作成し、Spring Bootで作成したバックエンドのRest APIをコールして・・・ みたいなことをやってみようかなと思います。

環境構築対象

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開発環境構築は完了です。

環境構築ができたら次はAngularのサンプルプログラムを作成してHello Worldしてみてください。 

>>AngularでHello Worldしてみる(for Mac)

コメントを残す

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

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