react-native-architecture

概要

react-native-architectureとは？

react-native-architectureは、スケーラブルで本番対応のReact Nativeモバイルアプリを構築するための実践的な設計図を提供します。Expoの活用、高度なナビゲーション、ネイティブモジュール統合、オフラインファーストのパターン、堅牢なプロジェクト構造に重点を置いています。このスキルは、ベストプラクティスに従いながらアプリの開発スピードを上げたいフロントエンド開発者やモバイルチーム向けに設計されています。

どんな人におすすめ？

• 新規のReact NativeまたはExpoプロジェクトを始める開発者
• 複雑なナビゲーションや認証フローを実装するチーム
• ネイティブモジュールやプラットフォームAPIの統合が必要なプロジェクト
• オフライン対応や信頼性の高い状態管理が求められるアプリ
• React Nativeのパフォーマンス最適化やモバイル向けCI/CD構築を目指す方

解決できる課題

• 実績あるプロジェクト構造でセットアップ時間を短縮
• ExpoとBare React Nativeの使い分けを明確化
• ネイティブモジュールやプラットフォームAPIの統合をガイド
• オフラインファーストやクロスプラットフォーム開発を支援
• スケーラブルで保守しやすいコードベースの維持を助ける

使い方

インストール手順

1. 以下のコマンドでエージェントにスキルを追加します:

   npx skills add https://github.com/wshobson/agents --skill react-native-architecture
   

2. SKILL.mdファイルを開き、概要とワークフローの案内を確認します。
3. README.md、AGENTS.md、metadata.jsonなどの補助ファイルで詳細な背景情報を把握します。
4. rules/、resources/、references/、scripts/ディレクトリを調べ、実装の詳細や補助ユーティリティを活用しましょう。

プロジェクト構成の概要

推奨構成は以下の通りです:

• src/app/: Expo Routerの画面群。ナビゲーションタイプ別（例：auth、tabs）に整理
• src/components/: UIや機能別のコンポーネント
• src/hooks/: カスタムReactフック
• src/services/: APIやネイティブサービスの統合
• src/stores/: 状態管理ロジック
• src/utils/: ユーティリティ関数
• src/types/: TypeScriptの型定義

ExpoとBare React Nativeの違い

• Expo: セットアップが簡単でネイティブモジュールは管理され、OTAアップデートが高速
• Bare React Native: より細かい制御が可能でネイティブモジュールの手動リンクが必要、複雑度が高い
  ほとんどのプロジェクトはExpoを選択し、Expoで対応できないカスタムネイティブコードが必要な場合にBareを検討してください。

スキルの適用方法

ファイルをそのままコピーするのではなく、アーキテクチャやパターンを自分のリポジトリ、ツールチェーン、チームの慣習に合わせて適応させてください。

よくある質問

react-native-architectureの主なメリットは？

React Nativeプロジェクトの明確でスケーラブルな出発点を提供し、セットアップ時間や技術的負債を減らします。

既存のReact Nativeプロジェクトでも使えますか？

はい。推奨される構造やパターンを段階的に取り入れて保守性を向上させることが可能です。

このスキルはExpo専用ですか？

いいえ。ほとんどのケースでExpoを推奨しますが、カスタムネイティブ統合が必要な場合はBare React Nativeもサポートしています。

インストール後はどこから始めればいいですか？

まずSKILL.mdファイルで概要を把握し、その後ファイルツリーを探索して詳細なガイドや例を確認してください。

利用可能なファイルやスクリプトはどうやって確認できますか？

Filesタブを使って、ネストされた参照や補助スクリプトを含む完全なファイルツリーを閲覧できます。