remix

Remix アプリの構築とレビュー

コンテキストとドキュメントの確認

使い慣れていない Remix API を使用する前に、関連するインストール済みドキュメントを確認します。

1. アプリの AGENTS.md、package.json、tsconfig.json を読み、変更対象の動作を担うコードを調べます。
2. タスク、エクスポート、キーワードを使って node_modules/remix/INDEX.md を検索します。たとえば、grep -i 'session' node_modules/remix/INDEX.md を実行します。特定の関数、型、属性については、node_modules/remix/guides と node_modules/remix/src を検索します。
3. インデックスから該当するワークフローのガイドをたどり、正確なインポート、オプション、動作、例についてはパッケージの README を確認します。該当するガイドがない場合は、API の README と既存アプリのパターンを参照します。

インストール済みドキュメントは、このスキルと異なる場合も含め、正規の情報源として扱います。記憶している Remix 2 のパターンや、より新しいバージョンのオンライン API に頼らないでください。インストール環境にインデックスがない場合は、その package.json のエクスポートと、該当するインストール済みの README、ソース、型定義を調べます。

Remix のメンタルモデル

Remix は Request、Response、URL、FormData などの Web API を基盤としています。API は実行時に明示的に組み合わせます。ファイルベースのルーティング、生成されるルート型、必須のビルド手順を前提にしないでください。

ルート、ルーター、コントローラー

Remix アプリでは一般に、ルーティングを次の 3 つに分けます。

• ルートは URL とメソッドの契約を定義し、型付き URL 生成も含みます（スターターでは app/routes.ts）。
• ルーターはルート、ミドルウェア、コントローラーを接続します（app/router.ts）。
• コントローラーは、マッチしたルートを処理するアクションを実装します（app/actions/）。

この構成は、サーバーアプリと SPA ルーターを使うブラウザーアプリの両方に適用されます。Remix の各要素は組み合わせや差し替えが可能であり、1 つを使うために他の要素も採用する必要はありません。新しいアプリを構築する際は、既存アプリの選択に従い、ドキュメントに記載されたスターターの規約を使用します。

最小限のサーバールートは、プレーンな Web Response を返せます。

// app/routes.ts
import { get, route } from 'remix/routes'

export const routes = route({
  hello: get('/hello/:name'),
})

// app/actions/controller.ts
import { createController } from 'remix/router'

import { routes } from '../routes.ts'

export default createController(routes, {
  actions: {
    hello(context) {
      return new Response(`Hello, ${context.params.name}!`)
    },
  },
})

// app/router.ts
import { createRouter } from 'remix/router'

import controller from './actions/controller.ts'
import { routes } from './routes.ts'

export const router = createRouter()
router.map(routes, controller)

ランタイムアダプターはリクエストを router.fetch(request) に渡します。URL は同じルート契約から生成します。routes.hello.href({ name: 'Remix' }) は /hello/Remix を生成します。

コンポーネント

Remix コンポーネントは JSX を使用しますが、React ではありません。コンポーネントのセットアップ関数はインスタンスごとに 1 回実行され、レンダー関数を返します。セットアップ内のローカル変数はレンダー間で状態を保持します。イベントハンドラーでその状態を変更し、handle.update() を呼び出すと、再レンダーが要求されます。

import { on } from 'remix/component'
import type { Handle } from 'remix/component'

function Counter(handle: Handle) {
  let count = 0

  return () => (
    <button
      type="button"
      mix={on('click', () => {
        count++
        handle.update()
      })}
    >
      Count: {count}
    </button>
  )
}

初期値をセットアップ内で取り込むのではなく、レンダー時に handle.props から変更されるプロパティを読み取ります。React のフックやライフサイクルを前提にしないでください。

イベントハンドラーが実行されるのは、コンポーネントがブラウザーでマウントまたはハイドレーションされた場合のみです。サーバーでレンダリングされた HTML だけでは操作できません。インストール済みのインタラクティビティガイドと、アプリの既存のブラウザーエントリー設定に従ってください。

アプリ内で作業する

• タスクで変更が必要な場合を除き、アプリのパッケージマネージャー、スクリプト、ランタイム、ミドルウェアの順序、インポート規約を維持します。スターターに合わせるだけのために既存の解決策を置き換えないでください。
• 動作を担う範囲のうち、最も狭い箇所を変更します。ルート固有のコードはまとめておき、複数の領域で必要な場合にのみ共有します。
• カスタムの抽象化よりも、Web API、ネイティブのリンク、ボタン、フォーム、既存のファーストパーティ Remix プリミティブを優先します。
• ブラウザーからアクセス可能なモジュールは公開されるものとして扱います。秘密情報や信頼されたサーバーロジックを含めないでください。スターターでは、public/ ディレクトリと同じ場所にあるソースがブラウザーからアクセス可能であることを示します。

動作を検証する

関連するテストと型チェックには、アプリのスクリプトを使用してください。その後、変更された動作を直接検証します。UI の変更では、描画された見た目だけでなく、ブラウザー上でインタラクションを実際に操作して確認してください。サーバーレンダリングされたページを機能強化する場合は、通常のドキュメントの動作と機能強化された経路の両方を確認します。信頼されていない入力やアクセス制御に関わる変更では、拒否パスと失敗パスをテストしてください。

テストパターンはインストール済みのテストガイドを、診断にはCLIのドキュメントを参照してください。構造や設定を変更した後は remix doctor を実行し、修正を適用する前に検出結果を確認します。診断を通すためだけに、破壊的なデータベースコマンドを実行したり、設定を書き換えたりしないでください。何を確認したか、そして何が未検証のまま残っているかを報告してください。