Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

gyu-don
February 06, 2024

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

Netadashi Meetup #12 のLTで発表しました

gyu-don

February 06, 2024
Tweet

More Decks by gyu-don

Other Decks in Programming

Transcript

  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
  2. フロントエンドをなぜやりたい? • 作ったものを人に見てもらいたい • 普段はPythonで開発をしている ◦ 人に見せるものはJupyter Notebookで作ることが多い ▪ コードと結果をまぜこぜにできて便利

    ▪ 表やグラフも表示できる ▪ コードや結果がゴタゴタしてくるとややこしくなる ◦ 最近はstreamlitが流行りつつある 4 https://cheat-sheet.streamlit.app/
  3. グラフ彩色問題の応用 6 利用日時 会議室1 会議室2 会議室3 会議室4 • 貸し会議室の割当。利用日時を指定して予約。部屋の指定は不可 •

    受け付けた予約をすべて割り振ることはできるか? 予約を点とし、利用日時が重複した予約間に辺を引くと、グラフ彩色問題に帰着
  4. フロントエンド - TypeScript • TypeScriptとReactで書いた • React Bootstrapライブラリを使った ◦ UIをもっとかっこよくしたかったが、力不足

    ◦ 予約の数を自由に増減できるとか、結果表示がかっこいいとかにしたかった • ChatGPTにかなり助けられた ◦ 人類の叡智 8
  5. 厳しかったこと • TypeScriptを使うことでハードルが上がった ◦ JSX.ElementやReactの型をあまり理解していない状態からのスタート ◦ エラーとライブラリ名でGoogle検索しても意外と引っかからない • 凝ったコンポーネントはCSSも含めて自作が必要 ◦

    贅沢言わなければ探せばあると思っていたが、そううまくは見つからなかった ◦ なので、今回は凝ったものができなかった • コピペだけで作れるかと思ったらそんなことなかった ◦ しかし、ChatGPTに聞けば作ってくれた • バックエンドとフロントエンドが別サーバだとCORSの問題が出た ◦ flask-corsとかいうライブラリで何故か解決した ◦ コンパイル済みのフロントエンドをバックエンドのstaticファイルとして置けばいい? • フロントエンドが単純だとReactの恩恵が少ない ◦ これくらいならJQueryで十分 9