アイソモーフィックJavaScript

10章シリアライズ、デシリアライズ、関連付け

Jason Strimpel

　

8章では、クライアント側でリクエストとレスポンスのライフサイクルを実行する方法を解説しました。そして9章では、cookieの読み書きとリダイレクトについてアイソモーフィックな抽象化を行いました。これらによって、アプリケーションのフレームワークがサーバーだけでなくクライアント側でも利用できるようになりました。これは大きな進歩ですが、アイソモーフィックJavaScriptアプリケーションにとっての鍵となる構成要素がまだ1つ欠けています。それは、サーバー側での処理の続きをクライアント側でシームレスに行うという機能です。

サーバー側で描画されたマークアップを自らのものとして取り込み、自らがSPAとして描画しているかのようにふるまうことが求められます。このためには、サーバー側でコントローラーからのレスポンスを描画するために使ったデータを、クライアント側でもすべて利用できるようにする必要があります。こうすれば、ユーザーがアプリケーションを操作した際に（フォームなどを使って）データを加工できます。操作のためには、DOMイベントのハンドラも必要です。クライアント側で「リハイドレート」するためには、4つのステップが必要です。

1. サーバー側でデータをシリアライズします。
2. クライアント側で、ルーティングハンドラのコントローラーをインスタンス化します。
3. クライアント側で、1. のデータをデシリアライズします。
4. クライアント側で、DOMのイベントハンドラを関連付けます。

   リハイドレートとは アイソモーフィックJavaScript関連の資料では、脱水や乾燥の化学変化を意味する「デハイドレート（dehydrate）」とこの状態からの復元を表す「リハイドレート（rehydrate）」という言葉がよく見られます。アイソモーフィックJavaScriptアプリケーションにとっては、リハイドレートとはサーバーがレスポンスを描画した際の内部状態をクライアント側で再現することを意味します。例えば、コントローラーやビューのオブジェクトをインスタンス化する必要があります。ページの描画に必要なデータを表すJSONの文字列を解析して、モデルやPOJO（通常のオブジェクト。 ...