Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンド初心者がサクッとReactに入門する
Search
gyu-don
February 06, 2024
Programming
0
220
フロントエンド初心者がサクッとReactに入門する
Netadashi Meetup #12 のLTで発表しました
gyu-don
February 06, 2024
Tweet
Share
More Decks by gyu-don
See All by gyu-don
任意の2 qubitユニタリのゲートでの実装〜KAK分解を使って〜
gyudon
0
860
【Blueqat Summit】Re:ゼロから始める量子プログラミング
gyudon
0
690
Shorのアルゴリズム
gyudon
23
8.2k
Blueqat♥量子化学
gyudon
0
1.3k
arXivQurationのご紹介
gyudon
0
200
偏光で理解する重ね合わせ状態
gyudon
0
1.5k
Other Decks in Programming
See All in Programming
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
140
XP, Testing and ninja testing
m_seki
3
220
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
260
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
RailsGirls IZUMO スポンサーLT
16bitidol
0
140
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
410
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
180
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
840
NPOでのDevinの活用
codeforeveryone
0
720
Porting a visionOS App to Android XR
akkeylab
0
190
5つのアンチパターンから学ぶLT設計
narihara
1
150
エンジニア向け採用ピッチ資料
inusan
0
180
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Making Projects Easy
brettharned
116
6.3k
The Language of Interfaces
destraynor
158
25k
Designing for humans not robots
tammielis
253
25k
Speed Design
sergeychernyshev
32
1k
We Have a Design System, Now What?
morganepeng
53
7.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Gamification - CAS2011
davidbonilla
81
5.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
フロントエンド初心者が サクッと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