Vue公式チュートリアル 〜 条件によって表示を変える

• ホーム
• ブログ
• Firebase情報

Vue公式チュートリアル　

〜　条件によって表示を変える

2022年2月22日

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 日にお届けします。お楽しみに！

Copyright(c) 2017-2021 by Silicon Valley Super Ware, all rights reserved.