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