<Form.Item<FieldType>
    label="パスワード"
    name="password"
    rules={[
        { required: true, message: 'パスワードを入力してください！' },
        { min: 6, message: 'パスワードは6文字以上で入力してください。'}
    ]}
  >
    <Input.Password />
  </Form.Item>

  <Form.Item<FieldType>
    name="remember"
    valuePropName="checked"
    wrapperCol={{ offset: 8, span: 16 }}
  >
    <Checkbox>記憶する</Checkbox>
  </Form.Item>

  <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
    <Button type="primary" htmlType="submit">
      送信
    </Button>
    <Button htmlType="button" onClick={handleReset} style={{ marginLeft: 8 }}>
      リセット
    </Button>
  </Form.Item>
</Form>

);
};

export default App;
``
この例では、rulesプロパティを使って必須チェックや最小文字数のバリデーションを宣言的に定義しています。onFinish`コールバックは、すべてのバリデーションが成功した場合にのみ実行されます。

3-2. Input & TextArea

最も基本的なテキスト入力コンポーネントですが、Ant Designでは多くの便利な機能が追加されています。

• addonBefore/addonAfter: 入力欄の前後にテキストやコンポーネントを追加できます（例: http://）。
• prefix/suffix: 入力欄の内部にアイコンなどを追加できます。
• Input.Password: パスワードの表示/非表示を切り替えるアイコンが組み込まれています。
• Input.Search: 検索ボタン付きの入力欄を簡単に作成できます。
• Input.TextArea: 複数行のテキスト入力に対応します。

3-3. Select & Cascader

ドロップダウンリストから値を選択させるコンポーネントです。

• Select: optionsプロパティに { label: '表示名', value: '値' } の形式の配列を渡して選択肢を定義します。mode="multiple"で複数選択が可能になります。showSearchプロパティで選択肢の検索機能も有効にできます。
• Cascader: 都道府県→市区町村のように、階層的なデータを選択させる場合に非常に便利です。

3-4. DatePicker & TimePicker

日付や時刻を直感的に選択させるためのコンポーネントです。

• DatePicker: 日付を選択します。pickerプロパティで week, month, year などを選択させることも可能です。
• RangePicker: 開始日と終了日の範囲を選択させます。
• format: 日付の表示形式をカスタマイズできます（例: YYYY-MM-DD）。
• disabledDate: 特定の日付（例: 過去の日付）を選択できないように制限できます。

3-5. Checkbox & Radio

• Checkbox: 複数の選択肢から0個以上を選択する場合に使用します。Checkbox.Groupで複数のチェックボックスをまとめることができます。
• Radio: 複数の選択肢から1つだけを選択する場合に使用します。Radio.Groupでまとめます。

3-6. Upload

ファイルのアップロード機能も簡単に実装できます。ドラッグ＆ドロップにも対応しています。

“`tsx
import { UploadOutlined } from ‘@ant-design/icons’;
import { Button, message, Upload } from ‘antd’;
import type { UploadProps } from ‘antd’;

const props: UploadProps = {
name: ‘file’,
action: ‘https://www.mocky.io/v2/5cc8019d300000980a055e76’, // ダミーのアップロード先URL
headers: {
authorization: ‘authorization-text’,
},
beforeUpload: (file) => {
const isPNG = file.type === ‘image/png’;
if (!isPNG) {
message.error(${file.name} はPNGファイルではありません。);
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error(‘画像は2MBより小さい必要があります！’);
}
return isPNG && isLt2M; // falseを返すとアップロードを中止
},
onChange(info) {
if (info.file.status !== ‘uploading’) {
console.log(info.file, info.fileList);
}
if (info.file.status === ‘done’) {
message.success(${info.file.name} ファイルのアップロードに成功しました。);
} else if (info.file.status === ‘error’) {
message.error(${info.file.name} ファイルのアップロードに失敗しました。);
}
},
};

const App: React.FC = () => (

}>Click to Upload

);
``beforeUploadフックでファイル形式やサイズをクライアントサイドで検証したり、onChange`フックでアップロードの進捗状況をハンドリングしたりできます。

第4章: 主要コンポーネント徹底解説 – データ表示編

データの入力だけでなく、それを分かりやすく表示するためのコンポーネントもAnt Designの強みです。

4-1. Table コンポーネント

TableはおそらくAnt Designで最も強力かつ多機能なコンポーネントです。膨大なデータを扱う業務アプリケーションでは欠かせません。

• columns: テーブルの列定義を行う配列。各オブジェクトが1つの列に対応します。
  • title: 列ヘッダーのテキスト。
  • dataIndex: dataSourceの各データオブジェクトから、どのキーの値表示するかを指定。
  • key: Reactが要素を識別するためのユニークなキー。
  • render: セルの表示内容をカスタマイズするための関数。これを使うと、ボタンを配置したり、値に応じて色を変えたりできます。
• dataSource: テーブルに表示するデータの配列。
• pagination: ページネーションの設定。falseにすると非表示になります。
• loading: データ取得中などにローディングインジケーターを表示します。
• rowSelection: 行を選択するためのチェックボックスを表示します。

“`tsx
import React, { useState } from ‘react’;
import { Space, Table, Tag, Button } from ‘antd’;
import type { ColumnsType } from ‘antd/es/table’;

interface DataType {
key: string;
name: string;
age: number;
address: string;
tags: string[];
}

const App: React.FC = () => {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);

const columns: ColumnsType = [
{
title: ‘名前’,
dataIndex: ‘name’,
key: ‘name’,
render: (text) => {text},
},
{
title: ‘年齢’,
dataIndex: ‘age’,
key: ‘age’,
sorter: (a, b) => a.age – b.age, // 年齢でソート
},
{
title: ‘住所’,
dataIndex: ‘address’,
key: ‘address’,
},
{
title: ‘タグ’,
key: ‘tags’,
dataIndex: ‘tags’,
render: (, { tags }) => (
<>
{tags.map((tag) => {
let color = tag.length > 5 ? ‘geekblue’ : ‘green’;
if (tag === ‘loser’) {
color = ‘volcano’;
}
return (

{tag.toUpperCase()}

);
})}

),
},
{
title: ‘操作’,
key: ‘action’,
render: (, record) => (

招待 {record.name}
handleDelete(record.key)}>削除

),
},
];

const data: DataType[] = [
// … (データ配列)
];

const handleDelete = (key: React.Key) => {
// 削除ロジック
console.log(Deleting item with key: ${key});
};

const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
console.log(‘selectedRowKeys changed: ‘, newSelectedRowKeys);
setSelectedRowKeys(newSelectedRowKeys);
};

const rowSelection = {
selectedRowKeys,
onChange: onSelectChange,
};

return (

4-2. List コンポーネント

Tableほど複雑な機能は不要で、シンプルなリストを表示したい場合に適しています。

• dataSource: 表示するデータの配列。
• renderItem: 各データ項目をどのようにレンダリングするかを定義する関数。
• grid: リストをグリッドレイアウトで表示します。レスポンシブな設定も可能です。

4-3. Card & Descriptions

• Card: 情報をカード形式でまとめるためのコンテナです。titleやextra（右上の追加要素）、actions（カード下部のアクションボタン）などのプロパティを持ちます。
• Descriptions: キーと値のペアで情報を整理して表示するのに最適です。ユーザーの詳細情報ページなどで活躍します。

4-4. Tag & Badge

• Tag: 分類やステータスを表すための小さなラベルです。colorプロパティで色を簡単に変更できます。
• Badge: アイコンの右上に通知数などを表示します。countに数値を、dotで小さな点を表示できます。statusプロパティを使えば、ステータスを示す色の付いたドットとテキストを表示できます。

第5章: 主要コンポーネント徹底解説 – フィードバック編

ユーザーのアクションに対して適切なフィードバックを返すことは、優れたUXの基本です。Ant Designは、様々な状況に応じたフィードバックコンポーネントを提供しています。

5-1. Modal

ユーザーの操作を一時的に中断させ、何らかの情報を伝えたり、入力を促したりするためのダイアログです。React.useStateで表示・非表示の状態を管理するのが一般的です。

“`tsx
import React, { useState } from ‘react’;
import { Button, Modal } from ‘antd’;

const App: React.FC = () => {
const [isModalOpen, setIsModalOpen] = useState(false);

const showModal = () => {
setIsModalOpen(true);
};

const handleOk = () => {
// OKボタンが押されたときの処理
setIsModalOpen(false);
};

const handleCancel = () => {
// キャンセルボタン or ×ボタンが押されたときの処理
setIsModalOpen(false);
};

return (
<>

モーダルを開く

モーダルのコンテンツ…

);
};
``
また、Modal.confirm()`のような静的メソッドを使えば、数行のコードで確認ダイアログを簡単に表示できます。

5-2. Message & Notification

• Message: 画面上部中央に表示される、短時間で消える軽量なフィードバックです。「保存しました」といった操作完了の通知に適しています。
• Notification: 画面の隅（デフォルトは右上）に表示される、より詳細な情報を含むことができる通知です。エラーの詳細や非同期処理の完了通知などに使われます。

これらはuseMessage / useNotificationフックを使って利用するのが最新の方法です。

“`tsx
import { Button, message, notification, Space } from ‘antd’;

const App: React.FC = () => {
const [messageApi, contextHolderForMessage] = message.useMessage();
const [notificationApi, contextHolderForNotification] = notification.useNotification();

const showSuccessMessage = () => {
messageApi.success(‘処理が正常に完了しました！’);
};

const showInfoNotification = () => {
notificationApi.info({
message: ‘通知タイトル’,
description: ‘これは通知の詳細な内容です。クリックしても消えません。’,
placement: ‘topRight’,
duration: 0, // 0にすると自動で消えない
});
};

return (
<>
{contextHolderForMessage}
{contextHolderForNotification}

Success Message

Info Notification



);
};
“`

5-3. Popover & Popconfirm

• Popover: 要素をクリックまたはホバーした際に、補足情報や追加の操作メニューをポップアップ表示します。
• Popconfirm: 「削除」ボタンなど、実行前にユーザーの確認を求めたい操作に使用します。「本当に削除しますか？」といった確認メッセージと「はい」「いいえ」ボタンを表示できます。

5-4. Spin & Skeleton

• Spin: データ取得中など、処理待ちの状態をユーザーに示すためのローディングスピナーです。特定のエリアをラップして、その部分だけをローディング状態にすることができます。
• Skeleton: コンテンツがロードされるまでの間、UIの骨格（スケルトン）を表示するコンポーネントです。これにより、ユーザーはこれから表示される内容を予測でき、体感的な待ち時間を短縮する効果があります。

第6章: Ant Designのカスタマイズと応用

Ant Designの真の力は、その高いカスタマイズ性にあります。

6-1. テーマのカスタマイズ (ConfigProvider)

第1章でも触れましたが、ConfigProviderのthemeプロパティは非常に強力です。

• tokenの変更: アプリケーション全体で使用されるデザインの変数をtokenと呼びます。colorPrimary（プライマリカラー）、borderRadius（角丸の半径）、fontSize（基本フォントサイズ）などを変更するだけで、アプリ全体の印象を大きく変えることができます。
• ダークモード: Ant Designはダークモードを標準でサポートしています。antd/es/themeからdarkAlgorithmをインポートし、theme.algorithmプロパティに設定するだけで、すべてのコンポーネントが美しいダークテーマに対応します。

“`tsx
import { ConfigProvider, theme, Switch } from ‘antd’;
import React, { useState } from ‘react’;

const App: React.FC = () => {
const [isDarkMode, setIsDarkMode] = useState(false);
const { defaultAlgorithm, darkAlgorithm } = theme;

return (
    <ConfigProvider
        theme={{
            algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
        }}
    >
        {/* ... アプリケーションのコンポーネント ... */}
        <Switch checked={isDarkMode} onChange={setIsDarkMode} />
        <span>ダークモード</span>
    </ConfigProvider>
);

};
“`

6-2. アイコンの利用 (@ant-design/icons)

Ant Designは豊富なアイコンセットを@ant-design/iconsとして提供しています。バンドルサイズを最適化するため、必要なアイコンだけを個別にインポートして使用することが強く推奨されます。

tsx
// 良い例
import { StepForwardOutlined } from '@ant-design/icons';
// 悪い例 (すべてのアイコンをバンドルしてしまう)
// import * as Icons from '@ant-design/icons';

6-3. 国際化 (i18n)

ConfigProviderのlocaleプロパティを使えば、DatePickerやPaginationなどのコンポーネントのテキストを簡単に多言語対応させることができます。日本語や英語を含む多くの言語がサポートされています。

6-4. Ant Design Charts

Ant Designファミリーには、@ant-design/chartsという強力なデータ可視化ライブラリも存在します。Ant Designのコンポーネントとデザインの親和性が高く、折れ線グラフ、棒グラフ、円グラフなど、様々なチャートを少ないコードで美しく描画できます。

まとめ

本記事では、React UIライブラリの巨人「Ant Design」の魅力について、セットアップから主要コンポーネントの具体的な使い方、そしてカスタマイズ方法までを網羅的に解説しました。

Ant Designは、単なるUIコンポーネントの寄せ集めではありません。それは、一貫したデザイン哲学に基づき、エンタープライズアプリケーション開発における複雑な要求に応えるために設計された、包括的なソリューションです。

• 生産性の向上: 豊富なコンポーネントを使えば、車輪の再発明を避け、ビジネスロジックの実装に集中できます。
• 品質の担保: バグが少なく、アクセシビリティにも配慮されたコンポーネントは、アプリケーション全体の品質を高めます。
• 優れたUXの提供: 洗練された一貫性のあるUIは、ユーザーにとって快適な操作体験をもたらします。

もちろん、Ant Designがすべてのプロジェクトにとって最適な選択肢とは限りません。しかし、特に管理画面や業務システムといった、データ入力と表示が中心となる複雑なアプリケーションを構築する際には、その能力を最大限に発揮し、開発者にとってこの上なく頼もしいパートナーとなるでしょう。

今回紹介したコンポーネントは、Ant Designが提供する機能のほんの一部に過ぎません。ぜひ公式ドキュメントを手に取り、その広大で豊かな世界を探求してみてください。インタラクティブなデモと詳細なAPIリファレンスは、あなたの学習を力強くサポートしてくれるはずです。

この記事が、あなたのReact開発における新たな武器としてAnt Designを使いこなすための一助となれば幸いです。Happy Coding