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

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

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

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

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

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

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

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

• JavaScript
  • 結構Javascriptも進化していてReactはその新しい仕様を積極的に取り入れているので、少なくともES6で追加された構文等は理解する必要があります。  
• jsx構文
  • Reactでコンポーネントを作成する上では、必須ではないとはいえ、ほとんどのサンプル等も使っているので、その構文について理解する必要があります。  
• Props
  • コンポーネント間でデータを交換するための仕組み  
• Hooks
  • コンポーネントが共通に利用できる部品的なもの
  • 代表的なものは、状態を管理するuseStateなど  
• TypeScript
  • これも必須ではありませんが、JavaScriptではなくTypeScriptで開発することが推奨されています。
  • 一方でネット上のサンプルは、まだJavaScriptのものも多いので、それをTypeScriptに書き換える手間がかかります。  
• 進歩（変化のスピード）が速い
  • 最近はバージョンアップのペースは少し落ち着いたのかもしれませんが、オープンソースの常でガンガン新しいバージョンがリリースされています。 また下位互換性はあんまり気にしていないようで、昔のバージョンで動いていたものが新しいバージョンで動かないことが結構な頻度で発生します。
  • ネットで拾ってきたコードが動かない場合は、バージョンの違いをまずチェックした方がいいでしょう
• CSSフレームワーク
  • CSSフレームワークも色々ありますが、ここではBootstrapを使用しています。

今回の書き換え対象のショップデモですが、名前からある程度想像できると思いますが、ウェブ上で予め用意された商品を選んで、注文するというシンプルなアプリケーションです。

CSPが発表された当時のウェブアプリケーションは、ウェブフォームデータをサブミット（POST）して、サーバー側でその情報に基づいて処理し、その結果をウェブクライアントに返すというのが基本でした。

CSPではHyper Eventと呼ばれるAjaxの先駆けとなる動的ページ書き換えの技術が導入され、当時では画期的な機能として注目されました。

このデモのCSP版ではその機能を使って、いわゆるショッピングカートの機能を実現しています。

実は、このショッピングカートの実装がReactでは意外に難しく前述の教科書にそのやり方が書かれていなくて、ネットを色々調べてなんとか実装することができました。

そしてもう一つCSPとReact（他のモダンウェブフレームワークも同じ）で大きな違いがあるのが、CSPは基本ページ遷移していくことが前提でしたが、昨今のフレームワークはSPA(Single Page Application)が基本となるので、アプリケーションの構築手法が根本的に異なります。

従って機械的なコンバージョンが非常に困難で、１つ１つ丁寧に置き換えていく必要があります。

Reactでは、サーバー側の処理でウェブクライアントの描画をコントロールすることはなく、サーバーはそのクライアントの描画に関して動的に変更したいデータを返すというのが基本となります。

CSPでのサーバー側でクライアントの描画に必要なHTMLを予め組み立ててクライアントに返答するというアプローチとは大きく異なります。

今回は、Reactでの開発概要説明となりましたが、次回はよりこのデモの具体的なReactでの開発について説明します。