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
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
19k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
790
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
700
AIともっと楽するE2Eテスト
myohei
7
2.8k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
0
130
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
400
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
540
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
180
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
270
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
840
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
590
PicoRuby on Rails
makicamel
2
130
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
RailsConf 2023
tenderlove
30
1.1k
Done Done
chrislema
184
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Navigating Team Friction
lara
187
15k
Music & Morning Musume
bryan
46
6.6k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Pragmatic Product Professional
lauravandoore
35
6.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Visualization
eitanlees
146
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