Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20251216愛知総合工科講演
Search
ShuntaToda
December 15, 2025
0
7
20251216愛知総合工科講演
ShuntaToda
December 15, 2025
Tweet
Share
More Decks by ShuntaToda
See All by ShuntaToda
2025/12/05 one school one skill ウェブサイト解説
shuntatoda
0
250
CDK クロススタック参照問題と起こった時の解決法
shuntatoda
0
310
クラスメソッド24新卒LT 『1年後の姿』~戸田駿太~
shuntatoda
0
1.4k
「backlog-exporter」とAIの連携による業務効率化
shuntatoda
1
2.6k
技能五輪国際大会で通訳者と考えた非エンジニアのためのAI資料作りのノウハウ
shuntatoda
0
430
Featured
See All Featured
Embracing the Ebb and Flow
colly
88
4.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.2k
Building Flexible Design Systems
yeseniaperezcruz
330
39k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
54k
Six Lessons from altMBA
skipperchong
29
4.1k
Writing Fast Ruby
sferik
630
62k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Building Adaptive Systems
keathley
44
2.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Transcript
AI時代のエンジニアとしての働き方 2025/12/16 戸田駿太
1. 自己紹介・技能五輪・クラスメソッドについて 2. AI時代の話 AIの進化とツール バイブコーディング プロンプトエンジニアリング 3. 体験タイム -
AIでアプリを作ってみよう 4. バイブコーディング実演 5. 実務の話・技術理解の重要性 6. 質疑応答 目次 2
今回はSlidoというサービスを使って質問・コメントを受け付けます。 匿名でいいのでどんどん質問・コメントをお願いします! コメント欄・質問 3
自己紹介
自己紹介 5
技能五輪とは 6
WorldSkills Lyon 2024(フランス・リヨン) 2024年9月に開催された国際大会に出場 60カ国・地域、1,313人の選手が参加 59職種の競技が実施 世界中の若者と技術を競い合った経験 大会の特徴 技能を競うだけでなく、交流と楽しむことも大切な目的 開会式・閉会式は大きなスタジアムで開催
各国の選手と文化交流できる貴重な機会 詳しくはブログをチェック:WorldSkills 2024 体験記 開会式の動画 https://youtu.be/9ciijwlcD5Y 国際大会への挑戦 7
作ったものを世界中の人に使ってもらえる インターネット上に公開すれば誰でもアクセスできる 自分が作ったものが誰かの役に立つ喜び これが私がこの技術を好きになった理由 身近な人を、世界中の人を幸せにできる 技術を使って問題を解決できる アイデアを形にして届けられる それがエンジニアのやりがい ウェブの強み 8
入社して一年で学んだことをまとめてみた https://dev.classmethod.jp/articles/classmethod-2024-shinsotsu-first-year-reflection/ クラスメソッドでの仕事 9
AI時代の話 NotebookLM https://notebooklm.google.com/notebook/ef5be8be-c7e4-4a75-abb9- d44bdfe5755e?authuser=0&pli=1
https://x.com/hokazuya/status/1876035072916349110?s=20 AIの進化がすごい 11
AIによる産業革命 12
13
最近の強いAIモデル 14
マルチモーダル化の進化 15
16
Claude Code ターミナルで動くAIエージェント コードを読んで、書いて、実行してくれる バイブコーディングに最適 Cursor AIが組み込まれたエディタ コードを書きながらAIに相談できる Claude /
Gemini ブラウザで使えるAI Artifactでアプリを作れる Googleのサービスと連携 最近の主力ツール 17
Nano Banana Pro(Googleの画像生成AI) 今までよりも最高の品質で画像を出力 文字もきれいに出せる 実写に近いクオリティ ※ちょっと実演します 最近すごい画像生成AI 18
AIに指示を出してコードを書いてもらうスタイル 自分でコードを書かない AIと会話しながらアプリを作る 「こういうアプリを作って」と言うだけ 細かい修正も「ここをこうして」と言うだけ ※この後の実演で実際に見せます! バイブコーディングとは 19
AIへの指示の出し方が大事 具体的に指示を出す 悪い例: 「爆発させて」 良い例: 「ボタンをクリックしたら、画面中央から爆発のアニメーションが広がるようにして」 背景情報を伝える 役割を与える( 「あなたはプロのエンジニアです」など) 例を見せる
うまくいかなかったら言い方を変えてみる 思い通りにいかないこともある → それが学びのきっかけ! プロンプトエンジニアリング 20
21
全ての情報をAIに取り込ませるのは料金的に非現実的 AIは人間のようにいろんなことを判断してくれる でも全部の情報を渡すとお金がかかりすぎる AIが活躍できるためのワークフローを作ってあげる AIを使うときは土台としてコードによるワークフローが必須 22
顧客との会話をAI活用するために作ったツール https://dev.classmethod.jp/articles/backlog-exporter/ Backlogの情報をPCに保存することでAIが扱える領域に持ってくる これだけで作業効率が爆上がり AI活用の循環 AI活用するための土台を作る → よりよいAI環境ができる そのツールもAIにより作る →
循環が生まれる 例:backlog-exporter 23
体験タイム 実際にAIを使ってアプリを作ってみよう!
https://claude.ai Claudeにログイン 25
Claude.aiでArtifactを使ってアプリを作ってみよう! 1. Claude.aiにアクセス(Googleアカウントでログイン) 2. Artifactを使ってアプリを作る 3. 作ったもの(URLやスクリーンショット)をGoogleフォームに送信 Claudeはチャットとコードと実行結果が同じ画面に表示されるので便利! 体験の流れ 26
自由にアプリを作ってみてください! アイデア例: 自己紹介ページ クイズアプリ ゲーム(インベーダーゲームなど) 好きなものを紹介するページ その他、思いついたもの何でも! 必須なプロンプト HTMLで作成してください 困ったら声をかけてください!
体験のお題 27
AIに指示を出すだけでアプリが作れる! 自分のアイデアが形になる体験 コードの中身も確認してみよう(HTML, CSS, JavaScript) うまくいかなかったら指示の仕方を変えてみる 作ったものは世界中の人が使える ウェブの強みはインターネット上に公開できること 自分が作ったものが誰かの役に立つ喜び 体験で大切なこと
28
バイブコーディング実演
みんなの成果物を使って、リアルタイムでアプリを作ります 1. Googleフォームに送信されたデータをスプレッドシートで確認 2. スプレッドシートをCSVにする 3. CSVデータを使って、一覧アプリをリアルタイムで作成 4. スプレッドシートのデータをそのまま業務に活かせる形にする 使用ツール:Claude
Code 実演の流れ 30
AIによるアプリ作り体験ができる みんなの成果物をまとめて別のアプリにできる 実務でもこうやってデータを活用する バイブコーディングの実際の流れ リアルタイムでアプリができていく様子 この実演で伝えたいこと 31
実務の話・技術理解の重要性
AIを使う時の注意点 技術を理解しているとコードの中身がわかって自由に編集することができる コードの中身(HTML, CSS, JavaScript)の確認も大事 AIに任せっきりにしない 生成AIの力 vs 自分の力 AIが作ったものはAIの力
でも、コードを読んで理解して説明できるのは自分の力 技術を理解しているからこそAIを使いこなせる https://zenn.dev/team_zenn/articles/claudecode-ai-coding-vs-human-engineer 技術理解の重要性 33
最近だと大体TypeScriptかPython この二つの言語の世の中の情報量が圧倒的に多い 個人的にはこの二つさえある程度使えたらウェブ業界では苦戦しないと思っている どんな言語を使うのがいいのか 34
TypeScriptは型が使えるから AIは確かに優秀だが、型やリンターなどの補助がないとうまく動かないことがある 人間が「ここの型は〇〇だからエラーが出ている!」と気づくように、AIも同じ エラーが出たらそのエラーを読んで修正する 型があるとAIがエラーに気づきやすい リンターも同様 AIを補助するツールとして型やリンターが重要 アプリを作る時はTypeScriptがおすすめ 35
現場のコードは何万行もある それを全部把握するのは難しい 現在の現場ではAIと一緒にコーディングをするのが私的にいいと思っている 一部は私の経験で補う(安定性や事故防止) その他のスピードが求められる部分でAIを使って爆速に開発 最近はこれをやっている 実際の仕事ではうまくいかないことも 36
私は最初から知っていたところがあってAIに指示ができている でも、もしわからないところがあれば今の高校生たちと立場は一緒 AIという最高に頭のいい相棒と一緒に調べ物をして原因を突き止めて問題解決をする 新しくアプリを作ることを繰り返している 新しい学び方について 37
皆さんには一人で勉強する必要がない 必ず頭の良いAIと一緒に物事を考え、一緒に作り上げていく その中に自分の考えや意見を混ぜて自分だけのものを作り上げている必要がある でも注意 AIに作らせてしまった場合にはAIのものになってしまう 自分で考えたもの、自分だからできたことが重要視される世界になっていきそう 高校生へのメッセージ 38
質疑応答
何でも質問してください! 技能五輪について AIの使い方について プログラミングの学び方について IT業界への就職について 今後のキャリアについて 質疑応答 40
ご清聴ありがとうございました!