20251216愛知総合工科講演

Transcript

1. AI時代のエンジニアとしての働き方 愛知総合工科高等学校 - 生成AI講演 2025/12/16 戸田駿太
2. 1. 自己紹介・技能五輪・クラスメソッドについて 2. AI時代の話 AIの進化とツール バイブコーディング プロンプトエンジニアリング 3. 体験タイム - AIでアプリを作ってみよう 4. バイブコーディング実演 5. 実務の話・技術理解の重要性 6. 質疑応答 目次 2
3. 今回はSlidoというサービスを使って質問・コメントを受け付けます。 匿名でいいのでどんどん質問・コメントをお願いします！ コメント欄・質問 3
4. 自己紹介
5. 自己紹介 5
6. 技能五輪とは 6
7. WorldSkills Lyon 2024（フランス・リヨン） 2024年9月に開催された国際大会に出場 60カ国・地域、1,313人の選手が参加 59職種の競技が実施 世界中の若者と技術を競い合った経験 大会の特徴 技能を競うだけでなく、交流と楽しむことも大切な目的 開会式・閉会式は大きなスタジアムで開催 各国の選手と文化交流できる貴重な機会 詳しくはブログをチェック：WorldSkills 2024 体験記 開会式の動画 https://youtu.be/9ciijwlcD5Y 国際大会への挑戦 7
8. 作ったものを世界中の人に使ってもらえる インターネット上に公開すれば誰でもアクセスできる 自分が作ったものが誰かの役に立つ喜び これが私がこの技術を好きになった理由 身近な人を、世界中の人を幸せにできる 技術を使って問題を解決できる アイデアを形にして届けられる それがエンジニアのやりがい ウェブの強み 8
9. 入社して一年で学んだことをまとめてみた https://dev.classmethod.jp/articles/classmethod-2024-shinsotsu-first-year-reflection/ クラスメソッドでの仕事 9
10. AI時代の話 NotebookLM https://notebooklm.google.com/notebook/ef5be8be-c7e4-4a75-abb9- d44bdfe5755e?authuser=0&pli=1
11. https://x.com/hokazuya/status/1876035072916349110?s=20 AIの進化がすごい 11
12. AIによる産業革命 12
14. 最近の強いAIモデル 14
15. マルチモーダル化の進化 15
17. Claude Code ターミナルで動くAIエージェント コードを読んで、書いて、実行してくれる バイブコーディングに最適 Cursor AIが組み込まれたエディタ コードを書きながらAIに相談できる Claude / Gemini ブラウザで使えるAI Artifactでアプリを作れる Googleのサービスと連携 最近の主力ツール 17
18. Nano Banana Pro（Googleの画像生成AI） 今までよりも最高の品質で画像を出力 文字もきれいに出せる 実写に近いクオリティ ※ちょっと実演します 最近すごい画像生成AI 18
19. AIに指示を出してコードを書いてもらうスタイル 自分でコードを書かない AIと会話しながらアプリを作る 「こういうアプリを作って」と言うだけ 細かい修正も「ここをこうして」と言うだけ ※この後の実演で実際に見せます！ バイブコーディングとは 19
20. AIへの指示の出し方が大事 具体的に指示を出す 悪い例： 「爆発させて」 良い例： 「ボタンをクリックしたら、画面中央から爆発のアニメーションが広がるようにして」 背景情報を伝える 役割を与える（ 「あなたはプロのエンジニアです」など） 例を見せる うまくいかなかったら言い方を変えてみる 思い通りにいかないこともある → それが学びのきっかけ！ プロンプトエンジニアリング 20
22. 全ての情報をAIに取り込ませるのは料金的に非現実的 AIは人間のようにいろんなことを判断してくれる でも全部の情報を渡すとお金がかかりすぎる AIが活躍できるためのワークフローを作ってあげる AIを使うときは土台としてコードによるワークフローが必須 22
23. 顧客との会話をAI活用するために作ったツール https://dev.classmethod.jp/articles/backlog-exporter/ Backlogの情報をPCに保存することでAIが扱える領域に持ってくる これだけで作業効率が爆上がり AI活用の循環 AI活用するための土台を作る → よりよいAI環境ができる そのツールもAIにより作る → 循環が生まれる 例：backlog-exporter 23
24. 体験タイム 実際にAIを使ってアプリを作ってみよう！
25. https://claude.ai Claudeにログイン 25
26. Claude.aiでArtifactを使ってアプリを作ってみよう！ 1. Claude.aiにアクセス（Googleアカウントでログイン） 2. Artifactを使ってアプリを作る 3. 作ったもの（URLやスクリーンショット）をGoogleフォームに送信 Claudeはチャットとコードと実行結果が同じ画面に表示されるので便利！ 体験の流れ 26
27. 自由にアプリを作ってみてください！ アイデア例： 自己紹介ページ クイズアプリ ゲーム（インベーダーゲームなど） 好きなものを紹介するページ その他、思いついたもの何でも！ 必須なプロンプト HTMLで作成してください 困ったら声をかけてください！ 体験のお題 27
28. AIに指示を出すだけでアプリが作れる！ 自分のアイデアが形になる体験 コードの中身も確認してみよう（HTML, CSS, JavaScript） うまくいかなかったら指示の仕方を変えてみる 作ったものは世界中の人が使える ウェブの強みはインターネット上に公開できること 自分が作ったものが誰かの役に立つ喜び 体験で大切なこと 28
29. バイブコーディング実演
30. みんなの成果物を使って、リアルタイムでアプリを作ります 1. Googleフォームに送信されたデータをスプレッドシートで確認 2. スプレッドシートをCSVにする 3. CSVデータを使って、一覧アプリをリアルタイムで作成 4. スプレッドシートのデータをそのまま業務に活かせる形にする 使用ツール：Claude Code 実演の流れ 30
31. AIによるアプリ作り体験ができる みんなの成果物をまとめて別のアプリにできる 実務でもこうやってデータを活用する バイブコーディングの実際の流れ リアルタイムでアプリができていく様子 この実演で伝えたいこと 31
32. 実務の話・技術理解の重要性
33. AIを使う時の注意点 技術を理解しているとコードの中身がわかって自由に編集することができる コードの中身（HTML, CSS, JavaScript）の確認も大事 AIに任せっきりにしない 生成AIの力 vs 自分の力 AIが作ったものはAIの力 でも、コードを読んで理解して説明できるのは自分の力 技術を理解しているからこそAIを使いこなせる https://zenn.dev/team_zenn/articles/claudecode-ai-coding-vs-human-engineer 技術理解の重要性 33
34. 最近だと大体TypeScriptかPython この二つの言語の世の中の情報量が圧倒的に多い 個人的にはこの二つさえある程度使えたらウェブ業界では苦戦しないと思っている どんな言語を使うのがいいのか 34
35. TypeScriptは型が使えるから AIは確かに優秀だが、型やリンターなどの補助がないとうまく動かないことがある 人間が「ここの型は〇〇だからエラーが出ている！」と気づくように、AIも同じ エラーが出たらそのエラーを読んで修正する 型があるとAIがエラーに気づきやすい リンターも同様 AIを補助するツールとして型やリンターが重要 アプリを作る時はTypeScriptがおすすめ 35
36. 現場のコードは何万行もある それを全部把握するのは難しい 現在の現場ではAIと一緒にコーディングをするのが私的にいいと思っている 一部は私の経験で補う（安定性や事故防止） その他のスピードが求められる部分でAIを使って爆速に開発 最近はこれをやっている 実際の仕事ではうまくいかないことも 36
37. 私は最初から知っていたところがあってAIに指示ができている でも、もしわからないところがあれば今の高校生たちと立場は一緒 AIという最高に頭のいい相棒と一緒に調べ物をして原因を突き止めて問題解決をする 新しくアプリを作ることを繰り返している 新しい学び方について 37
38. 皆さんには一人で勉強する必要がない 必ず頭の良いAIと一緒に物事を考え、一緒に作り上げていく その中に自分の考えや意見を混ぜて自分だけのものを作り上げている必要がある でも注意 AIに作らせてしまった場合にはAIのものになってしまう 自分で考えたもの、自分だからできたことが重要視される世界になっていきそう 高校生へのメッセージ 38
39. 質疑応答
40. 何でも質問してください！ 技能五輪について AIの使い方について プログラミングの学び方について IT業界への就職について 今後のキャリアについて 質疑応答 40
41. ご清聴ありがとうございました！