1. 概要
前回はStitchを使ってUIデザインを作り、NextJSで動かしてみる内容でした。今回はGemini CLIを使ってシンプルなプロジェクトを開発してみます。
Google Cloudは Geminiの強力な機能をターミナルに直接統合するオープンソース AI エージェント Gemini CLIを発表
対象としては開発を１年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。
2. nodeのインストール
こちらを参考
3. Gemini CLIをインストール
3-1. インストール
npm install -g @google/gemini-cli3-2. 確認
gemini4. プロンプトを投げて、プロジェクトを作成
4-1. プロンプト
下記技術スタックを使って2～10人で使えるグループ分けサイトを作ってください。
・Next.js（App Route）
・TypeScript
・SCSS
しばらくしたらプロジェクトを作成してくれました。
5. ディレクトリの構造
.
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── src
│ └── app
│ ├── globals.scss
│ ├── layout.tsx
│ ├── page.module.scss
│ └── page.tsx
└── tsconfig.json
2 directories, 9 files6. サーバーを起動
6-1. NextJSを立ち上げる
npm run dev7. ブラウザで確認
- http://localhost:3000
7-1. 画面
8. 備考
今回はGemini CLIを使ってシンプルなプロジェクトを開発してみました。
9. 参考
- 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 公式ブログ
- GitHub – google-gemini/gemini-cli: An open-source AI agent that brings the power of Gemini directly into your terminal.
投稿者プロフィール
-
開発好きなシステムエンジニアです。
卓球にハマってます。
