Reactで動的にフォームフィールドを追加・削除する方法を完全解説

Reactを使うことで、ユーザーインターフェースの柔軟性が飛躍的に向上します。その中でも、動的なフォームフィールドの操作は、ユーザー体験を向上させる重要な技術の一つです。本記事では、Reactを使用して動的にフォームフィールドを追加したり削除したりする方法を、基本から応用例まで段階的に解説します。フォームの柔軟性を高めることで、ユーザーにとって使いやすいインターフェースを構築できるようになります。初心者から中級者まで、すぐに実践できる内容を網羅していますので、ぜひ参考にしてください。

Reactフォームの基礎知識

Reactでフォームを操作する際の基本的な考え方を理解することは、動的フォームの実装を成功させるための第一歩です。フォームは、ユーザーからの入力データを受け取り、それを管理する役割を果たします。Reactでは、フォームデータを状態（state）として管理するのが一般的です。

状態とフォーム

Reactでは、フォーム要素（例: <input>や<textarea>）の値を状態にバインドし、双方向でデータを同期します。この方法を制御されたコンポーネントと呼びます。

以下は、基本的な制御されたフォームの例です：

import React, { useState } from 'react';

function BasicForm() {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <form>
      <label>
        名前:
        <input type="text" value={inputValue} onChange={handleChange} />
      </label>
    </form>
  );
}

export default BasicForm;

この例では、useStateフックを使ってフォームの値をリアルタイムに状態として管理しています。

非制御コンポーネント

もう一つの方法は、非制御コンポーネントを使用することです。この方法では、状態を使わずに、直接DOMから値を取得します。refを使用してフォーム要素を参照します。

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`入力値: ${inputRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名前:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">送信</button>
    </form>
  );
}

export default UncontrolledForm;

制御と非制御の選択

制御コンポーネントは、状態管理が必要な場合や複雑な操作が必要な場合に適しています。
非制御コンポーネントは、シンプルなフォームや一時的なデータ取得に向いています。

これらの基礎を理解することで、動的フォームを作成する際の土台を築くことができます。

状態管理を使ったフォームフィールドの操作

動的なフォームフィールドを操作するには、Reactの状態管理を活用することが重要です。useStateフックを使用してフォームフィールドの状態を管理し、追加や削除の操作を実現します。

基本的な状態管理の考え方

フォームのフィールドは、配列として状態で管理するのが一般的です。以下は、状態として管理する基本的な例です：

import React, { useState } from 'react';

function DynamicForm() {
  const [fields, setFields] = useState([{ value: "" }]);

  const handleChange = (index, event) => {
    const newFields = [...fields];
    newFields[index].value = event.target.value;
    setFields(newFields);
  };

  const handleAddField = () => {
    setFields([...fields, { value: "" }]);
  };

  const handleRemoveField = (index) => {
    const newFields = fields.filter((_, i) => i !== index);
    setFields(newFields);
  };

  return (
    <div>
      {fields.map((field, index) => (
        <div key={index}>
          <input
            type="text"
            value={field.value}
            onChange={(e) => handleChange(index, e)}
          />
          <button type="button" onClick={() => handleRemoveField(index)}>
            削除
          </button>
        </div>
      ))}
      <button type="button" onClick={handleAddField}>
        フィールドを追加
      </button>
    </div>
  );
}

export default DynamicForm;

コード解説

状態の定義
fieldsはフォームフィールドを表す配列として定義されています。各フィールドはオブジェクトで管理され、初期値として[{ value: "" }]を設定しています。
値の変更
handleChange関数は特定のフィールドの値を更新します。配列をコピーし、変更箇所だけ更新してからsetFieldsで状態を更新します。
フィールドの追加
handleAddField関数では、新しいフィールドを配列に追加します。spread演算子を使用して既存の配列を展開し、末尾に新しいフィールドオブジェクトを追加します。
フィールドの削除
handleRemoveField関数では、指定されたインデックスを除外した配列を作成します。filterメソッドを使用して不要なフィールドを取り除き、setFieldsで更新します。

この実装のメリット

簡潔で直感的なコード
状態を一元管理することで、変更や追加が柔軟に対応可能
Reactの再レンダリングに適応した動作

この基本形を基にして、より高度な動的フォームを構築していきます。

動的なフォームフィールドの追加方法

動的にフォームフィールドを追加することで、ユーザーの入力ニーズに応じた柔軟なUIを提供できます。Reactでは、useStateを利用して新しいフィールドを簡単に追加することができます。

動的追加の基本的な実装

フォームフィールドを追加する際には、状態として管理している配列に新しいフィールドオブジェクトを追加します。以下はその実装例です：

import React, { useState } from 'react';

function AddDynamicFields() {
  const [fields, setFields] = useState([{ value: "" }]);

  const handleAddField = () => {
    setFields([...fields, { value: "" }]);
  };

  const handleChange = (index, event) => {
    const newFields = [...fields];
    newFields[index].value = event.target.value;
    setFields(newFields);
  };

  return (
    <div>
      <h2>動的フィールド追加デモ</h2>
      {fields.map((field, index) => (
        <div key={index}>
          <input
            type="text"
            value={field.value}
            onChange={(e) => handleChange(index, e)}
            placeholder={`フィールド ${index + 1}`}
          />
        </div>
      ))}
      <button type="button" onClick={handleAddField}>
        フィールドを追加
      </button>
    </div>
  );
}

export default AddDynamicFields;

コード解説

新しいフィールドの追加

handleAddField関数は、現在のfields配列を展開し、新しいオブジェクト{ value: "" }を追加します。
この操作により、新しい入力フィールドが状態に追加され、UIが再レンダリングされます。

フィールド値の管理

各入力フィールドは、状態として管理されるfields配列の要素にリンクされています。
handleChange関数を使って、特定のフィールドの値をリアルタイムで更新します。

動的生成された要素のレンダリング

fields.mapを使用して、状態内の各フィールドを動的にレンダリングします。key属性にインデックスを使用することでReactの仮想DOMを最適化しています。

改良ポイント

プレースホルダーやラベルをフィールドに追加することで、ユーザーが何を入力すればよいかを明確にします。
新しく追加されるフィールドに固有のIDを割り振ることで、管理しやすくします。

活用例

この手法は、以下のようなケースで役立ちます：

アンケートフォームの質問項目の動的生成
Eコマースサイトで購入商品のオプション項目を追加
チームメンバーの名前や役割の入力

この実装により、フォームフィールドをリアルタイムで追加できる柔軟なフォームを作成する準備が整いました。

フォームフィールドの削除処理

動的フォームでは、不要になったフィールドを削除する機能も必要です。Reactでは、状態管理を活用することで、特定のフィールドを簡単に削除できます。

フォームフィールド削除の基本的な実装

状態として管理している配列から、削除対象のフィールドを除外します。以下はその実装例です：

import React, { useState } from 'react';

function RemoveDynamicFields() {
  const [fields, setFields] = useState([{ value: "" }, { value: "" }]);

  const handleRemoveField = (index) => {
    const newFields = fields.filter((_, i) => i !== index);
    setFields(newFields);
  };

  const handleChange = (index, event) => {
    const newFields = [...fields];
    newFields[index].value = event.target.value;
    setFields(newFields);
  };

  return (
    <div>
      <h2>動的フィールド削除デモ</h2>
      {fields.map((field, index) => (
        <div key={index}>
          <input
            type="text"
            value={field.value}
            onChange={(e) => handleChange(index, e)}
            placeholder={`フィールド ${index + 1}`}
          />
          <button type="button" onClick={() => handleRemoveField(index)}>
            削除
          </button>
        </div>
      ))}
    </div>
  );
}

export default RemoveDynamicFields;

コード解説

削除ロジックの実装

handleRemoveField関数では、filterメソッドを使用して削除対象以外の要素で新しい配列を生成します。
インデックスiが削除対象のインデックスindexと一致しない要素だけを新しい配列に含めています。

状態の更新

setFieldsを使用して新しい配列を状態として設定することで、Reactが自動的にUIを再レンダリングします。

動的レンダリング

フィールドが削除されると、fields配列の要素が減り、それに応じてUIも自動的に更新されます。

削除ボタンのデザイン改善

ユーザーが削除操作を誤らないように、削除ボタンのデザインや配置を工夫できます。たとえば：

削除ボタンを目立たせるための色分け（例: 赤色）
削除前に確認ダイアログを表示

以下のコードは削除確認機能を追加した例です：

const handleRemoveField = (index) => {
  if (window.confirm("このフィールドを削除しますか？")) {
    const newFields = fields.filter((_, i) => i !== index);
    setFields(newFields);
  }
};

応用例

この機能は、以下のような場面で有用です：

購入フォームで追加商品の削除
チームメンバー情報の削除
可変長リストの不要な項目削除

動的フォームの削除機能を実装することで、フォームの柔軟性をさらに向上させ、ユーザーエクスペリエンスを改善できます。

動的フォームの最適なレイアウトの設計

動的フォームを作成する際、レイアウトの設計はユーザー体験に大きな影響を与えます。わかりやすく、使いやすいレイアウトを構築することで、操作性が向上し、複雑なフォームでもストレスなく利用できます。

レイアウト設計の基本原則

一貫性

フィールドの位置やデザインを統一して、視覚的な一貫性を保つ。
追加・削除ボタンの配置は一貫性を持たせ、ユーザーが迷わないようにする。

見やすさ

ラベルやプレースホルダーを適切に配置し、各フィールドの用途を明確にする。
スペースを適切に取ることで、視覚的な混雑を防ぐ。

操作性

フォームが長くなる場合は、グループ化やセクション分けを行い、スクロールの負担を減らす。
動的に追加されたフィールドがすぐに視認できるようにする。

グループ化の重要性

フィールドが多くなる場合、カテゴリごとにグループ化することで見やすさが向上します。以下はその実装例です：

import React, { useState } from 'react';

function GroupedDynamicForm() {
  const [fields, setFields] = useState([{ group: "個人情報", value: "" }]);

  const handleAddField = () => {
    setFields([...fields, { group: "個人情報", value: "" }]);
  };

  const handleChange = (index, event) => {
    const newFields = [...fields];
    newFields[index].value = event.target.value;
    setFields(newFields);
  };

  return (
    <div>
      <h2>動的フォーム（グループ化）</h2>
      <fieldset>
        <legend>個人情報</legend>
        {fields
          .filter((field) => field.group === "個人情報")
          .map((field, index) => (
            <div key={index}>
              <input
                type="text"
                value={field.value}
                onChange={(e) => handleChange(index, e)}
                placeholder="名前を入力"
              />
            </div>
          ))}
      </fieldset>
      <button type="button" onClick={handleAddField}>
        フィールドを追加
      </button>
    </div>
  );
}

export default GroupedDynamicForm;

コード解説

グループ化の利用

フィールドをカテゴリ（例: group）で分類し、filterを使用してグループごとにレンダリングします。
<fieldset>タグと<legend>タグを使用して、視覚的にセクションを分けています。

動的な追加にも対応

追加されたフィールドが適切なグループに分類され、正しいセクションに表示されるように設計されています。

レイアウトデザインの工夫

レスポンシブデザイン
CSSグリッドやフレックスボックスを利用して、デバイスの画面サイズに応じてフィールドが適切に配置されるようにします。
動的フィードバック
新しく追加されたフィールドをアニメーションで表示することで、ユーザーが追加されたことに気づきやすくします。

応用例

動的フォームの最適化は以下のシナリオで効果的です：

顧客情報の入力フォーム（住所、連絡先などをグループ化）
チーム情報管理（メンバー情報を部門ごとに分類）
商品オプションフォーム（カテゴリごとの詳細設定）

最適なレイアウトを設計することで、ユーザーにとって直感的で効率的なフォーム体験を提供できるようになります。

バリデーションの実装方法

フォームに入力されたデータが正しいかどうかを確認するバリデーションは、動的フォームでも不可欠です。Reactでは、手動での実装やバリデーションライブラリを活用して、効率的かつ柔軟なバリデーションを実現できます。

基本的なバリデーションの実装

動的フォームの各フィールドに対してバリデーションを設定するには、状態管理を活用します。以下は基本的な例です：

import React, { useState } from 'react';

function DynamicFormWithValidation() {
  const [fields, setFields] = useState([{ value: "", error: "" }]);

  const handleAddField = () => {
    setFields([...fields, { value: "", error: "" }]);
  };

  const handleChange = (index, event) => {
    const newFields = [...fields];
    newFields[index].value = event.target.value;

    // バリデーションチェック
    if (event.target.value.trim() === "") {
      newFields[index].error = "このフィールドは必須です";
    } else {
      newFields[index].error = "";
    }

    setFields(newFields);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const isValid = fields.every((field) => field.error === "" && field.value !== "");
    if (!isValid) {
      alert("全てのフィールドを正しく入力してください");
    } else {
      alert("フォームを送信しました！");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>動的フォームのバリデーション</h2>
      {fields.map((field, index) => (
        <div key={index}>
          <input
            type="text"
            value={field.value}
            onChange={(e) => handleChange(index, e)}
            placeholder={`フィールド ${index + 1}`}
          />
          {field.error && <p style={{ color: "red" }}>{field.error}</p>}
        </div>
      ))}
      <button type="button" onClick={handleAddField}>
        フィールドを追加
      </button>
      <button type="submit">送信</button>
    </form>
  );
}

export default DynamicFormWithValidation;

コード解説

バリデーションロジックの追加

handleChange内で、値が空の場合にエラーメッセージを設定します。
エラーメッセージを表示することで、どのフィールドが無効かをユーザーに知らせます。

状態の拡張

各フィールドにerrorプロパティを追加し、バリデーション結果を格納します。

送信時のチェック

handleSubmitで全フィールドを検証し、バリデーションを通過した場合のみフォームを送信します。

バリデーションライブラリの活用

複雑なバリデーションを簡単に実装するには、React Hook FormやFormikなどのライブラリを活用できます。以下はReact Hook Formの簡単な例です：

npm install react-hook-form

import React from "react";
import { useForm, useFieldArray } from "react-hook-form";

function HookFormExample() {
  const { register, handleSubmit, control, formState: { errors } } = useForm();
  const { fields, append, remove } = useFieldArray({
    control,
    name: "dynamicFields",
  });

  const onSubmit = (data) => {
    console.log("送信データ:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h2>React Hook Formで動的フォーム</h2>
      {fields.map((item, index) => (
        <div key={item.id}>
          <input
            {...register(`dynamicFields.${index}.value`, { required: "このフィールドは必須です" })}
            placeholder={`フィールド ${index + 1}`}
          />
          {errors.dynamicFields?.[index]?.value && (
            <p style={{ color: "red" }}>{errors.dynamicFields[index].value.message}</p>
          )}
          <button type="button" onClick={() => remove(index)}>
            削除
          </button>
        </div>
      ))}
      <button type="button" onClick={() => append({ value: "" })}>
        フィールドを追加
      </button>
      <button type="submit">送信</button>
    </form>
  );
}

export default HookFormExample;

応用例

必須入力チェック（例: 名前やメールアドレス）
数値や日付の形式チェック
複数条件の複合バリデーション

ポイント

必須入力だけでなく、フォーマットや長さの制限なども組み込むと、より堅牢なフォームになります。
ライブラリを活用すると、より少ないコードで高度なバリデーションを実装できます。

バリデーションを導入することで、入力ミスを減らし、信頼性の高いフォームを作成できます。

React Hook Formを使った簡略化

動的フォームの構築と管理を効率化するには、React Hook Formの利用が有効です。このライブラリは、フォームの状態管理とバリデーションを簡略化し、コード量を大幅に削減します。

React Hook Formの基本

React Hook Formは、Reactのフックを活用してフォーム管理を最適化するライブラリです。主な特徴は以下の通りです：

簡単なセットアップ
状態管理をReactの内部で処理（useFormフック）
バリデーションが内蔵されており、手動での実装が不要

セットアップ手順

ライブラリのインストール
React Hook Formをインストールします。

   npm install react-hook-form

基本的な動的フォームの実装
以下は、React Hook Formを使った動的フォームの例です：

   import React from "react";
   import { useForm, useFieldArray } from "react-hook-form";

   function DynamicFormWithReactHookForm() {
     const { register, handleSubmit, control, formState: { errors } } = useForm();
     const { fields, append, remove } = useFieldArray({
       control,
       name: "dynamicFields",
     });

     const onSubmit = (data) => {
       console.log("送信されたデータ:", data);
     };

     return (
       <form onSubmit={handleSubmit(onSubmit)}>
         <h2>React Hook Formで動的フォームを簡略化</h2>
         {fields.map((field, index) => (
           <div key={field.id}>
             <input
               {...register(`dynamicFields.${index}.value`, { required: "このフィールドは必須です" })}
               placeholder={`フィールド ${index + 1}`}
             />
             {errors.dynamicFields?.[index]?.value && (
               <p style={{ color: "red" }}>{errors.dynamicFields[index].value.message}</p>
             )}
             <button type="button" onClick={() => remove(index)}>
               削除
             </button>
           </div>
         ))}
         <button type="button" onClick={() => append({ value: "" })}>
           フィールドを追加
         </button>
         <button type="submit">送信</button>
       </form>
     );
   }

   export default DynamicFormWithReactHookForm;

コード解説

useFormとuseFieldArray

useFormでフォーム全体の状態を管理します。
useFieldArrayで動的なフィールドの追加・削除を効率的に行えます。

appendとremove

append: 新しいフィールドを追加します。
remove: 指定したインデックスのフィールドを削除します。

バリデーション

バリデーションルールをregister関数に渡すだけで簡単に実装可能です。
例えば、requiredを指定することで必須項目のチェックが行われます。

エラーメッセージの表示

バリデーションエラーが発生した場合、errorsオブジェクトにエラー情報が格納されます。これを利用して適切なエラーメッセージを表示します。

利点と応用例

利点

状態管理が自動化され、コードの複雑さを軽減。
柔軟性が高く、大規模なフォームでも効率的に管理可能。
高速なレンダリングでパフォーマンスが向上。

応用例

顧客情報の収集フォーム（住所や連絡先の追加）
アンケートの動的項目生成
Eコマースサイトでの購入オプション設定

React Hook Formの活用ポイント

他のバリデーションライブラリ（例: Yup）と統合して、高度な検証ロジックを実装可能。
動的フィールドに限らず、固定フィールドのバリデーションにも対応。

このライブラリを使うことで、フォーム作成の手間を大幅に削減し、保守性の高いコードを書くことができます。

応用例: 実用的な動的フォーム構築

Reactで動的フォームを構築する技術を学んだら、実用的なユースケースに応用することができます。このセクションでは、実際に役立つ具体的なシナリオをもとに、動的フォームの作成方法を解説します。

ユースケース1: チームメンバーの管理フォーム

プロジェクトチームのメンバーを動的に追加・削除し、それぞれの役割を設定するフォームを作成します。

import React from "react";
import { useForm, useFieldArray } from "react-hook-form";

function TeamManagementForm() {
  const { register, handleSubmit, control } = useForm();
  const { fields, append, remove } = useFieldArray({
    control,
    name: "teamMembers",
  });

  const onSubmit = (data) => {
    console.log("送信データ:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h2>チームメンバー管理</h2>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input
            {...register(`teamMembers.${index}.name`, { required: "名前は必須です" })}
            placeholder="メンバー名"
          />
          <input
            {...register(`teamMembers.${index}.role`, { required: "役割は必須です" })}
            placeholder="役割"
          />
          <button type="button" onClick={() => remove(index)}>
            削除
          </button>
        </div>
      ))}
      <button type="button" onClick={() => append({ name: "", role: "" })}>
        メンバーを追加
      </button>
      <button type="submit">送信</button>
    </form>
  );
}

export default TeamManagementForm;

機能のポイント

各メンバーの名前と役割を管理。
メンバーを追加・削除可能。
簡単なバリデーションを導入。

ユースケース2: 動的な商品オプションフォーム

ECサイトで、購入商品のオプション（例: サイズや色）を選択できるフォームを作成します。

function ProductOptionsForm() {
  const { register, handleSubmit, control } = useForm();
  const { fields, append, remove } = useFieldArray({
    control,
    name: "productOptions",
  });

  const onSubmit = (data) => {
    console.log("選択されたオプション:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h2>商品オプション設定</h2>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input
            {...register(`productOptions.${index}.optionName`, { required: "オプション名は必須です" })}
            placeholder="オプション名"
          />
          <input
            type="number"
            {...register(`productOptions.${index}.additionalCost`, {
              required: "追加費用を入力してください",
              valueAsNumber: true,
            })}
            placeholder="追加費用"
          />
          <button type="button" onClick={() => remove(index)}>
            削除
          </button>
        </div>
      ))}
      <button type="button" onClick={() => append({ optionName: "", additionalCost: 0 })}>
        オプションを追加
      </button>
      <button type="submit">設定を保存</button>
    </form>
  );
}

export default ProductOptionsForm;

機能のポイント

オプション名と追加費用を動的に管理。
数値フィールドのバリデーション（例: 必須項目と数値のみ許容）を実装。

ユースケース3: 動的なアンケートフォーム

アンケートの質問を動的に生成し、回答を収集できるフォームを作成します。

function SurveyForm() {
  const { register, handleSubmit, control } = useForm();
  const { fields, append, remove } = useFieldArray({
    control,
    name: "surveyQuestions",
  });

  const onSubmit = (data) => {
    console.log("アンケート結果:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h2>アンケート作成</h2>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input
            {...register(`surveyQuestions.${index}.question`, { required: "質問は必須です" })}
            placeholder="質問内容"
          />
          <button type="button" onClick={() => remove(index)}>
            質問を削除
          </button>
        </div>
      ))}
      <button type="button" onClick={() => append({ question: "" })}>
        質問を追加
      </button>
      <button type="submit">送信</button>
    </form>
  );
}

export default SurveyForm;

機能のポイント

アンケートの質問を動的に設定可能。
入力された質問内容を収集して出力。

応用のヒント

複雑なフォーム: グループ化や条件付きフィールドを導入する。
バリデーション強化: Yupなどのライブラリを統合して高度なルールを適用する。
UI向上: アニメーションやツールチップを活用して、インターフェースをわかりやすくする。

これらの応用例を活用することで、実用的で柔軟性の高いフォームを構築でき、様々なプロジェクトで役立てられます。

まとめ

本記事では、Reactを使用して動的にフォームフィールドを追加・削除する方法を解説しました。状態管理を活用した基本的な実装から、React Hook Formを用いた効率的なアプローチ、さらに応用例として実用的なユースケースも紹介しました。

動的フォームを構築することで、ユーザーの入力ニーズに応じた柔軟なインターフェースを提供できます。これにより、使いやすいUIの実現や業務効率の向上が可能になります。学んだ内容を活用し、実際のプロジェクトに応用してみてください。

Reactで動的にフォームフィールドを追加・削除する方法を完全解説

Reactフォームの基礎知識

状態とフォーム

非制御コンポーネント

制御と非制御の選択

状態管理を使ったフォームフィールドの操作

基本的な状態管理の考え方

コード解説

この実装のメリット

動的なフォームフィールドの追加方法

動的追加の基本的な実装

コード解説

改良ポイント

活用例

フォームフィールドの削除処理

フォームフィールド削除の基本的な実装

コード解説

削除ボタンのデザイン改善

応用例

動的フォームの最適なレイアウトの設計

レイアウト設計の基本原則

グループ化の重要性

コード解説

レイアウトデザインの工夫

応用例

バリデーションの実装方法

基本的なバリデーションの実装

コード解説

バリデーションライブラリの活用

応用例

ポイント

React Hook Formを使った簡略化

React Hook Formの基本

セットアップ手順

コード解説

利点と応用例

React Hook Formの活用ポイント

応用例: 実用的な動的フォーム構築

ユースケース1: チームメンバーの管理フォーム

ユースケース2: 動的な商品オプションフォーム

ユースケース3: 動的なアンケートフォーム

応用のヒント

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル