vuejs ディレクティブの理解を深めよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

ディレクティブの理解を深めよう

Vue.js|2019年02月04日

2019年02月04日
  • このエントリーをはてなブックマークに追加

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

こんなに便利なディレクティブが、他にもたくさんあるのです。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら