でーじいまさらReactを学ぶ

こちらで発表した内容です

https://hackers-champloo.connpass.com/event/406428/

Transcript

1. でーじいまさらReactを学ぶ Hackers Champloo 2026 2026/10/12 aipacommander@浦添
2. 自己紹介
3. 自己紹介 • アイパー隊長といいます (@aipacommander) • うちなーんちゅです • CBcloud株式会社 プロダクト本部 マネージャー • 物流業界でイノベーション起こしたくて日々頑張っています • 妻と子供2人と犬2匹と猫7匹と暮らしています • 昨日まで眼精疲労で右目が取れそうでした
4. 謝罪
5. 誤りでした
6. 今日の話
7. でーじいまさらReactを学ぶ
8. （学ぶ）モチベーション • ぼくはVueとNuxtが好きですが、周りはReactが多い印象 • 立場上技術評価を求められたときに、Reactがわからないと困る • 一応経験はあるけど、ずっとキャッチアップしているわけじゃないから、都度 確認してはいまこんな感じ？？？ってのを繰り返している
9. 学び方のアプローチ → 個人的なおすすめは「写経」
10. 写経 • 書籍に書いてあるプログラムを1字1句（？）自分でタイプする • 僕は要領が悪く天才でもないので、正直皆様が今日話している内容はピンと来ていな いことも多い • なので、時間をかけてこれまで学んで来た • Javaなんて3回挫折した（3年ぐらいかけて） • すばらしい書籍も多いですが、読んだだけだと「完全に理解した」ってなることが多 い • 実際試してみたら、「なんもわからん」ってことないですか？
11. 写経 • 写経を続けると、プログラムをまとまり？で理解できるような感覚になる • 何度かやるので、「よくある形」に見えるようになり、文節みたいに見えていくる • 入力を受け取るところ、返す所、ループ、条件分岐、デザインパターン・・・ • うまくいく、またはエラーのパターンみたいなのも整理できる • タイプするのはつらいが、結果は返ってくるのでフィードバックループができてる • 「間違えて、エラーを読んで、直して動いた」
12. よしじゃあ写経しよう！！
13. よしじゃあ写経しよう！！ → 何を題材にするか
14. 何を題材にするか • 書籍にする？ネットの記事にする？オンラインなんたらに入る？ • 直近だとAIといっしょに進めるのがいいのではないか？と思ってる • Token燃やすためにお金はかかるが、24時間365日質問しても怒らない／嫌な顔をさ れない人情（？）と、自分の力量にあわせた教材を数分で作ってくれるのは、中々無 いのではないでしょうか
15. （突然ですが）僕が体験よかったなって経験 • この本とてもよかった • MVCフレームワークを自作して、その上でアプリ ケーション開発をする。という流れの書籍 • フレームワーク作るのは天才しかおらんと思ってた が、作れるのか・・・・！とか当時は衝撃だった（今 考えたら何言っとんじゃお前はって発言だけど）
16. というわけで 僕の場合はReactを作る
17. Reactを作る • AIに「Reactをミニマムで写経したいから教材を作って」ってお願いする • 最低限のコードベースを用意してもらう • ファイルとかはできている。関数は定義だけで、中身は「throw new Error(…)」 とかにしておく • これは写経なのか・・・？（多分違う） • 実装評価の指標はテストコードで担保する（テストコードをモリモリ作ってもらう） • 「npm run test:watch」 とかで修正するたびに怒られる／うまくいったか確認で きるサイクルが作れる
18. あとは作って学ぶだけ！
21. AIに教材を生成する学び方の注意点 • この時点では、「本当にReactが作れている」のかは本当はわからない • やつらはハルシネーションをしてくる。そのため、生成された教材で学んだとて 「Reactﾁｮｯﾄﾃﾞｷﾙ」とはならない • 結局本やら、できる人のフィードバックはもらわないといけないと思う（結局・・・）
22. 雑感
23. 雑感 • AIで教材を生成したら、自分の力量にあ わせて学べることができるぞ！って話 • ハルシネーションに注意なので、なんら かポイントで、本や知見者からFBをも らうことをセットとしたい • 結局ぼくはReactを学べたの？ → 道半 ばです。。。 • ちなみにVueは、「chibivue」って教材 があるのでぜひ
24. 終わり