2017.11.14 山宗一郎

アプリ開発・ウェブ開発

【初心者】Vue.js 基本的な使い方。〜導入から基本的な機能を使ってみるまで〜

はじめに
Vue.jsの導入
Vue.jsの基本的な使い方
Vue.jsの基本的なディレクティブ
Vue.js 基本的なインスタンスライフサイクルフック
axiosとVue.jsの基本的な使い方
まとめ

はじめに

サイトを製作する上でフロントのUIを改善することは一つの大きな課題です。方法は色々あると思うんですが、JavaScriptで動的な機能を加えることが主な方法の一つでしょう。静的なサイトより動きを加えたものはユーザー目線からしても見やすくなります。

JavaScriptはサイトに動きを加えることが出来る唯一のプログラミング言語であり多種多様なフレームワークがあります。最近私が作ったサイトでVue.jsを使ってみたので導入から基本的な使い方と機能の紹介をしたいと思います。あわせて「axios」という便利ツールも紹介したいと思います。

Vue.jsとは

viewとmodelの間でバインディングを可能にしてくれるものです。同じようなフレームワークでangular.jsがありますが、angular.jsの場合はmodel（データ）とviewの間にコントローラを介してバインディングをします。一方Vue.jsはviewとmodel（データ）の紐付けをVue側が管理してくれているため、viewとmodelのみの紐付けで済みます。具体的に何が出来るかを後に説明をします。

Vue.jsとは［公式日本語ドキュメント］

Vue.jsの導入

CDN

Vue.jsはCDNで読み込むことが出来ます。CDNのスクリプトはbodyタグの閉じタグの直前に下記を追加します。

<script src="https://unpkg.com/vue"></script>

これを読み込むことでjavascriot内で「Vue」というコードを使うことができます。

npm

npmでインストールをするときはシェル（macならターミナル、windowsならコマンドライン）で下記のコマンドでインストールします。

$ npm install vue

Rails + webpackerの場合

Ruby on Railsでwebアプリケーションを製作している場合webpackerを利用することがあると思います。私もRailsアプリケーションを作った際にwebpackerでJSを管理していました。webpackerでVue.jsをインストールするときはpackage.jsonの”dependencies”の中に以下を追加します。（Railsでwebpacker環境が構築されている仮定です）。

"vue": "^2.5.2"

追加したら下記コマンドでpackage.jsonを読み込みます。

$ bin/rake webpacker:install

読み込みが完了しましたら、app/javascript/packs内のお使いのjsファイルの以下を追記します。

import Vue from 'vue/dist/vue.esm'

これでRails + webpackerでのVue.jsの導入は完了です。

Rails + webpackerでaxiosの導入

RailsアプリケーションでVue.jsを導入した際にRails側のデータをVueのモデルに挿入するべきシチュエーションがあると思います。その時にaxiosというツールが大変便利です。

axiosを利用することでRails側にリクエストを送りjsonレスポンスを受け取る作業が安易に行うことが出来ます。受け取ったjsonをVue.jsのmodelに挿入しviewにバインディングをすることが可能です。後に具体例を提示しつつ説明をします。

axiosもpackage.jsonに追記して読み込むことで利用可能です。package.jsonのdependencies内に以下を追記します。

"axios": "^0.16.2"

これを加えて下記コマンドで読み込みましょう。

$ bin/rake webpacker:install

読み込みが完了しましたら、app/javascript/packs内のお使いのjsファイルの以下を追記します。

import axios from 'axios'

これでaxiosの導入は完了です。具体的な使い方は後に説明します。

Vue.jsの基本的な使い方

Vue.jsの基本的な使い方と、良く使うディレクティブを紹介します。使用するファイルはjsファイルと適当なhtmlファイルのみです。

まずjsファイルにVueコンポーネントを作成します。以下のように作ります。

var sample = new Vue ({
  el: "#sample",
  data: {
    message: "hello Vue"
  }
})

「var sample = …」でsampleという変数にVue関すをnewすることでインスタンスを新規で作成しています。「el:」の部分はhtmlでVue.jsを使う範囲を指定しています。この場合は「id=”sample”」の部分でvueを使用することを宣言しています。

下記はhtmlの例です。

<div id="sample">
  {{message}}
</div>

「{{}}」の二重括弧は基本的なバインディング方法です。二重括弧の中にプロパティ名を、今回は「message」を記述するとdata内のmessageをバインディングすることを宣言出来ます。よってブラウザで出力結果は”hello Vue”となります。

単純に文字列を描画するのみでしたが、jsでデータを格納出来ることと、二重括弧でdata内のプロパティを呼び出せることを覚えておいてください。これから良く使うであろうディレクティブと使い方の例を紹介していきます。

Vue.jsの基本的なディレクティブ

ディレクティブとは「v-」先頭につける特別な属性です。具体例をあげて紹介していきます。

v-on

v-on:”イベント名”で指定したイベントでハンドリングをします。例えば「v-on:click」とした場合ユーザ対象をクリックした時にハンドリングをします。「v-on:change」ではユーザが対象の値を変更した時にハンドリングをします。また、メソッドを指定することでイベントと同時にメソッドが実行されます。以下のサンプルはユーザがボタンをクリッククリックするたびに数値が増える機能です。サンプルは以下のとおりです。

var sample1 = new Vue ({
  el: "#sample1",
  data: {
    count: 0
  },
  methods: {
    countUp(){
      this.count + 1
    }
  }
})

<div id="sample1">
  <p>{{count}}</p>
  <button v-on:click="countUp">プラス</button>
</div>

「v-on:click」の引数で「countUp」を指定することでjsファイルのcountUpメソッドじゃ実行されます。countUpメソッドではdataの中のcountをプラス１しています。メソッドを作る時は「methods: {}」と書き、その中にカンマ区切りでメソッドを並べていきましょう。

二重括弧でcountと出力されているのでブラウザでは、ボタンがクリックされるたびに数値が１づつ増えます。

v-model

v-modelを使うと、例えばhtmlのinputタグなどで入力された値をリアルタイムでvueインスタンスのモデルに格納することができます。具体的な使い方と何が解説をします。

サンプルを表示します。

var sample2 = new Vue ({
  el: "#sample2",
  data: {
    message: ""
  }
})

<div id="sample2">
  <div class="result">{{message}}</div>
  <div class="result-count">{{message.length}}</div>

  <input type="text" v-model="message">
</div>

inputタグにv-model=”message”と引数に”message”を指定しています。こうすることでinputに入力された値はjsのvueインスタンスのデータに格納されます。二重括弧で囲われた”message”でバインディング出力しているので、ブラウズでは入力された文字がリアルタイムで出力されます。”message.length”では入力されている文字数をカウントしています。入力している文字数をリアルタイムのように確認することが出来ます。

v-for

v-forは繰り返しが出来ます。配列などの値をループで出力します。

以下にサンプル

var sample3 = new Vue ({
  el: "#sample3",
  data: {
    colors: ["red", "blue", "yellow", "pink", "green"]
  }
})

<div id="sample3">
  <ul>
    <li v-for="color in colors">{{color}}</li>
  </ul>
 </div>

jsファイルのvueインスタンスに注目するとcolorsは配列なっています。このように配列を格納することが可能です。

htmlファイルのliタグではv-forが書かれ引数に”color in colors”と記述されています。colors配列をcolorという名前で値を繰り返し出力します。結果、ブラウザではred,blue,yellow…と順に出力されます。

配列ではなくハッシュを使用する場合は以下のようになります。

var sample4 = new Vue ({
  el: "#sampl4",
  data: {
    colors: {red: "赤", blue: "青", yellow: "黄色", pink: "ピンク"}
  }
})

<div id="sample4">
  <ul>
    <li v-for="key, value in colors">{{color}}のkeyは{{key}}です</li>
  </ul>
 </div>

出力結果は「赤のkeyはredです」が繰り返し表示されます。

v-if

v-ifを使うことで条件を付加することが出来ます。以下は入力された文字数によって出力内容を変更するサンプルです。

var sample5 = new Vue ({
  el: "#sampl5",
  data: {
    message: ""
  }
})

<div id="sample5">
  <p v-if"message.length == 0">ない</p>
  <p v-if"message.length > 5">5文字以上です</p>
  <p v-if"message.length > 10">10文字以上です</p>
 
  <input type="text" v-model="message"> 
</div>

inputタグにv-modelを挿入していることで入力された文字がvueインスタンスのデータに格納されます。v-ifではデータに格納された文字の文字数によって出力される文字列を変えています。

Vue.js 基本的なインスタンスライフサイクルフック

Vueインスタンスは生成じに初期化を行います。特定のタイミングでコードを実行したい時はライフサイクルフックという関数を使います。

created

createフックはインスタンスが生成されたあとにコードが実行されます。例えば、インスタンスが生成されたあとにalertを出す場合は以下のようになります。

var sample-created = new Vue ({
  el: "#sample-created",
  data: {
    colors: ""
  },

  created: {
    alert('Vue.js サンプルサイトです')
  }
})

「created: {}」と書き、波括弧の中に実行したいコードを書きます。

ライフサイクルフックは他にもmounted、updated、destroyedがあります。これは今回使用していないので省きます。

axiosとVue.jsの基本的な使い方

axiosを使うことでアプリケーション側にリクエストを投げてjosnをレスポンスを受け取ることが可能です。今回はボタンをクリックしたら、Railsにデータベースに登録されている全カラーデータのリクエストを投げて、それをjsonで受取りブラウザに表示するというシンプルな動きを実装したいと思います。jsonはjbuilderというテンプレートエンジンを使用します。

Jbuilder

サンプル

var sample6 = new Vue ({
  el: "#sample6",
  data: {
    colors: ""
  },

  methods: {
    requestColors() {
      axios.get(/colors.json).then(function(response)){
        sample6.$data.colors = response.data;
      }
    }
  }
})

<div id="sample3">
  <ul>
    <li v-for="key, value in colors">{{value}}</li>
    <li v-for="key, value in colors">{{key}}</li>
  </ul>

  <button v-on:click="requestColors">全カラー取得</button>
 </div>

@colors.each do |color|
  json.set! color.name, color.id
end

ボタンを押すとrequestColorsメソッドが実行され、メソッド内の記述が実行されます。

本投稿でaxiosを簡単に紹介した際に「import axios from ‘axios’」を記述したと思います。これにより「axios」関数を利用することが出来ます。「axios.get(‘/colors.json’)」とすることでgetメソッドでリクエストを送ることが出来ます。レスポンスはJbuilderで記述したjsonデータです。

「sample6.$data.colors = response.data」で受け取ったデータをcolorsに格納しています。

html側ではvo-forを使い複数データを繰り返しで出力しています。

以上の一連の流れで、ボタンをクリックしたらデータベースに入っているカラーデータを全て出力することが出来ます。

ちなみにRailsのコントローラは以下のような感じです。

class ColrosController < ApplicationController
  
  def index
    @colors = Color.all
  end
end

まとめ

以上です。

Vue.jsを使ってみて、始めてVue.jsに取り掛かったときは戸惑い、使いににくささえ感じました。ですが、なんにでも言えることですが多少慣れました。実装してみるとサイトが使いやすくかっこいい感じになります。もう少しVue.jsを勉強して今後も利用していこうと思っている次第でございます。

今回紹介したのは、自分が使ったことのある機能です。他にも説明が出来ていない機能などが沢山あるかと思います。是非、google等で調べて色々な機能を試して見てください。

最後までありがとう御座いました。

この記事を書いた人
最新の記事

山宗一郎

【初心者】Vue.js 基本的な使い方。〜導入から基本的な機能を使ってみるまで〜

はじめに

Vue.jsの導入

Vue.jsの基本的な使い方

Vue.jsの基本的なディレクティブ

Vue.js 基本的なインスタンスライフサイクルフック

axiosとVue.jsの基本的な使い方

まとめ

最新記事 by 山宗一郎 (全て見る)

SNS

【初心者】Vue.js 基本的な使い方。〜 導入から基本的な機能を使ってみるまで 〜

はじめに

Vue.jsの導入

Vue.jsの基本的な使い方

Vue.jsの基本的なディレクティブ

Vue.js 基本的なインスタンスライフサイクルフック

axiosとVue.jsの基本的な使い方

まとめ

最新記事 by 山宗一郎 (全て見る)

SNS

【初心者】Vue.js 基本的な使い方。〜導入から基本的な機能を使ってみるまで〜