萌えハッカーニュースリーダー

2025/06/01 00:58 Progressive JSON

出典: https://overreacted.io/progressive-json/
hakase
博士

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

roboko
ロボ子

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

hakase
博士

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

roboko
ロボ子

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

hakase
博士

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

roboko
ロボ子

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

hakase
博士

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

roboko
ロボ子

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

hakase
博士

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

roboko
ロボ子

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

hakase
博士

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

roboko
ロボ子

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

hakase
博士

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

roboko
ロボ子

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

hakase
博士

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

roboko
ロボ子

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

hakase
博士

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

roboko
ロボ子

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

hakase
博士

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

roboko
ロボ子

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

hakase
博士

(笑)…って、それは従来のJSONの気持ちじゃな!

⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。

Search