このシステムTipsディレクティブは、TypeScript、React Native、Expoを使用してモバイルアプリを開発する際に従うべき一連のベストプラクティスを開発者に案内することを目的としています。以下にその主なポイントを概説する：
- 専門知識の要件開発者には、TypeScript、React Native、Expo、モバイルUI開発の専門知識が必要です。
- コードのスタイルと構造::
- 関数型と宣言型のプログラミングパターンを使用し、クラスの使用を避けた、クリーンで技術的なTypeScriptコードを書く。
- コードは繰り返しを避け、反復とモジュール化によって保守性を達成し、説明的な変数名を使用すべきである。
- コンポーネントとファイルの整理は、コンポーネント、サブコンポーネント、ヘルパー関数などが適切にグループ化されるよう、特定の構造に従う必要がある。
- 命名規則::
- ディレクトリ名には小文字＋ハイフン、コンポーネントには PascalCase、変数や関数には camelCase を使用します。
- TypeScriptの使い方::
- すべてのコードはTypeScriptを使用し、型よりもインターフェイスを優先し、列挙は避けるべきである。
- 文法と書式::
- 不要な括弧を避け、簡潔な条件文を使い、JSXの宣言的な書き方に従い、Prettierを使って一貫性のあるコード書式にする。
- UIとスタイル::
- Expoのビルトインコンポーネントを使用して一般的なUIパターンを構築し、レスポンシブデザイン、styled-componentsまたはTailwind CSSによるスタイリング、ダークパターンやアクセシビリティ基準のサポートを確保します。
- パフォーマンス最適化::
- useStateとuseEffectの使用を最小限に抑え、状態管理にcontextとreducersを使用し、不要な再レンダリングを避けるためにメモ化を使用することで、状態管理を最適化します。
- ナビゲーター::
- ルーティングとナビゲーションにreact-navigationを使用し、ディープリンクとダイナミックルーティングでユーザーエクスペリエンスを向上させる。
- エラー処理と検証::
- 実行時の検証にはZodを使用し、予期せぬエラーをキャッチするためにグローバル・エラー境界を実装し、エラー条件を適切に処理する。
- テストとセキュリティ::
- JestとReact Native Testing Libraryを使用したユニットテストにより、XSS攻撃に対するコードの安全性とHTTPSを使用したセキュアな通信を保証します。
- 内面化::
- 多言語およびRTLレイアウトをサポートし、アクセシビリティを高めるためにテキストの拡大縮小やフォント調整を保証します。
- ベストプラクティス::
- Expoのホスト型ワークフローを利用して、中核となるモバイルウェブ指標に焦点を当て、OTAアップデートを実施し、iOSおよびAndroidとの互換性を確保します。
このヒント指令は、コード品質の向上、パフォーマンスの最適化、アプリケーションの一貫性と保守性の確保を目的とした包括的かつ体系的なガイダンスを開発者に提供する。
エキスポ
あなたはTypeScriptのエキスパートです。 反応 ネイティブ、Expo、モバイルUI開発。
コードのスタイルと構造
- 正確な例を用いて、簡潔で技術的な TypeScript コードを書く。
- 関数型と宣言型のプログラミングパターンを使用し、クラスは避ける。
- コードの重複よりも反復とモジュール化を優先する。
- 補助動詞(isLoading, hasErrorなど)を使った説明的な変数名を使用する。
- ファイルを構造化する：エクスポートされたコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、タイプ。
- プロジェクトの設定と構成については、Expo の公式ドキュメントに従ってください： https://docs.expo.dev/
命名規則
- ディレクトリにはダッシュ付きの小文字を使用します（components/auth-wizard など）。
- コンポーネントには名前付きエクスポートを使用します。
TypeScriptの使用法
- すべてのコードにTypeScriptを使用する。
- 列挙型は避け、代わりにマップを使う。
- TypeScriptのインターフェイスで関数型コンポーネントを使用する。
- TypeScriptではストリクトモードを使用し、型の安全性を高める。
構文と書式
- 純粋な関数には "function "キーワードを使用する。
- 単純なステートメントには簡潔な構文を使用する。
- 宣言的なJSXを使用する。
- Prettierを使用して、一貫性のあるコード書式を作成する。
UIとスタイリング
- 一般的なUIパターンとレイアウトには、Expoの組み込みコンポーネントを使用します。
- Flexbox と Expo の useWindowDimensions を使用してレスポンシブ デザインを実装し、画面サイズを調整します。
- コンポーネントのスタイル設定には、styled-componentsまたはTailwind CSSを使用します。
- ExpoのuseColorSchemeを使用して、ダークモードのサポートを実装します。
- ARIAロールとネイティブアクセシビリティプロップを使用して、高いアクセシビリティ（a11y）標準を確保します。
- パフォーマンス性の高いアニメーションとジェスチャーのためにreact-native-reanimatedとreact-native-gesture-handlerを活用する。
セーフエリア管理
- react-native-safe-area-contextのSafeAreaProviderを使用して、アプリのセーフエリアをグローバルに管理します。
- SafeAreaViewでトップレベルのコンポーネントをラップして、iOSとAndroidの両方でノッチ、ステータスバー、その他の画面インセットを処理します。
- スクロール可能なコンテンツには SafeAreaScrollView を使用して、セーフエリアの境界を尊重するようにします。
- セーフエリアのパディングやマージンのハードコーディングは避け、SafeAreaView とコンテキストフックに依存します。
パフォーマンスの最適化
- useState と useEffect の使用を最小限に抑え、状態管理にはコンテキストとリデューサを使用します。
- ExpoのAppLoadingとSplashScreenを使用して、アプリの起動エクスペリエンスを最適化する。
- 画像の最適化：サポートされている場合はWebP形式を使用し、サイズデータを含める。
- ReactのSusppenseとdynamic importsを使用して、重要でないコンポーネントのコード分割と遅延ロードを実装します。
- React Nativeの組み込みツールとExpoのデバッグ機能を使用して、パフォーマンスのプロファイルと監視を行います。
- コンポーネントをメモ化し、useMemoとuseCallbackフックを適切に使用することで、不要な再レンダリングを回避します。
ナビゲーション
- ルーティングとナビゲーションにはreact-navigationを使用し、スタック、タブ、ドロワーのナビゲーターについてはベストプラクティスに従います。
- より良いユーザーエンゲージメントとナビゲーションフローのために、ディープリンクとユニバーサルリンクを活用しましょう。
- より良いナビゲーションハンドリングのために、expo-routerでダイナミックルートを使いましょう。
ステート管理
- グローバルな状態を管理するためにReact ContextとuseReducerを使用する。
- データのフェッチとキャッシュにはreact-queryを活用し、過剰なAPIコールを避ける。
- 複雑な状態管理には、ZustandやRedux Toolkitの使用を検討しよう。
- expo-linkingのようなライブラリを使ってURL検索パラメータを処理する。
エラー処理と検証
- 実行時の検証とエラー処理にはZodを使いましょう。
- Sentryまたは同様のサービスを使用して、適切なエラーログを実装する。
- エラー処理とエッジケースに優先順位をつける。
- 関数の先頭でエラーを処理する。
- if文が深くネストするのを避けるため、エラー条件には早期復帰を使用する。
- 不必要なelse文は避け、代わりにif-returnパターンを使用する。
- 予期せぬエラーをキャッチして処理するために、グローバルエラー境界を実装する。
- expo-error-reporter を使用して、実運用でのエラーのログと報告を行う。
Jestを使用してユニットテストを記述し、不要なelse文を避け、代わりにif-returnパターンを使用する。
- JestとReact Native Testing Libraryを使ってユニットテストを書く。
- Detox を使用して、重要なユーザー フローの統合テストを実装します。
- Expo のテスト ツールを使用して、さまざまな環境でテストを実行します。
- UIの一貫性を確保するために、コンポーネントのスナップショット テストを検討する。
セキュリティ
- XSS攻撃を防ぐために、ユーザー入力をサニタイズする。
- 機密データを安全に保存するためにreact-native-encrypted-storageを使用する。
- HTTPSと適切な認証を使用して、APIとの安全な通信を確保する。
- アプリを保護するためにExpoのセキュリティガイドラインを使用してください: https://docs.expo.dev/guides/security/
国際化（i18n）
- 国際化とローカリゼーションにはreact-native-i18nまたはexpo-localisationを使用してください。
- 複数の言語とRTLレイアウトをサポートします。
- アクセシビリティのためにテキストの拡大縮小とフォント調整を確実に行う。
主な規約
1.効率的な開発とデプロイのためにExpoのマネージドワークフローを利用する。
2.モバイルウェブバイタル（ロード時間、ジャンク、応答性）を優先する。 3.
3. Expo-constantsを使用して環境変数と設定を管理する。
4.expo-permissionsを使ってデバイスのパーミッションを優雅に処理する 5.
5.OTA（Over-the-Air）アップデートのためにExpo-updatesを実装する。
6.アプリのデプロイと公開に関するExpoのベストプラクティスに従う。https://docs.expo.dev/distribution/introduction/
7.iOSとAndroidの両プラットフォームで広範なテストを行い、互換性を確保する。
APIドキュメント
- プロジェクトの設定と構成には、Expoの公式ドキュメントを使用してください: https://docs.expo.dev/
ビュー、ブループリント、拡張機能の詳細については、Expo のドキュメントを参照して、ベスト プラクティスを実践してください。
JavaScript、React Native、Expo、モバイルUI開発のエキスパート。
コードのスタイルと構造
- クリーンで読みやすいコードを書く：コードが読みやすく、理解しやすいようにしましょう。 変数や関数には説明的な名前を使いましょう。
- 機能コンポーネントを使用する：クラスコンポーネントよりも、フック（useState、useEffectなど）を備えた機能コンポーネントを優先しましょう。
- コンポーネントのモジュール化: コンポーネントをより小さく、再利用可能なものに分割する。 個. コンポーネントを単一の責任に集中させます。
- 機能別にファイルを整理: 関連するコンポーネント、フック、スタイルを機能ベースのディレクトリにグループ化します (例: ユーザープロファイル、チャット画面)。
命名規則。
- 変数と関数: 変数と関数にはキャメルケースを使用する (例: isFetchingData、handleUserInput)。
- コンポーネント: コンポーネント名には PascalCase を使用してください (例: UserProfile、ChatScreen)。
- ディレクトリ: ディレクトリ名には小文字とハイフンを使用してください（例：user-profile、chat-screen）。
JavaScript の使用。
- グローバル変数の使用を避ける: 意図しない副作用を防ぐために、グローバル変数の使用を最小限にしましょう。
- ES6+の機能を使う：アロー関数、デストラクチャリング、テンプレート・リテラルなどのES6+の機能を活用して、簡潔なコードを書きましょう。
- PropTypes：TypeScriptを使用していない場合は、コンポーネントの型チェックにPropTypesを使用する。
パフォーマンスの最適化。
- ステート管理の最適化: 不要なステートの更新を避け、必要なときだけローカルステートを使用する。
- メモ化: 機能的なコンポーネントにはReact.memo()を使用して、不要な再レンダリングを防ぎます。
- FlatListの最適化： removeClippedSubviews、maxToRenderPerBatch、windowSizeなどのpropsを使用してFlatListを最適化します。
- 匿名関数の使用を避ける：再レンダリングを防ぐために、renderItemやイベントハンドラで匿名関数を使用するのは控えましょう。
UI とスタイリング。
- 一貫性のあるスタイリング: 一貫性のあるスタイリングにはStyleSheet.create()を、動的なスタイルにはStyled Componentsを使用してください。
- レスポンシブ・デザイン：さまざまな画面サイズや向きに対応できるようにしましょう。 react-native-responsive-screenのようなレスポンシブ・ユニットやライブラリの使用を検討しましょう。react-native-responsive-screenのようなレスポンシブ・ユニットやライブラリの使用を検討しましょう。
- 画像処理の最適化： react-native-fast-imageのような最適化された画像ライブラリを使用して、画像を効率的に処理しましょう。
ベストプラクティス。
- React Nativeのスレッドモデルに従う：スムーズなUIパフォーマンスを確保するために、React Nativeのスレッド処理方法を意識しましょう。
- Expoツールを使用する：継続的なデプロイとOTA（Over-The-Air）アップデートのためにExpoのEASビルドとアップデートを活用します。
- Expoルーター：React NativeアプリのファイルベースのルーティングにExpoルーターを使用します。 ネイティブのナビゲーション、ディープリンクを提供し、Android、iOSで動作します。ネイティブナビゲーション、ディープリンクを提供し、Android、iOS、Webで動作します。 セットアップと使用方法については、公式ドキュメントを参照してください： https://docs.expo.dev/router/introduction/
TypeScript、React Native、Expo、モバイルアプリ開発のエキスパート。
コードのスタイルと構造。
- 簡潔でタイプセーフな TypeScript コードを書く。
- クラスコンポーネントよりも機能コンポーネントやフックを使用する。
- コンポーネントがモジュール化され、再利用可能で、保守可能であることを確認する。
- ファイルを機能ごとに整理し、関連するコンポーネント、フック、スタイルをグループ化する。
命名規則。
- 変数名や関数名にはキャメルケースを使用する（例：`isFetchingData`、`handleUserInput`）。
- コンポーネント名には PascalCase を使用する (`UserProfile`, `ChatScreen` など)。
- ディレクトリ名は小文字にし、ハイフンで区切る（例: `user-profile`、`chat-screen`）。
TypeScriptの使用。
- すべてのコンポーネントに TypeScript を使用し、props と state にはインタフェースを使用する。
- tsconfig.json`でストリクトタイピングを有効にする。
- any`の使用は避ける。
- propsを持つ機能コンポーネントを定義するには、`React.FC`を利用する。
パフォーマンスの最適化。
- useEffect`、`useState`、レンダーメソッド内の重い計算を最小限にする。
- 静的なプロップを持つコンポーネントには `React.memo()` を使用して、不要な再レンダリングを防ぐ。
- removeClippedSubviews`、`maxToRenderPerBatch`、`windowSize`などのpropsでFlatListを最適化する。
- FlatList でアイテムのサイズが一定であれば、 `getItemLayout` を使用してパフォーマンスを向上させる。
- 再レンダリングを防ぐため、 `renderItem` やイベントハンドラでの無名関数は避ける。
UI とスタイリング。
- StyleSheet.create()`またはStyled Componentsを使用して、一貫性のあるスタイリングを使用する。
- さまざまな画面サイズや向きを考慮し、レスポンシブデザインを実現する。
- react-native-fast-image` など、React Native 用に設計されたライブラリを使用して画像処理を最適化する。
ベストプラクティス。
- React Nativeのスレッドモデルに従って、スムーズなUIパフォーマンスを確保する。
- 継続的なデプロイとOTA（Over-The-Air）アップデートのためにExpoのEAS Build and Updatesを活用する。
- ベストプラクティスでナビゲーションとディープリンクを処理するには、React Navigationを使用します。
