話題のGemini CLIを使って理想のToDOアプリを作ろう

世の中には有象無象の実用ツールがありますが、なかなか理想のものは見つからないと思うこともあります。そこで、プログラミング不要のバイブコーディングを利用して自作してしまうのはどうでしょうか。今回はGemini CLIを使って、理想のToDOアプリを作ってみましょう。

• 

  Gemini CLIを使ってToDOアプリを作ったもの

Gemini CLIとは

前回、バイブコーディング(Vibe Coding)について紹介しました。バイブコーディングを使えば、プログラミングすることなく、理想のアプリを作ることができます。

なお、バイブコーディングを実践するツールとして、オススメなのが「Gemini CLI」です。Gemini CLIは無料で始めることができる上に、無料で使える枠が幅広いのが特徴です。Googleアカウントさえあれば始められるのも良い所です。

とは言え、Gemini CLIは、ターミナルから利用する必要があるので、ちょっと敷居が高いと感じる人がいるかもしれません。このコラムを参考にして、取っ掛かりにしていただければと思います。

Gemini CLI事始め

Gemini CLIをインストールするには、最初にNode.jsをインストールします。そして、ターミナルを開いて下記のコマンドを実行します。「ターミナル」とは、WindowsであればPowerShellで、macOSならターミナル.appです。使ったことがないと言う人も多いと思いますが、アプリを開いて、コマンドをコピー＆ペーストするだけなので、不安に思わず試してみてください。

npm install -g @google/gemini-cli

なお、こちらの姉妹連載でも詳しく解説していますので、参考にしてみてください。

プロジェクトフォルダを作ろう

Gemini CLIを使う場合、簡単なコマンドライン操作に慣れておくと便利です。以下のコマンドは、OSのデスクトップ上に「todoapp」というフォルダを作成して、カレントディレクトリに移動します。なお、Windowsの場合は「/」を「\」と読み替えてください。「/」はmacOS/Linuxのパス記号です。

# デスクトップに移動
cd ~/Desktop
# フォルダを作って、カレントディレクトリに設定
mkdir todoapp
cd todoapp
# GeminiCLIを起動
gemini

Gemini CLIを初めて起動する場合は、簡単な画面配色の設定とアカウントの設定が必要になります。「Login with Google(Googleでログイン)」を選択するとブラウザが起動するので、Googleアカウントでログインしましょう。

Geminiに指令を出そう

設定が終わると、次のような画面になります。さっそく、Geminiに指令を出してみましょう。

• 

  Geminiの画面

ここでは、シンプルに次のような指示(プロンプト)を入力してみましょう。

HTML/JavaScriptを使って、ToDOアプリを作ってください。

すると、Gemini CLIが頑張って、ToDOアプリを開発するために考えてくれます。

Geminiが計画立案から開発までやってくれる

少し待つと、次の画面のように、Gemini CLIが計画のあらましを考えて、画面に表示します。作成したいファイルの一覧も作ってくれました。

• 

  Gemini CLIは計画を考えてくれる

これに対して「はい」と答えると、実際にファイルの作成をはじめます。

なお、Gemini CLIは勝手にファイルの書き込みを行うことはありません。必ず、ファイルの書き込みを行う際に質問してくれます。そこで、ここでは「Yes, allow once(はい、一度だけ許可)」を選んで[Enter]キーを押しましょう。

• 

  Gemini CLIは勝手にファイルを書き込まず許可を求めてくる

Geminiは生成AIなので、指示をするたびに異なる反応するのですが、筆者が試した場合は、3つのファイルを書き込むとのことで、3回許可を求められました。今回のような曖昧な指示を与えた場合、いろいろなバリエーションの会話が考えられますが、基本的な動作は変わりません。

ブラウザでアプリを確認してみよう

ファイルの書き込みが終わると、「作成したindex.htmlファイルをウェブブラウザで開くと、ToDoアプリが動作します。」というメッセージが表示されました。

筆者が試した際には、メインHTMLの「index.html」、画面を装飾する「style.css」、プログラム「script.js」という3つのファイルを作成しました。それで、「index.html」をブラウザにドラッグ＆ドロップしてみましょう。すると、次のような立派なToDOアプリを作ってくれました。

• 

  いきなりスゴイToDOアプリが完成した

画面にタスクを入力して[Add]ボタンを押すと、次々とタスクが画面上に表示されます。[Complete]ボタンを押すと、タスクに取り消し線が引かれ、[Delete]を押すとタスクが削除されます。

追加依頼 - 保存機能を実装しよう

もうこれだけで完璧なのでは…と思ったのですが、ブラウザをリロードすると、タスクがすっかり消えてしまいました。なんと、せっかくタスクを入力したのに、保存機能が実装されていなかったのです。

見栄えだけのハリボテでした。とは言え、心配無用です。Gemini CLIとの会話で続く部分に次のような指示を入力してみましょう。

ToDOアプリを作ってもらいましたが、肝心のタスクの保存機能が未実装でした。
実装してください。

すると、次のように、どのように保存機能を実装したかを表示してくれます。HTML/JavaScriptの知識がある方であれば、納得なのですが、ブラウザのlocalStorageというKey/Valueストアを利用してToDOタスクが保存されることが分かります。

• 

  ToDOアプリに保存機能を実装してもらった

改めて、ブラウザに「index.html」をドラッグ＆ドロップして動作を確かめてみましょう。すると、ブラウザのリロードボタンを押しても、正しく保存と読み込み機能が働いているのを確認できます。

• 

  保存機能が実装された！ - ブラウザをリロードしても正しくToDOタスクが復元される

なお、ここまでGeminiが作成したToDOアプリを、こちらのGitHubにアップロードしています。実際にどんなプログラムが作成されたのかを確認できます。

• 

  ここまでの手順で作成されたソースコード

加えて、GitHubに作成したHTMLをアップロードし、「Settings > Pages」からWebでHTMLを公開することができます。ここまでの手順で作ったアプリは、こちらで動作を確認できます。

さらに改良しよう

それで、作成されたToDOアプリをしばらく使ってみると気付くのですが、処理済みのタスクがいつまでも画面に残ったままになってしまいます。[Delete]ボタンを押せば、削除されるのですが、使い勝手が良いとは言えません。

そこで、個々のアイテムにある[Delete]ボタンをなくしてもらって、「完了済みをクリア」というボタンを作成してもらいましょう。

上記の改良をするために、筆者は次のような指示をGemini CLIに入力しました。

ここまで基本的なToDOアプリを作ってもらいました。
次の改良を行ってください：
- タスクごとに、[Delete]ボタンがありますが削除してください。
- [Complete]ボタンを[完了]にしてください。
- 画面下部に[完了済みをクリア]ボタンを作成してください。
- [Add]ボタンを「追加」ボタンに変更してください。

上記の指示を入れると、HTMLやJavaScriptを改良してくれました。何度かファイルの書き込みを許可しました。しばらくして、「以上で、ご依頼の修正は完了です。ブラウザで動作を確認してください。」と表示されました。

• 

  ToDOアプリのさらなる改良を指示したところ

エラーが出て動かなくなった

改めて「index.html」をブラウザで開いてみると、Gemini CLIがUIを改良してくれたのを確認できました。しかし、残念なことに、ToDOアプリが動きません。Gemini CLIも完全ではありません。

そこで、どんなエラーが出て動かないのかを、Gemini CLIに伝えて改良してもらいましょう。実際、こうしたエラーはHTML/JavaScriptの開発ではよくあることです。

ブラウザには「デベロッパーツール」が搭載されています。次の画像にあるように、「その他のツール > デベロッパーツール」をクリックして、エラーの理由を確認しましょう。

• 

  デベロッパーツールを見るとエラーの理由が分かる

ここでは、ファイル「script.js」の7行目で「Uncaught SyntaxError: Identifier 'clearCompletedButton' has already been declared」というエラーが出ていました。その旨をGemini CLIに入力します。すると、Gemini CLIは謙虚に謝罪してすぐに修正してくれました。

• 

  Gemini CLIは謙虚に謝罪してすぐに修正してくれた

複雑な修正を依頼した場合、何度もエラーが表示されて、その度に修正を依頼する必要が生じる場合があります。しかし、今回は一度の修正で問題が解決できました。

• 

  依頼した内容が全て反映されたところ

背景画像を組み込んでみよう

最後に、背景画像を作ってもらいましょう。ブラウザ版のGeminiには画像を生成する機能があります。ブラウザ版のGeminiを開いて、次のような指示を出してみました。

ToDOアプリの背景画像を描画してください。次の要素を考慮してください。
- 日本のアニメ好きが喜ぶキャラクター
- 背景は温かい雰囲気のオフィス
- ホワイトボードに何か書いてある

せっかくなので、同じ条件でChatGPTにも同じ画像を描画してもらいました。皆さんは、どちらの画像を採用するでしょうか。筆者はなんとなく、ChatGPTのものを採用しました。画像をダウンロードして「back.png」という名前にして、プロジェクトのフォルダに保存します。

• 

  アプリの背景画像をGeminiとChatGPTに描いてもらったところ

そして、これをアプリに組み込みます。Gemini CLIに次のような指示を行いました。

背景画像「back.png」を用意しました。
アプリの背景に組み込んでください。
ただし、ToDOのタスクが読みづらくならないように配慮してください。

すると、次のようなアプリを完成させることができました。

• 

  アプリの背景画像を追加

ここまでの部分で、作成したToDOアプリは、こちらで試すことができます。

まとめ

以上、今回はGeminiCLIを利用して、理想のToDOアプリの開発に挑戦してみました。バイブコーディングを実践して、一度もプログラムやコードを書くことなく、ToDOアプリを完成させることができました。バイブコーディングで、エラーが出て動かない場合に、どうしたら良いのかも対処方法も確認できました。

Gemini CLIの良い点ですが、一度の指示で完成させるのではなく、改善点を何度か指示することで、好みのアプリに育てていくことができる点です。今回も、タスクごとに削除ボタンを用意するのではなく、完了済みのタスクを一気に削除するボタンを持つUIに変更することができました。

本稿を参考にして、皆さんも理想のアプリ作成に挑戦してみてください。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。これまで50冊以上の技術書を執筆した。直近では、「大規模言語モデルを使いこなすためのプロンプトエンジニアリングの教科書(マイナビ出版)」「Pythonでつくるデスクトップアプリ(ソシム)」「実践力を身につける Pythonの教科書 第2版」「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」など。