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
750
フロントエンドにおける生成AIの現在とこれから
Shizuoka.js#7で登壇した資料です。
https://connpass.com/event/295831/
kgsi
October 21, 2023
Tweet
Share
More Decks by kgsi
See All by kgsi
イベント企画設計における「フロントエンド」な考え方とその魅力
kgsi
1
3.5k
副業デザイナーズで作るデザイン組織 / Design Teams as a Side Job Designer
kgsi
0
1.3k
ウェブフロントエンジニアから見る Flutter Webの 現在地点 / Flutter web as of now
kgsi
3
4.8k
品質向上を目指す開発組織のデザインレビュー / SmartHR
kgsi
3
3.2k
スクラムチームにおけるプロダクトデザイナーの役割・関わり方
kgsi
1
580
TypeScriptではじめるUIデザイン / UI design with TypeScript
kgsi
2
2.4k
チームではじめるUIデザイン / Getting Started with Figma
kgsi
2
610
デザインエンジニアとフロントエンド / Bridge the gap between design and engineering
kgsi
13
14k
開発環境/本番環境を分けるシンプルな方法 with Ionic
kgsi
0
870
Other Decks in Technology
See All in Technology
Amazon FSx for NetApp ONTAPを利用するにあたっての要件整理と設計のポイント
non97
1
160
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
220
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.8k
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
27
12k
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
Fargateを使った研修の話
takesection
0
110
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
110
グローバル展開を見据えたサービスにおける機械翻訳プラクティス / dp-ai-translating
cyberagentdevelopers
PRO
1
150
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
470
APIテスト自動化の勘所
yokawasa
7
4.1k
Gradle: The Build System That Loves To Hate You
aurimas
2
140
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Visualization
eitanlees
144
15k
Done Done
chrislema
181
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
Thoughts on Productivity
jonyablonski
67
4.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Documentation Writing (for coders)
carmenintech
65
4.4k
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 開発者として生産性を高めるにはさらなる学習が必要
フロントエンド開発における未来 この新時代を楽しみましょう!