20251216愛知総合工科講演

by ShuntaToda

Slide 1

Slide 1 text

AI時代のエンジニアとしての働き方愛知総合工科高等学校 - 生成AI講演 2025/12/16 戸田駿太

Slide 2

Slide 2 text

1. 自己紹介・技能五輪・クラスメソッドについて 2. AI時代の話 AIの進化とツールバイブコーディングプロンプトエンジニアリング 3. 体験タイム - AIでアプリを作ってみよう 4. バイブコーディング実演 5. 実務の話・技術理解の重要性 6. 質疑応答目次 2

Slide 3

Slide 3 text

今回はSlidoというサービスを使って質問・コメントを受け付けます。匿名でいいのでどんどん質問・コメントをお願いします！コメント欄・質問 3

Slide 4

Slide 4 text

自己紹介

Slide 5

Slide 5 text

自己紹介 5

Slide 6

Slide 6 text

技能五輪とは 6

Slide 7

Slide 7 text

WorldSkills Lyon 2024（フランス・リヨン） 2024年9月に開催された国際大会に出場 60カ国・地域、1,313人の選手が参加 59職種の競技が実施世界中の若者と技術を競い合った経験大会の特徴技能を競うだけでなく、交流と楽しむことも大切な目的開会式・閉会式は大きなスタジアムで開催各国の選手と文化交流できる貴重な機会詳しくはブログをチェック：WorldSkills 2024 体験記開会式の動画 https://youtu.be/9ciijwlcD5Y 国際大会への挑戦 7

Slide 8

Slide 8 text

作ったものを世界中の人に使ってもらえるインターネット上に公開すれば誰でもアクセスできる自分が作ったものが誰かの役に立つ喜びこれが私がこの技術を好きになった理由身近な人を、世界中の人を幸せにできる技術を使って問題を解決できるアイデアを形にして届けられるそれがエンジニアのやりがいウェブの強み 8

Slide 9

Slide 9 text

入社して一年で学んだことをまとめてみた https://dev.classmethod.jp/articles/classmethod-2024-shinsotsu-first-year-reflection/ クラスメソッドでの仕事 9

Slide 10

Slide 10 text

AI時代の話 NotebookLM https://notebooklm.google.com/notebook/ef5be8be-c7e4-4a75-abb9- d44bdfe5755e?authuser=0&pli=1

Slide 11

Slide 11 text

https://x.com/hokazuya/status/1876035072916349110?s=20 AIの進化がすごい 11

Slide 12

Slide 12 text

AIによる産業革命 12

Slide 13

Slide 13 text

Slide 14

Slide 14 text

最近の強いAIモデル 14

Slide 15

Slide 15 text

マルチモーダル化の進化 15

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Claude Code ターミナルで動くAIエージェントコードを読んで、書いて、実行してくれるバイブコーディングに最適 Cursor AIが組み込まれたエディタコードを書きながらAIに相談できる Claude / Gemini ブラウザで使えるAI Artifactでアプリを作れる Googleのサービスと連携最近の主力ツール 17

Slide 18

Slide 18 text

Nano Banana Pro（Googleの画像生成AI）今までよりも最高の品質で画像を出力文字もきれいに出せる実写に近いクオリティ ※ちょっと実演します最近すごい画像生成AI 18

Slide 19

Slide 19 text

AIに指示を出してコードを書いてもらうスタイル自分でコードを書かない AIと会話しながらアプリを作る「こういうアプリを作って」と言うだけ細かい修正も「ここをこうして」と言うだけ ※この後の実演で実際に見せます！バイブコーディングとは 19

Slide 20

Slide 20 text

AIへの指示の出し方が大事具体的に指示を出す悪い例：「爆発させて」良い例：「ボタンをクリックしたら、画面中央から爆発のアニメーションが広がるようにして」背景情報を伝える役割を与える（「あなたはプロのエンジニアです」など）例を見せるうまくいかなかったら言い方を変えてみる思い通りにいかないこともある → それが学びのきっかけ！プロンプトエンジニアリング 20

Slide 21

Slide 21 text

Slide 22

Slide 22 text

全ての情報をAIに取り込ませるのは料金的に非現実的 AIは人間のようにいろんなことを判断してくれるでも全部の情報を渡すとお金がかかりすぎる AIが活躍できるためのワークフローを作ってあげる AIを使うときは土台としてコードによるワークフローが必須 22

Slide 23

Slide 23 text

顧客との会話をAI活用するために作ったツール https://dev.classmethod.jp/articles/backlog-exporter/ Backlogの情報をPCに保存することでAIが扱える領域に持ってくるこれだけで作業効率が爆上がり AI活用の循環 AI活用するための土台を作る → よりよいAI環境ができるそのツールもAIにより作る → 循環が生まれる例：backlog-exporter 23

Slide 24

Slide 24 text

体験タイム実際にAIを使ってアプリを作ってみよう！

Slide 25

Slide 25 text

https://claude.ai Claudeにログイン 25

Slide 26

Slide 26 text

Claude.aiでArtifactを使ってアプリを作ってみよう！ 1. Claude.aiにアクセス（Googleアカウントでログイン） 2. Artifactを使ってアプリを作る 3. 作ったもの（URLやスクリーンショット）をGoogleフォームに送信 Claudeはチャットとコードと実行結果が同じ画面に表示されるので便利！体験の流れ 26

Slide 27

Slide 27 text

自由にアプリを作ってみてください！アイデア例：自己紹介ページクイズアプリゲーム（インベーダーゲームなど）好きなものを紹介するページその他、思いついたもの何でも！必須なプロンプト HTMLで作成してください困ったら声をかけてください！体験のお題 27

Slide 28

Slide 28 text

AIに指示を出すだけでアプリが作れる！自分のアイデアが形になる体験コードの中身も確認してみよう（HTML, CSS, JavaScript）うまくいかなかったら指示の仕方を変えてみる作ったものは世界中の人が使えるウェブの強みはインターネット上に公開できること自分が作ったものが誰かの役に立つ喜び体験で大切なこと 28

Slide 29

Slide 29 text

バイブコーディング実演

Slide 30

Slide 30 text

みんなの成果物を使って、リアルタイムでアプリを作ります 1. Googleフォームに送信されたデータをスプレッドシートで確認 2. スプレッドシートをCSVにする 3. CSVデータを使って、一覧アプリをリアルタイムで作成 4. スプレッドシートのデータをそのまま業務に活かせる形にする使用ツール：Claude Code 実演の流れ 30

Slide 31

Slide 31 text

AIによるアプリ作り体験ができるみんなの成果物をまとめて別のアプリにできる実務でもこうやってデータを活用するバイブコーディングの実際の流れリアルタイムでアプリができていく様子この実演で伝えたいこと 31

Slide 32

Slide 32 text

実務の話・技術理解の重要性

Slide 33

Slide 33 text

AIを使う時の注意点技術を理解しているとコードの中身がわかって自由に編集することができるコードの中身（HTML, CSS, JavaScript）の確認も大事 AIに任せっきりにしない生成AIの力 vs 自分の力 AIが作ったものはAIの力でも、コードを読んで理解して説明できるのは自分の力技術を理解しているからこそAIを使いこなせる https://zenn.dev/team_zenn/articles/claudecode-ai-coding-vs-human-engineer 技術理解の重要性 33

Slide 34

Slide 34 text

最近だと大体TypeScriptかPython この二つの言語の世の中の情報量が圧倒的に多い個人的にはこの二つさえある程度使えたらウェブ業界では苦戦しないと思っているどんな言語を使うのがいいのか 34

Slide 35

Slide 35 text

TypeScriptは型が使えるから AIは確かに優秀だが、型やリンターなどの補助がないとうまく動かないことがある人間が「ここの型は〇〇だからエラーが出ている！」と気づくように、AIも同じエラーが出たらそのエラーを読んで修正する型があるとAIがエラーに気づきやすいリンターも同様 AIを補助するツールとして型やリンターが重要アプリを作る時はTypeScriptがおすすめ 35

Slide 36

Slide 36 text

現場のコードは何万行もあるそれを全部把握するのは難しい現在の現場ではAIと一緒にコーディングをするのが私的にいいと思っている一部は私の経験で補う（安定性や事故防止）その他のスピードが求められる部分でAIを使って爆速に開発最近はこれをやっている実際の仕事ではうまくいかないことも 36

Slide 37

Slide 37 text

私は最初から知っていたところがあってAIに指示ができているでも、もしわからないところがあれば今の高校生たちと立場は一緒 AIという最高に頭のいい相棒と一緒に調べ物をして原因を突き止めて問題解決をする新しくアプリを作ることを繰り返している新しい学び方について 37

Slide 38

Slide 38 text

皆さんには一人で勉強する必要がない必ず頭の良いAIと一緒に物事を考え、一緒に作り上げていくその中に自分の考えや意見を混ぜて自分だけのものを作り上げている必要があるでも注意 AIに作らせてしまった場合にはAIのものになってしまう自分で考えたもの、自分だからできたことが重要視される世界になっていきそう高校生へのメッセージ 38

Slide 39

Slide 39 text

質疑応答

Slide 40

Slide 40 text

何でも質問してください！技能五輪について AIの使い方についてプログラミングの学び方について IT業界への就職について今後のキャリアについて質疑応答 40

Slide 41

Slide 41 text

ご清聴ありがとうございました！