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

Transcript

1. WEBエンジニア向けAI活⽤⼊⾨ 1
2. 2 キーワード
3. 3 ❌ AIはWEBエンジニアの仕事を奪う ◯ AIはWEBエンジニアの新しい武器
4. 4 今⽇喋ること • AIで今できること • AIを何に使ってるか • 学んだこと • 最後に
5. 5 今⽇喋ること • AIで今できること • AIを何に使ってるか • 学んだこと • 最後に
6. 6 v0で簡単な指⽰で画⾯を作成 簡単な指⽰だけで数⼗秒で画⾯が⽣成される Reactのソースコードもその場で編集できる 
7. 7 database.build で簡単な指⽰で分析 CSVをアップロードして簡単な指⽰だけで 関連テーブルをJOINしてクエリ結果を出⼒
8. 8 今⽇喋ること • AIで今できること • AIを何に使ってるか • 学んだこと • 最後に
9. 9 ⼿作業だと⼤変な作業を⼤雑把な指⽰で肩代わり 難しくないけど⼿間のかかる作業を肩代わり 以下はCloudinaryのクエリパラメーターで ⽂字列をオーバーレイするURLを⽣成する例
10. 10 ⼿作業だと⼤変な作業を⼤雑把な指⽰で肩代わり ただし、⼀度ではうまくいかないので⼿直しが 必要
11. 11 コンポーネントの⽣成 あなたは経験豊富で優秀なシニアフロントエンジニアです。 主に以下の library を好んで使いますが、 必要に応じて適切な別の⽅法を採⽤することもあり、 別の⽅法を採⽤する場合はその理由を説明します <libraries> - React - Tailwind - pnpm - shadcn - Lorem Picsum </libraries> これらを考慮し、これから⼊⼒される質問やUIの⽣成の指⽰に適切に答えてください ⽇頃使うライブラリを使ったコンポーネントを ⽣成するプロンプトをスニペットにしてる
12. 12 コンポーネントの⽣成 ⽣成されたコンポーネントは調整が必要 スタイル調整、プロジェクトに合わせた調整、 APIとの繋ぎ込み...etc それでもベースを⽣成してくれるだけでも⼤分 省⼒化になる
13. 13 全く知らない技術の概要を聞く あなたは優秀で実践豊富なITのシニアエンジニアです。多くの技術について広く深い知識を持っています 今から挙げる技術についてできる限りわかりやすく教えてください また、次の事柄については必ず触れるようにしてください - コンセプトを⼀⾔で - 特徴を箇条書きで - その技術をうまく使うためのメンタルモデル - その技術が得意なこと不得意なこと - その技術の代表的な alternative 今まで使ったことがない技術を実際に使う前に 概要をAIに聞いて、イメージをつけてから使う
14. 14 全く知らない技術の概要を聞く ただし、時々間違った情報も混じる (ハルシネーション) 公式のドキュメントも合わせて確認する必要が ある ただ、要約で頭に地図ができてる状態で 公式ドキュメントを⾒るのと何も知らない状態 で⾒るのでは⼤きな差がある
15. 15 RAG 勉強会の会場で使えるWEBア プリを作成 ⾃然⾔語でセッション検索機 能(RAG)を組み込む 想像よりもWEBアプリにAIを 組み込むのが簡単だった
16. 16 RAG ただし、精度が安定せず、思ったように検索で きない場合もあった 全⽂検索等を全てRAGに置き換えるにはまだま だ時間がかかりそう
17. 17 Github Copilotの導⼊ VSCode の Github Copilot を導⼊ Auto Complete の上位互換のような使い⼼地 プロジェクト内にあるソースなら空気を読んで 保管してくれる コピーして名前だけ変更するみたいな作業が タブを押すだけで完成していく
18. 18 Github Copilotの導⼊ それでも使えるソースが⽣成されるのは体感で 30〜50%くらい(個⼈の所感です) 汎⽤的すぎて的外れなコードが⽣成されたり、 仕様に合わせた修正が必要だったり、微修正が どうしても必要になる
19. 19 まだ全てをAIだけで完結させるのは難しそう (プロンプトを頑張れば作れば改善できる部分もある が、それはそれで⼤変)
20. 20 今⽇喋ること • AIで今できること • AIを何に使ってるか • 学んだこと • 最後に
21. 21 本を読む できることを知るのに本を読んだ 活⽤⽅法、RAG、コード
22. 22 AIの特性を知る AIの特性を知り活⽤シーンを考える • 時々間違ったことをいう（あくまで確率の⾼ い答えを返してるだけ) • 余計なコンテキストが混じると回答の精度が 落ちる • 曖昧な指⽰、揺れがある⾔葉でも解釈して 黙々と仕事をこなす
23. 23 オープンソースを読む  AIを組み込んだWEBアプリの参考にSupabase のdatabse.build(元postgres.new) オープンソースを読み、Next.jsに⽣成AIの チャットを組み込む参考にした
24. 24 試⾏錯誤する とりあえず使ってみる 使いながら、思い通りになるまでプロンプトを 調整する 使う⽤途を増やす。例えば出⼒形式をマークダ ウンにするだけでも活⽤できるシーンが増える 特性を理解しながら試⾏錯誤する
25. 25 今⽇喋ること • AIで今できること • AIを何に使ってるか • 学んだこと • 最後に
26. 26 最後に AIは特性を理解して使えばWEBエンジニアの ⽣産性を何倍にもしてくれる ただ、全ての作業を⼈の⼿を挟まずに完結する 未来はまだこなさそう AIを使いこなして⽣産性を上げていきましょう
27. 27 ❌ AIはWEBエンジニアの仕事を奪う ◯ AIはWEBエンジニアの新しい武器