フォームとバリデーション

フォームは Web アプリケーションにおいて、ユーザーからの入力を受け取る基本的な手段です。SolidJS を使用した効果的なフォーム管理では、リアクティブな状態管理と組み合わせて、ユーザー入力のバリデーション、送信処理、フィードバック表示を行います。このセクションでは、SolidJS でフォームを扱う基本的な方法を具体例を通じて紹介します。

フォームの作成と状態管理

1. フォームコンポーネントの作成:
   フォームを含むコンポーネントを作成し、ユーザー名と年齢を入力する簡単なフォームを定義します。
   src/components/UserForm.jsを作成し、以下のコードを追加します。

   import { createSignal } from 'solid-js';
   
   function UserForm() {
     const [username, setUsername] = createSignal('');
     const [age, setAge] = createSignal('');
   
     const handleSubmit = (event) => {
       event.preventDefault(); // フォームのデフォルト送信動作を防止
       console.log(`Submitted: ${username()}, ${age()}`);
       // ここでバリデーションやAPI呼び出しを行う
     };
   
     return (
       <form onSubmit={handleSubmit}>
         <div>
           <label htmlFor='username'>Username:</label>
           <input
             id='username'
             value={username()}
             onInput={(e) => setUsername(e.target.value)}
           />
         </div>
         <div>
           <label htmlFor='age'>Age:</label>
           <input
             id='age'
             type='number'
             value={age()}
             onInput={(e) => setAge(e.target.value)}
           />
         </div>
         <button type='submit'>Submit</button>
       </form>
     );
   }
   
   export default UserForm;
   

   Copy to clipboard
   
   このフォームは、ユーザー名と年齢の入力フィールドを持ち、それぞれの入力をリアクティブなシグナルで管理します。handleSubmit関数はフォーム送信時に呼び出され、入力されたデータをコンソールにログ出力します。

バリデーションの追加

フォーム入力のバリデーションを追加して、ユーザーが適切なデータを入力していることを確認します。

1. バリデーション関数の定義:
   入力データのバリデーションロジックを追加します。例えば、ユーザー名が空でないこと、年齢が正の整数であることを確認する簡単なバリデーションを行います。

   function validateForm(username, age) {
     if (!username) {
       alert('Username is required');
       return false;
     }
     if (age <= 0) {
       alert('Age must be a positive number');
       return false;
     }
     return true;
   }
   

   Copy to clipboard
2. 送信処理にバリデーションを組み込む:
   handleSubmit関数内で、バリデーション関数を呼び出して入力データを検証します。

   const handleSubmit = (event) => {
     event.preventDefault();
     if (validateForm(username(), age())) {
       console.log(`Submitted: ${username()}, ${age()}`);
       // バリデーションが成功した場合の処理
     }
   };
   

   Copy to clipboard

ユーザーフィードバックの提供

フォームのバリデーション結果に基づいてユーザーにフィードバックを提供することは、良いユーザー体験を実現する上で重要です。

1. エラーメッセージの表示:
   バリデーションエラーをユーザーに伝えるために、エラーメッセージを表示するロジックを追加します。

   const [errorMessage, setErrorMessage] = createSignal('');
   
   function validateForm(username, age) {
     if (!username) {
       setErrorMessage('Username is required');
       return false;
     }
     if (age <= 0) {
       setErrorMessage('Age must be a positive number');
       return false;
     }
     setErrorMessage(''); // エラーがない場合はメッセージをクリア
     return true;
   }
   

   Copy to clipboard
   
   フォーム内でエラーメッセージを表示するために、以下のように HTML に追加します。

   {
     errorMessage() && <div class='error'>{errorMessage()}</div>;
   }
   

   Copy to clipboard