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
810
フロントエンドにおける生成AIの現在とこれから
Shizuoka.js#7で登壇した資料です。
https://connpass.com/event/295831/
kgsi
October 21, 2023
Tweet
Share
More Decks by kgsi
See All by kgsi
コミュニティとおかねの話 / Community and Money
kgsi
0
110
イベント企画設計における「フロントエンド」な考え方とその魅力
kgsi
1
3.6k
副業デザイナーズで作るデザイン組織 / Design Teams as a Side Job Designer
kgsi
0
1.4k
ウェブフロントエンジニアから見る Flutter Webの 現在地点 / Flutter web as of now
kgsi
3
4.9k
品質向上を目指す開発組織のデザインレビュー / SmartHR
kgsi
3
3.3k
スクラムチームにおけるプロダクトデザイナーの役割・関わり方
kgsi
1
610
TypeScriptではじめるUIデザイン / UI design with TypeScript
kgsi
2
2.5k
チームではじめるUIデザイン / Getting Started with Figma
kgsi
2
660
デザインエンジニアとフロントエンド / Bridge the gap between design and engineering
kgsi
13
15k
Other Decks in Technology
See All in Technology
Amazon Q Developer 他⽣成AIと⽐較してみた
takano0131
1
120
モノリスの認知負荷に立ち向かう、コードの所有者という思想と現実
kzkmaeda
0
110
Security response for open source ecosystems
frasertweedale
0
100
コード品質向上で得られる効果と実践的取り組み
ham0215
2
200
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
450
製造業の会計システムをDDDで開発した話
caddi_eng
3
960
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
140
バックエンドエンジニアによるフロントエンドテスト拡充の具体的手法
kinosuke01
1
720
スケールアップ企業のQA組織のバリューを最大限に引き出すための取り組み
tarappo
4
940
ひまプロプレゼンツ 「エンジニア格付けチェック 〜春の公開収録スペシャル〜」
kaaaichi
0
140
Tirez profit de Messenger pour améliorer votre architecture
tucksaun
1
140
AWS CDK コントリビュート はじめの一歩
yendoooo
1
120
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
22
1.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Adopting Sorbet at Scale
ufuk
75
9.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
What's in a price? How to price your products and services
michaelherold
245
12k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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 開発者として生産性を高めるにはさらなる学習が必要
フロントエンド開発における未来 この新時代を楽しみましょう!