軽くGemini CLI触ってみた
2025/6/26
Gemini CLIが公開されました。
https://x.com/googleaidevs/status/1937861646082515205
Claude Codeも同じようなCLIタイプで触ってみたいと思っていたんですが、基本有料なのでしばらく悩んでいたらGoogleが大太っ腹対応をしてくれました。ありがとう
そんなわけで少し触ってみました。
インストール
リポジトリはこちらです。
実行は↑にあるように下記コマンドを実行するだけでOKでした。
npx https://github.com/google-gemini/gemini-cliロゴがバーンと出て実行完了
あと、日本語でお話しましょうと最初に言っておきました。
使ってみた
今回はこのサイトに対して少し修正をしてもらったので、その内容を載せます。
まずは対象ディレクトリに移動すると、ざっくり中身を見てくれました。
この時はまだディレクトリの奥まで再帰的に見てはいないようですね。
その後に、改善点を挙げてみてよと言ったらいろいろ出してくれました。
手始めにちょっとREADMEでもいじってもらおうと軽く内容を指示しつつお願い。いい感じにまとめてくれました。
途中の WriteFile Writing to andna.dev/README.md となっているところは、一度出力があって上書きの確認に対してNoと返答した跡です。
mainブランチにプッシュしといてと言ったらコミットメッセージもまとめてやってくれました。
そんな感じで一区切りです。
使ってみた２
あとコードも書いてみてもらいたいなと思い、フッターを追加してコピーライトを記載したいと思っていたので、それもやってもらいました。
ちょっと試しにコードブロックで全部載せてみます。
> サイトにフッターを用意して、コピーライトを載せたい
✦ はい、承知いたしました。サイトにコピーライト表示を含むフッターを追加しますね。
まず、フッター用のコンポーネントを作成し、それをサイトのレイアウトに組み込むのが一般的な方法です。
最初に、どのようなレイアウトファイルがあるか確認します。
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ ReadFolder andna.dev/src/layouts │
│ │
│ Listed 1 item(s). │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ BaseLayout.astro というレイアウトファイルが見つかりました。おそらくこれがサイト全体の基本的なレイアウトを定義しているファイルでしょう。
次に、フッターコンポーネントを配置するために src/components ディレクトリを確認します。
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ ReadFolder andna.dev/src/components │
│ │
│ Listed 3 item(s). │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ src/components には Header.astro などが既にありますね。ここに Footer.astro という新しいファイルを作成するのが良さそうです。
以下の手順で進めます。
1. src/components/Footer.astro を作成し、コピーライト情報を記述します。
2. src/layouts/BaseLayout.astro を編集して、作成した Footer.astro を読み込み、表示するようにします。
まずは Footer.astro を作成します。どのようなコピーライト表記にしますか？ 例えば、「© 2025 andna.dev」のような形式でよろしいでしょうか？
> それでよいです。
✦ 承知いたしました。では、「© 2025 andna.dev」という内容で src/components/Footer.astro を作成します。
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ WriteFile Writing to ...andna.dev/src/components/Footer.astro │
│ │
│ 1 --- │
│ 2 const today = new Date(); │
│ 3 --- │
│ 4 │
│ 5 <footer class="text-center py-4 text-sm text-gray-500"> │
│ 6 © {today.getFullYear()} andna.dev │
│ 7 </footer> │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ Footer.astro を作成しました。年が自動で更新されるように、簡単なスクリプトも入れています。
次に、このフッターを BaseLayout.astro に追加します。まず BaseLayout.astro の現在の内容を確認します。
╭────────────────────────────────────────────────────────╮
│ ✔ ReadFile ...andna.dev/src/layouts/BaseLayout.astro │
╰────────────────────────────────────────────────────────╯
✦ BaseLayout.astro の内容を確認しました。
</body> タグの直前にフッターを挿入するのが良さそうです。以下の通り BaseLayout.astro を更新します。
1 ---
2 import Header from "../components/Header.astro"
3 import Footer from "../components/Footer.astro" // フッターをインポート
4 import "../styles/global.css"
5
6 const { pageTitle = "andna.dev" } = Astro.props
7 ---
8
9 <html lang="en">
10 <head>
11 <meta charset="utf-8" />
12 <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
13 <meta name="viewport" content="width=device-width" />
14 <meta name="generator" content={Astro.generator} />
15 <title>{pageTitle}</title>
16 </head>
17 <body class="bg-teal-950 overflow-x-hidden">
18 <Header />
19 <div class="mt-[-100px] pt-[100px]">
20 <slot />
21 </div>
22 <Footer /> // フッターをここに追加
23 </body>
24 </html>
この内容で BaseLayout.astro を更新してよろしいでしょうか？
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Edit ...andna.dev/src/layouts/BaseLayout.astro: import Header from "../compone... => import Header from "../compone... │
│ │
│ 1 --- │
│ 2 import Header from "../components/Header.astro" │
│ 3 + import Footer from "../components/Footer.astro" │
│ 4 import "../styles/global.css" │
│ 5 │
│ 6 const { pageTitle = "andna.dev" } = Astro.props │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Edit ...andna.dev/src/layouts/BaseLayout.astro: <div class="mt-[-100px] pt... => <div class="mt-[-100px] pt... │
│ │
│ 19 <div class="mt-[-100px] pt-[100px]"> │
│ 20 <slot /> │
│ 21 </div> │
│ 22 + <Footer /> │
│ 23 </body> │
│ 24 </html> │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ BaseLayout.astro を更新し、フッターの追加が完了しました。
これでサイトの全ページにフッターが表示されるようになったはずです。
ローカルサーバーを起動して、表示を確認してみますか？ npm run dev を実行します。
╭─────────────────────────────────────────────────────────────────────────────────────────────╮
│ - Shell npm run dev [in andna.dev] (Start the development server to preview the changes.) │
╰─────────────────────────────────────────────────────────────────────────────────────────────╯
> pushしてください
✦ はい、承知いたしました。フッター追加の変更をリモートリポジトリにプッシュします。
まず、git status で変更内容を確認します。
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Shell git status [in andna.dev] (Check the current git status.) │
│ │
│ On branch main │
│ Your branch is up to date with 'origin/main'. │
│ │
│ Changes not staged for commit: │
│ (use "git add <file>..." to update what will be committed) │
│ (use "git restore <file>..." to discard changes in working directory) │
│ modified: src/layouts/BaseLayout.astro │
│ │
│ Untracked files: │
│ (use "git add <file>..." to include in what will be committed) │
│ src/components/Footer.astro │
│ │
│ no changes added to commit (use "git add" and/or "git commit -a") │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ BaseLayout.astro の変更と、新しいファイル Footer.astro がありますね。
以下のコマンドでこれらの変更をコミットし、main ブランチにプッシュします。
1. git add .
2. git commit -m "feat: add footer"
3. git push origin main
よろしいでしょうか？
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Shell git add . && git commit -m "feat: add footer" && git push origin main [in andna.dev] (Stage, commit, and push the changes to the… │
│ │
│ [main 465210c] feat: add footer │
│ 2 files changed, 9 insertions(+) │
│ create mode 100644 src/components/Footer.astro │
│ To https://github.com/andnandna/andna.dev.git │
│ 6cbea29..465210c main -> main │
│ │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ 変更のプッシュが完了しました。
これでフッターの追加作業は完了です。他に何かお手伝いできることはありますか？こんな感じです。
既にデプロイを終えているはずなので、完成形はサイトを見ての通りです！
感想
任せたら全部バーっとやってくれる感じですね。（小並感）
今回はまだ小規模+フロントだけなのですごくライトな内容でしたが、またバックエンドを作る時とかにも使ってみたいです。
あとは何かライブラリのリポジトリをプルしてきて内容を解説してもらうとかもよいかもですね。
生産性はすごく上がりそうなイメージが持てました。
コーディングの学習とかだったらCursorみたいなエディタ型の方が良さそうですね。
CLIだと、コードが出てきてふーんて感じで流しちゃいそうなので。
すぐ自分でいじれるエディタ型だと学習には向いてそうと思いました。
仕事とかで使ってみたいな〜
おわり