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
v0とCursorで爆速開発🚀
Search
TsukasaSekiguchi
October 19, 2024
0
55
v0とCursorで爆速開発🚀
Gunma.web #54のLT資料です
TsukasaSekiguchi
October 19, 2024
Tweet
Share
More Decks by TsukasaSekiguchi
See All by TsukasaSekiguchi
Prismaを1年くらい使ってみたのでちょっと語る
tsukasagr
0
130
playwrightのVSCode拡張が便利すぎて、もはやE2E書けないとか言い訳できないレベルだった
tsukasagr
0
140
AWS_Copilotではじめる簡単コンテナ運用.pdf
tsukasagr
0
340
SupabaseにBaaS拡大の未来を感じた
tsukasagr
0
220
超ざっくりFirebase vs Amplify
tsukasagr
0
280
NestJSがいい感じだった
tsukasagr
0
280
Slack Apps × BoltでToDoアプリ作ってみたって話のはずだったけど、周辺技術で良さそうなやつがあったのでそのへんも共有する話
tsukasagr
0
420
俺のMac
tsukasagr
0
290
可能な限りRDB脳のままCloud_Firestoreを使ってみる.pdf
tsukasagr
0
640
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
How STYLIGHT went responsive
nonsquared
95
5.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
130
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
For a Future-Friendly Web
brad_frost
174
9.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
No one is an island. Learnings from fostering a developers community.
thoeni
19
2.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Speed Design
sergeychernyshev
23
550
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
A Philosophy of Restraint
colly
203
16k
Transcript
v0とCursorで爆速開 発 みなさん、こんにちは!今⽇は、プログラミングの世界を⾰新する2つのツー ル、v0とCursorについてご紹介します。これらを使えば、驚くほど速く効率的 に開発ができるんです。⼀緒に冒険の旅に出発しましょう! Gunmaweb #54 @TsukasaGR
はじめに ⾃⼰紹介 名前 関⼝ 司 各種アカウント TsukasaGR 仕事 SIerでSaaS開発 最近触っているもの TypeScript
/ React / Next.js / NestJS / Prisma / GraphQL / AWS CDK このスライドについて いつも通りGammaさんにプロンプト渡して⾃動⽣成してもらってます ❤ (しかも今回はほぼ⼿直しなし)
v0:AIパワードなUIジェネ レーター 1 Vercel社の⾰新 v0は、Vercel社が開発した次世代のAIコーディングアシスタントです。 ⾃然⾔語でUIコンポーネントを⽣成できます。 2 React専⾨家 React、Next.js、Tailwind CSSに特化しており、⾼品質なコードを迅速
に⽣成します。 3 多機能ツール コード⽣成だけでなく、スライド作成や画像⽣成も可能です。チャット ボットとしても使えます。
Cursor:AIパワードなコー ドエディタ GPT-4活⽤ GPT-4などの最新AI技術を活⽤し、⾼度なコード⽣成と編集を実現します。 使いやすさ VSCodeライクな操作感で、慣れ親しんだ環境での開発が可能です。 強⼒な連携 OpenAIとのパートナーシップにより、常に最新のAI技術を活⽤できます。
v0でTODO管理アプリを作 ってみよう
ローカル環境での構築
Cursorでアプリを修正しよう Cursorの起動 Cursorを開き、プロジェクトフォル ダを読み込みます。VSCodeライクな 操作感で作業開始です。 AIアシスト活⽤ コードの修正や機能追加をAIに相談 しながら進めます。GPT-4の⼒を借 りて効率的に作業しましょう。 リアルタイムプレビュー
変更を加えながら、リアルタイムで アプリの動作を確認します。素早くイ テレーションを回せます。
v0とCursorの料⾦体系 ※執筆当時の情報を抜粋したものになります。詳細は公式サイトをご確認くだ さい。 プラン v0 Cursor 無料プラン 利⽤可能(制限あり) 利⽤可能(制限あり) 有料プラン
約$20/⽉から 約$20/⽉から 主な特徴 無制限のUI⽣成 ⾼度なAI機能
さいごに:AIと共に進化す る開発 補助から協働へ v0とCursorは、エンジニアの「頭脳の拡張」として機能します。アイデア の実現をサポートしてくれる強⼒な味⽅です。 基礎知識の重要性 AIツールを使いこなすには、プログラミングの基礎知識が必要です。学習 を怠らず、AIと共に成⻑しましょう。 未来への期待 AIツールの進化は⽇々加速しています。今後、さらに驚くべき開発体験が
待っているかもしれません。