前回、ディレクティブの概念に少しだけ触れました。
HTMLタグに、直接、機能を付け加えるタグですね。
v-onというディレクティブを使ったのを覚えているでしょうか。
v-on:clickと設定し、クリックした時にJavaScriptの処理を呼び出しました。
scriptの中にmethodという項目を作り、そこで処理を書きましたよね。
ただ、もっとシンプルに使えるディレクティブはたくさんあります。
ディレクティブは多くの数が存在しています。
そしてVue.jsの軸となる機能の1つでもあります。
今回は、ディレクティブの概念をさらに深掘りしていきましょう。
なお、今回からミッション形式となります。
ソースコードの解説を見ながら、ぜひ、作ってみてください。
今回のミッション
ディレクティブの概念をさらに深く理解していきましょう。
まず、下記のURLを確認してください。
セレクトボックスから「英語の挨拶」を選びます。
すると、同じ意味の「日本語の挨拶」が表示される流れとなります。
今回は、上記の仕組みを再現してみましょう。
参考ファイルは下記からダウンロード可能です。
ソースコードの解説を下記に掲載いたします。
まずは解説を見ながら、ご自身で作ってみてください。
どうしても分からなければ、解答ファイルを見ていきましょう。
ソースコードの解説
まず、下記が全てのソースコードになります。
コメントを参考に、一通り目を透してみましょう。
<!--appで囲んだエリアにVue.jsが適応されます--> <div id="app"> <!--セレクトボックスで選択肢を作りましょう--> <!--v-model="selected"が今回のディレクティブの1つです--> <!--v-modelで入力した結果はリアルタイムにselectedに格納されます--> <!--selectedは言ってみれば変数のようなデータの入れ物です--> <!--selectedという名前は任意で自由に変えることができます--> <select v-model="selected"> <option disabled value="">選択してください</option> <option>Hello</option> <option>Good Afternoon</option> <option>Good Night</option> </select> <div> <span>英語 :</span> <!--ここにセレクトボックスで選んだ値が表示されます--> <!--もちろん、リアルタイムで表示されます--> <span>{{ selected }}</span> </div> <div> <span>日本語 :</span> <!--v-ifがif文の効果を持つディレクティブです。--> <!--もしselectedがhelloだったらおはようを表示します。--> <span v-if="selected === 'Hello'">おはよう</span> <!--もしselectedがGood Afternoonだったらこんにちはを表示します。--> <span v-else-if="selected === 'Good Afternoon'">こんにちは</span> <!--もしselectedがGood Nightだったらこんにちはを表示します。--> <span v-else-if="selected === 'Good Night'">こんばんは</span> <!--どれにも該当しない場合、下記になります。--> <span v-else>英語の挨拶を選択してください</span> </div> </div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var app = new Vue({ el: '#app', data: { selected: '' } }) </script>
コメントを読むと、お分かり頂けるのではないでしょうか。
まず、セレクトボックスで英語の挨拶を選びます。
すると、選んだ「テキスト」がselectedに格納されます。
ここで登場するのがv-modelというディレクティブ。
v-modelで指定された文字列は、データの入れ物になります。
セレクトボックスの値が自動格納されるのです。
今回の場合はselectedが入れ物になっていますね。
しかも、格納されるだけではありません。
値をHTMLに表示しているのであれば、その表示も変わります。
ここが、Vue.jsの良いところで、非常に便利ですね。
また文字列は任意に変更できるので、変えてみてください。
<!--appで囲んだエリアにVue.jsが適応されます--> <div id="app"> <!--セレクトボックスで選択肢を作りましょう--> <!--v-model="selected"が今回のディレクティブの1つです--> <!--v-modelで入力した結果はリアルタイムにselectedに格納されます--> <!--selectedは言ってみれば変数のようなデータの入れ物です--> <!--selectedという名前は任意で自由に変えることができます--> <select v-model="selected"> <option disabled value="">選択してください</option> <option>Hello</option> <option>Good Afternoon</option> <option>Good Night</option> </select>
次に、選んだテキストが{{selected}}を通して出力されます。
二重のカッコ{{}}を使った出力は前回もやりましたね。
<div> <span>英語 :</span> <!--ここにセレクトボックスで選んだ値が表示されます--> <!--もちろん、リアルタイムで表示されます--> <span>{{ selected }}</span> </div>
リアルタイムで変更が反映されるのが素晴らしさです。
余分な処理を書かなくて良いので楽ですね。
そして、今回のメイン、ディレクティブであることの「if」です。
<div> <span>日本語 :</span> <!--v-ifがif文の効果を持つディレクティブです。--> <!--もしselectedがhelloだったらおはようを表示します。--> <span v-if="selected === 'Hello'">おはよう</span> <!--もしselectedがGood Afternoonだったらこんにちはを表示します。--> <span v-else-if="selected === 'Good Afternoon'">こんにちは</span> <!--もしselectedがGood Nightだったらこんにちはを表示します。--> <span v-else-if="selected === 'Good Night'">こんばんは</span> <!--どれにも該当しない場合、下記になります。--> <span v-else>英語の挨拶を選択してください</span> </div> </div>
jQuery等を学んだ方なら馴染み深いのではないでしょうか。
これは、他の言語でいうif文とほぼ変わりません。
直接if文をhtmlに書き込んでいるようなものです。
JavaScriptに書かなくても、自動的に条件分岐してくれます。
そして、今回のscript部分は非常にシンプルになっています。
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var app = new Vue({ el: '#app', data: { selected: '' } }) </script>
基本の書き方に加えて、selectedを指定しているだけですね。
ディレクティブで選択された値がselectedに入ります。
そして、リアルタイムでhtmlを書き換えるのです。
ざっくりとVue.jsの素晴らしさがご理解頂けたのでは無いでしょうか。
他のフレームワークや言語では、もっと複雑に書く必要があります。
こんなに便利なディレクティブが、他にもたくさんあるのです。