Nuxt.jsを動かすためのツールたち
前提として、OSはmacです。
Nuxt.jsを動かすには
下の2つが必要です。
Node.jsをインストールするには
方法は色々ありますが、ここでは下記ツールを使って、Node.jsをインストールしていきます。
- NodeBrew
- Node.jsのバージョンを簡単に管理できるツール
NodeBrewをインストールするには
このツールが必要です。
- Homebrew
- mac上でのプログラミングに必要なツールを、インストールしたり、アンインストールする時に使うもの
もし、インストールがまだの場合はこの辺りの記事を参考にすると良いです。
すでにインストールしている場合は、状況に応じてスキップしてください。
NodeBrewのインストールとセットアップ
それではターミナルを開いてコマンドを実行していきましょう。
1. Homebrewがmacにインストールされているか確認
Homebrewのバージョンが表示されたらOKです。次に進みましょう。
$ brew -v
Homebrew 2.1.8
Homebrew/homebrew-core (git revision e15ccd; last commit 2019-07-24)
2. Homebrewをupdateする
最新のツールを入れるためにupdateしておきましょう。
$ brew update
3. NodeBrewをインストールする
nodebrewをインストールしましょう。
$ brew install nodebrew
こんな画面でインストールが始まります。
==> Downloading https://github.com/hokaccha/nodebrew/archive/v1.0.1.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v1.0.1
######################################################################## 100.0%
4. NodeBrewのセットアップ
インストールが完了したら、次はセットアップです。
$ nodebrew setup
nodebrewのpathが表示されます。
....
export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================
5. NodeBrewのPATHを通す
2020年7月27日追記
現在のmacデフォルトシェルはzshです。
$ vi ~/.zshrcを実行してください。
macの設定ファイル「.bashrc」に先ほどのpathを記入します。
ちなみに、PATHを通すって?と思った方は、この方が分かりやすく説明してくれています。
PATHを通すとは？ (Mac OS X) - Qiita
$ vi ~/.bashrc
# 2020年7月27日追記
# 現在のシェルを確認して
$ echo $SHELL
/bin/zsh
# zshの場合は下記コマンドを実行してください
$ vi ~/.zshrc
viコマンドは、ファイルを開けというコマンドです。
ここで指定するファイル名は、「.bash_profile」もしくは「.zshrc」の場合もあります。
自分のmacの環境に合わせてファイル名を指定してください。
何もいじっていなければ、「.bashrc」のはずです。
波波線が表示されますので、先ほどのpathを記入します。
# nodebrewのpath設定
export PATH=$HOME/.nodebrew/current/bin:$PATH
~
~
~
"~/.bashrc" 5L, 154C
そして、設定を反映させるためのsourceコマンドを実行します。
$ source ~/.bashrc
OK!完璧です。次へ進みましょう。
補足. .bashrcファイルへの編集コマンド
ファイルを開きます。
$ vi ~/.bashrc
キーボードの「i」を押すと、編集モードになり、一番下「"~/.bashrc" 5L, 154C」の文字が「-- INSERT --」になリます。
INSERTの「i」と覚えましょう。
~
-- INSERT --
この状態でpathを記入します。下記のようにコメントも記入できます。コメントは「#」から始めてください。
# nodebrewのpath設定
export PATH=$HOME/.nodebrew/current/bin:$PATH
「esc」キーを押して、編集モードを終了します。「-- INSERT --」の表示が消えます。
これではまだ保存できいないので、編集を保存しましょう。
「:wp」 ... 保存をして終了
~
:wq
記入を誤った場合は、保存せず終了しちゃいましょう。
「:q」 ... 保存せず終了します
~
:q
個人的に、この程度のコマンドを覚えておけば十分だと思いますが、もっと知りたいという方は下記の記事が参考になります。
viコマンド（vimコマンド）リファレンス - Qiita
Node.jsをインストールする
さあ、次はNodeBrewを使って、Node.jsをインストールしていきます。
1.安定板を指定してNode.jsをインストール
- stable => 安定板をインストール
- latest => 最新版をインストール
$ nodebrew install-binary stable
次のようにInstalled successfullyが出たら成功です。
Fetching: https://nodejs.org/dist/v12.7.0/node-v12.7.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully
2. インストールしたNode.jsの確認
バージョンが出てこればインストールが成功しています。
$ nodebrew list
v12.7.0
current: none
インストールしただけでは、Node.jsは使えません。もう少しです。
3. NodeBrewにNode.jsのバージョン指定
current: noneのまま「$ node -v」のコマンドを打ってもcommand not found(nodeのコマンドは無いよ)と言われます。
そこでNodeBrewにNode.jsのバージョンを指定してあげます。
$ nodebrew use stable
下記のコマンドを打ってバージョンが指定できているか確認しましょう。
$ node -v
v12.7.0
OK!バージョンが出てきました。やっとNode.jsが使えるようになりました。
yarnのインストール
2020年7月27日追記
--ignore-dependenciesオプションをつけるとエラーがでます。こちらの記事を参考にyarnをインストールしてください。
brew install yarn --ignore-dependenciesコマンドの「not present or broken」エラーに対応する
yarnはHomeBrewを使ってインストールできます。
そう、brewコマンドです。
$ brew install yarn --ignore-dependencies
--ignore-dependenciesはbrewコマンドのオプションです。
yarnはNode.jsが無いと動きません。
しかし、NodeはNodebrewでインストールしており、Homebrewではインストールしていません。
このまま、HomeBrewにNode.jsがない状態でyarnをインストールしようとすると怒られます。
その問題を解決するのが--ignore-dependenciesオプションです。
インストールが始まります。
Warning: --ignore-dependencies is an unsupported Homebrew developer flag!
Adjust your PATH to put any preferred versions of applications earlier in the
PATH rather than using this unsupported flag!
==> Downloading https://yarnpkg.com/downloads/1.17.3/yarn-v1.17.3.tar.gz
==> Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com/49970642/114f8b80-a477-11e9-9a08-70f1f8027b9e?X-Amz-Algorithm=
######################################################################## 100.0%
....
インストールできたか確認しましょう。
バージョンが出てくればインストール成功です。
$ yarn -v
1.17.3
以上でNuxt.jsを動かすツールたちのインストールが完了しました。
まとめ
- Homebrewのインストール
- NodeBrewのインストール
- Node.jaのインストール
- yarnのインストール
次の記事では、Nuxt.jsをインストールしていきます。(やっと)
お疲れ様でした。
参考
install nodebrew, node and yarn - Qiita
↑こちらの方がすっきりとまとまっています。