Vue 公式チュートリアル 〜 条件によって表示を変える
記事IT・テクノロジー
Vue 公式チュートリアル 〜 条件によって表示を変える
Vue 公式チュートリアルのステップ６は、Javascript の条件によって表示の内容を変える事を学習します。
前回までのポイントは？
前回までに、Vue の表示に使う「部品」になる、「*.vue」ファイルの基本の三つの部分、「template」、「script」、「style」の書き方を学習しました。そして、Javascript と HTML、HTML と CSS の連携についても少しづつ学習しています。
HTML、Javascript、CSS の基本の書き方は、それぞれの標準的な書き方に「近い」書き方です。しかし、実際には、「Vue 独特の書き方」があります。特に、HTML の細かい書き方は、微妙に違っています。そう考えると、初心者が混乱を避けるには、直接 Vue 独特の書き方をその都度学習するのは、意外に効果的かもしれません。
今回学ぶのは？
今回のステップ６の課題は、ボタンを押す度に表示する内容をプログラムで変えるやり方です。
これが今回の変更前の課題のコードです。
<script>
export default {
data() {
return {
awesome: true,
};
},
methods: {
toggle() {
// ...
},
},
};
</script>
<template>
<button ＠click="toggle">toggle</button>
<h1>Vue is awesome!</h1>
<h1>Oh no 😢</h1>
</template>
今回は、今まで学習した事で記述が書かれているので、特に新しい事は書かれていません。
簡単にポイントをまとめると
＊ 表示の基本の HTML は、ボタンを一つと、二つの文字列 「Vue is awesome!」と「Oh no 😢」を表示させています。
＊ プログラムの基本、Javascript は、変数「awesome」を作っています。この変数は、論理型（boolean）で、値は「true」を設定しています。
＊ プログラムの部分には、ボタンが押された場合の処理を行うメソッド（関数）を書いていますが、中身は実装されていません。
という内容です。ボタンが押された場合の処理が作られていないので、このコードでは、単に表示をしているだけです。
今回の課題は、ボタンが押された処理で、「awesome」の値を反転させます。つまり、「true の場合は、false」に、「false の場合は、true」にします。 この「awesome」の値によって、表示される内容を変えます。「awesome の値が true」の場合は、「Vue is awesome」を「awesome の値が false」の場合には、「Oh no 😢」を表示させます。
変更後のコードは？
変更は、二点です
＊ Javascript の部分の「toggle()」の中身の実装
＊ HTML の書き方の変更です
<script>
export default {
data() {
return {
awesome: true,
};
},
methods: {
toggle() {
this.awesome = !this.awesome;
},
},
};
</script>
<template>
<button ＠click="toggle">toggle</button>
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
</template>
「toggle()」の中身は、「awesome」の値を「逆」にする処理になるので、この処理を行う「!」の演算子を使います。
this.awesome = !this.awesome;
のような処理にします。これで、ボタンを押す度に、「awesome」の値が変わります。
条件によって表示を変えるには、「v-if」と「v-else」を使います。 この書き方も、「Vue 独特の書き方」です。
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
この書き方、「v-if="awesome"」では、「awesome」の値が真（true）の場合にこの記述が有効になって、それ以外、つまり、「awesome」の値が偽（false）の場合は、「v-else」の方が表示されるという書き方です。
標準の HTML では、この書き方はありません。
今回の応用は？
今回の応用は、少し簡単ですが簡単な変更をして見てください。
＊ 「awesome」をなくして、「japanese」という変数にしてください。（最初の値は、「false」にします）
＊ 「japanese」が「true」の場合には、「日本語」
＊ 「japanese」が「false」の場合には、「English」
＊ ボタンが押される度に、「japanese」の値を反転してください。
＊ 文字の表示には、「h1」のタグの代わりに「h3」を使って見てください。
＊ 「日本語」の文字は赤にします
＊ 「English」の文字は緑にします
どうですか？できそうですか？ 基本的な構成は同じなので、変更できるかと思います。 あとは、これまでの学習の復習を兼ねて文字に色をつけて見ました。
答えはこんな感じになります。
<script>
export default {
data() {
return {
japanese: false,
};
},
methods: {
toggle() {
this.japanese = !this.japanese;
},
},
};
</script>
<template>
<button ＠click="toggle">toggle</button>
<h3 v-if="japanese" class="color-red">日本語</h3>
<h3 v-else class="color-green">English</h3>
</template>
<style>
.color-red {
color: red;
}
.color-green {
color: green;
}
</style>
まとめ
今回は、Javascript のプログラムで決める「条件」（特定の変数の値）によって、表示内容を変えるやり方を学習しました。単純に HTML を書く場合に比べて「簡単」に表示の内容を変える事ができます。
もちろん、標準の HTML と Javascript の組み合わせでも実現できる機能ですが、Vue を使うと、より簡単で見やすい形で実現する事ができます。実際のアプリの開発では、Vue のようなフロントエンドのフレームワークを使って作る場合が多くなっています。つまり、実際に活用される方法を優先して学ぶことで、より短期間で Web 開発が出来るようになるやり方と言えます。
HTML や Javascript の基本は大切ですが、最初は使うものから覚えても良いのではと思います。
最初は、半信半疑の方も多いのではと思いますが、具体的な学習の進め方を見ると、意外に良いかもと思われる方も増えているのではと思っています。
次回は、2022 年 2 月 24 日にお届けします。お楽しみに！
