Vue.jsを勉強するための開発環境構築

MacにNode.js及びnpmをインスール

インストール環境

OS macOS High Sierra

バージョン 10.13.4

プロセッサ Intel Core i5

メモリ 8GB

--- point ---

ここからの作業は macOS にログインするパスワードが必要です。
設定していない場合、 システム環境設定から、ユーザーとグループ を選択します。
ログインしているユーザーを選択して、パスワードを変更ボタンより、パスワードを登録します。

インストールのメニュー

以下の順でNode.jsをインストールします。

1. command line developer toolsをインストール
2. Homebrewをインストール
3. nodebrewをインストール
4. Node.jsをインストール

インストールする材料

■ command line developer toolsまたはXcode

• HomeBrewをインストールするために、command line developer toolsをインストールします。
• command line developer toolsはmacOS向け、コマンドを入力して操作するアプリケーション、CUI (キャラクターユーザーインターフェース) のことです。
• XcodeはMacOS用の統合開発環境です。インストールするとcommand line developer toolsも同時にインストールできます。

■ Homebrew

macOS向けのパッケージ管理システム。
パッケージとはソフトウェアや設定ファイル、ライブラリを一つにまとめたものが、パッケージといい。
パッケージ管理システムとは、それらパッケージをmacOSに簡単なコマンドでインストールできる仕組みのことを指します。
インストールにはcommand line developer toolsが必要です。

■ nodebrew

Node.jsのインストールとNode.jsのバージョン管理をします。インストールにはHomebrewが必要です。

■ Node.js

サーバーサイドでも動くJavaScriptです。

■ npm

Node.jsのパッケージマネージャであるnpm。Node.jsと一緒にインストールされます。

インストール

■ ターミナルを起動する。

右上の虫眼鏡マーク(Spotlight)をクリック

terminal.appを入力してreturnキーをクリック

■ Node.jsがすでにインストールされているか確認します。

[terminalコマンド]

$ node -v

[結果]

Node.jsがある場合バージョンが表示されます。
v8.1.0

・Node.jsがない場合
-bash: node: command not found

Node.jsがない場合はNode.jsをインストールします。

1. command line developer toolsのインストール

・Xcodeがインストールされているか確認します。
LaunchpadにXcodeが入っているか確認します。

Xcodeがある場合

次のcommand line developer toolsはインストール不要です。

ない場合

・ command line developer toolsをインストールします。

[terminalコマンド]

$ xcode-select --install

[結果]

xcode-select: note: install requested for command line developer tools

"xcode-select"コマンドを実行するには、コマンドライン・デベロッパ・ツールが必要です。ツールを今すぐインストールしますか？と表示されたら、
・インストールボタンをクリックします。

Command Line Tools使用許諾契約画面が表示されたら、
・同意するボタンをクリックします。

ソフトウェアがインストールされました。が表示されたら、
・完了ボタンをクリックします。

2. Homebrewのインストール

https://brew.sh/index_ja.html

上記URLよりスクリプトをコピーしてターミナルに貼り付けて実行します。

[結果]

Press RETURN to continue or any other key to abortと表示されたら
returnキーを入力してください。

Password:
Homebrewのインストール時パスワードが求められることがあります。
その場合macOSのログインパスワードを入力してください。

==> Installation successful! が表示されたら完了です。

・ インストールできたか確認します

[terminalコマンド]

$ brew -v

[結果]

Homebrew 1.6.3
とバージョンが表示されたらOKです。

3. nodebrewのインストール

[terminalコマンド]

$ brew install nodebrew

[結果]

You need to manually run setup_dirs to create directories required by nodebrew: /usr/local/opt/nodebrew/bin/nodebrew setup_dirs
・nodebrewに必要なディレクトリを作成するには、setup_dirsで作成する必要があります。
Add path:
export PATH=$HOME/.nodebrew/current/bin:$PATH
・パスの設定が必要です。
To use Homebrew's directories rather than ~/.nodebrew add to your profile: export NODEBREW_ROOT=/usr/local/var/nodebrew
・nodebrewを使用せずにHomebrewを使用する場合は設定する必要があります。
Bash completion has been installed to: /usr/local/etc/bash_completion.d
・Bashの補完がインストールされている場所は
zsh completions have been installed to: /usr/local/share/zsh/site-functions
・zshの補完がインストールされている場所は

・必要なディレクトリを作成

You need to manually run setup_dirs to create directories required by nodebrew: /usr/local/opt/nodebrew/bin/nodebrew setup_dirs
・nodebrewに必要なディレクトリを作成するには、setup_dirsで作成する必要があります。
・nodebrewのsetup_dirsを使います。

[terminalコマンド]

$ /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

・~/.bash_profileにpathを通します。

Add path:
export PATH=$HOME/.nodebrew/current/bin:$PATH
・パスの設定が必要です。

[terminalコマンド]

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

[解説]

1. echoコマンドとは、''シングルクォーテーションで囲んだ部分を表示します。
2. >>にすると、表示からファイルに出力というコマンドに変更になります。
3. 一方、出力ファイルである~/.bash_profileは、~/のチルダスラッシュでホームディレクトリを指し、bash_profileはホームディレクトリに作成されます。
4. .次のドットでbash_profileファイルは隠しファイルである事がわかります。
5. 繋げると、''で囲まれた部分を、ホームディレクトリにある、bash_profile隠しファイルに出力します。
6. Node.js のインストールの解説では、bash_profileファイル や bashrcファイル に path を設定してしています。
   違いは、bashrcファイル は bash を起動する時に毎回動作し、bash_profileファイル はログイン時に動作します。
   私はbash_profileファイルに設定する方法を取り入れました。

・設定を再読み込み

[terminalコマンド]

$ source ~/.bash_profile

4. Node.jsのインストール

https://nodejs.org/ja/ より推奨版並びに最新版のバージョンを確認します。

2018年05月20日現在、
8.11.2 LTS
10.1.0 最新版
だそうです。

LTSとは推奨版を指します。

・nodebrewでインストールできるバージョンを確認します。

[terminalコマンド]

$ nodebrew ls-remote

[結果]

公式サイトにあったNode.jsのバージョンがあることを確認します。

・Node.jsの最新版をインストールするには

[terminalコマンド]

$ nodebrew install-binary latest

・Node.jsのLTS推奨版をインストールするには

[terminalコマンド]

$ nodebrew install-binary stable

[結果]

Installed successfullyと表記がある事を確認します。

・インストールしたNode.jsのバージョンを確認します。

[terminalコマンド]

$ nodebrew ls

[結果]

v10.1.0
current: none

・使用するバージョンを指定します。

[terminalコマンド]

$ nodebrew use v10.1.0

[結果]

use v10.1.0

・現在使用しているバージョンを確認します。

[terminalコマンド]

$ nodebrew list

[結果]

v10.1.0
current: v10.1.0

currentに設定したいバージョンが表示されたら、完了です。

・Node.jsのバージョンを確認します。

[terminalコマンド]

$ node -v

[結果]

v10.1.0

設定したいNode.jsのバージョンが表示されればOKです。

6. npmがインストールされたか確認します。

[terminalコマンド]

$ npm -v

[結果]

5.6.0と表示されたら完了です。