フロントエンド何もわからない（その６）〜 Introduction To Heuristic Contestのビジュアライザを作った
threecourse.hatenablog.com のつづきです。
今回の成果物はAtCoderのIntroduction to Heuristics Contest のビジュアライズで、人間では到底良さげな解に到達できないところ、最適化だと1秒程度で綺麗な解を出してくれるのが見てて面白い。
Reactによるフロントエンドの構築
- React + Reduxによる構成
- ReduxのStateの中に情報を全部詰め込むようにするのが一番分かりやすかった。useDispatchを使うとどこからでも処理を走らせられ、useSelectorを使うとどこからでも情報を取得できる
- 今回は26x365で10000個近い要素を扱うので、何も考えなしに扱うと再レンダリングが走って更新がかなり遅くなってしまうという難しさがあった
- 10000個の配列を毎回生成する程度のコストは問題ではなく、それらのコンポーネントを再レンダリングしようとするのが速度低下の原因
- react.Memo/useMemoを使うことで不要なコンポーネントの再レンダリングを抑えるとともに、各セルのコンポーネントからuseSelectorで値を取得させるようにした。useSelectorで取得した値が変わらない場合には再レンダリングが走らないため、十分な速度で動く
.NET Core(C#)によるバックエンドの構築
ローカルでのフロントエンド・バックエンド環境の構築
- フロントエンドからバックエンドのAPIを叩くことで計算結果を取得して表示する
- フロントエンドとバックエンドを分けると、バックエンドをC#などの好きな言語で書ける
- Docker化して、docker-composeで立ち上げるようにすればわりと楽にサーバを同時に立てられる
GCPのCloud Runでのフロントエンド・バックエンド環境の構築
- Cloud Runは、サーバとしてDockerイメージをデプロイすると、自動的によしなにしてくれるサービス。
- フロントエンド、バックエンドをそれぞれCloud Runのサービスとして公開
- フロントエンドはReactをビルドすると静的ファイルになるので、http-serverで起動させた
- バックエンドは非公開としてフロントエンドからのみ呼び出せるようにしたかったが、Reactから呼び出すことが上手く行かなかったので公開するようにした。
- この辺はもっとうまいやり方がありそう
- Cloud Runは、CPU/メモリは格安なのだが、以前ログ課金で死にかけたことがあるので恐る恐るやっている
- 良い機会なのでドメイン取ってみた
- .Net CoreはReadyToRun コンパイルをすることで起動が高速になった。そうしないと、Cloud Run環境では遅いかもしれない https://docs.microsoft.com/ja-jp/dotnet/core/deploying/ready-to-run
