Vue.js開発環境構築記録

はじめに

私は今までプライベートで開発をした経験がありませんでした。
開発は業務中にやるのみ、家のPCは動画再生専用というおさぼりエンジニアの代表です。

というのも、エンジニアに転職したての頃に自宅PCで開発をしようとしたものの
環境構築で躓きただただPCの容量を圧迫した結果に終わる惨めな経験があり
それからというもの自主開発から足が遠退いていました。

しかしこの度訳あって自主的にアプリを作成しなければならなくなりました（！）
せっかくなら興味があったVue.jsの開発環境を整えようと孤軍奮闘した記録を残します。

環境

macOS High Sierra

先述した環境構築挫折後、MacOS自体の初期化を行っております。
それからChromeとLINEとZoomとSlackしか追加していないとても綺麗な環境です。

ちなみに仕事ではWindowsを使っていて、Macでの開発経験ゼロです。

目標

まっさらの状態からvue-cliのインストールを完了する。

やったこと

結果的には以下の作業が必要となりました。

1. Homebrewのインストール
2. nodebrewのインストール
3. Node.jsのインストール
4. 環境変数の設定
5. 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

さいごに

インストールだけで相当時間がかかってしまいました。難しいです。
プロジェクトの作成はまた別の記事に分けて記録していこうと思います。

助けてもらったサイト

• Node.jsをmacOSへインストールする方法
• Macの初期状態から最低限のフロントエンド(Vue.js)開発環境構築するまで
• 超簡単にNode.jsのバージョンを管理できるツール「nodebrew」を導入しよう（Mac編）
• MacにNode.jsをインストール
• PATHを通すために環境変数の設定を理解する (Mac OS X)