ant-design-react

このスキルを使用するタイミング

ユーザーが次のことを希望する場合は、このスキルを使用します。

• Ant Design（antd）のコンポーネントを使用してReactアプリケーションを構築する
• バリデーション付きのフォーム（Form、Input、Select、DatePicker）を作成する
• 並べ替え、フィルタリング、ページネーション機能を備えたテーブルにデータを表示する
• デザイントークンやCSS変数を使用してAnt Designのテーマをカスタマイズする
• フィードバックコンポーネント（Modal、Message、Notification）を使用する
• レイアウトやナビゲーション（Layout、Menu、Breadcrumb）を実装する
• Ant Designのデザイントークンとデザインシステムを使用する

このスキルの使用方法

クイックスタート例：テーブル付きフォーム

import { Button, Form, Input, Table, message } from 'antd';

const columns = [
  { title: 'Name', dataIndex: 'name', sorter: (a, b) => a.name.localeCompare(b.name) },
  { title: 'Email', dataIndex: 'email' },
  { title: 'Status', dataIndex: 'status', filters: [
    { text: 'Active', value: 'active' }, { text: 'Inactive', value: 'inactive' }
  ], onFilter: (value, record) => record.status === value },
];

function UserPage() {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    message.success(`Created user: ${values.name}`);
  };

  return (
    <>
      <Form form={form} layout="inline" onFinish={onFinish}>
        <Form.Item name="name" rules={[{ required: true }]}>
          <Input placeholder="Name" />
        </Form.Item>
        <Form.Item name="email" rules={[{ required: true, type: 'email' }]}>
          <Input placeholder="Email" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">Add User</Button>
        </Form.Item>
      </Form>
      <Table columns={columns} dataSource={[]} rowKey="id" pagination={{ pageSize: 10 }} />
    </>
  );
}

このスキルは、Ant Design React の公式ドキュメント構成（https://4x-ant-design.antgroup.com/docs/react/introduce-cn、https://4x-ant-design.antgroup.com/components/overview-cn/）に合わせて整理されています。Ant Design React を使用する場合：

1. ユーザーのリクエストからトピックを特定します：

   • Getting started/快速开始 → examples/getting-started/installation.md または examples/getting-started/basic-usage.md
   • Button/按钮 → examples/components/button.md
   • Form/表单 → examples/components/form.md
   • Table/表格 → examples/components/table.md
   • Input/输入框 → examples/components/input.md
   • Select/选择器 → examples/components/select.md
   • DatePicker/日期选择器 → examples/components/date-picker.md
   • Modal/对话框 → examples/components/modal.md
   • Layout/布局 → examples/components/layout.md
   • Menu/菜单 → examples/components/menu.md
   • Theme customization/主题定制 → examples/advanced/theme-customization.md
   • Internationalization/国际化 → examples/advanced/internationalization.md
   • TypeScript/类型支持 → examples/advanced/typescript.md

2. examples/ ディレクトリから適切なサンプルファイルを読み込みます：

   入門（快速开始）- examples/getting-started/：

   • examples/getting-started/installation.md - Ant Design のインストールと基本設定
   • examples/getting-started/basic-usage.md - コンポーネントの基本的な使い方

   コンポーネント（组件）- examples/components/：

   • examples/components/button.md - Button コンポーネント
   • examples/components/input.md - Input コンポーネント
   • examples/components/form.md - バリデーション付き Form コンポーネント
   • examples/components/table.md - Table コンポーネント
   • examples/components/select.md - Select コンポーネント
   • examples/components/date-picker.md - DatePicker コンポーネント
   • examples/components/modal.md - Modal コンポーネント
   • examples/components/layout.md - Layout コンポーネント
   • examples/components/menu.md - Menu コンポーネント
   • examples/components/icon.md - Icon コンポーネント
   • examples/components/typography.md - Typography コンポーネント
   • examples/components/grid.md - Grid コンポーネント
   • examples/components/space.md - Space コンポーネント
   • examples/components/card.md - Card コンポーネント
   • examples/components/tabs.md - Tabs コンポーネント
   • examples/components/pagination.md - Pagination コンポーネント
   • examples/components/upload.md - Upload コンポーネント
   • examples/components/upload.md - Upload コンポーネント
   • examples/components/message.md - Message コンポーネント
   • examples/components/notification.md - Notification コンポーネント
   • examples/components/alert.md - Alert コンポーネント
   • examples/components/spin.md - Spin コンポーネント
   • examples/components/progress.md - Progress コンポーネント

   応用（高级）- examples/advanced/：

   • examples/advanced/theme-customization.md - テーマのカスタマイズ
   • examples/advanced/internationalization.md - 国際化の設定
   • examples/advanced/typescript.md - TypeScript のサポート

3. 構文、構成、ベストプラクティスについては、サンプルファイル内の具体的な指示に従います

   重要な注意事項：

   • すべてのサンプルは Ant Design React 4.x API に準拠しています
   • 該当する場合、サンプルには JavaScript 版と TypeScript 版の両方が含まれています
   • 各サンプルファイルには、主要な概念、コード例、重要なポイントが含まれています
   • ベストプラクティスや一般的なパターンについては、必ずサンプルファイルを確認してください

4. 必要に応じて、api/ ディレクトリ内の API ドキュメントを参照します：

   • api/components.md - コンポーネント API リファレンス
   • api/config-provider.md - ConfigProvider API
   • api/design-tokens.md - デザイントークン API

5. templates/ ディレクトリ内のテンプレートを使用します：

   • templates/project-setup.md - プロジェクト設定テンプレート
   • templates/component-template.md - コンポーネントの使用テンプレート

ドキュメントの対応関係（公式ドキュメントと1対1で対応）

ガイド（ガイド）：

• examples/guide/ または examples/getting-started/ のガイドファイルを参照してください → https://4x-ant-design.antgroup.com/docs/react/introduce-cn

コンポーネント（コンポーネント）：

• examples/components/ のコンポーネントファイルを参照してください → https://4x-ant-design.antgroup.com/components/overview-cn/

例とテンプレート

このスキルには、公式ドキュメントの構成に合わせて整理された詳細な例が含まれています。すべての例は examples/ ディレクトリにあります（上記の対応関係を参照してください）。

例を使用するには：

• ユーザーのリクエストからトピックを特定します
• 対応関係に基づき、適切な例のファイルを読み込みます
• そのファイルの手順、構文、ベストプラクティスに従います
• コード例を具体的なユースケースに合わせて調整します

テンプレートを使用するには：

• よく使用する基本構成については、templates/ ディレクトリのテンプレートを参照します
• テンプレートを具体的な要件やコーディングスタイルに合わせて調整します

API リファレンス

詳細な API ドキュメントは api/ ディレクトリにあり、公式の Ant Design React API ドキュメントの構成に合わせて整理されています。

コンポーネント API（api/components.md）

• すべてのコンポーネントのプロパティと API
• コンポーネントのメソッドとイベント
• コンポーネントの型とインターフェース

ConfigProvider API（api/config-provider.md）

• ConfigProvider コンポーネント API
• グローバル設定オプション
• ロケール設定

デザイントークン API（api/design-tokens.md）

• デザイントークンのリファレンス
• テーマカスタマイズ用トークン
• CSS 変数

API リファレンスを使用するには：

1. 確認したい API を特定します
2. api/ ディレクトリから対応する API ファイルを読み込みます
3. API のシグネチャ、パラメーター、戻り値の型、例を確認します
4. 詳細な使用パターンについては、リンクされている例のファイルを参照します
5. すべての API ファイルには、examples/ ディレクトリにある関連する例のファイルへのリンクが含まれています

ベストプラクティス

1. スタイルのインポート：エントリーファイルで Ant Design の CSS をインポートします
2. ConfigProvider の使用：グローバル設定のために、アプリを ConfigProvider でラップします
3. フォームのバリデーション：バリデーションルールを設定した Form コンポーネントを使用します
4. TypeScript：型安全性を高めるために TypeScript を使用します
5. テーマのカスタマイズ：一貫性のあるテーマ設定にはデザイントークンを使用します
6. 国際化：i18n 用に locale を設定した ConfigProvider を使用します
7. コンポーネントの組み合わせ：複雑な UI を構築するには、コンポーネントを組み合わせます
8. パフォーマンス：最適化には React.memo と useMemo を使用します
9. アクセシビリティ：Ant Design のアクセシビリティガイドラインに従います
10. レスポンシブデザイン：Grid とレスポンシブユーティリティを使用します

リソース

• 公式ウェブサイト：https://4x-ant-design.antgroup.com/index-cn
• はじめに：https://4x-ant-design.antgroup.com/docs/react/introduce-cn
• コンポーネント：https://4x-ant-design.antgroup.com/components/overview-cn/
• GitHub リポジトリ：https://github.com/ant-design/ant-design

キーワード

Ant Design、Ant Design React、antd、React UI ライブラリ、コンポーネント、Button、Form、Table、Input、Select、DatePicker、Modal、Layout、Menu、テーマ、カスタマイズ、国際化、i18n、TypeScript、デザインシステム、コンポーネントライブラリ、ボタン、フォーム、テーブル、入力欄、セレクター、日付選択、ダイアログ、レイアウト、メニュー、テーマ、国際化、型サポート