今回はVue.jsを使ってフォーム入力とそのバリデーション（入力確認）の実装方法について解説します。Vue.jsは使いやすく、初心者でも扱いやすいフレームワークですので、ぜひ手を動かしてみてください。

Vue.jsとは？

Vue.jsは、ユーザーインターフェースを作成するためのJavaScriptフレームワークです。コンポーネント指向で、簡単に動的なアプリケーションを開発できるのが特徴です。フォーム入力やバリデーションも簡単に実装できるので、学ぶ価値があります。

フォームの基本的な作り方

まずは、基本的なフォームを作成してみましょう。次のコードを見てください。

 

  

    ユーザー名:
    
    {{ errors.username }}
    
    メールアドレス:
    
    {{ errors.email }}
    
    送信
  

このコードでは、ユーザー名とメールアドレスの入力フィールドを作成しています。`v-model`を使うことで、フォームの入力値をVueのデータにバインドしています。

フォームデータの管理

次に、Vueインスタンスでデータを管理する方法を見てみましょう。

 
new Vue({
  el: '#app',
  data: {
    username: '',
    email: '',
    errors: {}
  },
  methods: {
    submitForm() {
      this.errors = {};
      if (!this.username) {
        this.errors.username = 'ユーザー名を入力してください。';
      }
      if (!this.email) {
        this.errors.email = 'メールアドレスを入力してください。';
      } else if (!this.validEmail(this.email)) {
        this.errors.email = '正しいメールアドレスを入力してください。';
      }
      
      if (Object.keys(this.errors).length === 0) {
        alert('フォームが送信されました！');
      }
    },
    validEmail(email) {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return re.test(String(email).toLowerCase());
    }
  }
});

ここでは、`username`や`email`などのデータを管理し、`submitForm`メソッドでバリデーションを行っています。メールアドレスのバリデーションには正規表現を使っていますので、正しい形式であるかどうかをチェックできます。

バリデーションメッセージの表示

エラーメッセージを表示するために、`v-if`を使って条件に応じて表示しています。これで、ユーザーが間違った入力をした場合に、すぐにフィードバックをもらうことができます。