1. 概要
前回はGemini CLIを使ってシンプルなプロジェクトを開発してみました。今回はVSCodeにGemini Code Assistを連携してシンプルなプロジェクトを開発してみます。
Gemini Code Assist: AI-first coding in your natural language
対象としては開発を１年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。
2. nodeのインストール
こちらを参考
3. Gemini CLIをインストール
こちらを参考
4. プロジェクトを作成
こちらを参考
5. 必要なライブラリをインストール
5-1. インストール
npm install --save-dev sass6. Gemini Code Assistをインストール
6-1. インストール&SignIn
7. プロンプトを投げて、ソースコードを作成
7-1. プロンプト
プロジェクトは作成済みです。このプロジェクト内で
下記技術スタックを使って2～10人で使える順番決めサイトを作ってください。
・Next.js（App Route）
・TypeScript
・SCSS
しばらくしたらソースコードを作成してくれました。
- Accept all changes
8. ディレクトリの構造
.
├── README.md
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
│ ├── file.svg
│ ├── globe.svg
│ ├── next.svg
│ ├── vercel.svg
│ └── window.svg
├── src
│ ├── app
│ │ ├── favicon.ico
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── components
│ │ └── OrderDecider.tsx
│ └── styles
│ └── Home.module.scss
└── tsconfig.json
5 directories, 19 files9. サーバーを起動
9-1. NextJSを立ち上げる
npm run dev10. ブラウザで確認
- http://localhost:3000
10-1. 画面
11. 備考
今回はVSCodeにGemini Code Assistを連携してシンプルなプロジェクトを開発してみました。
12. 参考
- Docs | Next.js (nextjs.org)
- Quick Start – React
- Getting Started with Redux | Redux
- Getting Started with React Redux | React Redux (react-redux.js.org)
- Material UI: React components based on Material Design (mui.com)
- Gemini CLI : オープンソース AI エージェント | Google Cloud 公式ブログ
- Gemini Code Assist | AI coding assistant
投稿者プロフィール
-
開発好きなシステムエンジニアです。
卓球にハマってます。
