Inertia Rails のベストプラクティス
Ruby on Rails で高品質な Inertia.js アプリケーションを構築するための包括的なガイドです。このスキルでは、アプリケーションの品質、パフォーマンス、保守性への影響度に応じて優先順位付けされた、8 つのカテゴリにわたる 50 以上のルールを紹介します。
このスキルを使用するタイミング
- 新しい Inertia Rails コントローラーやページを作成するとき
- 既存の Inertia Rails コードをレビューするとき
- Rails アプリケーションを Inertia を使うようにリファクタリングするとき
- Inertia アプリケーションのパフォーマンスを最適化するとき
- 認証/認可パターンを実装するとき
- バリデーション付きのフォームを構築するとき
- Inertia レスポンスのテストを設定するとき
カテゴリの概要
クイックリファレンス
サーバーサイドのセットアップと設定(CRITICAL)
| ID | ルール | コンテキスト |
|---|
| setup-01 | 初期セットアップには Rails ジェネレーターを使用する | 新規プロジェクト |
| setup-02 | キャッシュを無効化するためにアセットのバージョン管理を設定する | すべてのプロジェクト |
| setup-03 | 適切なレイアウト継承を設定する | 複数レイアウトのアプリ |
| setup-04 | フラッシュキーを適切に設定する | フラッシュメッセージ |
| setup-05 | 設定には環境変数を使用する | デプロイ |
| setup-06 | デフォルトのレンダー動作を慎重に設定する | 設定より規約 |
Props とデータ管理(CRITICAL)
| ID | ルール | コンテキスト |
|---|
| props-01 | props では必要なデータのみを返す | すべてのレスポンス |
| props-02 | グローバル props には共有データを使用する | 認証、設定 |
| props-03 | ラムダによる遅延評価を活用する | コストの高い処理 |
| props-04 | 重要度の低いデータには遅延 props を使用する | パフォーマンス |
| props-05 | 部分リロードを正しく実装する | データの更新 |
| props-06 | props で機密データを決して公開しない | セキュリティ |
| props-07 | as_json を使って適切にシリアライズする | データのフォーマット |
| props-08 | 適切な場合はディープマージを実装する | ネストされたデータ |
| props-09 | 変化しないデータには once props を使用する | ナビゲーションのパフォーマンス |
| props-10 | 一貫した命名には prop transformer を使用する | camelCase への変換 |
フォームとバリデーション(HIGH)
| ID | ルール | コンテキスト |
|---|
| forms-01 | 複雑なフォームには useForm ヘルパーを使用する | プログラムによる制御 |
| forms-02 | シンプルなフォームには Form コンポーネントを使用する | 宣言型フォーム |
| forms-03 | バリデーションエラーを適切に処理する | ユーザーへのフィードバック |
| forms-04 | 複数のフォームにはエラーバッグを実装する | 複数フォームのページ |
| forms-05 | フォーム送信後にはリダイレクトパターンを使用する | PRG パターン |
| forms-06 | ファイルアップロードを正しく処理する | マルチパートフォーム |
| forms-07 | バリデーションエラー時にフォームの状態を保持する | ユーザー体験 |
| forms-08 | ネストされたデータにはドット記法を使用する | 複雑なフォーム |
| forms-09 | リアルタイムのバリデーションには precognition を使用する | サーバー側バリデーション |
| forms-10 | ナビゲーションを伴わないリクエストには useHttp を使用する | API 呼び出し |
ナビゲーションとルーティング(高)
| ID | ルール | コンテキスト |
|---|
| nav-01 | 内部ナビゲーションには Link コンポーネントを使用する | SPA の動作 |
| nav-02 | 外部へのリダイレクトには inertia_location を使用する | 外部 URL |
| nav-03 | preserve-scroll を適切に実装する | スクロール位置 |
| nav-04 | コンポーネントの状態には preserve-state を使用する | フォームの保持 |
| nav-05 | リンクに適切な HTTP メソッドを設定する | RESTful アクション |
| nav-06 | 静的ページには inertia のルートヘルパーを使用する | シンプルなルート |
| nav-07 | 303 リダイレクトを正しく処理する | POST/PUT/PATCH/DELETE |
| nav-08 | 体感速度を高めるため、即時訪問を使用する | 高速なナビゲーション |
パフォーマンスの最適化(中〜高)
| ID | ルール | コンテキスト |
|---|
| perf-01 | 動的インポートでコード分割を実装する | バンドルサイズ |
| perf-02 | 遷移の可能性が高いページにはプリフェッチを使用する | 体感速度 |
| perf-03 | stale-while-revalidate キャッシュを設定する | データの鮮度 |
| perf-04 | ポーリングは必要な場合にのみ使用する | リアルタイム更新 |
| perf-05 | merge props を使って無限スクロールを実装する | 大規模なデータセット |
| perf-06 | プログレスインジケーターを最適化する | ユーザーへのフィードバック |
| perf-07 | ブロックしない処理には非同期訪問を使用する | バックグラウンドタスク |
| perf-08 | ページネーションには InfiniteScroll コンポーネントを使用する | 大規模なデータセット |
| perf-09 | スムーズなアニメーションのためにビュー遷移を有効にする | ページ遷移 |
セキュリティ(中〜高)
| ID | ルール | コンテキスト |
|---|
| sec-01 | 認証をサーバー側で実装する | 認証パターン |
| sec-02 | 認可の結果を props として渡す | 権限チェック |
| sec-03 | 機密データには履歴の暗号化を使用する | ブラウザー履歴 |
| sec-04 | Rails の CSRF 保護を利用する | フォームのセキュリティ |
| sec-05 | すべての入力をサーバー側で検証・サニタイズする | データ検証 |
| sec-06 | コントローラーではストロングパラメーターを使用する | 一括代入 |
テスト(中)
| ID | ルール | コンテキスト |
|---|
| test-01 | Inertia のレスポンスには RSpec のマッチャーを使用する | RSpec によるテスト |
| test-02 | Inertia には Minitest のアサーションを使用する | Minitest によるテスト |
| test-03 | 部分リロードと遅延 props をテストする | 高度な機能 |
| test-04 | Capybara でエンドツーエンドテストを実装する | 統合テスト |
| test-05 | リダイレクト後のフラッシュメッセージをテストする | フラッシュメッセージのテスト |
| test-06 | コンポーネントのレンダリングを検証する | レスポンスの検証 |
高度なパターン(中)
| ID | ルール | コンテキスト |
|---|
| adv-01 | 永続レイアウトを実装する | 状態の保持 |
| adv-02 | カスタムのコンポーネントパスリゾルバーを使用する | 標準以外のパス |
| adv-03 | prop トランスフォーマーを設定する | データ変換 |
| adv-04 | SSR を適切に処理する | SEO 要件 |
| adv-05 | ビュー遷移を実装する | モダンなアニメーション |
| adv-06 | 複雑なレイアウトではスクロール領域を使用する | スクロール管理 |
| adv-07 | イベントシステムを効果的に処理する | ライフサイクルフック |
| adv-08 | ページとレイアウト間のデータ受け渡しにはレイアウト props を使用する | レイアウトデータ |
| adv-09 | 最適な DX のために Vite プラグインを設定する | プロジェクトのセットアップ |
各ルールの詳細な説明、コード例、実装ガイダンスについては、AGENTS.md を参照してください。