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
65
WEBエンジニア向けAI活用入門
sutetotanuki
October 24, 2024
Tweet
Share
More Decks by sutetotanuki
See All by sutetotanuki
ブラウザ上で実行され、 AIアシスタント付きデータベース postgres.new を触ってみた
sutetotanuki
0
140
今時のCookie事情
sutetotanuki
0
360
高速案件立ち上げで使われるマッハテンプレートのフロントエンド技術選定
sutetotanuki
1
1.2k
Core Web Vitals を改善する Next.js の機能群
sutetotanuki
1
1.8k
サーバーレスRDBの選択肢
sutetotanuki
0
1.1k
今日から始めるAmplify DataStore
sutetotanuki
0
1.1k
Kotlin Coroutine 基本的な使い方
sutetotanuki
0
660
20191011_devio_osaka.pdf
sutetotanuki
0
2.2k
higobashi-aws-7-ecs
sutetotanuki
4
2.1k
Other Decks in Programming
See All in Programming
perl for shell, awk and sed programmers
mackee
2
1k
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
2
340
CSC509 Lecture 05
javiergs
PRO
0
190
実践サーバーレスパフォーマンスチューニング ~その実力に迫る~ / Practical Serverless Performance Tuning ~A Close Look at its Power~
seike460
PRO
2
240
知られざるNaNの世界
hole
3
1.1k
Jakarta EE as Seen Trough the Lens of the ASF
ivargrimstad
0
950
空間の中でアイドルとレッスンする技術 - 1st "Vision" / Spatial Lesson technologies with my idol - 1st "Vision"
banjun
PRO
0
260
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
110
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
1.2k
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
2.3k
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
290
Serverless renderování Webových komponent
rarous
PRO
0
140
Featured
See All Featured
Faster Mobile Websites
deanohume
304
30k
Music & Morning Musume
bryan
46
6.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
A designer walks into a library…
pauljervisheath
202
24k
Speed Design
sergeychernyshev
23
550
Typedesign – Prime Four
hannesfritz
39
2.4k
Raft: Consensus for Rubyists
vanstee
136
6.6k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Gamification - CAS2011
davidbonilla
80
5k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
106
49k
A Modern Web Designer's Workflow
chriscoyier
692
190k
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エンジニアの新しい武器