【第2回:後編】Vue.js 入門 〜ディレクティブ編〜
2019.11.25
ディレクティブ 後編
宮田(株) ライトコードでWebエンジニアをやっている宮田です！
前編では、v-bind、v-model、v-on ディレクティブを使って、どんなことができるのか見てきました。
今回も、引き続き、ディレクティブを使ったプログラムをみていきましょう！
前回の記事はこちら
v-ifディレクティブ
v-if ディレクティブを利用すると、条件分岐によって、簡単に要素の有無の切り替えをすることができます。
もちろん、if文による条件分岐なので、 v-if に対応する 「v-else-if」「v-else」ディレクティブもあります！
使用例
例として、会員の種類別にユーザーへ出すメッセージを分けたい場合を考えてみます。
種類は「プレミアム会員」「一般会員」「非会員」の3種類とします。
会員判定用に isMember 、ランク判定用に isPremier というプロパティを用意しました。
会員ではないのにランク判定の値が、 true のパターンは例外として、「不正なユーザーです。」と表示します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <body> <div id="app-4"> <h2>会員ランク</h2> <p v-if="isMember && isPremier">あなたはプレミアム会員です。</p> <p v-else-if="isMember && !isPremier">あなたは一般会員です。</p> <p v-else-if="!isPremier">あなたは会員ではありません。</p> <p v-else>不正なユーザーです。</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app4 = new Vue ({ el: '#app-4', data: { isMember: true, isPremier: false, } }) </script> </body> |
確認
上記コードを実行すると、下の画像のように一般会員用のメッセージが表示されました！
また、 isMember 、 isPremier の値を変えて、表示の変更を確認してみてください。
注意点
- v-else-if・v-elseディレクティブは、v-if または、v-else-if 要素の直後に記述する必要があります。
v-showディレクティブ
v-showディレクティブを利用すると、値の真偽値によって、要素の表示の切り替えをすることができます。
先ほどの、v-if と機能的には同じように思えますね。
ですが、この2つのディレクティブには、非表示の仕組みに違いがあります。
v-if と v-show の違い
まず、v-if での非表示の場合、 DOM上から削除されるために表示されない状態です。
対して、v-show での非表示は、style属性の display: none; を追加することによって表示と非表示を切り替えているだけなので、DOM上には常に存在している状態です。
実際に、どちらも非表示にして、ディベロッパーツールで確認してみましょう！
- 表示判定用に isVisible というプロパティを用意
- 値を false に設定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <body> <div id="app-5"> <!-- TODO: ここに非表示にするエレメントを記述 --> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app5 = new Vue ({ el: '#app-5', data: { isVisible: false } }) </script> </body> |
v-if
1 | <p v-if="isVisible">見えていますか？</p> |
実行時のディベロッパーツールの表示は、こちらです。
p要素のエレメントがDOM上から消えていることが確認できますね。
v-show
1 | <p v-show="isVisible">見えていますか？</p> |
実行時のディベロッパーツールの表示はこちらです。
p要素に style 属性が追加され、 isVisible プロパティの値によって、非表示になっていることがわかります。
エレメントは、常時描画されており、DOM上に保持されていますね。
非表示時の仕組みが違うだけで、実際に画面の表示上は両方とも変わらないためどちらを使ってもいいように思いませんか？
しかし、v-showには DOM上に存在するからこそのメリットがあるんです！
使用例
例えば、表示を頻繁に切り替える必要のあるエレメントを考えてみましょう。
v-if の場合、表示・非表示を切り替えるたびにエレメントの追加・削除を行う処理が生じます。
その結果、表示にかかるコストが高くなってしまうのです。
対して v-show なら style 属性の追加・削除だけで済むため、結果的に切り替えの際の表示コストが低いです。
- 表示の切り替え頻度が多い場合は、v-show
- 表示の切り替え頻度が少ない場合は、v-if
というように、うまく使い分けるようにしましょう！
注意点
v-if と違って、v-show は「v-else-if」や「v-else」とは対応していません。
そのため、else を使って要素を出し分けたい場合などは、 v-if を使用しましょう。
v-for
v-forディレクティブを利用すると、配列に基づいた要素のリストレンダリングをすることができます。
使用するときは、 変数名 in 配列名 という形式の構文で記述します。
また、配列の index を利用したい場合は、 (変数名, index) in 配列名 と記述することで任意の2つ目の引数として利用することができます。
もちろん、配列だけでなく、オブジェクトに対しても使用できます。
使用例
foods という配列のプロパティの中身を展開して、リストとして表示してみたいと思います。
配列内には、それぞれ id と name というキーを持ったオブジェクトが入ります。
変数名は、 food とすることにして、記法に則って food in foods としましょう。
v-for を指定しているのと同じエレメントに :key 属性（ v-bind:key）も指定してありますね。
key は、 Vue がデータを追跡するために必要で、パフォーマンスの向上にもつながります。
key の値は一意(ユニーク)である必要があるため、今回は食べ物オブジェクトの id を key として設定しました。
1 | <li v-for="food in foods" :key="food.id"> |
下記コードを実行してみましょう！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <body> <div id="app-6"> <h2>食べたいものリスト</h2> <ul> <li v-for="food in foods" :key="food.id"> {{ food.name }} </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app6 = new Vue ({ el: '#app-6', data: { foods: [ { id: 1, name: 'ハンバーグ' }, { id: 2, name: '焼肉' }, { id: 3, name: 'ステーキ' }, { id: 4, name: 'すき焼き' } ] } }) </script> </body> |
確認
foods 配列の中の name の値が順番にリスト形式で表示されました！
注意点 その1
v-for を使用する場合は、v-bindでの key プロパティの指定が必須とされています。
ちなみに、key を指定しない場合、配列の index が key の値に使用されます。
しかし、基本的には、配列の index は key として使用すべきではないようです。
理由は、配列内の要素の追加・削除や順序の変更が行われるとき、indexの値も変化してしまうためです。
先ほど、少し書きましたが、key の値は一意であり、key の値を元に Vue はデータを追跡します。
index の値を key に設定していると、配列内の要素の追加・削除や順序の変更によって key が振り直されてしまいます。
その結果、Vue はデータの変更を追跡できなくなってしまうため、予期せぬ動作を引き起こす可能性があります。
key には、一意かつ、変更が生じない値を設定するようにしましょう！
注意点 その2
v-for と v-if を同じ要素に使用するのは非推奨とされています。
仮に同じ要素で使用した場合は、優先度は v-for の方が高いため先に評価されます。
もし、v-for でレンダリングしている全ての要素に v-if で処理を行いたい場合は、v-for を設定している要素の親要素に v-if を追加することで解決します。
1 2 3 4 5 | <ul v-if="isVisible"> <li v-for="food in foods" :key="food.id"> {{ food.name }} </li> </ul> |
また、要素をフィルタリングして v-if で出し分けたいという場合は、 Computed プロパティを利用して filter関数を定義するという形で解決することができます。
あくまで一例ですが、以下のような感じです。
1 2 3 4 5 | <ul> <li v-for="food in visibleFoods" :key="food.id"> {{ food.name }} </li> </ul> |
1 2 3 4 5 6 7 | computed: { visibleFoods: function () { return this.foods.filter(function (food) { return food.isVisible }) } } |
v-once
v-onceディレクティブを利用すると、Vue によるレンダリングを一度だけ行うようにすることができます。
そのため、初回表示以降に値の変更があっても表示は変更されなくなります。
使用例
分かりやすいように前回の v-onディレクトリの例で使用したカウンターのプログラムを書き換えてみましょう！
下記のように、カウント回数を表示しているp要素に v-once を追加しました。
1 | <p v-once>{{ count }} 回クリックされました！</p> |
すると <body> 内は以下のようなコードになりました。
実行してみましょう！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <body> <div id="app-7"> <p v-once>{{ count }} 回クリックされました！</p> <button v-on:click="counter">押してね</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app7 = new Vue ({ el: '#app-7', data: { count: 0 }, methods: { counter: function(){ this.count++ } } }) </script> </body> |
確認
ボタンを何度押しても 「0 回クリックされました！」 のまま表示が変わらなくなっていますね。
最後に
第2回は前編・後編に分けて、Vue.js の主要なディレクトリと使い方についてみてきました。
なんだか少しずつですが Vue が書けるような気がしてきたのではないでしょうか？
次回からは、Vueインスタンスのオプションについてみていきたいと思います！
関連記事
ライトコードよりお知らせ
にゃんこ師匠
ミツオカにゃんこ師匠ミツオカにゃんこ師匠ミツオカ一緒に働いてくれる仲間を募集しております！
ライトコードでは、仲間を募集しております！
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中！だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております！
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
ライトコードでは一緒に働いていただける方を募集しております！
採用情報はこちら書いた人はこんな人
IT技術2019.12.05【第3回】Vue.js 入門 〜オプション編〜- IT技術2019.11.25【第2回:後編】Vue.js 入門 〜ディレクティブ編〜
- IT技術2019.11.18【第2回:前編】Vue.js 入門 〜ディレクティブ編〜
- IT技術2019.11.11【第1回】Vue.js 入門 〜Hello World編〜
関連記事
採用情報
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界はお前の手の中に・・・ /
モバイルエンジニア
\ サービスの守り神！ /
インフラエンジニア
\ センスで挑め！ /
UI/UXデザイナー
\ 世界を震撼させろ！ /
WEB開発ディレクター
\ 妄想野郎カモン！ /
ゲームプランナー
\ ゲーム好き集合ー！ /
ゲームエンジニア
