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
860
フロントエンドにおける生成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
160
コミュニティとおかねの話 / Community and Money
kgsi
0
150
イベント企画設計における「フロントエンド」な考え方とその魅力
kgsi
1
3.8k
副業デザイナーズで作るデザイン組織 / Design Teams as a Side Job Designer
kgsi
0
1.5k
ウェブフロントエンジニアから見る 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
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
240
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
260
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
5
1.8k
非同期処理実行基盤 Delayed脱出 → Solid Queue完全移行への旅路。
srockstyle
3
1.7k
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
110
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
2
520
Sidekiq その前に:Webアプリケーションにおける非同期ジョブ設計原則
morihirok
17
7.1k
stupid jj tricks
indirect
0
7.8k
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
320
KMP の Swift export
kokihirokawa
0
310
実装で解き明かす並行処理の歴史
zozotech
PRO
1
290
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
180
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
The Language of Interfaces
destraynor
162
25k
Producing Creativity
orderedlist
PRO
347
40k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
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 開発者として生産性を高めるにはさらなる学習が必要
フロントエンド開発における未来 この新時代を楽しみましょう!