WEBエンジニア向けAI活用入門

by sutetotanuki

Slide 1

Slide 1 text

WEBエンジニア向けAI活⽤⼊⾨ 1

Slide 2

Slide 2 text

2 キーワード

Slide 3

Slide 3 text

3 ❌ AIはWEBエンジニアの仕事を奪う ◯ AIはWEBエンジニアの新しい武器

Slide 4

Slide 4 text

4 今⽇喋ること ● AIで今できること ● AIを何に使ってるか ● 学んだこと ● 最後に

Slide 5

Slide 5 text

5 今⽇喋ること ● AIで今できること ● AIを何に使ってるか ● 学んだこと ● 最後に

Slide 6

Slide 6 text

6 v0で簡単な指⽰で画⾯を作成簡単な指⽰だけで数⼗秒で画⾯が⽣成される Reactのソースコードもその場で編集できる

Slide 7

Slide 7 text

7 database.build で簡単な指⽰で分析 CSVをアップロードして簡単な指⽰だけで関連テーブルをJOINしてクエリ結果を出⼒

Slide 8

Slide 8 text

8 今⽇喋ること ● AIで今できること ● AIを何に使ってるか ● 学んだこと ● 最後に

Slide 9

Slide 9 text

9 ⼿作業だと⼤変な作業を⼤雑把な指⽰で肩代わり難しくないけど⼿間のかかる作業を肩代わり以下はCloudinaryのクエリパラメーターで⽂字列をオーバーレイするURLを⽣成する例

Slide 10

Slide 10 text

10 ⼿作業だと⼤変な作業を⼤雑把な指⽰で肩代わりただし、⼀度ではうまくいかないので⼿直しが必要

Slide 11

Slide 11 text

11 コンポーネントの⽣成あなたは経験豊富で優秀なシニアフロントエンジニアです。主に以下の library を好んで使いますが、必要に応じて適切な別の⽅法を採⽤することもあり、別の⽅法を採⽤する場合はその理由を説明します - React - Tailwind - pnpm - shadcn - Lorem Picsum これらを考慮し、これから⼊⼒される質問やUIの⽣成の指⽰に適切に答えてください⽇頃使うライブラリを使ったコンポーネントを⽣成するプロンプトをスニペットにしてる

Slide 12

Slide 12 text

12 コンポーネントの⽣成⽣成されたコンポーネントは調整が必要スタイル調整、プロジェクトに合わせた調整、 APIとの繋ぎ込み...etc それでもベースを⽣成してくれるだけでも⼤分省⼒化になる

Slide 13

Slide 13 text

13 全く知らない技術の概要を聞くあなたは優秀で実践豊富なITのシニアエンジニアです。多くの技術について広く深い知識を持っています今から挙げる技術についてできる限りわかりやすく教えてくださいまた、次の事柄については必ず触れるようにしてください - コンセプトを⼀⾔で - 特徴を箇条書きで - その技術をうまく使うためのメンタルモデル - その技術が得意なこと不得意なこと - その技術の代表的な alternative 今まで使ったことがない技術を実際に使う前に概要をAIに聞いて、イメージをつけてから使う

Slide 14

Slide 14 text

14 全く知らない技術の概要を聞くただし、時々間違った情報も混じる (ハルシネーション) 公式のドキュメントも合わせて確認する必要があるただ、要約で頭に地図ができてる状態で公式ドキュメントを⾒るのと何も知らない状態で⾒るのでは⼤きな差がある

Slide 15

Slide 15 text

15 RAG 勉強会の会場で使えるWEBアプリを作成⾃然⾔語でセッション検索機能(RAG)を組み込む想像よりもWEBアプリにAIを組み込むのが簡単だった

Slide 16

Slide 16 text

16 RAG ただし、精度が安定せず、思ったように検索できない場合もあった全⽂検索等を全てRAGに置き換えるにはまだまだ時間がかかりそう

Slide 17

Slide 17 text

17 Github Copilotの導⼊ VSCode の Github Copilot を導⼊ Auto Complete の上位互換のような使い⼼地プロジェクト内にあるソースなら空気を読んで保管してくれるコピーして名前だけ変更するみたいな作業がタブを押すだけで完成していく

Slide 18

Slide 18 text

18 Github Copilotの導⼊それでも使えるソースが⽣成されるのは体感で 30〜50%くらい(個⼈の所感です) 汎⽤的すぎて的外れなコードが⽣成されたり、仕様に合わせた修正が必要だったり、微修正がどうしても必要になる

Slide 19

Slide 19 text

19 まだ全てをAIだけで完結させるのは難しそう (プロンプトを頑張れば作れば改善できる部分もあるが、それはそれで⼤変)

Slide 20

Slide 20 text

20 今⽇喋ること ● AIで今できること ● AIを何に使ってるか ● 学んだこと ● 最後に

Slide 21

Slide 21 text

21 本を読むできることを知るのに本を読んだ活⽤⽅法、RAG、コード

Slide 22

Slide 22 text

22 AIの特性を知る AIの特性を知り活⽤シーンを考える ● 時々間違ったことをいう（あくまで確率の⾼い答えを返してるだけ) ● 余計なコンテキストが混じると回答の精度が落ちる ● 曖昧な指⽰、揺れがある⾔葉でも解釈して黙々と仕事をこなす

Slide 23

Slide 23 text

23 オープンソースを読む AIを組み込んだWEBアプリの参考にSupabase のdatabse.build(元postgres.new) オープンソースを読み、Next.jsに⽣成AIのチャットを組み込む参考にした

Slide 24

Slide 24 text

24 試⾏錯誤するとりあえず使ってみる使いながら、思い通りになるまでプロンプトを調整する使う⽤途を増やす。例えば出⼒形式をマークダウンにするだけでも活⽤できるシーンが増える特性を理解しながら試⾏錯誤する

Slide 25

Slide 25 text

25 今⽇喋ること ● AIで今できること ● AIを何に使ってるか ● 学んだこと ● 最後に

Slide 26

Slide 26 text

26 最後に AIは特性を理解して使えばWEBエンジニアの⽣産性を何倍にもしてくれるただ、全ての作業を⼈の⼿を挟まずに完結する未来はまだこなさそう AIを使いこなして⽣産性を上げていきましょう

Slide 27

Slide 27 text

27 ❌ AIはWEBエンジニアの仕事を奪う ◯ AIはWEBエンジニアの新しい武器