最近、Reactが稼働しているサイトが増えたと感じています。
（Chromeの拡張機能で、Reactが稼働している事を知ることが可能です）
って事で、、、若者には負けてられない・・・（勝手に若者が作った事にしてますが…）
（と、思いつつも、自分のことをジジィと言い、出来ない事が増えたと嘆く事多々…）
という事で、今回も勉強した内容をメモしておきます。（Windows操作でした）
Node.js
下記のURLからInstallしていきます。
https://nodejs.org/ja
「LTS：長期サポート版」を選択するのが手堅いでしょう。
インストール作業自体は、デフォルトのままで問題ありません。
React環境の準備
セットアップする環境には、インターネットへの接続が必須です。あらかじめ、
https://registry.npmjs.org/ に正常にアクセスできる事を確認しておきましょう。
PowerShellを管理者モードで開き、コマンドを実行します。
npx create-react-app ＜Reactのフォルダ＝ホーム＞
Typescriptを勉強したい場合は、
npx create-react-app ＜Reactのフォルダ＝ホーム＞ --template typescript
で準備しましょう。
Windows固有のエラー
「npx : このシステムではスクリプトの実行が無効になっているため…」
Windowsで作業をすると、セキュリティ的に、コマンド実行させて貰えない場合があります。
この時は、Windowsのセキュリティレベルを落としましょう。
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted
開発が終わったら、npxのコマンドを実行する必要もないので、セキュリティレベルを元に戻しましょう。
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Restricted
TypeScriptを考える
「変数は、しっかり定義して使いましょう」
これは、プログラムを開発する人が、必ず目指すべき環境だと思っています。（年寄りの冷や水でしょうか？）
小規模プロジェクトは良いんですけどね…。大人数が参加するプロジェクトでは、ルールがあっても無視する人や、ルールを守れるレベルにない開発者が参加している等あり、後からプログラムを見直すと、スパゲッティですよね…。
それなら、是非とも、TypeScriptを使いたい…。定義されない変数は、全てエラーになってしまえ…と。
しかしながら、サンプルプログラムをAiに生成させると、エラーばかりで解消しない事多々...。（自分がルールを守れるレベルに無いと自覚しました）
現時点のAiでは、TypeScriptに関する知識が足りないのか、なかなかエラーの解消に至れないので、開発者の知識が要求される状況のようです。
（ジジィには、Javascriptの知見が足らないので、Typescriptは使えないと判断しました...）
Reactの開発環境を起動
cd ＜Reactのフォルダ＝ホーム＞
npm start
通常、ここまでの処理で、正常に起動するはずですが、稀にコンポーネント不足なエラーが…。
この場合、「npm install 足らないコンポーネント」みたいな感じで頑張りましょう。
しばらくするとブラウザが起動して、REACTの初期画面的なものが表示されます。
Webサイトで使いそうなパッケージの導入
色々ありますし、これがBESTというわけでもないですが、とりあえず…です。
npm install use-immer 構造データを使うときに便利です
npm install react-hook-form 入力チェックを容易にします
npm install @hookform/resolvers yup 入力チェックを容易にします
npm install styled-jsx Styleの導入を容易にします
npm install react-app-rewired customize-cra --save-dev Styleの導入を容易にします
npm install styled-components Styleの導入を容易にします
npm install @emotion/styled Styleの導入を容易にします
npm install @mui/material @mui/icons-material @emotion/react ReactのデフォルトのStyleを導入しましょう
npm install react-router-dom ルーティング管理に必要です
※今後の勉強で、少しずつ使っていければと思います。
IISへ乗せていく
Reactアプリケーションをビルドします
cd ＜Reactのフォルダ＝ホーム＞
npm run build
この時、ホームディレクトリの下に、「build」が作成されます。
Windowsの設定から、アプリの画面を開き、「プログラムと機能」より、「Windowsの機能の有効化または無効化」で、IISを準備しましょう。
下記のURLより、「URL書換モジュール」をINSTALLします。 （ルーティング管理の為）
https://learn.microsoft.com/en-us/iis/extensions/url-rewrite-module/using-url-rewrite-module-20
IISを起動し、Webサイトを追加します。
※物理パスには、ホームディレクトリの「build」を設定します。
開発と本番環境を切り分ける
IISで「build」フォルダで本番稼働し、「src」フォルダで開発し、検証は「npm start」で行うと良さそうです。開発したものをリリースする時は「npm run build」すればOKです。
Reactについては、稼働中にbuildしても、操作中の方への影響が軽微で済む仕様です。
（とは言え、大規模改修すると、やはりタダではすみませんが…）
稼働時間外に、大規模buildする場合と、軽微な修正であれば、稼働中にbuildする運用の両方が成り立ちそうです。
ただ、リリース後に不具合に気が付いたら…？
何事も、色々な準備を事前に用意することは重要です。
以上、御疲れ様でした～