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
740
WEBエンジニア向けAI活用入門
sutetotanuki
October 24, 2024
Tweet
Share
More Decks by sutetotanuki
See All by sutetotanuki
Vercel AI SDK を使って Next.js で AIアプリケーションを 作成する方法のご紹介
sutetotanuki
0
1.3k
ブラウザ上で実行され、 AIアシスタント付きデータベース postgres.new を触ってみた
sutetotanuki
0
330
今時のCookie事情
sutetotanuki
0
600
高速案件立ち上げで使われるマッハテンプレートのフロントエンド技術選定
sutetotanuki
2
1.7k
Core Web Vitals を改善する Next.js の機能群
sutetotanuki
1
2.3k
サーバーレスRDBの選択肢
sutetotanuki
0
1.4k
今日から始めるAmplify DataStore
sutetotanuki
0
1.3k
Kotlin Coroutine 基本的な使い方
sutetotanuki
0
770
20191011_devio_osaka.pdf
sutetotanuki
0
2.4k
Other Decks in Programming
See All in Programming
兎に角、コードレビュー
mitohato14
0
170
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
230
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
250
複雑なドメインに挑む.pdf
yukisakai1225
5
950
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
4
1.9k
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
1k
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
100
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
200
testingを眺める
matumoto
1
130
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
370
Trem on Rails - Prompt Engineering com Ruby
elainenaomi
1
100
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
190
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Music & Morning Musume
bryan
46
6.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Producing Creativity
orderedlist
PRO
347
40k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Balancing Empowerment & Direction
lara
3
610
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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エンジニアの新しい武器