VueJS 速習チュートリアル

Vue フォーム

Vue は、レスポンシブな動作や バリデーション（Validation） といった付加機能を簡単に追加できるため、フォームにおける ユーザーエクスペリエンス（UX） を効率的に向上させることができます。

Vue でフォームを扱う際は、主に v-model ディレクティブを使用します。

1. Vue で作る最初のフォーム

Vue を使ってフォームを作成する流れを理解するために、シンプルな「ショッピングリスト」の例から始めてみましょう。

1.1 手順1：標準的な HTML フォーム要素の作成

まずは、通常の HTML でフォームの構造を記述します。

<form>
  <p>アイテムを追加</p>
  <p>アイテム名: <input type="text" required></p>
  <p>数量: <input type="number"></p>
  <button type="submit">追加する</button>
</form>

1.2 手順2：Vue インスタンスの作成と v-model の接続

現在のアイテム名、数量、およびショッピングリスト全体を保持する Vue インスタンス を作成します。そして v-model を使って、各 インプット（Input） 要素をデータに接続します。

<div id="app">
  <form>
    <p>アイテムを追加</p>
    <p>アイテム名: <input type="text" required v-model="itemName"></p>
    <p>数量: <input type="number" v-model="itemNumber"></p>
    <button type="submit">追加する</button>
  </form>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        itemName: null,
        itemNumber: null,
        shoppingList: [
          { name: 'トマト', number: 5 }
        ]
      }
    }
  })
  app.mount('#app')
</script>

1.3 手順3：アイテム追加メソッドの呼び出しと送信制御

フォーム送信時にブラウザがリロードされるデフォルトの挙動を防ぎつつ、アイテムを追加する メソッド（Method） を呼び出します。これには v-on:submit.prevent 修飾子を使用します。

<form v-on:submit.prevent="addItem">

1.4 手順4：メソッドの実装

リストにアイテムを追加し、入力フォームの内容をクリアするロジックを記述します。

methods: {
  addItem() {
    // 現在の入力値から新しいアイテムオブジェクトを作成
    let item = {
      name: this.itemName,
      number: this.itemNumber
    }
    // 配列に追加
    this.shoppingList.push(item);
    // 入力欄をリセット
    this.itemName = null
    this.itemNumber = null
  }
}

1.5 手順5：v-for によるリストの表示

フォームの下に、自動的に更新されるショッピングリストを v-for を使って表示します。

<p>ショッピングリスト:</p>
<ul>
  <li v-for="item in shoppingList">
    {{ item.name }}, {{ item.number }}個
  </li>
</ul>

2. 完成したコード例

以下は、これらすべての手順を統合した、Vue フォームの最終的なソースコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue フォームの基本</title>
</head>
<body>

<div id="app">
  <form v-on:submit.prevent="addItem">
    <p>アイテムを追加</p>
    <p>アイテム名: <input type="text" required v-model="itemName"></p>
    <p>数量: <input type="number" v-model="itemNumber"></p>
    <button type="submit">追加する</button>
  </form>

  <p>ショッピングリスト:</p>
  <ul>
    <li v-for="item in shoppingList">
      {{ item.name }}, {{ item.number }}個
    </li>
  </ul>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        itemName: null,
        itemNumber: null,
        shoppingList: [
          { name: 'トマト', number: 5 }
        ]
      }
    },
    methods: {
      addItem() {
        let item = {
          name: this.itemName,
          number: this.itemNumber
        }
        this.shoppingList.push(item)
        // 次の入力のためにフォームをクリア
        this.itemName = null
        this.itemNumber = null
      }
    }
  })
  app.mount('#app')
</script>

</body>
</html>

Vue の v-model を活用することで、複雑な データバインディング（Data Binding） のロジックを自分で書く必要がなくなり、宣言的にフォームの挙動を定義できるようになります。これにより、コードの可読性と保守性が大幅に向上します。