Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WEBエンジニア向けAI活用入門
Search
sutetotanuki
October 24, 2024
Programming
0
490
WEBエンジニア向けAI活用入門
sutetotanuki
October 24, 2024
Tweet
Share
More Decks by sutetotanuki
See All by sutetotanuki
Vercel AI SDK を使って Next.js で AIアプリケーションを 作成する方法のご紹介
sutetotanuki
0
600
ブラウザ上で実行され、 AIアシスタント付きデータベース postgres.new を触ってみた
sutetotanuki
0
210
今時のCookie事情
sutetotanuki
0
470
高速案件立ち上げで使われるマッハテンプレートのフロントエンド技術選定
sutetotanuki
2
1.5k
Core Web Vitals を改善する Next.js の機能群
sutetotanuki
1
2.1k
サーバーレスRDBの選択肢
sutetotanuki
0
1.3k
今日から始めるAmplify DataStore
sutetotanuki
0
1.2k
Kotlin Coroutine 基本的な使い方
sutetotanuki
0
700
20191011_devio_osaka.pdf
sutetotanuki
0
2.3k
Other Decks in Programming
See All in Programming
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
Rails アプリ地図考 Flush Cut
makicamel
1
110
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Featured
See All Featured
Fireside Chat
paigeccino
34
3.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Producing Creativity
orderedlist
PRO
343
39k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building a Scalable Design System with Sketch
lauravandoore
460
33k
How GitHub (no longer) Works
holman
313
140k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Facilitating Awesome Meetings
lara
51
6.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Transcript
WEBエンジニア向けAI活⽤⼊⾨ 1
2 キーワード
3 ❌ AIはWEBエンジニアの仕事を奪う ◯ AIはWEBエンジニアの新しい武器
4 今⽇喋ること • AIで今できること • AIを何に使ってるか • 学んだこと • 最後に
5 今⽇喋ること • AIで今できること • AIを何に使ってるか • 学んだこと • 最後に
6 v0で簡単な指⽰で画⾯を作成 簡単な指⽰だけで数⼗秒で画⾯が⽣成される Reactのソースコードもその場で編集できる
7 database.build で簡単な指⽰で分析 CSVをアップロードして簡単な指⽰だけで 関連テーブルをJOINしてクエリ結果を出⼒
8 今⽇喋ること • AIで今できること • AIを何に使ってるか • 学んだこと • 最後に
9 ⼿作業だと⼤変な作業を⼤雑把な指⽰で肩代わり 難しくないけど⼿間のかかる作業を肩代わり 以下はCloudinaryのクエリパラメーターで ⽂字列をオーバーレイするURLを⽣成する例
10 ⼿作業だと⼤変な作業を⼤雑把な指⽰で肩代わり ただし、⼀度ではうまくいかないので⼿直しが 必要
11 コンポーネントの⽣成 あなたは経験豊富で優秀なシニアフロントエンジニアです。 主に以下の library を好んで使いますが、 必要に応じて適切な別の⽅法を採⽤することもあり、 別の⽅法を採⽤する場合はその理由を説明します <libraries> -
React - Tailwind - pnpm - shadcn - Lorem Picsum </libraries> これらを考慮し、これから⼊⼒される質問やUIの⽣成の指⽰に適切に答えてください ⽇頃使うライブラリを使ったコンポーネントを ⽣成するプロンプトをスニペットにしてる
12 コンポーネントの⽣成 ⽣成されたコンポーネントは調整が必要 スタイル調整、プロジェクトに合わせた調整、 APIとの繋ぎ込み...etc それでもベースを⽣成してくれるだけでも⼤分 省⼒化になる
13 全く知らない技術の概要を聞く あなたは優秀で実践豊富なITのシニアエンジニアです。多くの技術について広く深い知識を持っています 今から挙げる技術についてできる限りわかりやすく教えてください また、次の事柄については必ず触れるようにしてください - コンセプトを⼀⾔で - 特徴を箇条書きで -
その技術をうまく使うためのメンタルモデル - その技術が得意なこと不得意なこと - その技術の代表的な alternative 今まで使ったことがない技術を実際に使う前に 概要をAIに聞いて、イメージをつけてから使う
14 全く知らない技術の概要を聞く ただし、時々間違った情報も混じる (ハルシネーション) 公式のドキュメントも合わせて確認する必要が ある ただ、要約で頭に地図ができてる状態で 公式ドキュメントを⾒るのと何も知らない状態 で⾒るのでは⼤きな差がある
15 RAG 勉強会の会場で使えるWEBア プリを作成 ⾃然⾔語でセッション検索機 能(RAG)を組み込む 想像よりもWEBアプリにAIを 組み込むのが簡単だった
16 RAG ただし、精度が安定せず、思ったように検索で きない場合もあった 全⽂検索等を全てRAGに置き換えるにはまだま だ時間がかかりそう
17 Github Copilotの導⼊ VSCode の Github Copilot を導⼊ Auto Complete
の上位互換のような使い⼼地 プロジェクト内にあるソースなら空気を読んで 保管してくれる コピーして名前だけ変更するみたいな作業が タブを押すだけで完成していく
18 Github Copilotの導⼊ それでも使えるソースが⽣成されるのは体感で 30〜50%くらい(個⼈の所感です) 汎⽤的すぎて的外れなコードが⽣成されたり、 仕様に合わせた修正が必要だったり、微修正が どうしても必要になる
19 まだ全てをAIだけで完結させるのは難しそう (プロンプトを頑張れば作れば改善できる部分もある が、それはそれで⼤変)
20 今⽇喋ること • AIで今できること • AIを何に使ってるか • 学んだこと • 最後に
21 本を読む できることを知るのに本を読んだ 活⽤⽅法、RAG、コード
22 AIの特性を知る AIの特性を知り活⽤シーンを考える • 時々間違ったことをいう(あくまで確率の⾼ い答えを返してるだけ) • 余計なコンテキストが混じると回答の精度が 落ちる •
曖昧な指⽰、揺れがある⾔葉でも解釈して 黙々と仕事をこなす
23 オープンソースを読む AIを組み込んだWEBアプリの参考にSupabase のdatabse.build(元postgres.new) オープンソースを読み、Next.jsに⽣成AIの チャットを組み込む参考にした
24 試⾏錯誤する とりあえず使ってみる 使いながら、思い通りになるまでプロンプトを 調整する 使う⽤途を増やす。例えば出⼒形式をマークダ ウンにするだけでも活⽤できるシーンが増える 特性を理解しながら試⾏錯誤する
25 今⽇喋ること • AIで今できること • AIを何に使ってるか • 学んだこと • 最後に
26 最後に AIは特性を理解して使えばWEBエンジニアの ⽣産性を何倍にもしてくれる ただ、全ての作業を⼈の⼿を挟まずに完結する 未来はまだこなさそう AIを使いこなして⽣産性を上げていきましょう
27 ❌ AIはWEBエンジニアの仕事を奪う ◯ AIはWEBエンジニアの新しい武器