はじめに

Vue.jsは、jsフレームワークの中では学習コストが低いフレームワークですが、
一般的なチュートリアルでは、

webpack/babelの使用が前提になっている
ES2015以降の新しい文法を使用している

など、前提となっている知識が多く、
初学者、特にjQueryをメインで使用していたHTMLコーダーには敷居が高い部分があります。

複雑なUIに対して、部分的な導入をするだけでも、Vue.jsのメリットは大きいため、
既存のwebページの一部だけで、Vue.jsを使ったパーツを実装するための手順をまとめました。

注意点

本チュートリアルは、初学者のVue.js導入の敷居をできるだけ下げること目的としています。
導入する規模が大きくなると、メンテナンスがしづらくなりますので、実際の案件では、導入のメリットと、メンテナンスのしやすさを検討したうえでご使用ください。

前提条件

webpack/babelを使用しない
サポートブラウザは、IE11、Chrome最新、Firefox最新
Vue.js : v2.5.16
Bulma v0.7.1

事前準備

こちらからリポジトリをclone、またはzipでダウンロードしてください。

Vue.jsをローカルで起動するには、ローカルサーバが必要となります。
今回はこちらの記事で紹介されている簡易サーバを使用させて頂きました。

コマンドプロンプトまたはターミナルを開き、

cd [設置したディレクトリのpath]
node web

でサーバが起動します。表示されたURLにアクセスしてください。
index.htmlの中味が表示されていればOKです。

Vue.jsの読み込み

https://jp.vuejs.org/v2/guide/installation.html
こちらの「<script> 直接組み込み」からファイルを取得してください。

version	特徴	size
開発ver	dev toolが有効 / 警告表示あり / ファイルサイズ大	283KB
本番ver	dev tool無効 / 警告表示なし / ファイルサイズ小	85KB

開発中は、Vue.js devtools を使用することができるため、開発verの使用をお勧めします。
ただし、ファイルサイズが3倍以上変わるため、本番環境では、必ず本番verを使用してください

任意のディレクトリにファイルを設置し、
</body>タグの前に、下記のコードを追加します。

<script src="./js/vue.dev.js"></script>

Vueインスタンスの作成

Vue.jsを始めるには、まずVueインスタンスを作成する必要があります。
今回は#appをVue.jsの管理下に置きます。

index.html

<div id="app"></div>

index.html

<script>
    // vueインスタンスを作成
    var vm = new Vue({
      el: "#app"
    });
</script>

templateの追加

#app内のHTMLをtemplateに記述することができます。
VueでHTMLを取り扱う方法にはいくつかありますが、

非フロントエンドエンジニアでも読みやすい
IE11ではES2015のテンプレートリテラルが使用できない

という理由から、今回はx-template形式を使用します。

<script type="text/x-template" id="テンプレート名"></script>

上記タグで囲めば、その中で、v-forなどのVue.jsの記述を使用することができます。
注意点として、templateは、Vueインスタンスより前に記述する必要があります。

下記のコードを、<script src="./js/vue.dev.js"></script>の直後に入れます

index.html

<script type="text/x-template" id="sample-template">
  <div>
    <div class="content">
      <a class="button is-primary">Click!</a>
    </div>
    <div class="box">
        <div class="field">
          <label class="label">Message</label>
          <div class="control">
            <input class="input" type="text" placeholder="Please Enter Message">
          </div>
        </div>
        <div class="content">message</div>
    </div>
  </div>
</script>

<script>
  // vueインスタンスを作成
  var vm = new Vue({
    el: "#app", // カンマも忘れずに追加
    template:'#sample-template', // テンプレートのIDを追加
  });
</script>

コンポーネントの作成

このままでは、Vueインスタンスの中にすべてのHTMLが書かれた状態となります。
パーツが複数ある場合、適切な単位でコンポーネントとして区切ると、見通しが良くなります。

今回は、作成したtemplateの一部を、VueSampleというComponentに切り出します。

VueSampleという変数を定義し、'template:'の中に、Vueインスタンスで指定していたIDを追加します。
Componentの定義も、テンプレートと同様、Vueインスタンスより前に記述する必要があります。

Vueインスタンスのcomponents:内にも、先ほど定義したComponentの変数を追加しておきます。

index.html

// Component
var VueSample = {
  template: '#sample-template'
}

var vm = new Vue({
  el: "#app",
  components: {
    'vue-sample': VueSample
  }
});

定義したコンポーネントを、#appの中に追加します。

<div id="app">
  <vue-sample></vue-sample>
</div>

ブラウザで確認し、先ほどと同じように、templateの内容が表示できていればOKです。

コンポーネントの分割

分割する準備ができたので、分割したい単位でtemplateの中にHTMLを記述します。
最初に記述していたHTMLは、全体をclass名のないdivで囲んでいましたが、
これは、Vue.jsのルールで、「コンポーネントの大元(root)は、1つのタグで囲まれていなくてはならない」ためです。

コンポーネントを分割する場合は、分割したコンポーネントごとにそのルールが守られていればOKです。
下記のコードでは、全体を囲っていた<div>を削除したうえで、コンポーネントを分割しています。

index.html

<script type="text/x-template" id="sample-template">
  <div class="box">
    <div class="field">
      <label class="label">Message</label>
      <div class="control">
        <input class="input" type="text" placeholder="Please Enter Message">
      </div>
    </div>
    <div class="content">message</div>
  </div>
</script>

index.html

<div id="app">
  <div class="content">
    <a class="button is-primary">Click!</a>
  </div>
  <vue-sample v-show="isBoxShow"></vue-sample>
</div>

以上で、コンポーネントの分割は完了です。
Componentを増やしたい場合は、

テンプレートを作成
Componentを定義し、使用するテンプレートのIDを指定
Vueインスタンスのcomponentsに作成したComponentを追加

という手順で増やしていけばOKです。

あとは、他のネット上にあるチュートリアルと同様、v-modelやv-onなどを利用して、
画面を作りこむことができます。

sample.htmlに、画面の表示制御など、簡単なサンプルを載せていますので、
こちらも参考にしてみてください。

おわりに

Vue.jsを使うことで、これまでjQueryで処理していた部分も楽に実装できるようになるので、
積極的に活用して、Vueに慣れ親しんでください！

できるだけシンプルに始めるVue.js - babel/webpackを使わずにVue.jsを導入する

はじめに

注意点

前提条件

目次

事前準備

Vue.jsの読み込み

Vueインスタンスの作成

templateの追加

コンポーネントの作成

コンポーネントの分割

おわりに