ant-design-react

このスキルを使用する場面

ユーザーが次のことを希望する場合は、いつでもこのスキルを使用してください。

• Ant Design コンポーネントを使って React アプリケーションを構築する
• Ant Design の UI コンポーネント（Button、Form、Table、Input、Select など）を使用する
• Ant Design のテーマとスタイルをカスタマイズする
• Ant Design を使って国際化（i18n）を実装する
• Ant Design を TypeScript とともに使用する
• バリデーション付きのフォームを作成する
• テーブルやリストにデータを表示する
• ナビゲーションとレイアウトを実装する
• Ant Design のアイコンを使用する
• ユーザーへのフィードバック（Modal、Message、Notification）を扱う
• データ可視化コンポーネントを実装する
• Ant Design のデザイントークンとデザインシステムを使用する

このスキルの使い方

このスキルは、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/ ディレクトリから適切なサンプルファイルを読み込みます。

   Getting Started (快速开始) - examples/getting-started/:

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

   Components (组件) - 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 コンポーネント

   Advanced (高级) - 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、デザインシステム、コンポーネントライブラリ、ボタン、フォーム、テーブル、入力欄、セレクター、日付選択、ダイアログ、レイアウト、メニュー、テーマ、国際化、型サポート