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
830
【Blueqat Summit】Re:ゼロから始める量子プログラミング
gyudon
0
680
Shorのアルゴリズム
gyudon
23
7.8k
Blueqat♥量子化学
gyudon
0
1.2k
arXivQurationのご紹介
gyudon
0
200
偏光で理解する重ね合わせ状態
gyudon
0
1.5k
Other Decks in Programming
See All in Programming
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
4
590
Lambda(Python)の リファクタリングが好きなんです
komakichi
3
200
VitestのIn-Source Testingが便利
taro28
6
2.1k
PHPで書いたAPIをGoに書き換えてみた 〜パフォーマンス改善の可能性を探る実験レポート〜
koguuum
0
170
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
160
ComposeでWebアプリを作る技術
tbsten
0
110
Cursor/Devin全社導入の理想と現実
saitoryc
11
5.9k
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.4k
「理解」を重視したAI活用開発
fast_doctor
0
120
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
170
リアルタイムレイトレーシング + ニューラルレンダリング簡単紹介 / Real-Time Ray Tracing & Neural Rendering: A Quick Introduction (2025)
shocker_0x15
1
310
ミリしらMCP勉強会
watany
4
770
Featured
See All Featured
Done Done
chrislema
183
16k
Designing Experiences People Love
moore
141
24k
Docker and Python
trallard
44
3.3k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Building Adaptive Systems
keathley
41
2.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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