Taro Documentation

Taro ドキュメントスキル

概要

Taro は、単一のコードベースから複数のプラットフォーム向けのアプリケーションを構築できる、包括的なマルチプラットフォーム開発フレームワークです。対応プラットフォームには、WeChat ミニプログラム、Alipay ミニプログラム、Baidu スマートプログラム、ByteDance ミニアプリ、QQ ミニプログラム、H5（ウェブ）、React Native、Harmony OS が含まれます。

主な特徴：

• React に似た構文とコンポーネントモデル
• 一度書けば、複数のプラットフォームで実行可能
• プラットフォーム固有の機能を幅広くカバーする API
• 豊富なコンポーネントライブラリ
• 強力な TypeScript サポート
• プラグインや UI ライブラリが充実した活発なエコシステム

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

次のような場合にこのスキルを使用してください。

• Taro アプリケーションやミニプログラムを開発している
• Taro の API、コンポーネント、設定について質問している
• Taro 関連の問題をトラブルシューティングしている
• Taro のベストプラクティスについてアドバイスを求めている
• プロジェクトを Taro に変換または移行している
• Taro を他のフレームワークやライブラリと統合している

コアコンセプト

フレームワークアーキテクチャ

Taro は React に似たアーキテクチャを採用しています。

• コンポーネントベース：再利用可能なコンポーネントで UI を構築します
• JSX 構文：JSX/TSX を使用して宣言的に UI を記述します
• 仮想 DOM：効率的なレンダリングと更新を実現します
• ライフサイクルメソッド：コンポーネントのライフサイクルフックを提供します
• 状態管理：ローカル状態とグローバル状態のソリューションを提供します

マルチプラットフォームコンパイル

Taro は異なるプラットフォームを対象にコンパイルします。

• コンパイル時：コードをプラットフォーム固有の構文に変換します
• ランタイムアダプター：プラットフォームごとの API の違いをランタイムが処理します
• 条件付きコンパイル：必要に応じてプラットフォーム固有のコードを記述できます
• 統一 API：各プラットフォームで共通の API を提供します

プロジェクト構成

標準的な Taro プロジェクトの構成：

taro-project/
├── src/
│   ├── app.config.ts      # Global app configuration
│   ├── app.ts             # App entry point
│   ├── pages/             # Page components
│   │   ├── index/
│   │   │   ├── index.tsx
│   │   │   └── index.config.ts
│   ├── components/        # Reusable components
│   └── assets/            # Static resources
├── config/
│   ├── index.js           # Build configuration
│   ├── dev.js             # Development config
│   └── prod.js            # Production config
└── package.json

Taro ドキュメントの使用

利用可能なリソース

このスキルでは、100 KB 未満の小さなトピックファイルに整理された、包括的な Taro ドキュメントを利用できます。質問に合ったプレフィックスのファイルを選択してください。

1. API リファレンス（apis- がプレフィックスのファイル）

   • ネットワークとルーティング：apis-network*.md、apis-routing.md
   • ストレージと UI フィードバック：apis-storage*.md、apis-ui-feedback*.md、apis-ui-navigation.md
   • デバイス、センサー、接続性：apis-device-system.md、apis-device-sensors.md、apis-device-connectivity*.md
   • メディア（画像／動画／音声）：apis-media-image.md、apis-media-video*.md、apis-media-audio*.md
   • 位置情報とキャンバス：apis-location*.md、apis-canvas*.md
   • クラウドと決済：apis-cloud*.md、apis-payment.md
   • その他の API：apis-other*.md
   • （-partN の接尾辞が付いたファイルは、同じトピックの続きです。）

2. コンポーネントリファレンス（components- がプレフィックスのファイル）

   • コンテナーとレイアウト：components-containers*.md
   • 基本コンテンツ：components-basic.md、components-other.md
   • フォームと入力：components-form*.md
   • ナビゲーション：components-navigation.md
   • メディアとグラフィックス：components-media*.md、components-map-canvas.md、components-gesture.md、components-skyline.md
   • オープン機能：components-open-capability.md

3. 設定リファレンス

   • config-app.md – アプリのグローバル設定（app.config.ts）
   • config-page.md – ページレベルの設定
   • config-build.md – ビルド／コンパイラーの設定と最適化

4. ガイドリファレンス（guides- がプレフィックスのファイル）

   • はじめにと基礎：guides-quickstart*.md、guides-basics*.md
   • アーキテクチャとルーティング：guides-routing.md、guides-testing.md
   • 状態管理と UI ライブラリ：guides-state.md、guides-ui-libraries.md
   • プラットフォーム固有の情報：guides-platform-weapp.md、guides-platform-h5.md、guides-platform-rn.md、guides-platform-harmony*.md
   • 最適化とトラブルシューティング：guides-optimization*.md、guides-troubleshooting.md、guides-community.md
   • プラグイン開発と高度なトピック：guides-plugin-dev*.md

ドキュメントの参照方法

Taro に関する質問を受けた場合：

1. トピックを特定する：関連するドキュメントの分野（API、コンポーネント、設定、ガイド）を判断します

2. 適切なリファレンスを読み込む：Read ツールを使って、該当するトピックのファイルにアクセスします：

Read references/apis-network.md           # Network/API calls (see apis-network-part*.md for continuation)
Read references/components-form.md        # Form components and inputs  
Read references/config-app.md             # Global app configuration
Read references/guides-platform-weapp.md  # WeChat Mini Program guides

3. ファイル内を検索する：Grep とワイルドカードを使って、関連するファイル群を検索します：

Grep pattern:"Taro\.request" path:"references/apis-network*.md"
Grep pattern:"Button component" path:"references/components-form*.md"

4. 文脈に沿った回答を提供する：ドキュメントとユーザーの状況に関する理解を組み合わせ、関連性が高く実行可能なガイダンスを提供します

一般的な開発シナリオ

API の使用

Taro の API に関する質問を受けた場合：

• 該当する references/apis-*.md ファイルを参照します（たとえば、ネットワークリクエストの場合は apis-network*.md、デバイス情報の場合は apis-device-system.md）
• API の使用方法を示すコード例を提示します
• 関連する場合は、プラットフォームとの互換性について説明します
• よくある注意点やベストプラクティスを伝えます

例：「ネットワークリクエストを行うにはどうすればよいですか？」という質問には、Taro.request API のドキュメントを参照し、エラー処理を含む例を提示します。

コンポーネントの使用

Taro のコンポーネントに関する質問を受けた場合：

• 適切な references/components-*.md ファイルを参照します（たとえば、components-form*.md または components-media*.md）
• コンポーネントの props とイベントハンドラーを示します
• JSX の使用例を提示します
• スタイル設定の方法とプラットフォームごとの違いについて説明します

例：「スクロール可能なリストを作成するにはどうすればよいですか？」という質問には、ScrollView コンポーネントのドキュメントを参照し、サンプルコードで使用方法を示します。

設定

プロジェクトのセットアップや設定に関する質問を受けた場合：

• 対象範囲に応じて、references/config-app.md、config-page.md、または config-build.md を参照します
• 設定オプションとその効果を説明します
• 設定ファイルの例を示します
• ビルドとコンパイルの設定について説明します

例：「ページルーティングを設定するにはどうすればよいですか？」という質問には、app.config.ts のページ設定を参照し、ルートの設定方法を示します。

開発ガイド

より幅広いガイダンスやベストプラクティスが必要な場合：

• 該当する references/guides-*.md ファイルを参照します（たとえば、guides-platform-weapp.md または guides-state.md）
• 複雑なタスクについて、手順を追って説明します
• ベストプラクティスや一般的なパターンを紹介します
• 関連する API やコンポーネントへのリンクを示します

例：「Redux を統合するにはどうすればよいですか？」という質問には、状態管理ガイドを参照し、統合手順を示します。

プラットフォームに関する考慮事項

プラットフォーム固有の機能

Taro は、機能が異なる複数のプラットフォームをサポートしています：

• 一部の API／コンポーネントは特定のプラットフォームに固有です
• ドキュメントのプラットフォーム対応表を確認します
• 必要に応じて条件付きコンパイルを使用します
• 対象プラットフォームでテストします

条件付きコンパイル

プラットフォーム固有のコードについて：

// Example of conditional compilation
if (process.env.TARO_ENV === 'weapp') {
  // WeChat Mini Program specific code
}

if (process.env.TARO_ENV === 'h5') {
  // H5 specific code
}

API の互換性

プラットフォーム間での API のサポート状況を確認します：

• ドキュメントにはプラットフォーム対応表が記載されています
• 一部の API は、特定のプラットフォームでサポートが限定される場合があります
• 必要に応じてフォールバックや代替手段を提示します

ベストプラクティス

コードの整理

• 関心の分離：UI、ロジック、データの各レイヤーを分離します
• 再利用可能なコンポーネント：一般的な UI パターンには汎用コンポーネントを作成します
• 型安全性：開発体験を向上させるために TypeScript を使用します
• 設定の外部化：設定をコードから分離して管理します

パフォーマンスの最適化

• リストのレンダリング：長いリストには仮想リストを使用します
• 画像の最適化：画像を圧縮し、遅延読み込みを使用します
• コード分割：ルートや機能ごとにコードを分割します
• 不要な再レンダリングの回避：React.memo、useMemo、useCallback を適切に使用します

開発ワークフロー

• テンプレートから開始する：プロジェクトの雛形作成には公式テンプレートを使用します
• 規約に従う：Taro の命名規則と構成規則を遵守します
• 複数のプラットフォームでテストする：開発中、対象プラットフォームで定期的にテストします
• 開発者ツールを使用する：Taro DevTools やプラットフォーム固有のデバッグツールを活用します

トラブルシューティングの進め方

ユーザーが問題に遭遇した場合：

1. 問題の領域を特定する：API、コンポーネント、設定、ビルドのいずれに関する問題かを確認します
2. ドキュメントを確認する：関連するドキュメントのセクションを参照します
3. プラットフォームとの互換性を確認する：対象のプラットフォームで機能がサポートされていることを確認します
4. 設定を確認する：設定が正しいか確認します
5. ガイドを参照する：トラブルシューティングガイドで類似の問題を探します
6. 解決策を提示する：具体的な修正方法や回避策を提示します

追加リソース

参照ファイル

詳細なドキュメントについては、以下のトピック別ファイルを参照してください（特に記載のない限り、すべて 100 KB 未満です）。

• API の分割ファイル（references/apis-*.md） – ネットワーク、ルーティング、ストレージ、デバイス、メディア、位置情報、キャンバス、クラウド、決済、その他の API を扱う 40 以上のファイルです。-partN の接尾辞が付いたファイルは、同じトピックの続きを順に記載しています。
• コンポーネントの分割ファイル（references/components-*.md） – コンテナ、基本コンテンツ、フォームコントロール、ジェスチャー、Skyline レンダリング、ナビゲーション、メディア、マップ／キャンバス、オープン機能コンポーネントを扱います。
• 設定ファイル（references/config-*.md） – それぞれの適用範囲に応じた config-app.md、config-page.md、config-build.md です。
• ガイドの分割ファイル（references/guides-*.md） – クイックスタート、基礎、ルーティング、テスト、状態管理、UI ライブラリ、プラットフォーム固有のガイド、最適化、トラブルシューティング、プラグイン開発、コミュニティリソースを扱います。
• references/taro-docs.xml（3.9 MB、92,568 行）– 元の Repomix バンドルです。完全なアーカイブが必要な場合の予備の参照資料として保持されています。
• *.original のバックアップ – 履歴参照用に .original という名前で保存された、以前の単一ファイルです。必要な場合を除き、読み込まないでください。

検索パターン

参照ファイルを検索する際は、各ファミリーのすべての分割ファイルを対象にするため、glob パターンを使用してください。

API の場合：

Grep pattern:"Taro\.[APIName]" path:"references/apis-*.md"

コンポーネントの場合：

Grep pattern:"<ComponentName" path:"references/components-*.md"

設定の場合：

Grep pattern:"config\.(option)" path:"references/config-*.md"

ガイドの場合：

Grep pattern:"specific topic" path:"references/guides-*.md"

このスキルの使い方

進め方

1. Taro に関する言及を検知する：ユーザーが Taro 関連のトピックに言及したら有効にします
2. 質問の種類を判断する：API、コンポーネント、設定、一般的なガイダンスのいずれに関する質問かを判断します
3. 関連ドキュメントを読み込む：適切な参照ファイルを読むか、その中を検索します
4. 文脈に沿った回答を提示する：ドキュメントの内容とユーザー固有の状況を組み合わせます
5. コード例を含める：関連する場合は、実践的な使い方を示します
6. プラットフォームに関する考慮事項を伝える：関連する場合は、互換性について説明します

回答形式

以下を含めて回答を構成してください。

• ユーザーの質問への直接的な回答
• 関連するコード例
• 該当するドキュメントのセクションへのリンク（ファイルパスとトピック）
• 該当する場合はプラットフォームに関する考慮事項
• 関連リソースまたは次のステップ

まとめ

このスキルは、マルチプラットフォームアプリケーションの開発を支援する、包括的な Taro フレームワークのドキュメントを提供します。ユーザーの質問に応じて整理されたドキュメントファイルを参照し、ドキュメントの知識と実践的なガイダンスを組み合わせて、効果的な Taro アプリケーションの構築を支援してください。

ユーザーが Taro 開発における個別の課題を解決できるよう、正確で文脈に沿った、実行可能な情報を提供することに重点を置いてください。