Ne:Code道場～Vue.js v-if②とv-showの巻～

はじめに

この記事ではVue.jsのv-ifについて前回に引き続き、v-else-ifやv-else、v-showの概要について取り上げつつ、躓きポイント を補足しています。 各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、Vue.jsのv-else-ifやv-else、v-showについて理解を深めてゆきましょう。

v-ifを用いる際に「それ以外」とかできるのニャ？

前回の記事では、Vue.jsのv-ifの1つ目の記事として、条件分岐で要素の表示非表示を制御できることをみてゆきましたね。JavaScriptで記載していたif文ととても良く似た書き方が可能でした。そしてそのJavaScriptのif文には、条件を重ねがけするelse-ifや、それ以外を表すelseが存在していましたが、Vue.jsでv-ifを用いる際にも、それと同じような文法で条件を指定してゆくことが可能になります。前回のサンプルコードを一部変更し確認してゆきましょう。まずは、それ以外のv-elseを用いたものになります。

    <p v-if="foods.length > 0">
      好物は 「{{ foods }}」 ニャ♪
    </p>
    <!-- v-ifのp要素の下に、v-elseのp要素が追加されているニャ →
    <!-- v-elseはそのキーワードしか書いて無いニャ。イコールより右側が無くて、v-ifのものとは異なるニャ～ -->
    <p v-else >
      好物は選択されていない ニャ！
    </p>

v-ifの指定がしてあるp要素の下に、v-elseが指定されているp要素を確認できますね。実行してみると、チェックボックスを選択していない状態であれば、v-elseの方の「好物は選択されていない ニャ！」が表示されることを確認できるでしょう。
JavaScriptのif文におけるelseと同様、「それ以外」を表すために条件の指定は無く、ifの記載の（前ではなく）後に記載されていますね。
とてもシンプルに、特定の条件・及びその条件以外での要素の表示切り替えを実現できましたね。
次は複数条件を重ねる場合の記載について確認してゆきましょう。
　

v-ifを用いる際に複数条件を重ねることができるのニャ？

JavaScriptのif文について取り上げた際に、else-ifを用いて複数条件を重ねる書き方を確認しましたね。Vue.jsでも同じ様に複数条件を重ねることができます。
条件を追加したものを確認してゆきましょう。

    <!-- 
      複数条件を重ねるにあたって、1つ目のv-ifの条件が変わっているニャ
      選択されたものがたった1つだったらという条件になっているニャ
     -->
    <p v-if="foods.length === 1">
      <!-- 1つだけだから、1つ目の配列の要素を取り出しているニャ -->
      好物は一つニャ！ 「{{ foods[0] }}」 ニャ！
    </p>
    <!-- 
      条件を重ねているニャ
      else-if文が用いられているニャ♪
      一つ前の条件で「選択されたものがたった1つだったら」となっているから1つよりも多い場合にこの条件に当てはまるニャ
     -->
    <p v-else-if="foods.length > 0">
      好物は 「{{ foods }}」 ニャ♪
    </p>    
    <p v-else>
      好物は選択されていない ニャ！
    </p>

v-ifで書いていたような条件を、v-else-ifに記載しているのが確認できますね。JavaScriptのif文同様、上から順番に条件がチェックされ、当てはまった時のみ実行されるという動きになっています。なので例えば条件を記載する順番を変更してしまうと、正しく動かなくなることを確認できますね。

    <!-- 
      v-ifとv-else-ifの条件が入れ替わっているニャ
      でもこれだと、v-else-ifの方は決して実行されないニャ～
      1は0よりも大きいからすべてがv-ifの条件に吸い込まれてしまうニャ
     -->
    <p v-if="foods.length > 0">
      <!-- <p v-if="foods.length > 1"> ←ただこういう条件の書き方をしていたら、この順番でも問題なく動作するニャ☆ -->
      好物は 「{{ foods }}」 ニャ♪
    </p>
    <p v-else-if="foods.length === 1">
      好物は一つニャ！ 「{{ foods[0] }}」 ニャ！
    </p>    
    <p v-else>
      好物は選択されていない ニャ！
    </p>

注意点も含めてJavaScriptのif文の時と同じなので、そちらで得た知識をそのまま活用できるのはありがたいですね。
次は、同じ様に要素の表示非表示の制御に用いることができるv-showを確認してゆきましょう。

v-ifに対してv-showはどう違うニャ？

v-ifを用いて要素の表示非表示を制御した場合、ブラウザでの確認で非表示になった要素は、そもそもHTML上存在しないものになります。
先程のサンプルコードで、v-if、v-else-if、v-elseのうち、例えばv-elseの条件に当てはまり、好物が未選択状態であるのならば、HTML上存在している要素は3つ目のv-elseが書いてあるp要素だけになるのです。
それ以外の、v-ifやv-else-ifが設定されているp要素は消えてしまいます。
下のHTMLは、ブラウザに表示した結果のものを抜粋しています。
確かにp要素はv-elseが適用されていたものだけになっているこを確認できますね。

<div id="app">
  <p>好物を選択するニャ（複数選択し放題ニャ！） 
    <label>
      <input type="checkbox" value="カリカリ">手堅いカリカリニャ 
    </label>
    <label>
      <input type="checkbox" value="猫缶">魅惑の猫缶ニャ 
    </label>
    <label>
      <input type="checkbox" value="おかか">フワフワおかかニャ 
    </label>
    <label>
      <input type="checkbox" value="ニボシ">まるっとニボシニャ 
    </label>
  </p>
  <p>好物は選択されていない ニャ！ </p>
</div>

実際「非表示にしたい要素をそもそもHTML上に用意しておきたくない」、という場合にこのv-ifは重宝します。ですが、例えば非表示はその言葉どおりで存在はしているけれど見えなくしておきたいだけというシーンもあるかと思います。その場合はv-showを用いることで実現可能です。ではv-showとv-ifがどういう動きになるのかを確認してゆきましょう。

    <!-- v-showが追加されているニャ -->
    <!-- 参考までに条件はv-ifのものと全く同じになっているニャ～ -->
    <p v-show="foods.length > 0">
      好物を選択してくれてありがとうございますニャヽ(=´▽`=)ﾉ
    </p>
    <p v-if="foods.length > 0">
      好物は 「{{ foods }}」 ニャ♪
    </p>
    <p v-else>
      好物は選択されていない ニャ！
    </p>

参考としてv-ifの条件と全く同じ条件でv-showのp要素が追加されているのを確認できますね。これをブラウザで確認してみると、何もチェックボックスを選択していない状態ですと、以下のようなHTMLになっていることを確認できます。

<div id="app">
  <p>好物を選択するニャ（複数選択し放題ニャ！） 
  <!-- 省略するニャ -->
  </p>
  <p style="display: none;">好物を選択してくれてありがとうございますニャヽ(=´▽`=)ﾉ </p>
  <p>好物は選択されていない ニャ！ </p>
</div>

v-ifで書いていた方の要素は、v-elseのp要素のみが存在していますが、v-showで書いていたp要素は、「style="display: none;"」が設けられている状態で存在していることを確認できますね。つまり、要素として存在しているけれど非表示になっているのですね。
存在していない要素はもう操作などはできませんが、存在している要素ならば、その要素の属性とかにアクセスしたりと、追加の制御とかも可能になるというのがポイントですね。

最後に

Vue.jsのv-ifの活用とv-showについて、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

1. v-ifもJavaScriptのif文と同様、条件を重ねたり、それ以外という記載が可能ニャ
   1. 条件に当てはまった要素だけが表示されているのを確認したニャ～
2. v-ifで条件を重ねる場合はその記載順も要注意ポイントニャ
   1. 上から順番に条件が評価されてゆくことを踏まえて記載してゆく必要があるニャ～
3. v-ifとv-showの違いを確認したニャ
   1. v-ifの場合は条件に合致しなかった場合はブラウザに表示されたHTMLの中にそもそも存在しないというのを確認したニャ
   2. v-showを利用すれば条件に当てはまらなかった場合でも、ブラウザに表示されたHTMLの中に存在していることを確認できたニャ。ただ非表示になっているだけだったニャ～

Vue.jsの7つ目の記事として、Vue.jsのv-ifの活用、及びv-showについて学びました。
見た目のフレームワークとしてVue.jsを学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
Vue.js導入に関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。