ケリーの姉の技術ブログ

ケリーの姉が仕事で学んだ技術に関するアウトプットを行うブログです。たまにゲームの作成秘話なんかも

Vue.jsの入門書を読み始めた話 その3

こんにちは。ケリーの姉です。 今回はv-modelという仕組みについてのお話です。

v-model?

双方向データバインディングを行ってくれる指示方法です。 えっと、言葉が難しいなぁ・・・ 入力フォームに値を入れると、ページ上にそれが即反映されたりするページとか、見たことありますよね? それを簡単に実現できるのがv-modelです。 とりあえず、コードを書いてみましょう。

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <title>Hello! Vue.js World</title>
</head>

<body>
    <div id="app">
        <h1>Hello!{{ msg1 }}World!!</h1>
        <p>ようこそ{{ msg1 }}の世界へ。</p>
        <p>世界の名前を変えてみる?→<input type="text" name="inStr" v-model="msg1" /></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="./js/changeWorld.js"></script>
</body>

</html>

inputタグに「 v-model="msg1"」という、双方向バインディングを指定しました。 これでinputタグの入力値とmsg1プロパティがお互い同期するようになります。 そしてjsファイル

changeWorld.js

var app = new Vue({
    el: '#app',
    data: {
        msg1: 'Vue.js'
    }
});

こざっぱりとしてるぅー!

じゃあ、実行してみましょう。

f:id:kerry_no_ane:20190630170851p:plain

はい、msg1に定義された文字列がinputタグの初期値として出ていますね。 じゃあ、このinputの中身を変更してみます。

f:id:kerry_no_ane:20190630172228p:plain

お分かりいただけたでしょうか?inputの入力値によって、msg1の値が変更になる→表示内容も合わせて変わる

コレが双方向バインディングです。 これとメソッドをうまく組み合わせると、表現の幅が広がります。

回文チェッカーを作ってみよう

v-modelとメソッドを組み合わせて、入力された文字列が回文(上から読んでも下から読んでも同じ文)になっているか?を動的にチェックするページを作ってみます。

まずはhtml

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>それは回文ですか?</title>
    </head>

    <body>
        <div id="app">
            <h1>回分チェック</h1>
            <p>文字列を入力→<input type="text" name="inStr" v-model.trim="inStr" /></p>
            
            <p>入力された文字は「{{inStr}}」これは・・・</p>
            <p>{{ kaibun() }}</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
        <script src="./js/inputEvent.js"></script>
    </body>
</html>

inputのv-modelが「v-model.trim="inStr"」となっていますね。inStrプロパティをバインドしています。 v-modelにtrimをつけると、前後の空白を自動消去した上でjs側に値を渡してくれますまあ便利。

んで、「kaibun()」というメソッド呼び出し部分で、inStrに入力された文字が回文か否かの結果を表示してくれます。 「kaibun()」が定義されているinputEvent.jsの中身はこんな感じです。

var app = new Vue({
    el: '#app',
    data: {
        inStr: ''
    },
    methods: {
        kaibun: function() {
            if (this.inStr.length == 0) return;
            var rStr = this.inStr.split('').reverse().join('');
            if (this.inStr == rStr) {
                return '回文です!';
            } else {
                return '回文ではありません';
            }
        }
    }
});

methodsにkaibunという処理が書かれています。 inStrの入力値の長さを見ており、0なら処理を行いません。 入力値が1以上の場合、split関数で文字を配列にします。「こんにちは」なら['こ', 'ん', 'に', 'ち', 'は']といった配列になります。 reverse関数は、その名のとおり「逆転」させます。['こ', 'ん', 'に', 'ち', 'は']の配列を['は', 'ち', 'に', 'ん', 'こ']に変化させます。 最後にjoin関数で配列を連結し、ひとつの文字列にします。['は', 'ち', 'に', 'ん', 'こ']を「はちにんこ」にして、rStr変数に代入します。

回文なら、最初に入力された文字列と逆転した文字列が一致するはずなので、一致したら「回文です!」しなかったら「回文ではありません」の文字を返します。 こうして返された文字が、html側のkaibun()とかかれたところに出力されるわけですね。 なるほど簡単だ。

ちなみに、実行するとこんな感じになります。

○初回起動時

f:id:kerry_no_ane:20190630172715p:plain

○Not 回文

f:id:kerry_no_ane:20190630172737p:plain

○回文

f:id:kerry_no_ane:20190630172808p:plain

このように、v-modelは入力値を動的に処理させたい場合に向いています。 私の現場では、v-modelでバインドした値をTypeScriptで処理してC#に送信、非同期で帰ってきた値を戻してv-modelでバインドされた値を変える・・・という処理を多様していますね。

次回は文字列以外のバインドについて書いていこうと思います。ではまた!