Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドにおける生成AIの現在とこれから
Search
kgsi
October 21, 2023
Technology
3
850
フロントエンドにおける生成AIの現在とこれから
Shizuoka.js#7で登壇した資料です。
https://connpass.com/event/295831/
kgsi
October 21, 2023
Tweet
Share
More Decks by kgsi
See All by kgsi
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
コミュニティとおかねの話 / Community and Money
kgsi
0
140
イベント企画設計における「フロントエンド」な考え方とその魅力
kgsi
1
3.8k
副業デザイナーズで作るデザイン組織 / Design Teams as a Side Job Designer
kgsi
0
1.4k
ウェブフロントエンジニアから見る Flutter Webの 現在地点 / Flutter web as of now
kgsi
3
5k
品質向上を目指す開発組織のデザインレビュー / SmartHR
kgsi
4
3.4k
スクラムチームにおけるプロダクトデザイナーの役割・関わり方
kgsi
1
620
TypeScriptではじめるUIデザイン / UI design with TypeScript
kgsi
2
2.7k
チームではじめるUIデザイン / Getting Started with Figma
kgsi
2
710
Other Decks in Technology
See All in Technology
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
140
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
160
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
650
Kubernetes における cgroup driver のしくみ: runwasi の bugfix より
z63d
2
130
iPhone Eye Tracking機能から学ぶやさしいアクセシビリティ
fujiyamaorange
0
620
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
150
2025年になってもまだMySQLが好き
yoku0825
8
4k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
エニグモ_会社紹介資料(エンジニア職種向け).pdf
enigmo_hr
0
2.2k
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
gree_tech
PRO
0
540
エラーとアクセシビリティ
schktjm
0
960
進捗
ydah
2
230
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Become a Pro
speakerdeck
PRO
29
5.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
Visualization
eitanlees
148
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
How STYLIGHT went responsive
nonsquared
100
5.8k
Building Adaptive Systems
keathley
43
2.7k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Designing for Performance
lara
610
69k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
Shizuoka.js#7 フロントエンドにおける 生成AIの現在とこれから こぎそ / @kgsi
何者か? 何者か?
受託制作会社でデザイナー・エンジニアとして勤務後、事業会社のデザイ ンエンジニアとしてプロダクト開発に従事。2020年より株式会社 SmartHRに入社し、基本機能や従業員サーベイ機能の開発設計に携わ る。デザインシステムやUIコンポーネントの開発など、社内横断プロジェ クトにも参画。 パラレルキャリアを標榜し、副業でエンジニア・デザイナー・アドバイ ザーとして活動中。著書に『ちいさくはじめるデザインシステム (BNN)』など。 こぎそしんいち /
@kgsi プロダクトデザイナー 何者か?
何者か? 【従業員サーベイ】AIを利用した自由記述回答の要約機能 https://smarthr.jp/update/55342
何者か? CreatorZineでAI関連の連載 https://creatorzine.jp/article/corner/103 プロダクトデザインをテーマとしたイベントの主催 https://pdmj.connpass.com/event/293261/
1& 生成AIの現状と進# "& 生成AIが変えるフロントエンド開 Ä& フロントエンド開発における未来 今日話すこと
生成AIの現状と進化 生成AIの現状と進化
生成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
生成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年
生成AIの現状と進化
生成AIの現状と進化 GPT-4 2023年3月
生成AIの現状と進化 プラグイン 2023年3月
生成AIの現状と進化 Browsing 2023年5月
生成AIの現状と進化 GPT-4V 2023年9月
生成AIの現状と進化 ChatGPTがけん引、生成AI市場は10年以内に180兆円に拡大へ-BI https://www.bloomberg.co.jp/news/articles/2023-06-02/RVLQYRT0G1KW01
生成AIの現状と進化 世はまさにAI戦国時代
生成AIが変える フロントエンド開発 生成AIが変えるフロントエンド開発
生産性の 向上 データ分析と 洞察 生成AIが変えるフロントエンド開発 ユーザビリティの 向上 生成AIによって変わるフロントエンドの領域
生成AIが変えるフロントエンド開発 生産性の 向上 データ分析と 洞察 ユーザビリティの 向上
生成AIが変えるフロントエンド開発 フロントエンドにおいて開発対象も含めてAIにより劇的にかわる…とい うパラダイムシフトはまだ起きていなq ただし、仕事の仕方自体が大きく変わる可能性があu より多くの開発生産性が求められる可能性がある。 生成AIの登場でフロントエンド開発の流れは 変わるのか?
生成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%ものプロジェクトを追加でコード化することができた
生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review
生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review Copilot
生成AIが変えるフロントエンド開発 GitHub Copilot https://github.com/features/copilot
生成AIが変えるフロントエンド開発 Amazon CodeWhisperer https://aws.amazon.com/jp/codewhisperer/
生成AIが変えるフロントエンド開発 Copilot(支援ツール) y 統合支援ツール郡。GitHub Copilotが圧倒的に有名だがAWSなども開発提供してい y コードを書き始める、またはそのコードに何をさせたいのかをコメントに記述することで、 目的に合わせたコード生成や提i y コードを入力後、コンテキストが分析され、関連する提案がリアルタイムで提
y 多数の言語とさまざまなフレームワークに対する候補の提示
生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review
生成AIが変えるフロントエンド開発 Boosting GUI Prototyping with Diffusion Models https://arxiv.org/abs/2306.06233
生成AIが変えるフロントエンド開発 uizard https://uizard.io/
生成AIが変えるフロントエンド開発 Prototyping: Text to UI(文字からの生成) AI を活用して UI プロトタイピングの段階で自動的にデザインを生成するツールp
簡単なテキストのプロンプトを入力するだけで、UIを出力できx ラフなスケッチや写真からUIのプロトタイプを出力できる「Image to UI 」という手法もある
生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review
生成AIが変えるフロントエンド開発 CLONE UI | design https://clone-ui.design/ v0 by Vercel https://v0.dev/
生成AIが変えるフロントエンド開発 Coding: Generative UI n 自然言語からUIのコードを生成するサービk n vercelの「v0」などが最近話題だが他にもいくつかサービスは提供されていp n プロンプトを入力するだけで、UIデザインとを生成できp
n Tailwind CSSとShadcn/UIをベースに出力するなど... 現状はコードの出力は表層のみでロジックは対応していなd n 素早いプロトタイプや部分的に必要なコンポーネントの設計を瞬時にできる
生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review
生成AIが変えるフロントエンド開発 TestPilot https://githubnext.com/projects/testpilot/ Autify https://autify.com/ja/
生成AIが変えるフロントエンド開発 Test: Automation テストコードは自分で各時代から、対象コードを指定して生成する時代l GitHub Copilot Labではすでに Unit
TestコードのAI出力を部分的に対D Autifyはテストシナリオの作成を支援する特許出願機能「Step Suggestions」を発表、テス トコードの大枠をAIに任せられる
生成AIが変えるフロントエンド開発 Prototyping Coding Test PR/Review
生成AIが変えるフロントエンド開発 GitHub Next https://githubnext.com/
生成AIが変えるフロントエンド開発 PR/Review Pull Requestの説明の提案: マーカータグを使って、Pull Requestの説明を簡単に生 自動テスト生成(Gentest): AIを利用して、新しいPull
Requestに対してテストケースを提案 し、コードベースにテストを簡単に追4 Ghost Text: プルリクエストの説明を入力する際にリアルタイムで提案を表示する
フロントエンド開発に おける未来 フロントエンド開発における未来
フロントエンド開発における未来 人類はどこで勝負するのか?
フロントエンド開発における未来 結論:人類の時代は変わらない AIはエンジニアやデザイナーの置き換えではなc 最終的なアウトプットや判断を決めるのは引き続き人が担5 いわゆるAIが人間を置き換えるということではなc 開発生産性を上げるのはやはり人間
AI時代に迷わないために フロントエンド開発における未来
フロントエンド開発における未来 b ツールは無限にあるが「使える」ツールはわずD b 完成したコードを丸々出力して欲しいのか?一部だけなのか" b 新たな生産性獲得のためには知って使うしかない
フロントエンド開発における未来 AI時代に迷わないために
フロントエンド開発における未来 f 自分の空気を読んで、手に馴染むツールや手法を探そ@ f まず知って触ることが重' f 開発者として生産性を高めるにはさらなる学習が必要
フロントエンド開発における未来 この新時代を楽しみましょう!