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.1k
スクラムチームにおけるプロダクトデザイナーの役割・関わり方
kgsi
1
580
TypeScriptではじめるUIデザイン / UI design with TypeScript
kgsi
2
2.4k
チームではじめるUIデザイン / Getting Started with Figma
kgsi
2
600
デザインエンジニアとフロントエンド / Bridge the gap between design and engineering
kgsi
13
14k
開発環境/本番環境を分けるシンプルな方法 with Ionic
kgsi
0
860
Other Decks in Technology
See All in Technology
LINEヤフー新卒採用 コーディングテスト解説 実装問題編
lycorp_recruit_jp
1
13k
tenntennはなんでnewmoにnew社したの? - YAPC::Hakodate 2024
tenntenn
PRO
0
320
Cosmos DB で持続可能な RAG を実現しよう!~ AOAI Dev Day ふりかえりを添えて / Sustainable RAG with Cosmos DB with recap AOAI Dev Day
miyake
0
120
塩野義製薬様のAWS統合管理戦略:Organizations設計と運用の具体例
tkikuchi
0
190
From naive to advanced RAG: the complete guide
glaforge
0
260
それでもやっぱり ExpressRoute が好き!
skmkzyk
0
390
業務ヒアリングと知識の呪い
tamai_63
0
300
Oracle Database 23ai 新機能#4 Real Application Clusters
oracle4engineer
PRO
0
170
これはPerl? それともRuby? クイズ〜〜〜〜〜!!!- Perl or Ruby Quiz
moznion
2
1.9k
Azure App Service on Linux の Sidecar に Phi-3 を配置してインテリジェントなアプリケーションを作ってみよう/jazug-anniv14
thara0402
0
530
UE5の雑多なテク
ryuichikawano
0
440
O'Reilly Superstream: Building a RAG App to Chat with Your Data
pamelafox
0
120
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Code Review Best Practice
trishagee
63
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Making Projects Easy
brettharned
115
5.9k
Writing Fast Ruby
sferik
626
60k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
Atom: Resistance is Futile
akmur
261
25k
We Have a Design System, Now What?
morganepeng
50
7.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
4
120
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
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 開発者として生産性を高めるにはさらなる学習が必要
フロントエンド開発における未来 この新時代を楽しみましょう!