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
210
フロントエンド初心者がサクッと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
820
【Blueqat Summit】Re:ゼロから始める量子プログラミング
gyudon
0
680
Shorのアルゴリズム
gyudon
23
7.8k
Blueqat♥量子化学
gyudon
0
1.2k
arXivQurationのご紹介
gyudon
0
200
偏光で理解する重ね合わせ状態
gyudon
0
1.4k
Other Decks in Programming
See All in Programming
Go1.24で testing.B.Loopが爆誕
kuro_kurorrr
0
160
eBPF Updates (March 2025)
kentatada
0
130
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
1.7k
PHPUnit 高速化テクニック / PHPUnit Speedup Techniques
pinkumohikan
1
1.2k
WordPress Playground for Developers
iambherulal
0
120
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
570
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
140
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
2
1.7k
20250326_生成AIによる_レビュー承認システムの実現.pdf
takahiromatsui
17
5.5k
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
12
3.8k
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
3.1k
ステートソーシング型イベント駆動の視点で捉えるCQRS+ES
shinnosuke0522
1
320
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Typedesign – Prime Four
hannesfritz
41
2.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cult of Friendly URLs
andyhume
78
6.3k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
YesSQL, Process and Tooling at Scale
rocio
172
14k
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