arco-design

Arco Design React — スキルリファレンス

@arco-design/web-react — ByteDance によるエンタープライズ向け React UI コンポーネントライブラリです。

重要な規約

Arco Design のコードを記述するときは、必ず次のルールに従ってください。

• インポート：import { Button, Table, Form } from '@arco-design/web-react' — 必ずパッケージのルートからインポートしてください。@arco-design/web-react/es/Button のようなサブパスからはインポートしないでください
• アイコン：import { IconSearch, IconPlus } from '@arco-design/web-react/icon'
• 型：import type { TableProps, FormInstance } from '@arco-design/web-react'
• スタイル：import '@arco-design/web-react/dist/css/arco.css'（すべてを読み込む場合）、または必要に応じた読み込みを設定してください
• 日付ライブラリ：dayjs（moment.js は使用しないでください）
• 制御モード：value + onChange；非制御モード：defaultValue
• サブコンポーネント：Component.Sub のパターンでアクセスします — Form.Item、Select.Option、Menu.SubMenu、Input.Search、Input.TextArea、Grid.Row、Grid.Col
• Form.Item では field プロパティを使用します（Ant Design のように name は使用しません）
• Form 内の Switch では triggerPropName="checked" が必要です

スキル一覧

API リファレンス、コード例、ベストプラクティスの全容を確認するには、以下の該当ファイルを読み込んでください。

セットアップと設定

トピック	ファイル	使用する場面
インストール	getting-started.md	@arco-design/web-react のインストール、スタイルのインポート、tree-shaking または babel-plugin-import の設定
グローバル設定	config-provider.md	<ConfigProvider> を使ってコンポーネントのサイズ、テーマ、ロケール、デフォルトのプロパティをグローバルに設定する場合
テーマ設定	theming.md	カスタムテーマカラー、CSS 変数のオーバーライド、Less 変数、ダークモードの切り替え
国際化	internationalization.md	言語の切り替え、ロケールパックの追加、ロケールテキストのカスタマイズ
アーキテクチャ	architecture.md	制御／非制御パターン、プロパティのマージ、ref の転送、CSS 命名規則の理解

汎用コンポーネント

コンポーネント	ファイル	用途
Button	button.md	ボタン、ボタングループ、アイコンボタン、ローディング状態
Icon	icon.md	組み込みアイコン（IconXxx）、カスタム SVG アイコン、IconFont
Typography	typography.md	見出し、段落、テキストの省略表示、コピー可能／編集可能なテキスト
Link	link.md	アイコン付きハイパーリンク、ホバー状態
Divider	divider.md	水平／垂直の区切り線、テキスト付き区切り線

レイアウト

コンポーネント	ファイル	用途
Grid	grid.md	24 列の Row／Col グリッド、レスポンシブブレークポイント（xs/sm/md/lg/xl/xxl）、ガター
Layout	layout.md	ページの骨組み：Header、Sider、Content、Footer、折りたたみ可能なサイドバー
Space	space.md	要素間の一貫した余白、水平／垂直方向、折り返し

ナビゲーション

コンポーネント	ファイル	用途
メニュー	menu.md	サイドバーナビゲーション、トップナビゲーションバー、サブメニュー、メニューグループ、折りたたみ
タブ	tabs.md	タブ切り替え、カードタブ、編集可能／閉じることができるタブ、追加コンテンツ
ドロップダウン	dropdown.md	ドロップダウンメニュー、コンテキストメニュー、ボタンのドロップダウン
パンくずリスト	breadcrumb.md	ナビゲーション階層パス、ルートのパンくずリスト
ページネーション	pagination.md	ページ移動、サイズ変更、シンプル／ミニモード
ステップ	steps.md	ステップごとのワークフロー、垂直／ドット形式のステップ、エラー状態
アフィックス	affix.md	スクロール時に要素をビューポートに固定
アンカー	anchor.md	ページ内アンカーナビゲーション、セクションへのスクロール
ページヘッダー	page-header.md	ページタイトル＋戻るボタン＋パンくずリスト＋アクション

データ入力

コンポーネント	ファイル	用途
フォーム	form.md	フォームの作成、検証、Form.Item（field プロパティを使用）、Form.List、useForm フック
入力	input.md	テキスト入力、Input.Password、Input.Search、Input.TextArea、プレフィックス／サフィックス
セレクト	select.md	ドロップダウン選択、複数選択、検索、リモート検索、Select.Option、仮想スクロール
日付ピッカー	date-picker.md	日付／期間ピッカー（RangePicker）、週／月／四半期／年、無効な日付（dayjs）
時刻ピッカー	time-picker.md	時刻選択、期間、12時間形式、ステップ間隔
数値入力	input-number.md	数値入力、ステッパー、精度、最小値／最大値
チェックボックス	checkbox.md	複数選択、Checkbox.Group、すべて選択／中間状態
ラジオ	radio.md	単一選択、Radio.Group、ボタン形式のラジオ
スイッチ	switch.md	トグルスイッチ、読み込み中、テキストラベル（Form では triggerPropName="checked" を使用）
スライダー	slider.md	範囲スライダー、目盛り、垂直表示、ステップ、ツールチップ形式
レート	rate.md	星評価、半星、読み取り専用、カスタム文字
カスケーダー	cascader.md	複数階層のカスケード（省／市）、リモート読み込み、検索
ツリーセレクト	tree-select.md	ツリー構造からの選択、チェック可能、検索可能、非同期読み込み
転送	transfer.md	2つのリスト間での項目の転送、検索、シンプルモード
オートコンプリート	auto-complete.md	入力のオートコンプリート、検索候補
メンション	mentions.md	テキスト入力でユーザー／トピックに @メンション
タグ入力	input-tag.md	タグ入力、タグの追加／削除、ドラッグによる並べ替え
アップロード	upload.md	ファイルアップロード、ドラッグ＆ドロップ、プレビュー付き画像アップロード
カラーピッカー	color-picker.md	色の選択（hex/rgb/hsl）
検証コード	verification-code.md	OTP／検証コードの入力

データ表示

コンポーネント	ファイル	用途
テーブル	table.md	データテーブル、ソート、フィルター、ページネーション、列／ヘッダーの固定、仮想スクロール、行選択、展開可能な行
リスト	list.md	データリスト、ページネーション、仮想スクロール、グリッドレイアウト
カード	card.md	カードコンテナー、カバー、Card.Grid、Card.Meta、アクション
ツリー	tree.md	ツリー構造、チェック可能、ドラッグ可能、仮想スクロール、非同期読み込み
ツールチップ	tooltip.md	ホバー時のテキストヒント（リッチコンテンツには Popover を使用）
ポップオーバー	popover.md	リッチコンテンツを含むクリック／ホバー時のポップアップカード
アバター	avatar.md	ユーザーアバター、アバターグループ、画像／テキスト／アイコンのアバター
バッジ	badge.md	数値バッジ、ステータスドット、件数インジケーター
タグ	tag.md	ステータスタグ、閉じる機能、Tag.CheckableTag、色付きタグ
カルーセル	carousel.md	画像カルーセル、スライドショー
折りたたみ	collapse.md	折りたたみ可能なパネル、アコーディオンモード、FAQ
説明	descriptions.md	キーと値による詳細表示、枠線付き、レスポンシブな列
カレンダー	calendar.md	カレンダー表示、イベントのマーク
コメント	comment.md	コメント表示、ネストされた返信、アクション
空の状態	empty.md	空の状態を示すプレースホルダー
画像	image.md	画像表示、プレビュー、遅延読み込み、Image.PreviewGroup
統計	statistic.md	数値表示、カウントダウン、傾向インジケーター
タイムライン	timeline.md	タイムライン、アクティビティフィード、変更履歴

フィードバック

コンポーネント	ファイル	用途
モーダル	modal.md	モーダルダイアログ、Modal.confirm()、useModal フック、モーダル内フォーム
メッセージ	message.md	グローバルトースト：Message.success()、error()、warning()、loading()
通知	notification.md	タイトル＋コンテンツ＋アクションを含むリッチな通知トースト
ドロワー	drawer.md	スライド式サイドパネル、フォーム編集、ネストされたドロワー
アラート	alert.md	インラインのアラートバナー（情報／成功／警告／エラー）、バナーモード
プログレス	progress.md	直線／円形のプログレスバー、ステップ進捗
ポップコンファーム	popconfirm.md	削除／送信前に表示する軽量な確認ポップアップ
結果	result.md	結果ページ（成功／失敗／403／404／500）
スケルトン	skeleton.md	アニメーション付きの読み込み用スケルトンプレースホルダー
スピン	spin.md	コンテンツを囲む読み込みスピナー

その他

コンポーネント	ファイル	用途
BackTop	back-top.md	ページの先頭に戻るボタン
Portal	portal.md	子要素を別の DOM ノードにレンダリング
ResizeBox	resize-box.md	サイズ変更可能なコンテナー、分割ペイン
Trigger	trigger.md	ポップアップの基本的な位置指定（Tooltip／Popover／Dropdown の基盤）
Watermark	watermark.md	ページコンテンツ上に表示するテキスト／画像の透かし

パターンとベストプラクティス

トピック	ファイル	使用する場面
フォームのパターン	form-patterns.md	動的フォーム、連動するバリデーション、ネストされたフォーム、非同期送信、複雑なレイアウト
テーブルのパターン	table-patterns.md	リモートデータ、編集可能な行、大規模データの仮想スクロール、カスタムフィルター
モーダルのパターン	modal-patterns.md	モーダル内のフォーム、確認フロー、ネストされたドロワー、グローバルメッセージ
制御コンポーネントと非制御コンポーネント	controlled-uncontrolled.md	value+onChange と defaultValue のパターンを選ぶ場合
レスポンシブデザイン	responsive-design.md	グリッドのブレークポイント、アダプティブレイアウト、モバイルフレンドリーなデザイン

フック

@arco-design/web-react/hooks からインポートします。完全にカスタムな UI が必要な場合に限り、これらのヘッドレスフックを使用してください。それ以外の場合は、対応するコンポーネントを優先してください。

フック	ファイル	用途
useVerificationCode	use-verification-code.md	フォーカス、貼り付け、キーボード操作に対応するカスタム OTP 入力
useWatermark	use-watermark.md	改ざん防止機能付きの動的なキャンバス透かし