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
560
WEBエンジニア向けAI活用入門
sutetotanuki
October 24, 2024
Tweet
Share
More Decks by sutetotanuki
See All by sutetotanuki
Vercel AI SDK を使って Next.js で AIアプリケーションを 作成する方法のご紹介
sutetotanuki
0
860
ブラウザ上で実行され、 AIアシスタント付きデータベース postgres.new を触ってみた
sutetotanuki
0
250
今時のCookie事情
sutetotanuki
0
510
高速案件立ち上げで使われるマッハテンプレートのフロントエンド技術選定
sutetotanuki
2
1.6k
Core Web Vitals を改善する Next.js の機能群
sutetotanuki
1
2.1k
サーバーレスRDBの選択肢
sutetotanuki
0
1.3k
今日から始めるAmplify DataStore
sutetotanuki
0
1.2k
Kotlin Coroutine 基本的な使い方
sutetotanuki
0
720
20191011_devio_osaka.pdf
sutetotanuki
0
2.3k
Other Decks in Programming
See All in Programming
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
12
3.5k
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
1
520
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
740
生産性アップのためのAI個人活用
kunoyasu
0
640
AHC 044 混合整数計画ソルバー解法
kiri8128
0
300
SQL Server ベクトル検索
odashinsuke
0
110
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
340
CTFのWebにおける⾼難易度問題について
hamayanhamayan
1
970
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
360
読もう! Android build ドキュメント
andpad
1
240
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
3
1k
プログラミング教育のコスパの話
superkinoko
0
120
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
Rails Girls Zürich Keynote
gr2m
94
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Unsuck your backbone
ammeep
670
57k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
Become a Pro
speakerdeck
PRO
27
5.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
16
1.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
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エンジニアの新しい武器