CSPアプリケーションをReactを使って書き換えるその１

CSPは非推奨機能となり、今後の新規アプリケーションの開発には使用しないことが推奨されています。

代わりに昨今のウェブアプリケーション開発に広く利用されているモダンなフレームワークの使用が推奨されています。

Webアプリケーション開発用のJava scriptフレームワークはたくさんあり、そのどれを選択するかは開発者の好みの問題です。

その中で比較的人気の高いReactを使って、CSPアプリケーションを書き換えた例について紹介します。

ちなみにCSPは機能的には２つの側面があり、今回非推奨となったのは、HTMLをサーバー側で生成するための拡張機能を使ったプログラミングに関連する部分です（.cspファイルを使用したHTMLとサーバーサイドプログラミング、Javascriptプログラミングによる開発）。

HTTP通信のインフラの部分（リクエストオブジェクトやセッション管理など）は引き続きIRISの根幹を支える機能として残ります。

実際、現在のIRISのREST関連機能は、このインフラ上で実装されています。

さて、CSPで記述されたアプリケーションをJavascriptフレームワークを使ったアプリケーションに簡単にコンバートできたらいいなと思われるでしょうが、残念ながらそんなうれしい方法はありません。

まずReactに書き換えるにあたり、サーバー側の処理とクライアント（ブラウザ）側の処理を綺麗に分離する作業が必要になります。

CSPの場合は、基本的には、これらの処理がCSPファイルの中に混在して作成されているケースが多いと思います。

この方法は、一人で開発する際には、ある意味効率の良い方法ですが、長い目で見るとメンテナンスに難点がある方法です。

比較的大規模なアプリケーションの場合、そういう問題に対処するために、ある程度サーバーとクライアントの処理を分離する努力をされている方もおられると思いますが、完全な分離はできていないケースが多いのではないかと思います。

しかし、Reactで開発するためには、まず徹底的な分離が必要です。

そしてサーバーとクライアントは、RESTを使用して通信することでデータを交換する様に変更します。

今回書き換えたサンプルは、GITHUB上に公開しています。

CSPの基本機能を示すためのシンプルなデモです。

ショップデモ

インターシステムズFAQデモ

公開しているFAQシステム（CSPとZenで作成）をReactで書き換えたもの

FAQデモ

今後、これらのデモの書き換えに関して、もう少し詳しい記事を書く予定です。