プログラミング知識ゼロの文系人間が、AI(Gemini)を使って家計簿アプリを作ってみた

私は完全文系の会社員で、普段はスプレッドシートに収支を記載して家計簿として家計管理をしてます。

Geminiを使って家計簿のアプリケーションを作れたら便利だなーと思い、試しにやってみたところ、たった2時間程度で完成することができました

プログラミングは未経験ですが、そんな人間でも簡単にできたので、今回は作成手順を備忘録として残したいと思います(稚拙な表現ばかりなので、プログラミング習得者は閲覧注意ですw

目次

ステップ1:Geminiにログインし、Gemを作成

まずはご自身のGoogleアカウントでGeminiにログインし、左上にある「Gem」を選択し、作成しましょう

「Gem」は特定のタスクや目的に合わせてGeminiの応答や振る舞いをカスタマイズし、特定の分野に特化した「自分専用のAIアシスタント」を作成できます

今回は、以下のカスタマイズ指示を定義しましたが、ここはご自身の好みで問題ないと思います

  • Geminiの役割:プログラマーを育成する教育者。
  • 私:プログラミングは未経験だが、ローカル環境で動作するアプリケーションを作成したい。部分的にコードを教えてもらっても修正箇所がわからないため、全てのコードを記載することを希望。
  • 目的:プログラミングを未経験者でも、Visual Studio 2026を使用してローカルで動作するアプリケーションを作成すること。
  • 約束事:コードを出力するときは、全てのコードを書き出すこと。

こうすることで毎回AIに役割や条件を入力する必要はなくなるため、非常に便利でこちらが望む回答を引き出しやすくなります

ステップ2:開発環境のインストール

アプリケーションを作るには、コードを書くための開発環境が必要です(詳しく知らんけどw)

現時点では、Visual Studio 2026が最新の開発環境のようだったので、Geminiにインストール方法を聞きながらインストールしました

Geminiはすでに、私がデスクトップアプリを作りたいプログラミング初心者であることは理解しているため、初学者にもわかるような手順で教えてくれます

手順に沿ってVisual Studio 2026をインストールできたら、コードを書く準備は完了です

あとはデザインや仕様をどのようにするか、Geminiと相談しながら作り込んでいきます

ステップ3:Geminiと相談してアプリの画面作り

まず、どのような画面にしたいかをイメージしましょう

私はまず、以下ような項目を画面上に表示したいと思いましたので、作りたい内容をGeminiに伝えました

  • タイトル(1月、2月など)
  • 支出項目(ローン、食費、通信費など)
  • 収入項目(給料、株、雑収入など)
  • 金額
  • 合計収入
  • 合計支出

すると、以下のような回答が返ってきました

文章を読んでみると、まずはVisual Studioでアプリの画面イメージを自分で作っていくようです

Visual Studioの「MainWindow.xaml」タブを開くと、画面左側にツールボックスの部品が表示されます

これらの部品を右の画面にドラッグ&ドロップすることで、UIを作成できるようです

私は全く知識がないので、Geminiに紹介された赤線を引いている部品を使いましたが、興味のある人は色々と使ってみてください!

次に何をすればいいかわかりませんでしたが、配置していくと下のコード(赤枠)も同時に更新されていくことに気づきました

おそらく、これがUIを表しているコードなのだと理解し、丸ごとコピーし、「このように配置したよ」とGeminiに問いかけました

すると、まだ名前などを入れる必要があったみたいです

よくわからないのでまずは全てGeminiに考えてもらい、そのコードを↑の画面に丸コピーしたらエラーなどは出なかったので、UIは一旦完了です

ステップ4:C#のコードの編集

「MainWindows.xaml.cs」のタブに移動します

先ほどのステップでエラーが出ていないことをGeminiに報告し、「MainWindow.xaml.cs」に書いてあるコードを全てコピーし、Geminiに貼り付けます

すると、次のコードをGeminiが回答してくれるので、このコードを丸ごとコピーして「MainWindow.xaml.cs」に貼り付ければ完了です

上部の「再生マーク」を押して、アプリの仕上がりを見てみましょう

この状態ですと、完成度が全く高くない無機質なアプリだと思いますので、もう少しGeminiの力を借りてブラッシュアップしていきましょう!

ステップ5:ブラッシュアップ

「再生マーク」を押してエラーが出ていないことを確認したら、以下のような内容を追加・修正したい旨をGeminiに伝えましょう

おそらく一気に伝えてもできないと思うので、少しずつ修正していきましょう

  • Enterキーで金額追加
  • デフォルト項目の設定
  • (支出:ローン・通信費・電気代・雑費など)
  • (収入:給料・株・雑収入など)
  • 収入・支出の項目を自由に追加・削除可能
  • 金額のカンマ区切り
  • 色の使い分け(収入は青、支出は赤)
  • データの永続化(自動コピー)
  • 月ごとに切り替えして収支を入力
  • 年間通して1月~12月までの収支を見える化
  • 入力したデータの削除機能
  • 収入から支出を引いた金額を表示
  • 年間の収支を集計し、折れ線グラフで表示
  • デザインをプロらしく

ポイントは出力されたコードで問題ないか、しっかりと動作を確認をすることです

動かない部分があればGeminiに伝えれば、修正したコードをすぐに教えてくれるので、正確に修正点を伝えましょう

ステップ6:アプリの発行

理想的なデザインや仕様になってきたら、アプリケーションを発行して実際に使えるようにしましょう

画面左側に以下のような表示があると思います

プロジェクト名(今回の場合は「test1」です)を右クリックすると、「発行」をクリックします

今回はローカルで使用するアプリケーションなので、フォルダーを選択します

最後に「発行」を押せば、アプリケーションがデスクトップ上で展開でき、実際に使えます

さいごに

いかがでしたか?

Geminiを使えば、誰でも簡単にアプリケーションが作れることがお分かりいただけたと思います

どんどん便利になるソリューションを使って、皆さんも楽しく便利な生活にしていってくださいね!

それでは!

たけちゃん
(HELLO WORLD ch)
◆趣味:株式投資、カメラ、動画編集、旅行、キャンプ、SUP、街ブラ、野球
◆経歴:野球歴25年(大学時代:全国大会優勝経験、社会人時代:全国3位)
◆好きな言葉:「努力する人は希望を語り、怠ける人は不満を語る。」
◆人生の目標:配当金を月20万円もらいながら、世界を回ること。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次