VueJS - バインディング：入門者のガイド

こんにちは、未来のVue.jsスーパースター！Vue.jsのバインディングの世界へのエキサイティングな旅にご案内できることを嬉しく思います。プログラミングを教えてきた年数を振り返ると、バインディングはVue.jsを非常に魅力的にする秘密のソースのようなものです。では、腕をまくって一緒に潜りましょう！

Vue.jsでのバインディングとは？

本題に入る前に、バインディングとは何かを理解しましょう。Vue.jsでのバインディングは、データとDOM（ドキュメントオブジェクトモデル）を結びつける方法です。JavaScriptコードと画面に表示されるものの間に魔法のようなリンクを作るようなものです。すごいでしょう？

HTMLクラスのバインディング

パーティーに着飾る時を想像してみてください。機会に応じて違う服装を選ぶと思いますよね？Vue.jsでのHTMLクラスのバインディングも同じように働きます。データに基づいて要素の外観を動的に変更することができます。

バインディングの基本

簡単な例から始めましょう：

<div id="app">
  <p :class="{ active: isActive }">私はアクティブですか？</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

この例では、isActiveデータプロパティに基づいて「active」クラスをパラグラフにバインドしています。isActiveがtrueの場合、パラグラフには「active」クラスが適用されます。falseの場合は適用されません。

複数のクラス

複数のクラスを同時にバインドしたい場合はどうでしょう？問題ありません！Vue.jsはそれをサポートしています：

<div id="app">
  <p :class="{ active: isActive, 'text-danger': hasError }">
    複数のクラスバインディング
  </p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    hasError: false
  }
})
</script>

ここでは、2つのクラス、「active」と「text-danger」をバインドしています。パラグラフには「active」クラスが適用されますが、「text-danger」クラスはhasErrorがtrueに変更されるまで適用されません。

配列構文

配列を使ってクラスをバインドすることもできます。まるでクラスのWARDROBEを自由に選べるようなものです：

<div id="app">
  <p :class="[activeClass, errorClass]">配列構文はすごい！</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

この場合、パラグラフには「active」と「text-danger」の両方のクラスが適用されます。

インラインスタイルのバインディング

では、インラインスタイルについて話しましょう。まるで要素に即座にメイクオーバーを施すようなものです！

オブジェクト構文

インラインスタイルをオブジェクトを使ってバインドできます：

<div id="app">
  <p :style="{ color: textColor, fontSize: fontSize + 'px' }">
    スタイリングしてね！
  </p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    textColor: 'red',
    fontSize: 20
  }
})
</script>

これにより、色が赤に設定され、フォントサイズが20pxになります。スタイルプロパティにはキャメルケース（fontSize）やケバブケース（font-size）のどちらも使用できます。

配列構文

スタイルオブジェクトの配列を使うこともできます：

<div id="app">
  <p :style="[baseStyles, overridingStyles]">スタイルの配列</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'blue',
      fontSize: '20px'
    },
    overridingStyles: {
      fontWeight: 'bold'
    }
  }
})
</script>

これにより、複数のスタイルオブジェクトを適用でき、配列の後ろのオブジェクトが先頭のオブジェクトを上書きします。

フォーム入力のバインディング

フォーム入力のバインディングはVue.jsの真骨頂です。まるでフォーム入力とデータの間に直通電話線があるようなものです！

テキスト入力

まずは簡単なテキスト入力から始めましょう：

<div id="app">
  <input v-model="message" placeholder="編集してね">
  <p>メッセージは：{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: ''
  }
})
</script>

v-modelディレクティブは、入力とmessageデータプロパティの双方向バインディングを作成します。入力に変更が加わるとすぐにmessageが更新され、その逆も然りです。

チェックボックス

チェックボックスは小さなオン/オフスイッチのようなものです。以下にバインディングの方法を示します：

<div id="app">
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    checked: false
  }
})
</script>

checkedプロパティは、チェックボックスがチェックされている場合にtrue、チェックされていない場合にfalseになります。

ラジオボタン

ラジオボタンは択一式の質問のようなものです。一度に一つしか選択できません：

<div id="app">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>選択：{{ picked }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    picked: ''
  }
})
</script>

pickedプロパティは、選択されたラジオボタンの値に設定されます。

セレクトドロップダウン

最後に、セレクトドロップダウンを見てみましょう：

<div id="app">
  <select v-model="selected">
    <option disabled value="">一つを選んでください</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>選択：{{ selected }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    selected: ''
  }
})
</script>

selectedプロパティは、選択されたオプションの値に設定されます。

バインディングメソッドのまとめ

ここで説明したバインディングメソッドの簡単な参照表を示します：

バインディングタイプ	構文	説明
クラス（オブジェクト）	:class="{ className: condition }"	条件に基づいてクラスを適用
クラス（配列）	:class="[class1, class2]"	複数のクラスを適用
スタイル（オブジェクト）	:style="{ property: value }"	インラインスタイルを適用
スタイル（配列）	:style="[styleObject1, styleObject2]"	複数のスタイルオブジェクトを適用
フォーム入力	v-model="dataProperty"	フォーム入力の双方向バインディング

以上でVue.jsのバインディングの初歩を学びました。練習が成功の鍵ですので、これらの概念を試してみてください。それを続けることで、すぐにプロのようにデータをバインドできるようになります！ハッピーコーディング！

Credits: Image by storyset