Tweet
Tweet

Slide 1

Slide 1 text

Shizuoka.js#7 フロントエンドにおける 生成AIの現在とこれから こぎそ / @kgsi

Slide 2

Slide 2 text

何者か？ 何者か？

Slide 3

Slide 3 text

受託制作会社でデザイナー・エンジニアとして勤務後、事業会社のデザイ ンエンジニアとしてプロダクト開発に従事。2020年より株式会社 SmartHRに入社し、基本機能や従業員サーベイ機能の開発設計に携わ る。デザインシステムやUIコンポーネントの開発など、社内横断プロジェ クトにも参画。
 パラレルキャリアを標榜し、副業でエンジニア・デザイナー・アドバイ ザーとして活動中。著書に『ちいさくはじめるデザインシステム （BNN）』など。 こぎそしんいち / @kgsi プロダクトデザイナー 何者か？

Slide 4

Slide 4 text

何者か？ 【従業員サーベイ】AIを利用した自由記述回答の要約機能 https://smarthr.jp/update/55342

Slide 5

Slide 5 text

何者か？ CreatorZineでAI関連の連載 https://creatorzine.jp/article/corner/103 プロダクトデザインをテーマとしたイベントの主催 https://pdmj.connpass.com/event/293261/

Slide 6

Slide 6 text

1& 生成AIの現状と進# "& 生成AIが変えるフロントエンド開 Ä& フロントエンド開発における未来 今日話すこと

Slide 7

Slide 7 text

生成AIの現状と進化 生成AIの現状と進化

Slide 8

Slide 8 text

生成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

Slide 9

Slide 9 text

生成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年

Slide 10

Slide 10 text

生成AIの現状と進化

Slide 11

Slide 11 text

生成AIの現状と進化 GPT-4 2023年3月

Slide 12

Slide 12 text

生成AIの現状と進化 プラグイン 2023年3月

Slide 13

Slide 13 text

生成AIの現状と進化 Browsing 2023年5月

Slide 14

Slide 14 text

生成AIの現状と進化 GPT-4V 2023年９月

Slide 15

Slide 15 text

生成AIの現状と進化 ChatGPTがけん引、生成ＡＩ市場は10年以内に180兆円に拡大へ－ＢＩ https://www.bloomberg.co.jp/news/articles/2023-06-02/RVLQYRT0G1KW01

Slide 16

Slide 16 text

生成AIの現状と進化 世はまさにAI戦国時代

Slide 17

Slide 17 text

生成AIが変える フロントエンド開発 生成AIが変えるフロントエンド開発

Slide 18

Slide 18 text

生産性の 向上 データ分析と 洞察 生成AIが変えるフロントエンド開発 ユーザビリティの 向上 生成AIによって変わるフロントエンドの領域

Slide 19

Slide 19 text

生成AIが変えるフロントエンド開発 生産性の 向上 データ分析と 洞察 ユーザビリティの 向上

Slide 20

Slide 20 text

生成AIが変えるフロントエンド開発 ƒ フロントエンドにおいて開発対象も含めてAIにより劇的にかわる…とい うパラダイムシフトはまだ起きていなq ƒ ただし、仕事の仕方自体が大きく変わる可能性があu ƒ より多くの開発生産性が求められる可能性がある。 生成AIの登場でフロントエンド開発の流れは 変わるのか？

Slide 21

Slide 21 text

生成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％ものプロジェクトを追加でコード化することができた

Slide 22

Slide 22 text

生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review

Slide 23

Slide 23 text

生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review Copilot

Slide 24

Slide 24 text

生成AIが変えるフロントエンド開発 GitHub Copilot https://github.com/features/copilot

Slide 25

Slide 25 text

生成AIが変えるフロントエンド開発 Amazon CodeWhisperer https://aws.amazon.com/jp/codewhisperer/

Slide 26

Slide 26 text

生成AIが変えるフロントエンド開発 Copilot（支援ツール） y 統合支援ツール郡。GitHub Copilotが圧倒的に有名だがAWSなども開発提供してい y コードを書き始める、またはそのコードに何をさせたいのかをコメントに記述することで、 目的に合わせたコード生成や提i y コードを入力後、コンテキストが分析され、関連する提案がリアルタイムで提„ y 多数の言語とさまざまなフレームワークに対する候補の提示

Slide 27

Slide 27 text

生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review

Slide 28

Slide 28 text

生成AIが変えるフロントエンド開発 Boosting GUI Prototyping with Diffusion Models https://arxiv.org/abs/2306.06233

Slide 29

Slide 29 text

生成AIが変えるフロントエンド開発 uizard https://uizard.io/

Slide 30

Slide 30 text

生成AIが変えるフロントエンド開発 Prototyping: Text to UI（文字からの生成） “ AI を活用して UI プロトタイピングの段階で自動的にデザインを生成するツールp “ 簡単なテキストのプロンプトを入力するだけで、UIを出力できx “ ラフなスケッチや写真からUIのプロトタイプを出力できる「Image to UI 」という手法もある

Slide 31

Slide 31 text

生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review

Slide 32

Slide 32 text

生成AIが変えるフロントエンド開発 CLONE UI | design https://clone-ui.design/ v0 by Vercel https://v0.dev/

Slide 33

Slide 33 text

生成AIが変えるフロントエンド開発 Coding: Generative UI n 自然言語からUIのコードを生成するサービk n vercelの「v0」などが最近話題だが他にもいくつかサービスは提供されていp n プロンプトを入力するだけで、UIデザインとを生成できp n Tailwind CSSとShadcn/UIをベースに出力するなど...
 現状はコードの出力は表層のみでロジックは対応していなd n 素早いプロトタイプや部分的に必要なコンポーネントの設計を瞬時にできる

Slide 34

Slide 34 text

生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review

Slide 35

Slide 35 text

生成AIが変えるフロントエンド開発 TestPilot https://githubnext.com/projects/testpilot/ Autify https://autify.com/ja/

Slide 36

Slide 36 text

生成AIが変えるフロントエンド開発 Test: Automation  テストコードは自分で各時代から、対象コードを指定して生成する時代l  GitHub Copilot Labではすでに Unit TestコードのAI出力を部分的に対D  Autifyはテストシナリオの作成を支援する特許出願機能「Step Suggestions」を発表、テス トコードの大枠をAIに任せられる

Slide 37

Slide 37 text

生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review

Slide 38

Slide 38 text

生成AIが変えるフロントエンド開発 GitHub Next https://githubnext.com/

Slide 39

Slide 39 text

生成AIが変えるフロントエンド開発 PR/Review — Pull Requestの説明の提案: マーカータグを使って、Pull Requestの説明を簡単に生‰ — 自動テスト生成(Gentest): AIを利用して、新しいPull Requestに対してテストケースを提案 し、コードベースにテストを簡単に追4 — Ghost Text: プルリクエストの説明を入力する際にリアルタイムで提案を表示する

Slide 40

Slide 40 text

フロントエンド開発に おける未来 フロントエンド開発における未来

Slide 41

Slide 41 text

フロントエンド開発における未来 人類はどこで勝負するのか？

Slide 42

Slide 42 text

フロントエンド開発における未来 結論：人類の時代は変わらない „ AIはエンジニアやデザイナーの置き換えではなc „ 最終的なアウトプットや判断を決めるのは引き続き人が担5 „ いわゆるAIが人間を置き換えるということではなc „ 開発生産性を上げるのはやはり人間

Slide 43

Slide 43 text

AI時代に迷わないために フロントエンド開発における未来

Slide 44

Slide 44 text

フロントエンド開発における未来 b ツールは無限にあるが「使える」ツールはわずD b 完成したコードを丸々出力して欲しいのか？一部だけなのか" b 新たな生産性獲得のためには知って使うしかない

Slide 45

Slide 45 text

フロントエンド開発における未来 AI時代に迷わないために

Slide 46

Slide 46 text

フロントエンド開発における未来 f 自分の空気を読んで、手に馴染むツールや手法を探そ@ f まず知って触ることが重' f 開発者として生産性を高めるにはさらなる学習が必要

Slide 47

Slide 47 text

フロントエンド開発における未来 この新時代を楽しみましょう！