Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フロントエンドにおける生成AIの現在とこれから

kgsi
October 21, 2023

 フロントエンドにおける生成AIの現在とこれから

Shizuoka.js#7で登壇した資料です。
https://connpass.com/event/295831/

kgsi

October 21, 2023
Tweet

More Decks by kgsi

Other Decks in Technology

Transcript

  1. 生成AIの現状と進化 Gartnerが「生成AIのハイプ・サイ クル:2023年」を発表。 z Gartner IT Symposium/Xpo 2023 (11月 13~15日開催)で、生成AIのトレンドとテクノ

    ロジについて解説されb z 2026年までに、80%以上の企業が生成AIの APIを利用し、生成AI対応アプリケーションを 本番環境に展開する見込み 引用:https://www.gartner.co.jp/ja/newsroom/press-releases/pr-20231012
  2. 生成AIの現状と進化 … 2023/02/09 ChatGPT Plusリリーr … 2023/03/14 GPT-4の導S … 2023/03/23

    ChatGPTのプラグイン導S … 2023/07/06 Code interpreter ベータ版展7 … 2023/08/28 ChatGPT Enterpriseの導S … 2023/09/25 新しい音声と画像入力機能Y … 2023/09/27 Browsing機能のPlusユーザーへの再展7 … 2023/10/16 DALL·E 3のベータ版ロールアウ … 2023/10/17 Browsing機能のベータ版終了 引用:https://help.openai.com/en/articles/6825453-chatgpt-release-notes ChatGPTの進化 2023年
  3. 生成AIが変えるフロントエンド開発 引用:https://www.nngroup.com/articles/ai-tools-productivity-gains/ “AI Improves Employee Productivity by 66%” ’ ChatGPTのような生成型AIをビジネスに利用することで、ユーザーの

    パフォーマンスが平均して66%向上することを、3つのケーススタディ を通じて示y ’ カスタマーサービスエージェント、ビジネスプロフェッショナル、プロ グラマーの3グループに焦点を当て、それぞれのタスク効率がAIの支援 によってどの程度向上するかを検w ’ 結果として、従業員の生産性は平均66%、特にプログラマーは週に 126%ものプロジェクトを追加でコード化することができた
  4. 生成AIが変えるフロントエンド開発 Prototyping: Text to UI(文字からの生成) “ AI を活用して UI プロトタイピングの段階で自動的にデザインを生成するツールp

    “ 簡単なテキストのプロンプトを入力するだけで、UIを出力できx “ ラフなスケッチや写真からUIのプロトタイプを出力できる「Image to UI 」という手法もある
  5. 生成AIが変えるフロントエンド開発 Coding: Generative UI n 自然言語からUIのコードを生成するサービk n vercelの「v0」などが最近話題だが他にもいくつかサービスは提供されていp n プロンプトを入力するだけで、UIデザインとを生成できp

    n Tailwind CSSとShadcn/UIをベースに出力するなど...
 現状はコードの出力は表層のみでロジックは対応していなd n 素早いプロトタイプや部分的に必要なコンポーネントの設計を瞬時にできる
  6. 生成AIが変えるフロントエンド開発 Test: Automation  テストコードは自分で各時代から、対象コードを指定して生成する時代l  GitHub Copilot Labではすでに Unit

    TestコードのAI出力を部分的に対D  Autifyはテストシナリオの作成を支援する特許出願機能「Step Suggestions」を発表、テス トコードの大枠をAIに任せられる
  7. 生成AIが変えるフロントエンド開発 PR/Review — Pull Requestの説明の提案: マーカータグを使って、Pull Requestの説明を簡単に生‰ — 自動テスト生成(Gentest): AIを利用して、新しいPull

    Requestに対してテストケースを提案 し、コードベースにテストを簡単に追4 — Ghost Text: プルリクエストの説明を入力する際にリアルタイムで提案を表示する