条件分岐とループ
v-ifで条件付きレンダリングを行い、v-forでリストを表示します
「条件分岐とループ」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。
条件付きレンダリング
Vueでは、データに応じてUIの一部を表示したり非表示にしたりできます。
- v-ifで要素を条件付きでレンダリングします
- v-else-ifとv-elseで条件を連結します
- v-showで表示状態を切り替えます
v-if
v-ifディレクティブは、式が真と評価された場合にのみ要素をレンダリングします。
<p v-if="isLoggedIn">Welcome back!</p>
<p v-if="cart.length === 0">Your cart is empty.</p>v-else-ifとv-else
v-else-ifとv-elseで条件を連結します。これらはv-ifの直後に記述する必要があります。
<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 80">Grade: B</p>
<p v-else-if="score >= 70">Grade: C</p>
<p v-else>Grade: F</p>v-show
v-showは要素を常にレンダリングしますが、CSSのdisplayプロパティを切り替えて表示・非表示を制御します。
<div v-show="isVisible">
This div stays in the DOM,
only display:none toggles.
</div>v-ifとv-showの違い
主な違いは次のとおりです。
- v-ifは要素をDOMから完全に追加・削除します
- v-showは要素をDOMに残したまま、displayだけを切り替えます
頻繁に切り替えるものにはv-showを使います。条件がほとんど変わらない場合や、要素の生成コストが高い場合はv-ifを使います。
配列に対するv-for
v-forディレクティブは、配列を反復処理してリストをレンダリングします。
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
<!-- data: fruits = ["Apple", "Banana", "Cherry"] -->インデックス付きのv-for
v-forでは、各項目のインデックスも取得できます。
<ul>
<li v-for="(item, index) in items">
{{ index }}: {{ item }}
</li>
</ul>:keyの重要性
v-forを使うときは、必ず一意な:keyを指定してください。
- Vueが各ノードの識別情報を追跡しやすくなります
- 効率的で正確なDOM更新が可能になります
- 項目の順序が変わる場合は、配列インデックスではなく、安定した一意のIDを使います
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>:keyが重要な理由
適切なkeyがないと、リストが変化したときにVueが誤った要素を再利用することがあります。
- フォーム入力が誤った値を保持する可能性があります
- アニメーションが乱れる可能性があります
- 状態が誤った行に紐付く可能性があります
安定した一意のkeyを使うことで、これらのバグを防げます。
オブジェクトに対するv-for
v-forでは、オブジェクトのプロパティ値を反復処理できます。必要に応じてキーとインデックスも取得できます。
<li v-for="(value, key) in userProfile" :key="key">
{{ key }}: {{ value }}
</li>
<!-- userProfile = { name: "Ada", age: 36 } -->v-forと条件分岐の組み合わせ
リストを絞り込むときは、v-forと同じ要素にv-ifを置くのではなく、算出プロパティを使うことをおすすめします。
<!-- Filter in a computed, then loop -->
<li v-for="task in activeTasks" :key="task.id">
{{ task.title }}
</li>
<!-- activeTasks is a computed that
returns only unfinished tasks -->理解度チェック
条件分岐とループについての理解度を確認しましょう。
まとめ：条件分岐とループ
リストと条件付きレンダリングについて学びました。
- v-if / v-else-if / v-elseで条件付きレンダリングを行います
- v-showは表示状態だけを切り替えます
- v-forで配列やオブジェクトを反復処理します
- 必ず一意な:keyを追加します
- 算出プロパティでリストを絞り込みます
次は、属性とクラスのバインディングについて学びます。
よくある質問
「条件分岐とループ」レッスンは無料ですか？
はい。「条件分岐とループ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。
「条件分岐とループ」で何を学びますか？
v-ifで条件付きレンダリングを行い、v-forでリストを表示します ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「条件分岐とループ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。