Vue.jsをインストールしてみましょう!【Mac版】

今回の記事は、

  • これからVue.jsを始めてみたい
  • Vue.jsをインストールしたいけどやり方が分からない

という方に向けた記事になっています。

いくつかツールをインストールすることですぐ完了しますので、ぜひこの機会にVue.jsを使えるようにしておきましょう。

なお、Vue.jsをインストールするにはnpmを使用する方法とyarnを使用する方法がありますので、両方とも順を追ってご説明させていただきますね。

それでは参りましょう!

npmを使ってVue.jsをインストールする方法

npmを使ってVue.jsをインストールするには、以下の4つのステップを踏みます。

  • ステップ1. homebrewをインストールする
  • ステップ2. nodebrewをインストールする
  • ステップ3. Node.jsをインストールする
  • ステップ4. vue-cliをインストールする

上記の対象のうち、それぞれのPC環境によって既にインストールされているものもあるとは思いますので、その際には適宜読み進めていただければと思います。

ステップ1. homebrewをインストールする

最初は、homebrewというツールをインストールしていきます。

homebrewはmacのパッケージ管理ツールになります。

macにも様々なプログラムをインストールすることとなるのですが、それらの互換性を保ちつつパッケージの種類やバージョンを管理してくれる便利なツールです。

Homebrewのインストール方法は非常に簡単で、以下の3ステップで完了します。

  • 1. インストールのためのスクリプトを実行する
  • 2. Xcode Command Line Toolsをインストールする
  • 3. macのパスワードを入力する

まずはスクリプトを実行します。

こちらのHomebrewのサイト(Homebrew)にアクセスして頂き、以下の画像の/usr/bin/ruby…以下のスクリプトをターミナル画面にて実行してください。

しばらくすると途中で以下の通りXcode Command Line Toolsのインストールを求められますので、そのままEnterキーを押してください。

==> The Xcode Command Line Tools will be installed.

Press RETURN to continue or any other key to abort

続いてパスワードを聞かれますので、macにログインする際に使用しているパスワードを入力してください。

==> /usr/bin/sudo /bin/chmod u+rwx /usr/local/bin /usr/local/include /usr/local/lib /usr/local/share /usr/local/share/doc /usr/local/share/man /usr/local/share/man/man1
Password:

“==> Installation successful!” という表示が確認できたら無事インストールが完了した合図になります。

ステップ2. nodebrewをインストールする

続いては、nodebrewというツールをインストールしていきます。

nodebrewは、これからインストールするNode.jsのバージョン管理ツールであり、このnodebrewを入れておくことで、ご自身のPCに複数のNode.jsをインストールしたとしてもその管理がとても簡単になります

nodebrewをインストールするのも簡単で、まずは以下のコマンドを実行してください。

$ brew install nodebrew

その後、以下のコマンドを実行し、nodebrewのパスを通します

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

最後に、以下のようにnodebrewのバージョンが確認できればインストールは完了です。

$ nodebrew -v
nodebrew 1.1.0

ステップ3. Node.jsをインストールする

続いては、Node.jsをインストールしていきます。

Node.jsはサーバーサイドで稼働するJavascript環境なのですが、このNode.jsをインストールすることで、Vue.jsをインストールするために必要なnpmをインストールすることができます

それではまずは、以下のコマンドを実行して、インストール可能なNode.jsのリストを取得しましょう。

$ nodebrew ls-remote
v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6
~~中略~~
v11.8.0   v11.9.0   v11.10.0  v11.10.1  v11.11.0  v11.12.0

その後、表示されたバージョンの中からインストールしたいバージョンを指定して、Node.jsをインストールしましょう。

$ nodebrew install-binary { version }

最新版をインストールする際には以下のコマンドを実行してください。

$ nodebrew install-binary latest

なお、環境によっては以下のようなエラーが発生します。

Fetching: https://nodejs.org/dist/v11.12.0/node-v11.12.0-darwin-x64.tar.gz
Warning: Failed to create the file 
Warning: /Users/murakami/.nodebrew/src/v11.12.0/node-v11.12.0-darwin-x64.tar.gz:
Warning:  No such file or directory

その場合には、以下のコマンドを実行し、ディレクトリを作成してあげると問題なくインストールできるかと思います。

$ mkdir -p ~/.nodebrew/src

その後、以下のコマンドで、インストールしたバージョンのNode.jsを有効化しておきましょう。

$ nodebrew use v11.12.0

最後に以下のコマンドを実行し、Node.jsのバージョンが表示されていれば、インストール完了です。

$ node -v
v11.12.0

ステップ4. vue-cliをインストールする

さて、長くなりましたが、これが最後のステップです。

最後はvue-cliをインストールしていきましょう。

vue-cliは、Vue.jsの開発を手早く進めるためのシステムであり、アプリケーションの雛形を簡単に作成できたり、さまざまなビルドツールを円滑に統合してくれます。

つまりは、Vue.jsを使用したアプリケーションを手っ取り早く構築するために用意されているツールになります。

vue-cliのインストールはこれまで以上に簡単で、npmを使って以下のコマンドを実行するだけで大丈夫です。

$ npm install -g vue-cli

その後、以下のコマンドを実行し、Vue.jsのバージョンが表示されていればインストールは完了です。

$ vue -V
3.0.0

yarnを使ってVue.jsをインストールする方法

続いては、yarnを使ってVue.jsをインストールする方法を見ていきましょう。

yarnもnpmと同じくJavascriptのパッケージマネージャーなのですが、npmよりも処理速度が速く、またより厳密にパッケージを管理できるため、私はこちらの方が好みです。

yarnを使ってVue.jsをインストールするには、以下の3つのステップを踏みます。

  • ステップ1. homebrewをインストールする
  • ステップ2. yarnをインストールする
  • ステップ3. vue-cliをインストールする

先ほどと比べてステップが1つ少なくなっているので、その分お手軽にVue.jsをインストールできるかと思います。

ステップ1. homebrewをインストールする

まずはhomebrewをインストールする方法ですが、こちらは先ほどご紹介した手順と全く同じですので、そちらをご参照いただければと思います。

ステップ2. yarnをインストールする

続いては、yarnをインストールしていきましょう。

インストール方法はとても簡単で、以下のコマンドを実行するだけで大丈夫です。

$ brew install yarn

その後、以下のコマンドを実行してyarnのバージョンが表示されればインストールは完了です。

$ yarn -v
1.21.1

ステップ3. vue-cliをインストールする

そして最後に、vue-cliをインストールしていきます。

こちらも簡単で、以下のコマンドを実行するだけでvue-cliをインストールできます。

$ yarn global add @vue/cli

その後、先ほどと同じようにVue.jsのバージョンが表示されていれば無事インストールは完了です。

$ vue -V
3.0.0

最後に

さて、ここまでVue.jsのインストール方法をご紹介してきましたがいかがでしたか?

このように体系的に整理すると、npm/yarnいずれの方法でもそれほど難しくはないことがお分かりいただけたかと思います。

今回の記事をきっかけに、ぜひともVue.jsでの開発キャリアをスタートさせましょう。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。