0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AIに頼んだら10分で家計簿Webアプリが完成して無料公開できた話

0
Posted at

はじめに

「アプリを作って収益化したい」と思っていても、プログラミングの知識がないと難しそうに感じますよね。
私もWindowsしか持っておらず、さらにプログラミング初学者。
iPhoneアプリの開発にはMacが必要だと知ってあきらめかけていました。
でも調べてみると、Webアプリなら0円で作って0円で公開できることがわかりました。しかもAI(Claude)にコードを全部書いてもらえば、プログラミング知識がほぼなくてもできます。
アプリ開発と後学のためにやってみようと決意。
この記事では、実際にやってみた手順をそのまま紹介します。


使ったもの

Claude(AIアシスタント):コード生成
GitHub:ファイルの管理(無料)
Vercel:Web公開(無料)
かかった費用:0円


Step 1:Claudeにアプリを作ってもらう

Claudeのチャット画面でこのように入力しました。

シンプルな家計簿Webアプリを作って。
HTML/CSS/JavaScriptで1ファイルにまとめて

たったこれだけです。するとClaudeが完全なHTMLコードを生成してくれました。
できあがったアプリの機能:

  • 収入・支出の追加(日付・メモ・カテゴリ・金額)
  • 収入合計 / 支出合計 / 残高の自動計算
  • 収入・支出でフィルター表示
  • 項目の削除
  • データはブラウザに自動保存

生成されたコードをメモ帳に貼り付けて、index.htmlという名前で保存しました。


Step 2:GitHubにアップロードする

  1. github.com で無料アカウントを作成
  2. 「New repository」でリポジトリを作成(名前はkakeiboにしました)
  3. 「uploading an existing file」からindex.htmlをアップロード
  4. 「Commit changes」をクリック

GitHubの操作が初めてでも、画面の指示通りに進めれば5分もかかりません。


Step 3:Vercelで公開する

  1. vercel.com にアクセス
  2. 「Continue with GitHub」でログイン
  3. 「Add New Project」から先ほどのkakeiboリポジトリを選択
  4. 「Deploy」をクリック

数秒で公開完了。こんなURLが発行されました。
https://kakeibo-khaki.vercel.app/
iPhoneのSafariでもそのまま動きます。ホーム画面に追加すればアプリっぽく使えます。


まとめ

やったこと 費用 時間
Claudeでコード生成 0円 約1分
GitHubにアップロード 0円 約5分
Vercelで公開 0円 約3分
合計 0円 約10分

Macがなくても、プログラミングの知識がなくても、AIを使えばWebアプリを作って公開できる時代になりました。
今後はGoogle AdSenseで広告収益化や、機能追加なども試していく予定です。
同じように「アプリを作りたいけど難しそう」と思っている方の参考になれば嬉しいです!


参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?