前回、ディレクティブの概念に少しだけ触れました。
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の素晴らしさがご理解頂けたのでは無いでしょうか。
他のフレームワークや言語では、もっと複雑に書く必要があります。
こんなに便利なディレクティブが、他にもたくさんあるのです。