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 ToDoアプリをClineで作りながら考える フロントエンドエンジニアは...
Search
iWonder118
February 14, 2025
1
1.1k
React ToDoアプリをClineで作りながら考える フロントエンドエンジニアは AIによってなくなるのか?
iWonder118
February 14, 2025
Tweet
Share
More Decks by iWonder118
See All by iWonder118
我々はなぜ中間表現を作るのか
iwonder118
0
670
OODAループを回すVibe_Coding.pdf
iwonder118
0
11
Reactで見る!純粋関数で深ぼる副作用
iwonder118
0
510
花開くWebAssembly(Wasm)の可能性 in 2025/06/21 まさるの勉強会
iwonder118
0
6
SSG___CSRで乗り切るiframe内ルーティング_AIコーディング拡張版_in_Funabashi.dev.pdf
iwonder118
0
39
SSG + CSRで乗り切るiframe内ルーティング in React Tokyo LT 2025_05_17
iwonder118
0
4
手軽に始めるDuckDB
iwonder118
0
31
開発においての気配り
iwonder118
1
17
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
A better future with KSS
kneath
239
18k
We Have a Design System, Now What?
morganepeng
53
7.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Done Done
chrislema
185
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Embracing the Ebb and Flow
colly
88
4.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Transcript
React ToDoアプリをClineで作りながら考える フロントエンドエンジニアは AIによってなくなるのか? in React Tokyo 2025/2/14 1
自己紹介 社内システムを改修したり、インフラを作ったり、 APIを生やしたり ...etc 趣味:トンチキ技術グッズを作ったり 河村 直樹(@iwonder118) かわむら なおき
グッズ①:Rustyなカニペンホルダー
グッズ②:Pug(Data dogの置物) ※余談:名前は「STRIKE JADE」Pug記法で JADE
業務関係なく開発でAIツールを 使っている⼈はいますか? 2
成熟し始めたAIツール群 ‧その他のツール群 ‧Corsor ‧Cline ‧V0 ‧GitHub Copilot AI技術の進化 ‧その他のモデル群 ‧Claude
3.5 Sonnet ‧Deep Seek R1 ‧GPT o3 近年の⾶躍的知性向上を遂げたモデル群 ここ数年での⾶躍的な進化 3
今回のLTの後ろでClineでToDoアプリを作ってもらいます Todoアプリ開発実例 Reactのメジャーバージョン19のuseActionStateを使ってTodoアプリケーションを作成し てください。 useActionStateを使う際にはサーバへの通信はせずにsetTimeoutで、タスクの追加ボタ ンを押した際に擬似的にロードが⼊る状況にしてください。 useActionStateは下記を参考にしてください。 https://ja.react.dev/reference/react/useActionState ビルドツールはviteです 4
この中でこれまでの開発⼿法は変わるが ソフトウェア開発者が職を失うとは考えていな 取って代わられない https://www.oreilly.com/radar/the-end-of-programming-as-we-know-it/ 最近だとオライリー本で有名なTim O’Reilly⽒ The End of Programming
as We Know It (私達の知っているプログラミングの終焉) フロントエンドエンジニアはAIに取って代わられるのか? 5
具体的にどこが置き換わるのか 6
5W1Hはよく聞く Why (なぜ?) When (いつ?) Who (誰が?) What (何が? 何を?) Where
(どこで?) How (どうやって?) 7
この内4W Why (なぜ?) When (いつ?) Who (誰が?) What (何が? 何を?) Where
(どこで?) How (どうやって?) 8
Todo アプリで⾔えば What タスクの追加、編集、削除、完了管理 Who 利⽤者 When ⽇常のタスク管理に随時利⽤ Where Webブラウザ、スマートフォン、
はたまたオフィス、⾃宅など 9
Todo アプリで⾔えば What タスクの追加、編集、削除、完了管理 Who 学⽣、勉強をしている⼈ When ⽇常のタスク管理に随時利⽤ Where Webブラウザ、スマートフォン、
はたまたオフィス、⾃宅など ⼤まかに⼀⾔で表せられる⾔葉で決まってくる 10
Todo アプリで⾔えば How ノートや⼿帳にタスクを記⼊し、管理 付箋やホワイトボードの利⽤ CLI(コマンドライン)アプリ開発 モバイルアプリ開発 ウェブアプリ開発 Why etc...
⽬標の明確化 時間管理の⽀援 ⽣産性向上 タスクの整理‧管理 11
Why / How 2つは決まらない Why (なぜ?) When (いつ?) Who (誰が?)
What (何が? 何を?) Where (どこで?) How (どうやって?) 12
また、Whyは⽬的である⼀⽅、ほ か4w1hは⼿段である 13
そのため⼈間の考えるところ Why/HowはAIがブレやすく、しっかりと伝えてあげる。 AIにすぐ取って代わられるのは4Wのところ また、Why(⽬的)がブレると他も合わせて崩れる 14
有効なHowを⾒つけるためにもWhyの選定は重要 フロントエンドでは多職種と⽐べてUIを扱っているがゆえにHowが多くなりがち ボタンなのかチェックボックスなのか ドロップダウンなのかラジオボタン なのかはたまた... 15
まずは、訓練のために⽇々の Pull RequestでWhyをより考える ことが重要 16
Clineの⽅は出来たでしょうか? 17
React 19で指定すると動かない AIは新しいことの推論が苦⼿ 17