React ToDoアプリをClineで作りながら考える フロントエンドエンジニアは AIによってなくなるのか？

Transcript

1. React ToDoアプリをClineで作りながら考える フロントエンドエンジニアは AIによってなくなるのか？ in React Tokyo 2025/2/14 1
2. 自己紹介 社内システムを改修したり、インフラを作ったり、 APIを生やしたり ...etc 趣味：トンチキ技術グッズを作ったり 河村 直樹（@iwonder118） かわむら　なおき
3. グッズ①：Rustyなカニペンホルダー
4. グッズ②：Pug(Data dogの置物) ※余談：名前は「STRIKE JADE」Pug記法で JADE
5. 業務関係なく開発でAIツールを 使っている⼈はいますか？ 2
6. 成熟し始めたAIツール群 ‧その他のツール群 ‧Corsor ‧Cline ‧V0 ‧GitHub Copilot AI技術の進化 ‧その他のモデル群 ‧Claude 3.5 Sonnet ‧Deep Seek R1 ‧GPT o3 近年の⾶躍的知性向上を遂げたモデル群 ここ数年での⾶躍的な進化 3
7. 今回のLTの後ろでClineでToDoアプリを作ってもらいます Todoアプリ開発実例 Reactのメジャーバージョン19のuseActionStateを使ってTodoアプリケーションを作成し てください。 useActionStateを使う際にはサーバへの通信はせずにsetTimeoutで、タスクの追加ボタ ンを押した際に擬似的にロードが⼊る状況にしてください。 useActionStateは下記を参考にしてください。 https://ja.react.dev/reference/react/useActionState ビルドツールはviteです 4
8. この中でこれまでの開発⼿法は変わるが ソフトウェア開発者が職を失うとは考えていな 取って代わられない 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
9. 具体的にどこが置き換わるのか 6
10. 5W1Hはよく聞く Why （なぜ？） When （いつ？） Who （誰が？） What （何が？ 何を？） Where （どこで？） How （どうやって？） 7
11. この内4W Why （なぜ？） When （いつ？） Who （誰が？） What （何が？ 何を？） Where （どこで？） How （どうやって？） 8
12. Todo アプリで⾔えば What タスクの追加、編集、削除、完了管理 Who 利⽤者 When ⽇常のタスク管理に随時利⽤ Where Webブラウザ、スマートフォン、 はたまたオフィス、⾃宅など 9
13. Todo アプリで⾔えば What タスクの追加、編集、削除、完了管理 Who 学⽣、勉強をしている⼈ When ⽇常のタスク管理に随時利⽤ Where Webブラウザ、スマートフォン、 はたまたオフィス、⾃宅など ⼤まかに⼀⾔で表せられる⾔葉で決まってくる 10
14. Todo アプリで⾔えば How ノートや⼿帳にタスクを記⼊し、管理 付箋やホワイトボードの利⽤ CLI（コマンドライン）アプリ開発 モバイルアプリ開発 ウェブアプリ開発 Why etc... ⽬標の明確化 時間管理の⽀援 ⽣産性向上 タスクの整理‧管理 11
15. Why / How 2つは決まらない Why （なぜ？） When （いつ？） Who （誰が？） What （何が？ 何を？） Where （どこで？） How （どうやって？） 12
16. また、Whyは⽬的である⼀⽅、ほ か4w1hは⼿段である 13
17. そのため⼈間の考えるところ Why/HowはAIがブレやすく、しっかりと伝えてあげる。 AIにすぐ取って代わられるのは4Wのところ また、Why(⽬的)がブレると他も合わせて崩れる 14
18. 有効なHowを⾒つけるためにもWhyの選定は重要 フロントエンドでは多職種と⽐べてUIを扱っているがゆえにHowが多くなりがち ボタンなのかチェックボックスなのか ドロップダウンなのかラジオボタン なのかはたまた... 15
19. まずは、訓練のために⽇々の Pull RequestでWhyをより考える ことが重要 16
20. Clineの⽅は出来たでしょうか？ 17
21. React 19で指定すると動かない AIは新しいことの推論が苦⼿ 17