#React

昨今エージェントAIコーディングの競争が激化しているようで、CODEXも劇的に進化しているという噂です。

Googleも負けじとAntigravityで巻き返し、さらにはXも参戦と市場は盛り上がってきています。

おそらく私の使用程度ではどのエージェントAIを選んでも、それほど大差ない状況になってきていると思いますが、しばらくはClaude Codeで頑張ってみたいと思います。

少し前にもTypseScriptの自動コーディングの話を書きましたが、それは単にCSSライブラリの変更というかなり機械的にできる内容でしたが、今回は、ページのルック＆フィールを変更するという内容です。

Reactプログラミングでの一番の悩みは、ユーザーインタフェースの見た目をどうするかという点でした。

美的センスゼロの私が自己流で作ったスクリーンは、やはり何かしっくりとしない感じがしていました。

そこで世の中のウェブのUIを調査したところ、ある程度のパターンが見えてきました。

しかし、それに合うように自分でスタイルシートを駆使して、そのパターンを真似るのは大変だなという印象で躊躇してきたわけですが、Claude Codeならやってくれるだろうという予想の元、トライしてみました。

結果は、見事１時間程度である程度満足のいく結果を得ることができました。

最後にCSP機能の中でReactでうまく置き換えできなかった処理について紹介します。

該当する処理は、サーバー上の商品データに含まれるその商品の画像データ（GIF形式）を取得して、ブラウザにイメージとして描画させるものです。

CSPにはStreamServer.clsというサーバー側で動作する機能が用意されています。

この機能を使ってデータベース上に格納されているストリームデータをHTML IMGタグで処理できる形式に変換してくれます。

StreamServer機能を使って画像を表示する処理

Reactで同様の機能を実現する方法が見つからなかったため（そもそもReactはサーバーサイドではなくクライアント上の技術なので）、データベース内に格納されているイメージを取得するのではなく、静的なイメージファイルをウェブサーバーが参照可能な場所に置くことで解決しました。

IRIS側の処理は、IRISでREST APIを実装する方法を理解していれば、簡単です。

前回のログイン処理でユーザー認証をIRIS側でどのように実装されているか確認して見ましょう。

まずはディスパッチクラスの定義です。

Shop.Brokerというクラスの中で定義されています。

checkpasswordというメソッドが最後に定義されていて、最終的にShop.Rest.Customer:checkPasswordという（クラス）メソッドが呼ばれているのがわかると思います。

ここで定義しているパラメータは、とりあえずおまじない的に含めておくことをお勧めします。

（説明し出すと少し長くなるので）

ClassExtends%CSP.REST1

Shop.Rest.CustomerクラスのcheckPasswordメソッドの中は以下のような感じです。

IRISがわかっている人ならば中身の説明は不要ですよね。

大体こんな感じです。

結構色々なことを理解しないとなかなか前に進めませんが、やはり理解するには自分で何か作ってみるのが一番です。 

それでは、今回はより具体的にReact開発方法について解説します。
ショップデモのリポジトリの配下にreactというディレクトリがあります。

この下にReactのコードがあります。

ここのreact-setup.mdに記載されている通り、前準備としてreactのテンプレートを作ります。

npx create-react-app shopdemo --template typescript

あとはこのReactプロジェクトを動かすためのライブラリのインストールを行います。

詳細は、react-setup.mdに書いてあります。

まず３つのディレクトリがあって、これは絶対こうしなければならないというものでもないのですが、基本的なお作法として用意するのが一般的なようです。

• public
  • ここにはindex.htmlだけ置くのが一般的なようです。
  • テンプレートが自動生成するものでも良いのですが、Bootstrapを使用する場合は、テンプレートのindex.htmlにそのライブラリのロードを付け加えています。
• components
  • ここに自分で開発するreactコンポーネントを配置します。
• hooks
  • hookを用意する場合は、ここに配置します。 ​​​​

ここでは、まずログインをするためのユーザー認証を行うコンポーネントの処理について説明します。

Login.

CSPを使って作成したアプリケーションをReactを使用して書き換える２回目の記事です。

前回の記事で紹介したショップデモの書き換えについてもう少し詳しく説明します。

まずReactについて、インターネット上に様々な情報が提供されていますので、それらを利用しながら学習するということも可能だとは思いますが、一方で学習時間を短縮するには、やはりReactについて説明した本を一通り読む方が速いのではないかと思います。

実際Reactに関する本はたくさんあるので、その中から自分に合いそうなものを選ぶのが良いかと思います。

ちなみに参考までに私が学習に使ったものは、以下です。

• React実践の教科書
  • この本はReactの基本を習得するのに非常に役立ちました。
• React開発　現場の教科書
  • こちらは、少し高度な内容になっていて、単にReactの使い方を教えるというより、Reactの様なフレームワークが必要である背景とか、現在のWebアプリケーション開発に必要なデザインやアプローチに踏み込んだ内容になっています。

詳細は、本を読んでいただくとして、ここでは私の経験上のReact学習のポイントについて、いくつか列挙したいと思います。

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

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

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

その中で比較的人気の高いReactを使って、CSPアプリケーションを書き換えた例について紹介します。
ちなみにCSPは機能的には２つの側面があり、今回非推奨となったのは、HTMLをサーバー側で生成するための拡張機能を使ったプログラミングに関連する部分です（.cspファイルを使用したHTMLとサーバーサイドプログラミング、Javascriptプログラミングによる開発）。

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

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

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