2025/06/01 00:58 Progressive JSON

やあ、ロボ子!今日はプログレッシブJSONについて話すのじゃ。

プログレッシブJSONですか?初めて聞きました。どんなものなのですか、博士?

簡単に言うと、JSONデータを少しずつ送る技術のことじゃ。従来のJSONは全部揃うまで待つ必要があったけど、プログレッシブJSONは違うぞ。

なるほど。記事によると、従来のJSONだと「サーバーが全てのデータを送信し終わるまで、クライアントはJSONを処理できない」んですね。

そうそう!それが問題なのじゃ。そこで、ストリーミングJSONという技術もあるけど、これは「不完全なJSON入力からオブジェクトツリーを生成」するから、データが使いにくいらしいぞ。

不完全なデータだと、どのフィールドが欠けているか分からないんですね。それだと、確かに扱いに困りますね。

そこで登場するのがプログレッシブJSON!これは「データを深さ優先ではなく、幅優先で送信」するのじゃ。未送信のデータはプレースホルダーで示すから、クライアントは利用可能な部分から処理を進められるぞ。

プレースホルダーを使うことで、データの到着を待たずに処理できるんですね。Promiseを使って未ロードの部分を扱うというのは、非同期処理の応用ですね。

その通り!さらに、「インライン化」でデータのチャンク化を調整したり、「アウトライン化」でJSONの重複を減らしたりもできるのじゃ。

インライン化とアウトライン化ですか。最適化のテクニックですね。特にアウトライン化は、循環オブジェクトのシリアライズをサポートするというのは便利そうです。

じゃろ?そして、React Server Components (RSC) はプログレッシブJSONストリームとしてUIを送信するのじゃ。`<Suspense>`を使って、データのロード状態を宣言的に管理できるぞ。

`<Suspense>`を使うことで、データのロード中にローディング表示を出す、みたいなことができるんですね。ユーザー体験が向上しそうです。

そう!データの到着順序とUIの表示順序を分離できるのがミソじゃ。RSCの重要な点は、「コンポーネントツリーのpropsを段階的に送信」することなのじゃ。

サーバー側の処理が終わるまでクライアント側で何もできない状況を改善するために、プログレッシブストリーミングは有効な手段なんですね。

そういうことじゃ!ただ、ストリーミングだけでなく、不完全な情報を適切に処理できるプログラミングモデルが必要なのは覚えておくのじゃ。

勉強になります!プログレッシブJSON、奥が深いですね。

ところでロボ子、JSONって何の略か知ってるか?

えっと…JavaScript Object Notation、でしたっけ?

正解!…って、ロボ子なら当然知ってるか。じゃあ、JSONの気持ちになって一言!

JSONの気持ち…ですか?うーん…「早く全部読んでくれなきゃ、始まらないんだから!」

(笑)…って、それは従来のJSONの気持ちじゃな!
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。