Macの初期状態から最低限のフロントエンド(Vue.js)開発環境構築するまで

最近、仕事でVue.jsをよく使っているフリーランスエンジニアのisoroです。フリーランスデザイナーの嫁が、Vue.jsでポートフォリオを作ってみたいと言い出したので、ならばVue.js講座を開いてあげようと思い、その資料作りのついでにnoteにも投稿することにしました。

ちなみに、まっさらなMacにHomebrewとかNode.jsをインストールする所から始めますので、本当にプログラミング経験が全くない人でも進められるように作っていくつもりです。

それでは早速はじめていきましょう。

まずはHomebrewをインストールしていきましょう。ターミナルを開き、以下のコマンドを入力するだけです。（どのディレクトリからコマンドを打ってもOK）

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

ちなみにHomebrewとは、Macのパッケージ管理ツールです。これがあれば、ターミナルでbrew install 〜というコマンドを打つだけで、色々なパッケージをインストールしたりアンインストールしたりできるようになるのでかなり便利です。

次に、Node.jsをインストールしていきます。コマンドラインでVue.jsのプロジェクトを作っていくには、最低限Node.jsが必要です。（HTMLの中にscriptタグを一行書くだけでVue.jsを使えるようにする方法もあり、初心者にオススメですが、慣れてきたらコマンドラインからプロジェクトを作る方が相当便利なので、今回はちょっと頑張ってコマンドからプロジェクトを作る方で進めていきます）

また、Node.jsのインストール方法も色々あるのですが、色々なバージョンのNode.jsを管理できて便利なnodebrewというツールを使えるようにしていきます。以下のように一行書くだけでインストールされます。

brew install nodebrew

続いて、nodebrewを使えるように設定していきます。（書きながら、やっぱり初心者には厳しい方法を選んでいる気がしてきました。。もし詰まってうまく行かなくなったら、公式サイトから直接Node.jsの推奨版をインストールするのでも良いと思います）

~/.bash_profileに以下の一行を追記してください。（~/.bash_profileはホームディレクトリにある隠しファイルです）

export PATH=$HOME/.nodebrew/current/bin:$PATH

以下のコマンドを入力すれば、上記設定が反映されます。

exec $SHELL -l

執筆時点の推奨バージョンである、version10.6.0をインストールし、それをこれから使っていく設定をします。

nodebrew install v10.6.0
nodebrew use v10.6.0

もし、nodebrewコマンドを実行した時にエラーが発生した場合は、以下のコマンドで~/.nodebrew/srcディレクトリを作れば解決する可能性があります。

mkdir -p ~/.nodebrew/src

次は、完全にオプションですが、本格的にフロントエンドを勉強していく方のためにyarnのインストール方法も書いておきます。yarnをインストールすると、もう上で入れたNode.jsまで一緒に入ってきておかしくなるかもしれないので、--ignore-dependenciesを付けてbrew installします（執筆時点の状況）

brew install yarn --ignore-dependencies

（参考）https://qiita.com/ucan-lab/items/517ee13a2f8769ab866c

最後に、私の環境でインストールされたyarn、node、npmのバージョンを確認しておきます。

$ yarn --version
1.17.0

$ node --version
v10.16.0

$ npm --version
6.9.0

yarnを入れなかった人は、nodeとnpmだけバージョンが表示されると思います。（npmはnodeを入れると自動で入ります）

上にも書きましたが、完全な初心者の方には少し厳しい方法を選んでしまったと思います。もしうまくいかないなら、今回の記事に書いたコマンドは何もする必要なく、公式サイトからNode.jsをインストールしてもOKです。（私も最初の頃はこの方法でNode.jsを使っていましたが、アンインストールしたくなった時や、違うバージョンを使いたくなった時に面倒なことが起こる可能性が高いので、オススメはしません。嫁には頑張って上のコマンドで入れてもらいます。笑）

Node.js

次回から、npmを使ってVue.jsのプロジェクトを作っていきます！（yarnはnpmとほとんど同じことをするためのツールですので、今回の講座では使わない予定です）