フロントエンド初心者が サクッとReactに入門する gyu-don 1

自己紹介 gyu-don ● 自称・量子コンピューティングエンジニア ○ 民間企業のR&D部門で研究開発 ○ 2020年度未踏ターゲット事業 (共同採択) ○ IBM Quantumで学ぶ量子コンピュータ (共著・秀和システム) ○ Qiskit Advocate https://x.com/beef_and_rice https://qiita.com/gyu-don https://github.com/gyu-don https://linkedin.com/in/takumi-kato 2

今日話すこと ちょっとしたデモアプリを作ってみた ● グラフ彩色問題を応用したアプリケーション ● Python + Flaskでのバックエンド開発 ● TypeScript + Reactでのフロントエンド開発 ソースコードはこちらに公開 https://github.com/gyu-don/netadashi-lt 3

フロントエンドをなぜやりたい？ ● 作ったものを人に見てもらいたい ● 普段はPythonで開発をしている ○ 人に見せるものはJupyter Notebookで作ることが多い ■ コードと結果をまぜこぜにできて便利 ■ 表やグラフも表示できる ■ コードや結果がゴタゴタしてくるとややこしくなる ○ 最近はstreamlitが流行りつつある 4 https://cheat-sheet.streamlit.app/

地域を点(node)、隣接関係を辺(edge)で表すと 地図に色を塗る問題は、グラフに色を塗る問題と同じ グラフ彩色問題 5 ● 地図があります ● 地図上の各地域を、隣接する地域と異なる色にな るように、色を塗ってください 2次元の地図の場合は必ず4色以内に塗り分けられるこ とが知られている(4色定理)

グラフ彩色問題の応用 6 利用日時 会議室1 会議室2 会議室3 会議室4 ● 貸し会議室の割当。利用日時を指定して予約。部屋の指定は不可 ● 受け付けた予約をすべて割り振ることはできるか? 予約を点とし、利用日時が重複した予約間に辺を引くと、グラフ彩色問題に帰着

バックエンド - Python 焼きなまし法(SA: Simulated Annealing)でグラフ彩色問題を解いた ● SAのライブラリとしてnealを利用した ● WebフレームワークとしてFlaskを使用した 7

フロントエンド - TypeScript ● TypeScriptとReactで書いた ● React Bootstrapライブラリを使った ○ UIをもっとかっこよくしたかったが、力不足 ○ 予約の数を自由に増減できるとか、結果表示がかっこいいとかにしたかった ● ChatGPTにかなり助けられた ○ 人類の叡智 8

厳しかったこと ● TypeScriptを使うことでハードルが上がった ○ JSX.ElementやReactの型をあまり理解していない状態からのスタート ○ エラーとライブラリ名でGoogle検索しても意外と引っかからない ● 凝ったコンポーネントはCSSも含めて自作が必要 ○ 贅沢言わなければ探せばあると思っていたが、そううまくは見つからなかった ○ なので、今回は凝ったものができなかった ● コピペだけで作れるかと思ったらそんなことなかった ○ しかし、ChatGPTに聞けば作ってくれた ● バックエンドとフロントエンドが別サーバだとCORSの問題が出た ○ flask-corsとかいうライブラリで何故か解決した ○ コンパイル済みのフロントエンドをバックエンドのstaticファイルとして置けばいい? ● フロントエンドが単純だとReactの恩恵が少ない ○ これくらいならJQueryで十分 9

まとめ ● 量子コンピューティングエンジニアがReactに入門してみた ● ChatGPTの尽力により、無事アプリが完成した 10