今回の記事は、
- これから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万円 |
| 特徴 | ・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心 | ・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質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.0yarnを使って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での開発キャリアをスタートさせましょう。
このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
