format_list_bulleted
【Vue.js】npmを用いたVueのインストール方法を解説（CDNを用いたインストール方法等も紹介）
最終更新日時:2020-05-15 07:06:14

近年、人気が高まっているVue.jsはJavaScriptのフレームワークです。使用するためにはVueをインストールする必要があります。本記事ではVueの様々なインストール方法を説明し用途にあったインストール方法を紹介します！

Vue.jsとは？

Vue.jsはJavaScriptのフレームワークの一つです。Vueを用いることでユーザーはフロントエンド開発においてデータを表示と分離して開発することが容易になります。例えば生のJavaScriptでは画面の変更をDOMに適用する際にinnerHTMLなどの記述をその都度する必要がありましたが、Vueでは仮想DOMの適用によってそのような必要がなくなります。さらに、Vueの様々なライブラリを用いることでよりフロントエンド開発が容易になります。

NPMを用いたVueのインストール方法

Vueを自身の開発環境に組み込むには様々な方法がありますが、その一つにNPM(Node Package Manager)があります。NPMはNode.jsのパッケージの管理をするものであり、Vueもこのパッケージの一つです。したがって、NPMでVueをインストールするためにはNode.jsをインストールする必要があります。Node.jsをインストールすると自動的にNPMもインストールされます。

Node.jsのインストール(MacOS)

まずは次のコマンドを叩いてNode.jsがインストールされているか確認しましょう（vはversionという意味です）

(ターミナル)

$ node -v

このコマンドに対して

(ターミナル)

v12.2.0

のようなレスポンスが来た場合はすでにNode.jsがインストールされています。インストールされていない場合は、homebrew => nodebrew => Node.jsの順でインストールしていきます。

次のコマンドを入力してhomebrewをインストールします。homebrewはMacOSのソフトウェアなどを管理するものです。

(ターミナル)

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

正常にインストールできたら次のコマンドでバージョンを確認しbrewコマンドが使えるか確認しましょう

(ターミナル)

$ brew -v

次のようなレスポンスが来たらインストール完了です（バージョンが異なっていても構いません）

(ターミナル)

Homebrew 2.2.4

次に、nodebrewをインストールします。次のコマンドでインストールできます。nodebrewはNode.jsのバージョン管理を行うものです。（パッケージ管理ではありません！）

(ターミナル)

$ brew install nodebrew

正常にインストールできていたら次のコマンドでバージョンを確認しnodebrewコマンドが使えるか確認してみましょう

(ターミナル)

$ nodebrew -v

次のようなレスポンスが来たらインストール完了です（バージョンが異なっていても構いません）

(ターミナル)

nodebrew 1.0.1

最後にnodebrewでNode.jsをインストールしましょう。次のコマンドでインストールできます。Node.jsにはいくつものバージョンがあり、今回は最新版と安定版のインストール方法を紹介します。

  • 最新版のインストール

(ターミナル)

$ nodebrew install-binary latest
  • 安定版のインストール

(ターミナル)

$ nodebrew install-binary stable

そして、現在自身のPCで使えるNode.jsのバージョンの確認を次のコマンドで確認します。

(ターミナル)

$ nodebrew ls

次のようなレスポンスで参照できます。

(ターミナル)

v8.2.1
v12.2.0

current: v12.2.0

currentの部分が現在使用しているバージョンですが、この部分がnoneとなっている場合は次のコマンドで、選択します。

(ターミナル)

$ nodebrew use v8.2.1

もう一度バージョンを確認すると

(ターミナル)

$ nodebrew ls
v8.2.1
v12.2.0

current: v8.2.1

このように変更されていることがわかります。

最後にnodeコマンドが使えるようにするため、環境パスを通します。次のコマンドを入力しましょう。

(ターミナル)

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

これによりbash_profileファイル内部で環境パスが設定されて、nodeコマンドが実行できるようになります。最後にNode.jsのバージョンを次のコマンドで確認しましょう。

(ターミナル)

$ node -v
v8.2.1

これでNode.jsおよびNPMのインストールは完了です。これが終わったら第2.3項に移りましょう。

【補足】Node.jsのインストール(Windows)

WindowsではこちらのNode.jsのサイトからインストーラ経由でダウンロードすることができます。LTS(Long TIme Support)版をダウンロードしましょう。インストーラの設定は全てデフォルトのままで大丈夫です。

Vueのインストール

NPMでVueをインストールする場合、大規模開発を想定してWebpackまたは Browserifyなどのモジュールハンドラとの併用が前提となっています。こちらについてすでに知識がある方は次のコマンドでVueをインストールし、開発環境に組み込むことができます。

(ターミナル)

$ npm install vue

モジュールハンドラの知識がない方も次項のVue-CLIを用いることで煩わしい開発環境の構築をコマンドを入力するだけで自動でVueを利用したプロジェクトを立ち上げることができます。

Vue-CLIのインストール

Vue-CLIを用いることで単一ファイルコンポーネント（HTMLとCSSとVue.jsを同一のファイル内で記述できるもので、拡張子は.vue）を用いたプロジェクトを立ち上げることができます。次のコマンドを叩いてみましょう。

(ターミナル)

$ npm install -g @vue/cli

-gによってインストールされたものはどのディレクティブにあっても実行することができます。

(ターミナル)

$ vue -h

このコマンドでvueコマンドが確認できます。

(ターミナル)

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke
//省略
  upgrade [semverLevel]                      upgrade vue cli service / plugins (default semverLevel: minor)
  info                                       print debugging information about your environment

一番上にあるcreate [options] <app-name>というコマンドを用いてプロジェクトを構築することができます。試しに次のようなコマンドでsampleという名前のプロジェクトを構築してみます。

(ターミナル)

$ vue create sample

オプションについて色々聞かれますが、全てデフォルトで構築してみます。

(ターミナル)

$ cd sample
$ npm run serve

をしてみるとhttp://localhost:8080/のサーバーが立ち上がり、次のような画面が出力されます。

これによってVue-CLIでの環境構築は完了です。

その他のインストール方法

NPMを使ったインストールは大規模開発向けであるので、Vueを勉強したい方にとってはCDNを用いた開発がおすすめです。また、直接PCにダウンロードしてローカル環境で開発することも可能です。（CDNでインストールした場合、ネット環境がなければVueを用いることができません。）

CDNを用いたインストール

CDNを用いてHTMLに直接埋め込むことでVueが利用できるようになります。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

また、Vueのバージョンを指定して利用することもできます

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

これらのコードをVueを使用したJavaScriptファイルが読み込まれる前に埋め込みましょう。headタグ内に記述することを推奨します。CDN形式はコードを埋め込むだけでVueがりようできるため、非常に手軽に実装できます。

ダウンロードして直接読み込む

直接Vue.jsをダウンロードしてローカル環境でVueを導入することも可能です。Vue.jsの公式ドキュメントからダウンロードできます。

用途に合わせたインストール方法

第２項、第３項で紹介したインストール方法を用途別にまとめると次のようになります。ぜひ参考にしてみてください。



この記事のまとめ

本記事ではVueのインストール方法を、実際の例を元に説明しました！最後に記事の要点をまとめてみましょう。

  • VueはNPMによるインストールができる
  • homebrew、nodebrew、Node.jsを用いてインストールできる
  • NPMでインストールするVueはモジュールハンドラの利用が前提
  • Vue-CLIでは手軽にVueの環境構築ができる
  • CDNを用いるとコンパクトにVueを利用できる
  • 直接ダウンロードして利用することもできる

Vueを是非活用してみましょう！