vue.js:入力フォームの共通化

Vue.js で開発を行う際に、入力フォームは様々な場面で利用されます。しかし、毎回同じような入力フォームのコードを書くのは面倒ですし、保守性も悪くなってしまいます。そこで、今回は Vue.js で入力フォームを共通化させたいと思います。

1. 共通入力フォームコンポーネントの作成

まず、/InputComponent.vue ファイルを作成し、共通入力フォームコンポーネントのコードを記述します。

InputComponent.vue

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  id: { type: String, required: true },
  label: { type: String, required: true },
  type: { type: String, default: "text" },
  modelValue: { type: [String, Number], default: "" },
  placeholder: { type: String, default: "" },
  error: { type: String, default: null },
});
</script>

<template>
  <div class="input-group">
    <label :for="props.id">{{ label }}</label>
    <input
      :id="props.id"
      :type="props.type"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
      :placeholder="props.placeholder"
      :class="['input-field', props.error ? 'error' : '']"
    />
    <span v-if="props.error" class="error-message">{{ props.error }}</span>
  </div>
</template>

<style scoped>
.input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.input-field {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input-field.error {
  border-color: red;
}

.error-message {
  color: red;
  font-size: 0.8rem;
}
</style>

解説:

• id プロパティ: 入力フィールドの ID を指定します
• label プロパティ: ラベルのテキストを指定します
• type プロパティ: 入力フィールドのタイプ (text, email, password など) を指定します
• modelValue プロパティ: 入力フィールドの値を双方向バインディングします
• placeholder プロパティ: プレースホルダーテキストを指定します
• error プロパティ: エラーメッセージを指定します
• @input イベント: 入力値が変更された際に、update:modelValue イベントを発行します

2. 共通入力フォームコンポーネントの利用

他のコンポーネントで InputComponent.vue を使用するには、以下のようにインポートして使用します。

<script setup>
import { ref } from 'vue';
import Input from './Input.vue';

const name = ref('');
const email = ref('');
const emailError = ref(null);

const submitForm = () => {
  // フォーム送信処理
  if (!validateEmail(email.value)) {
    emailError.value = '正しいメールアドレスを入力してください。';
  } 
};
</script>

<template>
  <div>
    <Input id="name" label="名前" v-model="name" placeholder="山田 太郎" />
    <Input id="email" label="メールアドレス" type="email" v-model="email" :error="emailError" />
    <button @click="submitForm">送信</button>
  </div>
</template>

解説:

• Input コンポーネントをインポートし、使用します
• v-model ディレクティブを使って、親コンポーネントのデータと入力値を双方向にバインディングします
• error プロパティを使って、エラーメッセージを表示します

3. まとめ

このように、共通入力フォームコンポーネントを作成することで、開発効率を向上させることができます。

• コードの重複を減らす
• 入力フォームのデザインを統一する
• 入力フォームの機能を拡張しやすくする