プログラミング未経験者でも、Visual Studio Code（以下 VS Code）と Google Gemini CLI を組み合わせれば、AI に手助けしてもらいながら “学習タイマー” をサクッと作れます。
今回は VS Code上でGoogle Gemini CLI をどのようにして使うのかを、シンプルな学習タイマーを作成する工程と共に紹介します。
コードを書くのが初めてでも安心して進められるよう、つまずきやすいポイントと解決策も合わせて紹介しますので、ぜひ一緒に学習タイマーづくりを楽しんでください。
スポンサーリンク
Visual Studio CodeとGemini CLIの接続を確認する
まず “Gemini CLI って何？” を一言で説明すると、Google が公開した AI コーディング用コマンドラインツール です。
自然な日本語で「バグを直して」「コードを要約して」と頼むと、Gemini 2.5 Pro が結果を返してくれます。
Gemini CLI だけでも作業はできるのですが、より効率的にわかりやすく作業するため、Visual Studio Code（VSCode）でGemini CLIを使えるようにすると大変便利です。
VS CodeでGemini CLIを使えるようにするための手順、インストールやエラー対応については「【初心者向け】VS CodeでGemini CLIを使う全手順」で解説していますので、参考にして導入してくださいね。
-
-
【初心者向け】VS CodeでGemini CLIを使う全手順 - 自分コンテンツ計画
パソコン操作が苦手でも「コードを書きたい」「AI に頼りたい」と感じた瞬間から、難しいコマンドを覚える必要はありません。 Google の Gemini CLI を使えば、エディター内で日本語のまま「
lucirc.com
VS CodeとGemini CLIの準備が完了したら、本日の目的であるタイマー制作に入ります。
ここからの流れは、今後お好みのツールやサイトなどを作るときにも、基本手順となります。
VS Codeのワークスペースを開く
まず、学習タイマー用のフォルダーを作成します。
このフォルダはVS Codeでワークスペースとして開くために、また、他の制作物と混同しないように作成しておきます。
ドキュメントなど作業しやすい場所に「simple study-timer」という名前の新規フォルダーを用意し、VS Codeを起動してください。
（ファイル名はお好みの名前でOKです）
起動直後の「ようこそ」タブにある「フォルダーを開く…」をクリックし、先ほどのフォルダーを選択します。
これでエクスプローラー（左側のファイル一覧）に空のワークスペースが表示され、ターミナルを起動すれば現在のパスが自動的に「simple study-timer」になっているはずです。
ワークスペースを開いておくと、以後のファイル生成コマンドがすべてこのフォルダーに適用されるため、作業内容が散らからず管理が楽になります。
Gemini CLIを実行する
次に画面上部メニューにある「・・・」をクリックして、メニュー項目を開き、「ターミナル」＞「新しいターミナル」をクリックします。
以下のコマンドを入力（コピペOK）し、Enterを押します。
gemini
以下の画面が表示されればOKです。
Gemini CLIの入力について
Gemini CLIを実行したら、[> Type your message or@path/to/file ]という部分に文字を入力するのですが、入力は２つの方法があります。
| 方法 | 内容 |
|---|---|
| チャット形式 （文章だけで指示） | 普通のチャットアプリと同じように、聞きたいことやお願いを文章で送るだけ |
| @ファイル／@フォルダー参照 （パス付き指示）など | 質問文の中に「@」＋パスを書くと、そのファイルやフォルダーの中身を AI に読ませてから回答させる |
チャット形式は「まずは AI に相談したい」ときの基本形で、文章だけで指示できるので手軽です。
@ファイル／@フォルダー参照は「このファイルを見て判断してほしい」ときに便利。パスを書くだけで中身を取り込み、的確な回答が得られます。
どちらも VS Code のターミナルでそのまま使えるため、作業しながら AI に質問・修正を頼む流れがスムーズに行えます。
カウントダウンタイマーを作る流れ
今回は、チャット形式で行います。
[> Type your message or@path/to/file ]の部分に以下のような文章を入力します。
学習タイマーを作成してください
入力したら「Enter」を押して実行します。
しばらく待つとチャットにまず提案内容が表示されます。
今回は３つ提案してくれました。
提案された中に作りたいものがあれば、「ポモドーロタイマーを作成して」など入力してください。
今回は「シンプルなカウントダウンタイマーから作成しましょうか」と提案があるので、「お願いします」と返事しました。
チャット形式では、VScoad上でも、ブラウザで使うGeminiと同じ感覚で使うことができます。
内容確認をしてから、コードを作成する流れとなり、今回はまずHTMLファイルを作成してくれました。
プログラミング初心者には見慣れない文字列で戸惑うかもしれませんが、コードを生成してもらったら、以下の文章を探してください。
- Yes, allow once
- Yes, allow always
- Modify with external editor
- No (esc)
生成したコードに対して、次は選択で指示を出します。
選択はキーボードの「↑」「↓」で移動すると選べます。
各項目の意味は以下のようになります。
| 選択項目 | 内容 |
|---|---|
| Yes, allow once | 今回だけ許可 |
| Yes, allow always | 今後は同じ種類の操作を自動で許可 |
| Modify with external editor | 外部エディター（VS Code など）でスクリプトやコマンドを開き、中身を確認・編集してから実行 |
| No (esc) | 操作をキャンセル |
今回は「Yes, allow always」で進めます。
選択したら「Enter」を押して実行します。
するとCSSファイルとJavaScriptファイルを生成し、VScoadの画面左には、３つのファイルが作成されました。
制作物の確認をする
ファイルを自動生成しただけでは、タイマーが正しく動くかどうか分かりません。
VS Code 左側のエクスプローラーで、最初に用意したプロジェクトフォルダー 「simple study-timer」 の中身を確認します。
ファイルが作成されたら、実際にどのようになっているのか確認しながら作業を進めましょう。
VS Code 左側のエクスプローラーで表示されているファイルがフォルダの中にもあるはずです。
次に index.html をブラウザーで開いて、実際の動作をチェックします。やり方はとても簡単です。
エクスプローラーで index.html をマウスでつかみ、ブラウザーのウインドウへそのままドラッグ＆ドロップします。
実際にタイマーが動くか、ボタンをクリックして動作確認してみましょう。
もし画面が真っ白だったり、カウントが動かない場合は、VS Code のターミナルにエラーメッセージが出ていないかをチェックしましょう。
ファイル名の綴り違い（index.htm になっているなど）やタグの閉じ忘れが原因のことが多いので、気付いたらすぐに修正して再読み込みすれば OK です。
確認後「背景色を変えたい」「ボタンを英語にしたい」など改良したい場合は、チャットで指示を出し進めることができます。
ちなみに、こうした「途中セーブ」を安心して行える仕組みが Git です。
Git を使えば、背景色を変える前・ボタンを英語に直す前――といったタイミングごとに“スナップショット”を残し、あとから好きな状態へ巻き戻せます。
さらに GitHub と連携すると、そのスナップショットをクラウドに置けるので PC が壊れてもコードは安全です。
GitとGitHub について詳しく知りたい方は、こちらの記事を参考にしてください。
-
-
【初心者向け】GitとGitHub の違い・導入方法について - 自分コンテンツ計画
Git を初めて使うパソコン・AI 初心者向けに、GitとGitHubの違いから、インストール・登録手順などをわかりやすく解説しています。vibe coadingを始める方もこの記事を参考に是非導入し ...
まとめ
VS Code と Google Gemini CLI を組み合わせれば、プログラミング未経験の方でも AI に手伝ってもらいながら学習タイマーを短時間で作成できます。
流れとしては以下のように進めます。
- フォルダを作成する
- VS Codeのワークスペースを開く
- Gemini CLIを実行する
- チャットで指示を出す
- 制作物の確認をする
ポイントとして、指示を出して１発で成功（好みのものが生成される）とは限らないので、納得いかなければガチャのようですが、何回か試してみるのもいいでしょう。
また、通常のGeminiやChatGPTと同じく、指示のクオリティ（プロンプト）によっても、成果物の精度の違いはでますので、Gemini CLIを使う前に、指示用のプロンプト作成をAIと一緒に考えるのもおすすめです。
ここまでの流れを一度体験すれば、他の Web アプリやツール開発にも応用できます。
まずは今回作ったタイマーを自分好みにカスタマイズしながら、AI と協力する開発の楽しさを味わってみてください。
プログラミングなどほぼ経験のない、50歳手前の主婦が楽しくVibe coadingに挑戦しています。是非他の記事も参考にしてみてください。
一緒に楽しんで学びましょう！
Vibe coadingについて、導入やエラー対策、使い方までログを公開中
