v0とCursorで爆速開発🚀

Gunma.web #54のLT資料です

Transcript

1. v0とCursorで爆速開 発 みなさん、こんにちは！今⽇は、プログラミングの世界を⾰新する2つのツー ル、v0とCursorについてご紹介します。これらを使えば、驚くほど速く効率的 に開発ができるんです。⼀緒に冒険の旅に出発しましょう！ Gunmaweb #54 @TsukasaGR
2. はじめに ⾃⼰紹介 名前 関⼝ 司 各種アカウント TsukasaGR 仕事 SIerでSaaS開発 最近触っているもの TypeScript / React / Next.js / NestJS / Prisma / GraphQL / AWS CDK このスライドについて いつも通りGammaさんにプロンプト渡して⾃動⽣成してもらってます ❤ (しかも今回はほぼ⼿直しなし)
3. v0：AIパワードなUIジェネ レーター 1 Vercel社の⾰新 v0は、Vercel社が開発した次世代のAIコーディングアシスタントです。 ⾃然⾔語でUIコンポーネントを⽣成できます。 2 React専⾨家 React、Next.js、Tailwind CSSに特化しており、⾼品質なコードを迅速 に⽣成します。 3 多機能ツール コード⽣成だけでなく、スライド作成や画像⽣成も可能です。チャット ボットとしても使えます。
4. Cursor：AIパワードなコー ドエディタ GPT-4活⽤ GPT-4などの最新AI技術を活⽤し、⾼度なコード⽣成と編集を実現します。 使いやすさ VSCodeライクな操作感で、慣れ親しんだ環境での開発が可能です。 強⼒な連携 OpenAIとのパートナーシップにより、常に最新のAI技術を活⽤できます。
5. v0でTODO管理アプリを作 ってみよう
6. ローカル環境での構築
7. Cursorでアプリを修正しよう Cursorの起動 Cursorを開き、プロジェクトフォル ダを読み込みます。VSCodeライクな 操作感で作業開始です。 AIアシスト活⽤ コードの修正や機能追加をAIに相談 しながら進めます。GPT-4の⼒を借 りて効率的に作業しましょう。 リアルタイムプレビュー 変更を加えながら、リアルタイムで アプリの動作を確認します。素早くイ テレーションを回せます。
8. v0とCursorの料⾦体系 ※執筆当時の情報を抜粋したものになります。詳細は公式サイトをご確認くだ さい。 プラン v0 Cursor 無料プラン 利⽤可能（制限あり） 利⽤可能（制限あり） 有料プラン 約$20/⽉から 約$20/⽉から 主な特徴 無制限のUI⽣成 ⾼度なAI機能
9. さいごに：AIと共に進化す る開発 補助から協働へ v0とCursorは、エンジニアの「頭脳の拡張」として機能します。アイデア の実現をサポートしてくれる強⼒な味⽅です。 基礎知識の重要性 AIツールを使いこなすには、プログラミングの基礎知識が必要です。学習 を怠らず、AIと共に成⻑しましょう。 未来への期待 AIツールの進化は⽇々加速しています。今後、さらに驚くべき開発体験が 待っているかもしれません。