NPMを用いたVueのインストール方法を解説（CDNを用いたインストール方法等も紹介）

2020-03-10

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

  1. Vue.jsとは？

目次

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

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

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

  1. 1-1. 1-1. 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項に移りましょう。

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

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

  1. 1-3. 1-3. Vueのインストール

NPMでVueをインストールする場合、大規模開発を想定してWebpackまたは Browserifyなどのモジュールハンドラとの併用が前提となっています。こちらについてすでに知識がある方は次のコマンドでVueをインストールし、開発環境に組み込むことができます。
ターミナル
$ npm install vue
モジュールハンドラの知識がない方も次項のVue-CLIを用いることで煩わしい開発環境の構築をコマンドを入力するだけで自動でVueを利用したプロジェクトを立ち上げることができます。

  1. 1-4. 1-4. 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/のサーバーが立ち上がり、次のような画面が出力されます。
knowledge-13-vue-cli.png
これによってVue-CLIでの環境構築は完了です。

  1. 2. 2. その他のインストール方法

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

  1. 2-1. 2-1. 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がりようできるため、非常に手軽に実装できます。

  1. 2-2. 2-2. ダウンロードして直接読み込む

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

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

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

  1. 4. 4. この記事のまとめ

本記事ではVueのインストール方法を、実際の例を元に説明しました！最後に記事の要点をまとめてみましょう。
  • VueはNPMによるインストールができる
  • homebrew、nodebrew、Node.jsを用いてインストールできる
  • NPMでインストールするVueはモジュールハンドラの利用が前提
  • Vue-CLIでは手軽にVueの環境構築ができる
  • CDNを用いるとコンパクトにVueを利用できる
  • 直接ダウンロードして利用することもできる
Vueを是非活用してみましょう。ELOOPではVueに関する問題も多数用意してあります！

このナレッジの後によく読まれています

    Vueのcomputedプロパティの書き方・使い方について解説

    2020-03-11

      Vueのwatchプロパティの書き方・使い方について解説

      2020-03-08

        Vueのpropsの書き方・使い方について解説

        2020-03-08

          Vueのmethodsプロパティの書き方・使い方について解説

          2020-03-08

            Vueのv-bind:classの書き方・使い方について解説

            2020-03-08

              Vueのv-ifディレクティブとv-elseディレクティブの書き方・使い方について解説

              2020-03-08

                Vueのv-onディレクティブの書き方・使い方について解説

                2020-03-08

                オンラインで腕試しをしてみませんか？

                プログラミング学習者にとって実践的な経験を得ることは至難の技。ただ知識をインプットして、コピペを繰り返すだけでは実務で役立つスキルは得られません。

                オンラインプログラミング問題集ELOOPでは、実務を鍛えられるプログラミング問題が多数そろっており、楽しみながら問題をこなしていくことで実践的な開発スキルを得ることができます。

                実践的な問題をこなしてスキルを伸ばしていきませんか？