Remix では、以前は @remix-run/cloudflare の json() 関数を使用して JSON レスポンスを返していましたが、これは非推奨となり、代わりに標準の Response.json() を使用することが推奨されています。

変更の背景

この変更の背景には、Web プラットフォームの成熟と Remix の設計哲学が深く関係しています。Remix の主要な設計原則の一つは「可能な限り Web 標準を活用する」というものです。Web 標準の Fetch API が広く普及し、Response.json() が多くの実行環境でサポートされるようになったことで、Remix 独自の実装を維持する必要性が低下しました。

さらに、この変更はアプリケーションの移植性も向上させるでしょう。例えば、Cloudflare から Deno、Node.js など、異なる実行環境に移行する際も、標準 API を使用していれば、コードの変更を最小限に抑えることができます。フレームワークの依存関係を減らすことで、バンドルサイズの最適化にも貢献しています。Web 標準の API を使用することで、追加のコードを含める必要がなくなり、アプリケーションの実行時パフォーマンスが向上する可能性があるといえます。

移行例

これまでの実装では、 action や loader の戻り値を json()でラップしていました。しかし json関数が非推奨になるため、別の方法で実装する必要があります。

import { json } from "@remix-run/cloudflare";

export async function action() {
  return json({ 
    status: "success",
    data: { ... } 
  });
}

新しいやり方では、標準の Response オブジェクトを利用して JSON を返します。

export async function action() {
  return Response.json({ 
    status: "success",
    data: { ... } 
  });
}

TypeScriptにおける型の互換性について

型の互換性については、Response.json() も @remix-run/cloudflare の json() と同じ型を返すため、既存のコードの型安全性は維持されます。

ステータスコードの指定も、Response.json() でオプションとして可能です。

return Response.json(data, {
  status: 400,
  statusText: "Bad Request"
});

まとめ

Web標準の実装に寄せることで、移植性や仕様の理解がよりシンプルになります。json関数そのものが非推奨になったということもありますが、積極的に寄せることをお勧めします。また、既存のプロジェクトでは段階的な移行が可能なので、新しい機能から徐々に Response.json() を採用していくことをお勧めします。

参考文献

MDN Web Docs – Response.json()

Remix GitHub Issue – Deprecate json() helper

Tag: ローダー関数

Remix で Response.json() への移行を進める理由と実装方法