概要

ReactJSを使用して、タダでサーバーを構築する為のメモです。
ReactJSを使用してサイト作ろうと思ってる、作りたいけど難しいから無理ゲー！と思ってる人向けに、どハマり所を記載していきます。

メモ

Google App Engine

お金をかけないで作る場合手っ取り早いのはGAEかなと思います。
NodeJSにもPythonにも対応してます。
大体の人はgoogle垢持ってると思うので。
gcloudと言うツールをインストールする必要があります。

コレを使ってGAEにデプロイします。

GAE側環境構築

GAEで完全無料でサイトを構築する場合幾つかの制限があります。
まずスタンダード環境でしか無料枠は適応されません。フレキシブル環境はアクセスが発生すると即課金になります。
GAEではapp.yamlと言うファイルを用意して無料枠を設定するのですが、そこまで複雑ではないです。
ここに幾つかリンクがおいてあります。チョット古いですがわかりやすいです。
NodeJS環境を使用する際自分が使用しているapp.yaml設定は下記の通りです。

runtime: nodejs18
env: standard
instance_class: F1

automatic_scaling:
  target_cpu_utilization: 0.5
  min_instances: 1
  max_instances: 1
  min_pending_latency: 3000ms
  max_concurrent_requests: 80

ローカル環境構築

M1 MacBookにてDockerにアクセスできない…
こちらは残念ながら未解決…T_T
M1マックにdockerをインストールしたんですが、何故かlocalhost:3000が繋がらず…
コンテナ内でcurlしたら出力はされるので明らかにM1との繋ぎの部分でおかしいのはわかるんですが…
コレの原因がどうしても分からず…😭
結局直接MacにNodeJSをインストールしました。
NodeJSのインストール方法は色々ググったら出てきます。

ReactJS環境

今回はReactJSで開発します。
インストールしたライブラリは

1. create-react-app: ReactJSデフォアプリ作成

2. react-router-dom: 画面遷移用ライブラリ。Switchはオワコンのようなのでv6です。

3. bootstrap: 簡単UI

4. redux: 状態をコンポーネント間で共有するライブラリ。リンク先の説明がわかりやすいのでオススメです。

5. react-redux: 同上

ReactJSでのハマり事

MVCじゃない？？
pythonとかPHPとかC#、Javaやらで有名なMVCモデルを真っ向から否定するモデルなので最初は戸惑いました。
JSXとか言うらしいですが、コントローラとビューがグッチャグチャになります。
気持ち悪いですw
慣れるしかありません😭
しかも普通のHTMLタグじゃないのでこれも慣れが必要です…classがclassnameだったり…😱
チームで運営する場合デザイナーもある程度プログラムを理解する必要あります。

コンポーネントの更新
複数のコンポーネントで使用する変数を更新したいのにデフォルトで出来ない。
例えば違うコンポーネントで同じ変数を使用していて、その変数を更新した場合、異なるコンポーネントでも同時に修正したい。でもディフォルトでその様なことができない。
コレが1番ハマった所。
色々調べてたどり着いたのがReduxというプラグイン。
新子関係カンケーなくコンポーネント間のアップデートを行ってくれます。
難しいですが頑張って理解するしかないです…
ここのチュートリアルがオススメ！👍

画面遷移で状態がリセットされる
コレもどハマりした所。
ナビゲーションバーを作るとき当然hrefを使うのですが、それを使うと画面の状態がリセットされます！
ボタンを押した際にウォレットアドレスを取得しナビゲーションバーに表示したとします。
この状態でhrefで画面遷移するとナビゲーションバーに表示されていたアドレスは空表示されます…
解決策は下記の通り。

セッションで保持したい値をキープ出来ない
ReactJSにセッションデータを保持する機能がありません。
どうするか…
バニラJavaScript機能のlocalStorage、もしくはsessionStorage機能を使います。
ただしセッションデータ保存したからと言ってhref遷移で画面上のデータが消えるのは同じなので、コンポーネントロードした時にsessionStorageから読み込み、その後reduxの機能で関連コンポーネントを纏めてアップデート…としないといけないです😭
(そんな事しないでもいい機能があるかもですが自分は上記以外解決策が見当たりませんでした。もしかしたらApp.jsで全てのコントロールをする感じなのかも…でもそれだと、App.jsが恐ろしく煩雑になってしまう…)

更にreduxで更新する際、無限ループにならないように気をつけないといけないです。
useEffectと言う機能はレンダリングした後一回だけ呼び出されるファンクションなのでこの中で更新を行うと更新無限ループは避けられました。

結論

GAE無料枠での環境構築はnodejsであれPHPであれ比較的簡単にできます。
問題はReactJSです😅
慣れや好みの問題なのでアレてすが、render()と言うファンクションのカッコの中にタグを埋めていくのは流石にドン引きしました…😱
でも動的サイトを作るのだったら必須！
結局PHPで組んでもpythonで組んでも動的ページを作るにはJSを使用しないといけない。
だったらもうJSで全部書いてしまおう、と思った次第。