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
240
フロントエンド初心者がサクッと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
910
【Blueqat Summit】Re:ゼロから始める量子プログラミング
gyudon
0
710
Shorのアルゴリズム
gyudon
23
8.5k
Blueqat♥量子化学
gyudon
0
1.3k
arXivQurationのご紹介
gyudon
0
200
偏光で理解する重ね合わせ状態
gyudon
0
1.6k
Other Decks in Programming
See All in Programming
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
SODA - FACT BOOK(JP)
sodainc
1
8.6k
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
180
ALL CODE BASE ARE BELONG TO STUDY
uzulla
27
6.6k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
180
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
620
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
4
130
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
技術的負債の正体を知って向き合う
irof
0
230
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
5
2.9k
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
150
Featured
See All Featured
Making Projects Easy
brettharned
120
6.4k
A better future with KSS
kneath
239
18k
Automating Front-end Workflow
addyosmani
1371
200k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
RailsConf 2023
tenderlove
30
1.3k
How STYLIGHT went responsive
nonsquared
100
5.8k
Faster Mobile Websites
deanohume
310
31k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
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