Reactは、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。 Facebook、Instagram、および個々の開発者や企業のコミュニティによって維持されています。 公式サイト。
今回は、プログラミングというほどのこともないですが
IRISのフロントエンド開発ツールとしてReactを利用しています。
Reactに限らずWeb開発のフレームワークを利用する場合のポイントとしてCSSフレームワークをどうするかというのがあります。
今までは、定番というか一番とっつきやすいBootStrapを使用してきました。
利用が簡単な分、カスタマイズの幅が少ないかなということを感じていました。
とはいえ、他のCSSフレームワークを使うにしても、それをまた学習して、１から書き直すのも大変だなということでそのままにしてきました。
今回、Claude Codeという最強のツールを得たことで、BootStrapをMaterializeに変更するように依頼してみました。
結果は、一発で修正完了
実行確認まで5分もかからないスピード感で終了しました。
もし自分でMaterializeを自習して、実装した場合は、少なくとも２、3日はかかったのではないかと思います。
BootStrapの画面
Materializeの画面
最後にCSP機能の中でReactでうまく置き換えできなかった処理について紹介します。
該当する処理は、サーバー上の商品データに含まれるその商品の画像データ（GIF形式）を取得して、ブラウザにイメージとして描画させるものです。
CSPにはStreamServer.clsというサーバー側で動作する機能が用意されています。
この機能を使ってデータベース上に格納されているストリームデータをHTML IMGタグで処理できる形式に変換してくれます。
Reactで同様の機能を実現する方法が見つからなかったため（そもそもReactはサーバーサイドではなくクライアント上の技術なので）、データベース内に格納されているイメージを取得するのではなく、静的なイメージファイルをウェブサーバーが参照可能な場所に置くことで解決しました。
IRIS側の処理は、IRISでREST APIを実装する方法を理解していれば、簡単です。
前回のログイン処理でユーザー認証をIRIS側でどのように実装されているか確認して見ましょう。
まずはディスパッチクラスの定義です。
Shop.Brokerというクラスの中で定義されています。
checkpasswordというメソッドが最後に定義されていて、最終的にShop.Rest.Customer:checkPasswordという（クラス）メソッドが呼ばれているのがわかると思います。
ここで定義しているパラメータは、とりあえずおまじない的に含めておくことをお勧めします。
（説明し出すと少し長くなるので）
Class Shop.Broker Extends %CSP.REST
{
Parameter CONVERTINPUTSTREAM = 1;
Parameter HandleCorsRequest = 1;
XData UrlMap
{
<Routes>
<Route Url="/product/:code" Method="GET" Call="Shop.Rest.Product:getRecord"/>
<Route Url="/products" Method="GET" Call="Shop.Rest.それでは、今回はより具体的にReact開発方法について解説します。
ショップデモのリポジトリの配下にreactというディレクトリがあります。
この下にReactのコードがあります。
ここのreact-setup.mdに記載されている通り、前準備としてreactのテンプレートを作ります。
npx create-react-app shopdemo --template typescript
あとはこのReactプロジェクトを動かすためのライブラリのインストールを行います。
詳細は、react-setup.mdに書いてあります。
まず３つのディレクトリがあって、これは絶対こうしなければならないというものでもないのですが、基本的なお作法として用意するのが一般的なようです。
ここでは、まずログインをするためのユーザー認証を行うコンポーネントの処理について説明します。
Login.
CSPを使って作成したアプリケーションをReactを使用して書き換える２回目の記事です。
前回の記事で紹介したショップデモの書き換えについてもう少し詳しく説明します。
まずReactについて、インターネット上に様々な情報が提供されていますので、それらを利用しながら学習するということも可能だとは思いますが、一方で学習時間を短縮するには、やはりReactについて説明した本を一通り読む方が速いのではないかと思います。
実際Reactに関する本はたくさんあるので、その中から自分に合いそうなものを選ぶのが良いかと思います。
ちなみに参考までに私が学習に使ったものは、以下です。
詳細は、本を読んでいただくとして、ここでは私の経験上のReact学習のポイントについて、いくつか列挙したいと思います。
CSPは非推奨機能となり、今後の新規アプリケーションの開発には使用しないことが推奨されています。
代わりに昨今のウェブアプリケーション開発に広く利用されているモダンなフレームワークの使用が推奨されています。
Webアプリケーション開発用のJava scriptフレームワークはたくさんあり、そのどれを選択するかは開発者の好みの問題です。
その中で比較的人気の高いReactを使って、CSPアプリケーションを書き換えた例について紹介します。
ちなみにCSPは機能的には２つの側面があり、今回非推奨となったのは、HTMLをサーバー側で生成するための拡張機能を使ったプログラミングに関連する部分です（.cspファイルを使用したHTMLとサーバーサイドプログラミング、Javascriptプログラミングによる開発）。
HTTP通信のインフラの部分（リクエストオブジェクトやセッション管理など）は引き続きIRISの根幹を支える機能として残ります。
実際、現在のIRISのREST関連機能は、このインフラ上で実装されています。
さて、CSPで記述されたアプリケーションをJavascriptフレームワークを使ったアプリケーションに簡単にコンバートできたらいいなと思われるでしょうが、残念ながらそんなうれしい方法はありません。