ant-design-mobile

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

ユーザーが以下を希望する場合は、このスキルを使用してください。

• Ant Design Mobile のコンポーネントを使って React のモバイルアプリケーションを構築する
• モバイル UI コンポーネント（Button、Input、Form、List、Card、Modal など）を使用する
• モバイル向けのインターフェースを作成する
• Ant Design Mobile のテーマをカスタマイズする
• モバイル固有の機能（プル・トゥ・リフレッシュ、無限スクロールなど）を実装する
• React Native または Web で Ant Design Mobile を使用する
• モバイルのジェスチャーやインタラクションを処理する
• モバイルのナビゲーションパターンを実装する
• モバイル用フォームコンポーネントを使用する
• モバイル用のデータ表示コンポーネントを作成する

このスキルの使用方法

このスキルは、Ant Design Mobile の公式ドキュメントの構成（https://ant-design-mobile.antgroup.com/zh/guide/quick-start、https://ant-design-mobile.antgroup.com/zh/components/button）に沿って整理されています。Ant Design Mobile を使用する際は、次の手順に従ってください。

1. Ant Design Mobile をインストールしてセットアップします。

   • インストール手順については、examples/getting-started/installation.md を読み込みます
   • 基本的な使用例については、examples/getting-started/basic-usage.md を読み込みます

2. ユーザーの要件に基づいてコンポーネントを選択します。

   • Button/ボタン → examples/components/button.md
   • Input/入力欄 → examples/components/input.md
   • Form/フォーム → examples/components/form.md
   • List/リスト → examples/components/list.md
   • Card/カード → examples/components/card.md
   • Modal/ダイアログ → examples/components/modal.md
   • Picker/選択ピッカー → examples/components/picker.md
   • DatePicker/日付選択ピッカー → examples/components/date-picker.md
   • Tabs/タブ → examples/components/tabs.md
   • PullToRefresh/プル・トゥ・リフレッシュ → examples/components/pull-to-refresh.md
   • InfiniteScroll/無限スクロール → examples/components/infinite-scroll.md
   • その他、多数のコンポーネントがあります……

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

   • examples/getting-started/installation.md - インストールとセットアップ
   • examples/getting-started/basic-usage.md - 基本的な使用例
   • examples/components/button.md - Button コンポーネント
   • examples/components/input.md - Input コンポーネント
   • examples/components/form.md - Form コンポーネント
   • examples/components/list.md - List コンポーネント
   • examples/components/card.md - Card コンポーネント
   • examples/components/modal.md - Modal コンポーネント
   • examples/components/picker.md - Picker コンポーネント
   • examples/components/date-picker.md - DatePicker コンポーネント
   • examples/components/tabs.md - Tabs コンポーネント
   • examples/components/pull-to-refresh.md - PullToRefresh コンポーネント
   • examples/components/infinite-scroll.md - InfiniteScroll コンポーネント
   • examples/components/icon.md - Icon コンポーネント
   • examples/components/badge.md - Badge コンポーネント
   • examples/components/tag.md - Tag コンポーネント
   • examples/components/avatar.md - Avatar コンポーネント
   • examples/components/image.md - Image コンポーネント
   • examples/components/image-viewer.md - ImageViewer コンポーネント
   • examples/components/nav-bar.md - NavBar コンポーネント
   • examples/components/tab-bar.md - TabBar コンポーネント
   • examples/components/index-bar.md - IndexBar コンポーネント
   • examples/components/side-bar.md - SideBar コンポーネント
   • examples/components/dialog.md - Dialog コンポーネント
   • examples/components/toast.md - Toast コンポーネント
   • examples/components/action-sheet.md - ActionSheet コンポーネント
   • examples/components/popup.md - Popup コンポーネント
   • examples/components/loading.md - Loading コンポーネント
   • examples/components/error-block.md - ErrorBlock コンポーネント
   • examples/components/empty.md - Empty コンポーネント
   • examples/components/notice-bar.md - NoticeBar コンポーネント
   • examples/components/mask.md - Mask コンポーネント
   • examples/components/textarea.md - Textarea コンポーネント
   • examples/components/switch.md - Switch コンポーネント
   • examples/components/checkbox.md - Checkbox コンポーネント
   • examples/components/radio.md - Radio コンポーネント
   • examples/components/stepper.md - Stepper コンポーネント
   • examples/components/rate.md - Rate コンポーネント
   • examples/components/slider.md - Slider コンポーネント
   • examples/components/uploader.md - Uploader コンポーネント
   • examples/components/grid.md - Grid コンポーネント
   • examples/components/swiper.md - Swiper コンポーネント
   • examples/components/cascader.md - Cascader コンポーネント
   • examples/components/search-bar.md - SearchBar コンポーネント
   • examples/components/virtual-input.md - VirtualInput コンポーネント
   • examples/components/divider.md - Divider コンポーネント
   • examples/components/space.md - Space コンポーネント
   • examples/components/safe-area.md - SafeArea コンポーネント
   • examples/advanced/theme-customization.md - テーマのカスタマイズ
   • examples/advanced/internationalization.md - 国際化

4. 構文、構成、ベストプラクティスについては、そのサンプルファイルの個別の指示に従います。

5. 必要に応じてAPI ドキュメントを参照します。

   • api/components.md - コンポーネント API リファレンス
   • api/config-provider.md - ConfigProvider API

6. クイックスタートにはテンプレートを使用します。

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

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

ガイド（指南）：

• examples/guide/ または examples/getting-started/ のガイドファイルを参照 → https://ant-design-mobile.antgroup.com/zh/guide/quick-start

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

• examples/components/ のコンポーネントファイルを参照 → https://ant-design-mobile.antgroup.com/zh/components/button

例とテンプレート

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

例を使用するには：

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

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

• よく使うひな形については、templates/ ディレクトリのテンプレートを参照します
• テンプレートを必要に応じて、コーディングスタイルに合わせて調整します

API リファレンス

• Components API：api/components.md - すべてのコンポーネントの props と API
• ConfigProvider API：api/config-provider.md - ConfigProvider コンポーネントの API とグローバル設定

ベストプラクティス

1. スタイルのインポート：エントリーファイルで Ant Design Mobile の CSS をインポートします
2. ConfigProvider の使用：グローバル設定には、アプリを ConfigProvider でラップします
3. モバイルファースト：まずモバイルデバイス向けに設計します
4. タッチ操作：タッチジェスチャーや操作を考慮します
5. パフォーマンス：モバイルでのパフォーマンスを最適化します
6. レスポンシブデザイン：さまざまな画面サイズでテストします
7. アクセシビリティ：モバイルのアクセシビリティガイドラインに従います
8. テーマのカスタマイズ：一貫したテーマ設定にはデザイントークンを使用します
9. 国際化：i18n にはロケールを指定して ConfigProvider を使用します
10. コンポーネントの組み合わせ：複雑な UI にはコンポーネントを組み合わせます

リソース

• 公式サイト：https://ant-design-mobile.antgroup.com/
• はじめに：https://ant-design-mobile.antgroup.com/zh/guide/quick-start
• コンポーネント：https://ant-design-mobile.antgroup.com/zh/components/button
• GitHub リポジトリ：https://github.com/ant-design/ant-design-mobile

キーワード

Ant Design Mobile, antd-mobile, モバイル UI, React モバイル, モバイルコンポーネント, Button, Input, Form, List, Card, Modal, Picker, DatePicker, Tabs, PullToRefresh, InfiniteScroll, Swiper, Toast, Dialog, ActionSheet, Popup, Loading, NavBar, TabBar, Icon, Badge, Tag, Avatar, Image, ImageViewer, Switch, Checkbox, Radio, Stepper, Rate, Slider, Uploader, Grid, Cascader, SearchBar, VirtualInput, Divider, Space, SafeArea, ErrorBlock, Empty, NoticeBar, Mask, モバイルアプリ, モバイル端末, コンポーネントライブラリ, ボタン, 入力欄, フォーム, リスト, カード, ダイアログ, ピッカー, 日付ピッカー, タブ, プルリフレッシュ, 無限スクロール