はじめに
私は今までプライベートで開発をした経験がありませんでした。
開発は業務中にやるのみ、家のPCは動画再生専用というおさぼりエンジニアの代表です。
というのも、エンジニアに転職したての頃に自宅PCで開発をしようとしたものの
環境構築で躓きただただPCの容量を圧迫した結果に終わる惨めな経験があり
それからというもの自主開発から足が遠退いていました。
しかしこの度訳あって自主的にアプリを作成しなければならなくなりました（！）
せっかくなら興味があったVue.jsの開発環境を整えようと孤軍奮闘した記録を残します。
環境
macOS High Sierra
先述した環境構築挫折後、MacOS自体の初期化を行っております。
それからChromeとLINEとZoomとSlackしか追加していないとても綺麗な環境です。
ちなみに仕事ではWindowsを使っていて、Macでの開発経験ゼロです。
目標
まっさらの状態からvue-cliのインストールを完了する。
やったこと
結果的には以下の作業が必要となりました。
- Homebrewのインストール
- nodebrewのインストール
- Node.jsのインストール
- 環境変数の設定
- vue-cliのインストール
以下、私が試行錯誤した手順を記録します。
Node.jsのインストール
Node.js公式サイトからLTS版をダウンロードしてインストール
Node.jsとnpmがインストールできていることを確認します。
$ node -v
v12.18.2
$ npm -v
6.14.5
Vue.jsのインストール
Vue.js公式サイトを参考に
$ npm install -g @vue/cli
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
ERRORです。。
検索するとこんな記事が：npmでpermission deniedになった時の対処法[mac]
対策3:パッケージマネージャ使ってnodeを再インストールする
これが一番簡単そう。やってみる。
Homebrewインストール
Homebrew公式
Mac用パッケージマネージャー。
環境構築について調べていたらたくさんヒットしたけど見て見ぬ振りをしていました。
大人しくインストールしてみます。
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
（インストールに結構時間がかかったので不安でした）
$ brew -v
Homebrew 2.4.3
Homebrew/homebrew-core (git revision 5c9580; last commit 2020-07-02)
HomebrewでNode.jsをインストール
$ brew install node
$ node -v
v12.18.2
$ npm -v
6.14.5
バージョンは変わらず。これってちゃんとできてるのかな。。
あれちょっと待って、最初にインストールしたやつってアンインストールしたほうがいいんじゃ。。
一旦戻す
$ brew uninstall node
$ brew list
icu4c
最初にインストールしたnpm, nodeをアンインストール
こちらを参考に：超簡単にNode.jsのバージョンを管理できるツール「nodebrew」を導入しよう（Mac編）
まずはnpm
$ sudo npm uninstall npm -g
$ sudo rm -rf ~/.npm
$ npm -v
-bash: /usr/local/bin/npm: No such file or directory
次にNode
$ lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom | while read i; do sudo rm /usr/local/${i}; done
can't open /var/db/receipts/org.nodejs.pkg.bom: No such file or directory
**** Can't open /var/db/receipts/org.nodejs.pkg.bom.
/var/db/receipts/org.nodejs.pkg.bom
のファイルは存在しているのに。。
全く同じ状況の記事を発見：ローカルからnode.jsを削除する
$ which node
/usr/local/bin/node
$ sudo rm -rf /usr/local/bin/node
$ node -v
-bash: /usr/local/bin/node: No such file or directory
追記
ローカルファイルをよく見たらorg.nodejs.node.pkg.bomという名前でした。
ファイル名を正しく指定していたらもしかしたら最初の方法でできたかもしれません。確認不足です。
試しにファイル名部分だけ直して再実行してみたら、削除コマンドの結果は全てNo such file or directoryとなりました。
どちらでも同じように削除ができたということでしょうか。
nodebrewのインストール
$ brew install nodebrew
$ nodebrew -v
nodebrew 1.0.1
$ brew list
icu4c nodebrew
nodebrewでNode.jsをインストール
nodebrewでインストールできるバージョンを確認します。
$ nodebrew ls-remote
v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6
...(略
公式サイトのダウンロードページで推奨されていたv12.18.2をインストールします。
$ nodebrew install-binary v12.18.2
Fetching: https://nodejs.org/dist/v12.18.2/node-v12.18.2-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/endouazusa/.nodebrew/src/v12.18.2/node-v12.18.2-darwin-x64.tar.
Warning: gz: No such file or directory
またもうまく行きません。
こちらの記事に対処方法が書いてありました。Node.jsをmacOSへインストールする方法
インストール先のディレクトリを手動で作成します。
$ mkdir -p ~/.nodebrew/src
もう一度
$ nodebrew install-binary v12.18.2
Fetching: https://nodejs.org/dist/v12.18.2/node-v12.18.2-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully
インストールされたバージョン一覧を確認
$ nodebrew ls
v12.18.2
current: none
current: none
有効になっているバージョンがない状態だそうです。
使用するnode.jsのバージョンを指定
$ nodebrew use v12.18.2
use v12.18.2
$ nodebrew ls
v12.18.2
current: v12.18.2
Pathの設定
まずは設定されている環境変数を表示します。
$ export -p
#出力結果一部
declare -x PATH="/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"
ここにnodeのPATHを追加したいです！
# PATH設定
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
# 設定反映
$ source ~/.bash_profile
# 環境変数確認
$ export -p
declare -x PATH="/Users/xxxxx/.nodebrew/current/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"
# nodeのバージョン確認
$ node -v
v12.18.2
(再）Vue.jsのインストール
$ npm install -g @vue/cli
バージョン確認
$ vue -v
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
おこられる。vは大文字だそうです。
$ vue -V
@vue/cli 4.4.6
ついでに
Chrome 拡張機能のインストール
公式でオススメされている拡張機能 Vue Devtools を追加します。
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
さいごに
インストールだけで相当時間がかかってしまいました。難しいです。
プロジェクトの作成はまた別の記事に分けて記録していこうと思います。