こんにちは。Tomoyuki（@tomoyuki65）です。
最近になってバイブコーディング（Vibe Coding）なるものが話題になり、これから間違いなくエンジニアの必須ツール・必須スキルになることは避けて通れません。
そんなバイブコーディングというのは、生成AIを活用して自然言語で対話しながらアプリケーションを構築するような新しいプログラミング手法を指します。
最初はおそらくClaude Codeというサービスが火付け役になっていると思いますが、最近になってGoogleからも「Gemini CLI」というサービスがリリースされ、これによって無料でバイブコーディングを始められます。
Gemini CLIの使い方【バイブコーディングの始め方】
ではGemini CLIの導入方法について解説しますが、Gemini CLIの利用には事前にNode.jsのバージョン20以降のインストールが必要です。
このNode.jsは主にフロントエンド開発でよく利用され、どのバージョンを使うかで互換性に影響したり、ちゃんとしたアプリなら適宜バージョンアップをするのも大事なため、Node.jsをインストールする際はバージョン管理ライブラリを用いてインストールするのが基本になります。
そんなNode.jsのバージョン管理ライブラリは様々ありますが、私がよく利用しているのは「volta」なので、この記事ではvoltaを例として解説します。
※以下では基本的にmacOSでの利用を想定しているため、Windowsで試したい方は事前にWSL2（Windows Subsystem for Linux 2）を準備してからLinux環境にて試して下さい。
voltaのインストール
以下のコマンドを実行し、voltaをインストールします。
$ curl https://get.volta.sh | bash※macOSの場合はHomebrewを使ってインストールも可能ですが、voltaはcurlで直接インストールするのが推薦です。
次に以下のコマンドを実行し、コマンドが有効なことを確認して下さい。
$ volta --version
Node.jsのインストール
次に以下のコマンドを実行し、voltaでNode.jsをインストールします。
$ volta install node@22.17.0※バージョン「22.17.0」は2025年7月時点で最新のLTS（Long Term Supportの略で、ソフトウェアの安定版として、通常版よりも長い期間のサポートが提供されるバージョン）版です。他のバージョン等については、Node.jsの公式サイトで確認して下さい。
次に以下のコマンドを実行し、コマンドが有効なことを確認して下さい。
$ node -v
$ npm -v
Gemini CLIのインストール
Node.jsのインストール完了後、以下のコマンドを実行してGemini CLIをインストールします。
$ npm install -g @google/gemini-cli
Gemini CLIによるバイブコーディングの始め方
次にGemini CLIによるバイブコーディングの始め方を解説しますが、まずは以下のコマンドのように作業用ディレクトリを作成し、作成したディレクトリに移動します。
$ mkdir gemini-app && cd gemini-app※作業ディレクトリ名は任意の名前でOKです。
次に以下のコマンドを実行し、Gemini CLIを起動します。
$ gemini※オプション「-p」を使うと非対話モードでGemini CLIを実行可能です。
コマンド実行後、Gemini CLIの初期画面が表示され、テーマを選ぶように言われるため、必要に応じて任意のテーマを選んでEnterを押します。
次に認証方法を選ぶように言われるため、任意のものを選択してEnterを押して下さい。
今回は無料で使えるGoogleアカウントを使う方法でご紹介するため、「Login with Google」を選択した状態でEnterを押します。
※Googleアカウントを利用すれば無料で利用できますが、入力した内容は生成AIのモデルの学習に利用されるため、その点はご注意下さい。（機密情報に関わるものを入力しないで下さい。）また、有料プランで利用したい場合に「Gemini API Key」や「Vertex AI」を選択して認証することになります。
次にブラウザでログイン画面が開くので、対象のGoogleアカウントを選択します。
次にログイン確認画面が表示されるので、問題なければ「ログイン」をクリックします。
認証完了後、以下の画面が表示されればOKです。
認証後、ターミナルが下図のように表示されればOKです。
これで自然言語で開発が可能になるため、チャット欄で「〜のようなアプリを作りたい。」というような感じでGemini CLIと対話しながら開発を進められます。
※Gemini CLIとの対話を終了するには、「/quit」か「/exit」のコマンドを入力して下さい。
各種コマンド一覧
・基本的な使い方（Basics）
| 操作 | 説明 |
|---|---|
@ <ファイルパス> |
指定したファイルやフォルダをコンテキストとして追加します。(例: @src/myFile.ts) |
! <コマンド>または自然言語 |
シェルコマンドを実行します。(例: !npm run start または start server) |
・スラッシュコマンド（Commands）
| コマンド | 説明 |
|---|---|
/help |
gemini-cliのヘルプを表示します。 |
/docs |
Gemini CLIの完全なドキュメントをブラウザで開きます。 |
/clear |
画面と会話履歴をクリアします。 |
/theme |
テーマを変更します。 |
/auth |
認証方法を変更します。 |
/editor |
外部エディタの設定を行います。 |
/privacy |
プライバシーに関する通知を表示します。 |
/stats |
セッションの統計情報を確認します。 使用法: /stats [model|tools] |
/mcp |
設定済みのMCPサーバーとツールを一覧表示します。 |
/memory |
メモリを管理します。 使用法: /memory <show|refresh|add> [追加するテキスト] |
/tools |
利用可能なGemini CLIツールを一覧表示します。 |
/about |
バージョン情報を表示します。 |
/bug |
バグレポートを提出します。 |
/chat |
会話履歴を管理します。 使用法: /chat <list|save|resume> [タグ] |
/quit |
CLIを終了します。 |
/compress |
コンテキストを要約に置き換えて圧縮します。 |
・キーボードショートカット（Keyboard Shortcuts）
| キー | 操作 |
|---|---|
Enter |
メッセージを送信します。 |
Ctrl + J |
改行します。 |
↑ / ↓ (Up/Down) |
プロンプトの履歴を移動します。 |
Alt + ← / → (Left/Right) |
入力中の単語間をジャンプします。 |
Esc |
操作をキャンセルします。 |
Ctrl + C |
アプリケーションを終了します。 |
バイブコーディングでの開発のコツ
バイブコーディングによって自然言語で開発ができるため、非エンジニアの方でもアプリケーションの開発が可能になります。
ただし、フレームワークやライブラリを組み合わせてちゃんとしたアプリケーションを作ろうとすると、各種設定部分で失敗することも多く、バイブコーディングだけでなんでも開発できるというわけではないです。
そのため、非エンジニアの方がバイブコーディングを試してみる場合は、まずは簡単なホームページの画面（HTML + CSS + JavaScriptだけで作れるもの）を作ってみるなど、簡単なものからチャレンジしてみるのがおすすめです。
また、開発に着手する前に、一度仕様面などの設計をファイル「SPECIFICATION.md」などにまとめ、その設計を元にして開発を進めた方が失敗を減らせていいため、まずはGemini CLIと対話しながら、どのようなものを作るのか、必要な機能、技術スタック、作り方などをまとめるのがおすすめです。
ただし、この設計についてはやはりエンジニアのスキルが無いと難しい部分（技術や経験が無いとイメージし辛く躓く）になると思います。
最後に
今回はGemini CLIやバイブコーディングについてご紹介しました。
このバイブコーディングを利用することで非エンジニアの方でも簡単なアプリケーションが作れるという恩恵を受けれたり、エンジニアの方が使いこなせば開発効率を爆速にできる可能性を秘めているため、これからの時代に必須のツール・スキルになると思います。
特にフロントエンド領域では間違いなく必須（コンポーネントパーツを作るのに最適）になるため、フロントエンドエンジニアの方は早めにキャッチアップをしておきましょう。
※逆にバックエンド領域はセキュリティ面を考慮して使う必要があるので注意しましょう。
コメント