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

今回の記事は、

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

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

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

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

それでは参りましょう!

フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
支払いサイト 15日(月末締め翌月15日支払い) 20日
手数料(中間マージン) 非公開 非公開
※実質20%
非公開
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト


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での開発キャリアをスタートさせましょう。

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

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