【Vue.js 使い方】とりあえずこれだけ覚えておけばなんとかなりそう。

とりあえずこれだけは覚えておけばなんとかなるんじゃないかな？？ってな感じのVue.jsの使い方をいくつか紹介したいと思います！

Vue.jsに使われているMVMMとか深いところはまだ良くわかっていません。書いたらこう動いたというものを紹介します。

完全に独学なので何かしら指摘がございましたらじゃんじゃんコメントを下さい。

話は変わりましてプロジェクトを開発し始めて1ヶ月以上が経過して、いよいよフロントエンドの実装に入った次第でございます。

今回のプロジェクトではRailsのフロントエンド管理にwebpackerを使用しており、JavaScriptフレームワークはVue.jsを採用しました。なんでVue.jsかというとなんとなくです。

とにかくモダンなフロントエンドを実装したくてVue.jsが人気そうなので使ってみようみたいな管区です。実際に使ってみてそれっぽいのがわりかし簡単にできたのでとても満足です。

これからVue.jsユーザーが増えてくると思うので実際に開発をしていて「これだけ覚えておけばなんとかアプリ作れるんじゃないの？？」ってやつをいつくか紹介したいと思います。

この使い方を覚えておけばなんとかなる

ではでは早速覚えておいたほうがいいかもの項目を紹介します。今回は環境構築のお話はしません。環境構築についてはまた別記事で書こうと思います。

以下紹介するVueの使い方です。

Vue.jsのはじめ方
バインディング
v-model
Vueの繰り返し
メソッド
ajax

これだけの使い方を把握していればなんとか思ったアプリは作れるんじゃないでしょうか。

では一つずつ詳しく紹介していきます。

使用するものは以下のとおりです。

Vue.js
axios

axiosとは

Vue.jsの始め方

例えば以下のうようなhtmlファイルがあったとしましょう。

<body>
    <div id="sample">
    </div>
</body>

そしてjsファイルに以下のように書くことからスタートします。

new Vue ({
    el: "#sample",
    data: {},    
})

ひとまずこれだけVue.jsを使うことができます。解説をしていきます。

「new Vue」の部分ではVueインスタンスを初期化しています。なんで初期化なのかよく分かっていないのですがこのファイルが読み込まれときにVueは初期化されるようです。よくわからんのでとにかくこう書くのだとおぼえてください。申し訳ないです。

続いて中身の説明に入ります。

「el」の部分が重要です。elには”#sample”と書かれています。これはhtmlのidが”sample”の範囲をVueを使用すると宣言しております。”#sample”の範囲外ではVue.jsを使うことはできませんので注意。

次に「data」ですね。これはVue.jsのモデルとなるところです。この中に使用するモデルをハッシュで追加していきますが詳しくは後ほど説明します。

ここでは「new Vue」でVueインスタンスを作って「el」でVueを使用するhtmlの範囲をidで指定するのだとだけ覚えて下さい。

バインディングの使い方

Vue.jsでバインディングといってVue.jsのdataをリアルタイムでhtmlに表示することができます。Vue.jsのdataとは先程紹介した「data」の部分です。dataの部分をモデルとかともいい、バインディングさせることでVue.jsのdataに変更があるとhtmlにリアルタイムで即座に反映されます。

この機能がVue.jsのメインになると思います。この使い方知っておかないとVue.jsを使う意味ないかなと思ったりしています。

では具体的にどのように使っていくか紹介していきます。

バインディングの方法

バインディングの方法は2つあります。2つしかないです。

二重波括弧で囲う方法と、htmlタグに属性として付与する方法の2つです。

実際に実装すると以下のようになります。まずはバインディングするdataを用意しましょう。jsファイルはこう書きます。

new Vue ({
    el: "#sample",
    data: {
        name: "やまそう" 
    }
})

dataの中に「name」というキーを作り値として「”やまそう”」というシンプルな文字列を入れました。これをhtmlで表示します。

まずは二重波括弧で表示するやり方です。htmlに以下のように書きます。

<body>
    <div id="sample">
        {{ name }}
    </div>
</body>

これだけですね。二重波括弧を作ってその中に先程dataの中に書いたnameのキーを書きました。これをブラウザで見ると「やまそう」と出力されるはずです。これが最も基本的なバインディングの使い方です。

次にhtmlタグの属性に付与するやり方です。

<body>
    <div id="sample">
        <p v-html="name"></p>
    </div>
</body>

Pタグの中にv-htmlという属性を与え先程と同じようにキーを入れました。ブラウザ上での出力結果は先程と同じです。

このv-htmlという「v-」がついた特別な書き方をするものを「ディレクティブ」といいます。今回のv-htmlはdataを単純にバインディングするだけのものですが、他にディレクティブは存在します。こちらに紹介されています。

ここではdataをhtmlに表示するだけのバインディングなのでv-htmlだけにしておきます。

dataの中身をhtmlに反映させることができる
htmlに反映させるには「{{}}」と「v-html=””」の2つがある

以上の2つが大事なところです。

v-modelの使い方

Vue.jsにはv-modelというものがあります。これもよく使うものでかなり便利だと思うので使い方を覚えておきましょう。

v-modelとはどういうときに使うかというとフォームに使います。<input>とか<select>とかのフォームです。

フォームにv-modelを使うと何かと便利ですので使い方を紹介します。できることも幅広いです。

まずはjsから

new Vue ({
    el: "#sample",
    data: {
        name: "",
        gender: "", 
    }
})

dataの中身を変更してみました。「gender」を追加して「name」と「gender」の値はクオーテーションで囲んで空にしてます。

次にhtmlです。

<body>
    <div id="sample">
        <form action="#">
            <div>
                名前：<input v-model="name">
            </div>
            <div>
                性別：
                <select v-model="gender">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
        </form>
        <div class="result>
            <p>名前は{{name}}です。{{gender}}です</p>
        </div>
    </div>
</body>

inputとselectにそれぞれv-model=””を書きました。

inputの方にはv-modelの中にnameを書きました。こうすることブラウザ上のフォームに入力したものが、jsファイルの中に書いたdataの中のnameに値として入ります。

selectの方も同様にブラウザ上のセレクトボックスで選択したものがjsファイルの中に書いたdataの中のgenderに値として入ります。

そして「<p>名前は{{name}}です。{{gender}}です</p>」ここの部分。バインディングのところで紹介した二重波括弧の書き方です。dataの中に入ってるものがバインディングされますのでブラウザでフォームに入力したもの、または選択したものがここに表示されるはずです。おそらくリアルタイムで結果が連動して表示されてる感じになります。

これがv-modelパワーです。

v-modelを使うとvueのdataに値を入れることができる
v-modelにはキー指定する

Vueの繰り返しの使い方

Vue.jsでhtml側で繰り返しの処理を書くことができます。

Rialsのerbでいう”<% @articles.each do |article| %>”みたいなやつです。

繰り返しもよく使うと思います。

Vue.jsの繰り返しは「v-for」というディレクティブを使います。使い方を具体例と一緒に解説します。

まずjsです。dataの中を変更します。今までVue.jsのdataの中身はクオーテーションで囲って文字列しか扱って来ませんでしたが配列を扱うことができます。繰り返しの処理をするので配列を使います。

new Vue ({
    el: "#sample",
    data: {
        nameLists: [
            {"name": "やまそう"},
            {"name": "かわそう"},
            {"name": "たにそう"},
        ],
    }
})

dataの中に大括弧を作って、nameがキーのオブジェクトを3つ作りました。

これをhtml上で繰り返し表示するにはこう書きます。

<body>
    <div id="sample">
        <div class="name-list" v-for="list in nameLists">
            <p>名前：{{list.name}}</p>
        </div>
    </div>
</body>

v-for中に「list in nameLists」と書きました。配列の「nameLists」を「list」という名前に一つずつ入れてnameListsの個数分処理しています。二重波括弧を使ってバインディングしてlist.nameでキーがnameの値を繰り返し表示しています。

Railsのerbでいうと「<% nameLists.each do |list| %>」みたいな感じです。自分はいつもこうやってイメージしています。

ちなみにkeyとvalueで分けるときは

<div class="name-list" v-for="key, value in nameLists">

とかけます。

メソッド

メソッドを独自作って追加することができます。独自に作って追加する方法よりまずライフサイクルフックと言うものを知っておくと便利でしょう。

ライフサイクルフックはこちらに紹介されています。

ライフサイクルフック

今回は「created」というライフサイクルフックだけ紹介します。（他のをあんまり使ったことないので。。。）

「created」を使うとVueインスタンスが作成されたあとにする処理を記述することができます。

具体的にはこのように使います。

new Vue ({
    el: "#sample",
    data: {},
    created: function(){
        alert("Vueインスタンスが作成されました")
    }
})

こう書くことでVueインスタンスが作成されたあと、つまりブラウザ上では読み込みが終了したあとくらいのタイミングで中の記述が処理されます。上記記述ではalert文を書いていうるのでalertが表示されます。

ここではよくajaxで取得したデータをdataに中に初期値として挿入する処理などを書くことがあると思います。

created以外にもライフサイクルフックは用意されています。それぞれ処理されるタイミングが違います。用途によって使い分けるといいでしょう。

メソッドを作る

Vue.jsで独自のメソッドを作ることもできます。

普通のJavaScriptのメソッドと同じようにイベントで発火します。

メソッドは以下のように来ることができます。

new Vue ({
    el: "#sample",
    data: {},
    methods: {
        sampleAlert: function() {
            alert("サンプルメソッド");
        },
        sampleConsoleLog: function() {
            console.log("サンプルメソッド");
        }
    }
})

methods: {}の中に作成するメソッドをカンマ区切りで追加していきます。中の処理は普通のJavaScriptです。

メソッドを追加したので今度は呼び出してみます。

js内でメソッドを呼び出すときは以下です。

new Vue ({
    el: "#sample",
    data: {},
    methods: {
        sampleAlert: function() {
            alert("サンプルメソッド");
        },
        sampleConsoleLog: function() {
            console.log("サンプルメソッド");
        },
        callMethod: fuction() {
            this.sampleAlert();
        }
    }
})

this.~~~でメソッド名を書くことでjs内でメソッドを呼ぶことができます。

この「this」はVueインスタンスを指します。つまりnew Vueで作っているVueインスタンスのsampleAlert()メソッドを呼び出しています。このthisがないとメソッドは呼び出せないので注意してください。

htmlでイベントで発火させるときは以下です。

<body>
    <div id="sample">
        <button v-on:click="sampleAlert()">
    </div>
</body>

v-on:というVue.js特別な書き方でメソッドを指定してメソッドを発火させることができます。v-on:clickの他にv-on:changeなどもあります。

thisの使い方

先程thisを使ったので簡単にthisの使い方をここで紹介しておきます。

先程はthisを使ってVueインスタンス内のメソッドを呼び出しましたが他の使い方もあります。例えばVueインスタンス内のdataに値を入れたりすることもできます。

new Vue ({
    el: "#sample",
    data: {
        name: "",
    },
    methods: {
        setName: fuction() {
            this.name = "やまそう";
        }
    }
})

this.に続いてdataの名前でVueインスタンス内のdataを呼べます。

ajaxを使う

ajaxもアプリ開発では必ずと言っていいほど使うと思います。

私は今回axiosを使いました。

axiosとは。

axiosを使うとajaxをいい感じにできます。

axios.get('/names.json', {
          params: {
            name: "やまそう",
          }
        }).then(function (response) {
          console.log(response);
        }).catch(function (errors){
          console.log(errors);
        });

axios.に続いてリクエストを指定。getならget。postならpostです。

第一引数にはリクエスト先を書きます。第二引数にはパラメータがあるのであればキー：バリューで追記します。なければ空白で大丈夫です。

thenとメソッドをチェーンすればajaxが成功したときの処理を書くことができます。引数のreponseにはajaxで取得したレスポンスを入ります。

もし成功しなかったときの処理を書く場合はthenでなくcatchと書きます。

まとめ

ざーっと書いてザーッと解説しました。私もまだVue.jsに触れ始めたばかりなので途中ずれたこと書いてあるかもしれませんがご指摘があれば優しく教えていただけると嬉しいです。

またVue.jsをやり始めた方々に、ここに綴った経験がお役になてればとても幸いです。

最後まで見ていただきありがとうございました。

おまけ

RailsとVue.jsを開発していたのですが、Railsのテンプレートエンジンにはslimを使っています。

slimにVue.jsのv-がつくなんとかかんとかは以下のようにかけます。例えばslimにv-modelを使う場合。

= text_field_tag :name, "v-model": "name"

意外とここで手こずったので書いておきます

参考サイト

Vue