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

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

Transcript

1. Shizuoka.js#7 フロントエンドにおける 生成AIの現在とこれから こぎそ / @kgsi
2. 何者か？ 何者か？
3. 受託制作会社でデザイナー・エンジニアとして勤務後、事業会社のデザイ ンエンジニアとしてプロダクト開発に従事。2020年より株式会社 SmartHRに入社し、基本機能や従業員サーベイ機能の開発設計に携わ る。デザインシステムやUIコンポーネントの開発など、社内横断プロジェ クトにも参画。
 パラレルキャリアを標榜し、副業でエンジニア・デザイナー・アドバイ ザーとして活動中。著書に『ちいさくはじめるデザインシステム （BNN）』など。 こぎそしんいち / @kgsi プロダクトデザイナー 何者か？
4. 何者か？ 【従業員サーベイ】AIを利用した自由記述回答の要約機能 https://smarthr.jp/update/55342
5. 何者か？ CreatorZineでAI関連の連載 https://creatorzine.jp/article/corner/103 プロダクトデザインをテーマとしたイベントの主催 https://pdmj.connpass.com/event/293261/
6. 1& 生成AIの現状と進# "& 生成AIが変えるフロントエンド開 Ä& フロントエンド開発における未来 今日話すこと
7. 生成AIの現状と進化 生成AIの現状と進化
8. 生成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
9. 生成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年
10. 生成AIの現状と進化
11. 生成AIの現状と進化 GPT-4 2023年3月
12. 生成AIの現状と進化 プラグイン 2023年3月
13. 生成AIの現状と進化 Browsing 2023年5月
14. 生成AIの現状と進化 GPT-4V 2023年９月
15. 生成AIの現状と進化 ChatGPTがけん引、生成ＡＩ市場は10年以内に180兆円に拡大へ－ＢＩ https://www.bloomberg.co.jp/news/articles/2023-06-02/RVLQYRT0G1KW01
16. 生成AIの現状と進化 世はまさにAI戦国時代
17. 生成AIが変える フロントエンド開発 生成AIが変えるフロントエンド開発
18. 生産性の 向上 データ分析と 洞察 生成AIが変えるフロントエンド開発 ユーザビリティの 向上 生成AIによって変わるフロントエンドの領域
19. 生成AIが変えるフロントエンド開発 生産性の 向上 データ分析と 洞察 ユーザビリティの 向上
20. 生成AIが変えるフロントエンド開発 ƒ フロントエンドにおいて開発対象も含めてAIにより劇的にかわる…とい うパラダイムシフトはまだ起きていなq ƒ ただし、仕事の仕方自体が大きく変わる可能性があu ƒ より多くの開発生産性が求められる可能性がある。 生成AIの登場でフロントエンド開発の流れは 変わるのか？
21. 生成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％ものプロジェクトを追加でコード化することができた
22. 生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review
23. 生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review Copilot
24. 生成AIが変えるフロントエンド開発 GitHub Copilot https://github.com/features/copilot
25. 生成AIが変えるフロントエンド開発 Amazon CodeWhisperer https://aws.amazon.com/jp/codewhisperer/
26. 生成AIが変えるフロントエンド開発 Copilot（支援ツール） y 統合支援ツール郡。GitHub Copilotが圧倒的に有名だがAWSなども開発提供してい y コードを書き始める、またはそのコードに何をさせたいのかをコメントに記述することで、 目的に合わせたコード生成や提i y コードを入力後、コンテキストが分析され、関連する提案がリアルタイムで提„ y 多数の言語とさまざまなフレームワークに対する候補の提示
27. 生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review
28. 生成AIが変えるフロントエンド開発 Boosting GUI Prototyping with Diffusion Models https://arxiv.org/abs/2306.06233
29. 生成AIが変えるフロントエンド開発 uizard https://uizard.io/
30. 生成AIが変えるフロントエンド開発 Prototyping: Text to UI（文字からの生成） “ AI を活用して UI プロトタイピングの段階で自動的にデザインを生成するツールp “ 簡単なテキストのプロンプトを入力するだけで、UIを出力できx “ ラフなスケッチや写真からUIのプロトタイプを出力できる「Image to UI 」という手法もある
31. 生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review
32. 生成AIが変えるフロントエンド開発 CLONE UI | design https://clone-ui.design/ v0 by Vercel https://v0.dev/
33. 生成AIが変えるフロントエンド開発 Coding: Generative UI n 自然言語からUIのコードを生成するサービk n vercelの「v0」などが最近話題だが他にもいくつかサービスは提供されていp n プロンプトを入力するだけで、UIデザインとを生成できp n Tailwind CSSとShadcn/UIをベースに出力するなど...
 現状はコードの出力は表層のみでロジックは対応していなd n 素早いプロトタイプや部分的に必要なコンポーネントの設計を瞬時にできる
34. 生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review
35. 生成AIが変えるフロントエンド開発 TestPilot https://githubnext.com/projects/testpilot/ Autify https://autify.com/ja/
36. 生成AIが変えるフロントエンド開発 Test: Automation  テストコードは自分で各時代から、対象コードを指定して生成する時代l  GitHub Copilot Labではすでに Unit TestコードのAI出力を部分的に対D  Autifyはテストシナリオの作成を支援する特許出願機能「Step Suggestions」を発表、テス トコードの大枠をAIに任せられる
37. 生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review
38. 生成AIが変えるフロントエンド開発 GitHub Next https://githubnext.com/
39. 生成AIが変えるフロントエンド開発 PR/Review — Pull Requestの説明の提案: マーカータグを使って、Pull Requestの説明を簡単に生‰ — 自動テスト生成(Gentest): AIを利用して、新しいPull Requestに対してテストケースを提案 し、コードベースにテストを簡単に追4 — Ghost Text: プルリクエストの説明を入力する際にリアルタイムで提案を表示する
40. フロントエンド開発に おける未来 フロントエンド開発における未来
41. フロントエンド開発における未来 人類はどこで勝負するのか？
42. フロントエンド開発における未来 結論：人類の時代は変わらない „ AIはエンジニアやデザイナーの置き換えではなc „ 最終的なアウトプットや判断を決めるのは引き続き人が担5 „ いわゆるAIが人間を置き換えるということではなc „ 開発生産性を上げるのはやはり人間
43. AI時代に迷わないために フロントエンド開発における未来
44. フロントエンド開発における未来 b ツールは無限にあるが「使える」ツールはわずD b 完成したコードを丸々出力して欲しいのか？一部だけなのか" b 新たな生産性獲得のためには知って使うしかない
45. フロントエンド開発における未来 AI時代に迷わないために
46. フロントエンド開発における未来 f 自分の空気を読んで、手に馴染むツールや手法を探そ@ f まず知って触ることが重' f 開発者として生産性を高めるにはさらなる学習が必要
47. フロントエンド開発における未来 この新時代を楽しみましょう！