React + TypeScript + Ant Designでお問合せフォームを作る #初心者

はじめに

本記事は、
「フロントエンドの開発効率を向上するヒントを教え合おう！」イベントの参加記事です。

前回、Reactの環境構築からAnt Designを適用させるところまで行いました。
今回はそこからお問合せフォームを簡単に作成していきたいと思います。

要件を決める

とりあえずお問合せフォームの例として、
「名前」、「性別」、「年齢」、「メールアドレス」、「都道府県」、「お問合せ内容」
これらを作成したいと思います。

以下のようなお問合せフォームを目指します。

お問合せフォームを実装する

前回と同じようにApp.tsxの中身を書き換えていきます。

それでは、細かい実装について順番に解説をしていきます。
※一番最後に完成版のソースコードを載せておきますので良くわからなくなったら、
そちらを見ていただいても良いかと思います。

まずはFormタグでお問合せフォームの大枠を作っていきます。
このタグで送信ボタンを押した時のonFinishと、フォームでのバリデーション時に表示するvalidateMessagesを渡しています。また、スプレット構文のlayoutで、labelとwrapperのサイズの指定も行っています。

function App() {

  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 8,
    },
  };

  const validateMessages = {
    required: '${label}は必須です。',
    types: {
      email: '${label}を正しい形式で入力してください。',
    },
    number: {
      range: '${label}は${min}から${max}の間で入力してください。',
    },
  };

  const onFinish = (item: string) => {
    console.log(item);
  };

return (
  <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>

次にフォーム内の項目についてですが、
FormタグのItemで作っていきます。

labelは項目名で、
rulesのrequiredは、そのままですが必須チェックの有無となります。
入力欄に関してはInputタグを用います。

  <Form.Item
    name={['user', 'name']}
    label="お名前"
    rules={[
      {
        required: true,
      },
    ]}
  >
    <Input />
  </Form.Item>

nameの指定を配列にすると、一つ目の要素は大枠のkeyとなり、
二つ目の要素に入力された値のkeyとなります。

以下がonFinishされた時のパラメータなのですが、
実際に確認すると分かりやすいですね。

{
    "user": {
        "name": "田中 太郎",
        "gender": 1,
        "age": 30,
        "email": "test@gmail.com",
        "prefecture": "東京都",
        "introduction": "これはテスト"
    }
}

requiredがtrueなので、入力がない場合はvalidateMessagesで定義したメッセージが適用され
以下のような形で表示されます。
labelの定義がそのまま当てはまるので便利ですね。

続いてラジオボタンの実装をしていきます。
Form.ItemタグのinitialValueで初期値を定義しています。
ラジオボタンは、Radio.Groupタグの内部にRadioタグを増やして実装していきます。

  <Form.Item
    name={['user', 'gender']}
    label="性別"
    initialValue={1}
    >
    <Radio.Group name="radiogroup">
      <Radio value={1}>男性</Radio>
      <Radio value={2}>女性</Radio>
      <Radio value={3}>その他</Radio>
    </Radio.Group>
  </Form.Item>

ちなみに初期値の定義としてRadio.Groupタグで
defaultValueを指定するというやり方もあるのですが…

<Radio.Group name="radiogroup" defaultValue={2}>

以下のメッセージのように推奨はされていないので、
初期値はinitialValueを使うようにしましょう。

arning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.

次は年齢の入力です。
年齢入力に関しては、カレンダーや西暦で入力させた方が良いかとは思いますが、
今回は例なのでInputNumberを使っていきます。

これも見たままですが、
rulesでtypeにnumberを指定し、最小値と最大値を決めています。

  <Form.Item
    name={['user', 'age']}
    label="年齢"
    rules={[
      {
        type: 'number',
        min: 0,
        max: 150,
      },
    ]}
  >
    <InputNumber />
  </Form.Item>

エラーメッセージも以下のように表示されます。
こういう場合、そもそも期待値以外は入力できないようにするのがベターかと思いますが、
今回は例なので、悪しからず。

メールアドレスに関しては、typeにemailを指定しています。
あとは他とほぼ変わりません。

  <Form.Item
    name={['user', 'email']}
    label="メールアドレス"
    rules={[
      {
        type: 'email',
      },
    ]}
  >
    <Input />
  </Form.Item>

こちらもメールアドレスの形式に沿っていないと、
以下のようにエラーメッセージで怒られました。

入力項目の最後のお問合せ内容ですが、
こちらは文字をたくさん入力できるようにしたいので、InputタグのTextAreaを指定します。
これにより可変式のTextAreaが実装できます。

  <Form.Item name={['user', 'introduction']} label="お問合せ内容">
    <Input.TextArea />
  </Form.Item>

最後にボタンですが、antdのButtonタグを使用して、
typeにprimary、htmlTypeはsubmitを指定します。
wrapperは先ほど定義したlayoutと合わせて8としています。

  <Form.Item
    wrapperCol={{
      ...layout.wrapperCol,
      offset: 8,
    }}
  >
    <Button type="primary" htmlType="submit">
      送信
    </Button>

  </Form.Item>

完成

こちらが完成したソースコードになります。

App.tsx

import React from 'react';
import { Button, Form, Input, InputNumber, Radio } from 'antd';
import 'antd/dist/antd.css';
import Title from 'antd/lib/typography/Title';

function App() {

  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 8,
    },
  };

  const validateMessages = {
    required: '${label}は必須です。',
    types: {
      email: '${label}!を正しい形式で入力してください。',
    },
    number: {
      range: '${label}は${min}から${max}の間で入力してください。',
    },
  };

  const onFinish = (item: string) => {
    console.log(item);
  };

return (
  <div style={{margin: "50px"}}>
    <div style={{textAlign: "center"}}>
      <Title>お問合せフォーム</Title>
    </div>

    <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>

      <Form.Item
        name={['user', 'name']}
        label="お名前"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name={['user', 'gender']}
        label="性別"
        initialValue={1}
        >
        <Radio.Group name="radiogroup">
          <Radio value={1}>男性</Radio>
          <Radio value={2}>女性</Radio>
          <Radio value={3}>その他</Radio>
        </Radio.Group>
      </Form.Item>

      <Form.Item
        name={['user', 'age']}
        label="年齢"
        rules={[
          {
            type: 'number',
            min: 0,
            max: 150,
          },
        ]}
      >
        <InputNumber />
      </Form.Item>

      <Form.Item
        name={['user', 'email']}
        label="メールアドレス"
        rules={[
          {
            type: 'email',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item name={['user', 'prefecture']} label="都道府県">
        <Input />
      </Form.Item>

      <Form.Item name={['user', 'introduction']} label="お問合せ内容">
        <Input.TextArea />
      </Form.Item>

      <Form.Item
        wrapperCol={{
          ...layout.wrapperCol,
          offset: 8,
        }}
      >
        <Button type="primary" htmlType="submit">
          送信
        </Button>

      </Form.Item>
    </Form>
  </div>
  );
}

export default App;

まとめ

長くなりましたが、今回も簡単にお問合せフォームを実装できました。

ちなみに例えばですが、rulesのtypeは、Ant Design内のinterface.d.tsにて
RuleTypeで定義されたものが使用できるので詳しく知りたい方は、
定義の中身を読んでみてもいいかも知れません。

現状、Ant Designは日本語文献があまりないので、海外文献の翻訳か、
中身のコードを読まざるを得ないところは結構あります。(むしろ公式がサンプル集みたいな感じです)

ただ割と直感的に実装はできるので、
良かったら試してみてください。

React + TypeScript + Ant Designでお問合せフォームを作る

はじめに

要件を決める

お問合せフォームを実装する

完成

まとめ

参考