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
580
WEBエンジニア向けAI活用入門
sutetotanuki
October 24, 2024
Tweet
Share
More Decks by sutetotanuki
See All by sutetotanuki
Vercel AI SDK を使って Next.js で AIアプリケーションを 作成する方法のご紹介
sutetotanuki
0
940
ブラウザ上で実行され、 AIアシスタント付きデータベース postgres.new を触ってみた
sutetotanuki
0
260
今時のCookie事情
sutetotanuki
0
520
高速案件立ち上げで使われるマッハテンプレートのフロントエンド技術選定
sutetotanuki
2
1.6k
Core Web Vitals を改善する Next.js の機能群
sutetotanuki
1
2.2k
サーバーレスRDBの選択肢
sutetotanuki
0
1.3k
今日から始めるAmplify DataStore
sutetotanuki
0
1.2k
Kotlin Coroutine 基本的な使い方
sutetotanuki
0
730
20191011_devio_osaka.pdf
sutetotanuki
0
2.3k
Other Decks in Programming
See All in Programming
Memory API : Patterns, Performance et Cas d'Utilisation
josepaumard
0
140
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
1.1k
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.4k
Unlock the Potential of Swift Code Generation
rockname
0
260
Amazon CloudWatchの地味だけど強力な機能紹介!
itotsum
0
160
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Webinar 2025
danielsogl
0
130
Dissecting and Reconstructing Ruby Syntactic Structures
ydah
0
700
タイムゾーンの奥地は思ったよりも闇深いかもしれない
suguruooki
1
670
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
2.8k
PHP で学ぶ OAuth 入門
azuki
1
200
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
120
AIコーディングワークフローの試行 〜AIエージェント×ワークフローでの自動化を目指して〜
rkaga
3
3.7k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
GraphQLとの向き合い方2022年版
quramy
46
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Visualization
eitanlees
146
16k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
760
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
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エンジニアの新しい武器