コードが書けない2児のパパでも、AIを使えばアプリが作れた。育休中に「おてつだいクエスト」を作ってみた

1年間の育休中、2児のパパをしています。

子育てをしながら、YouTubeやTikTokで動画を投稿したり、サイトを運営したり、noteを書いたり。

育休中の時間を使って、いろいろな副業にチャレンジしています。

そんな中、今回新しく挑戦してみたことがあります。

それが、

「アプリ開発」

です。

とはいっても、アプリなんて作ったことがありません。

コードも書けません。

そもそも、何から始めればいいのかもよくわからない。

そんなプログラミング初心者の自分が、AIの力を借りながらWebアプリを1つ作ってみました。

作ったのは「おてつだいクエスト」

今回作ったのは、

「おてつだいクエスト」

という子ども向けのWebアプリです。

きっかけは、普段の子育てでした。

上の娘も少しずつ成長してきて、「これがほしい」「これ食べたい」「ここに行きたい」と、自分の意思をはっきり伝えるようになってきました。

親としては、もちろん欲しいものややりたいことをできるだけ叶えてあげたい。

でも同時に、

「自分で何かを頑張ったら、その分だけ嬉しいことがある」

という感覚も、小さいうちから少しずつ経験してほしいなと思うようになりました。

だからといって、

「これをやらないとダメ！」

みたいに厳しくするのもちょっと違う。

できれば、ゲーム感覚で楽しみながら、お手伝いをする習慣が身についたらいいなと。

そこで、

「お手伝いをするとポイントが貯まって、そのポイントで自分のやりたいことをゲットできる」

という仕組みを作ってみることにしました。

それが「おてつだいクエスト」です。

アプリの詳しい内容については、こちらの記事で紹介しています。

そもそも、アプリなんて作れるの？

今回、一番大きかったのはここです。

自分はプログラミングができません。

これまでアプリ開発をした経験もありません。

それでも、AIに相談しながら進めていくと、

「こういう機能を入れたい」
↓
「じゃあ、こういう仕組みにしましょう」
↓
「ここを変更してください」
↓
「エラーが出ました」
↓
「このエラーはこう直してください」

という感じで、少しずつ形になっていきました。

もちろん、何も考えずにAIに丸投げしたわけではありません。

自分で「こんなアプリにしたい」というイメージを考えて、それをAIに伝える。

AIから出てきたものを実際に動かしてみる。

うまくいかなければ、またAIに相談する。

この繰り返しです。

正直、途中で何度も「これ本当に完成するのかな」と思いました。笑

それでも少しずつ画面ができて、機能が動くようになっていく。

最終的に自分が考えたものがブラウザ上で動いたときは、なかなか感動しました。

今回使ったもの

今回のWebアプリ開発では、いくつかのツールやサービスを組み合わせました。

ChatGPT

今回、一番お世話になったのがChatGPTです。

アプリのアイデアを整理したり、仕様を考えたり、コード作成のプロンプトを作ってもらったり。

エラーが出たときに原因を聞いたり、設定方法を確認したりと、開発のいろいろな場面で使いました。

「ここがうまく動かないんだけど、どうすればいい？」

と相談すると、一緒に原因を探してくれる。

プログラミング初心者にとって、かなり心強い存在でした。

Cloud

ChatGPTで出力したコード作成用のプロンプトを食わせてアプリを開発する環境として使用しました。
コードを書くことに慣れていなくても、AIに作成や修正を手伝ってもらいながら開発を進めることができました。

Flutter

Webアプリを作るための開発フレームワークです。

今回はFlutter 3.38.1、Dart 3.10.0を使用しました。

Flutter Web

今回はiPhoneやAndroidのアプリストアに登録するタイプではなく、ブラウザから使えるWebアプリとして作りました。

URLを開けば使えるので、アプリをインストールする必要もありません。

Supabase

アプリのデータを保存するデータベースや、ユーザー認証に使用しました。

今回は、ユーザー登録のハードルを下げるため、メールアドレスやパスワードを入力しなくても利用できる「匿名認証」も使っています。

また、家族ごとのデータが他のユーザーから見えないように、データベース側でもアクセス制御を設定しました。

Cloudflare Workers

完成したWebアプリをインターネット上に公開するために使用しました。

Flutterで作ったアプリをアップロードして、実際にブラウザからアクセスできる状態にしています。

今回のアプリは静的なWebアプリとして公開しているので、できるだけお金をかけずに運用できる構成にしています。

Chrome

開発中の動作確認や、エラーの確認などに使用しました。

MacBook

開発作業全般に使用。

AIに相談しながら作業したり、アプリを動かしたり、本番用のファイルを作ったりしました。

ターミナル

Flutterの起動や必要なファイルの取得、本番公開用のファイル作成などで使用しました。

最初はターミナルも「なんか難しそう……」という感じでしたが、AIに「これをやりたいんだけど、次は何をすればいい？」と聞きながら進めました。

最終的にはこんな構成に

今回の「おてつだいクエスト」は、

「Cloud × Flutter × Supabase × Cloudflare」

という構成になりました。

こうやって書くと、なんだか難しそうに見えますよね。笑

でも、実際に使ったツールの中には、今回初めて触ったものもたくさんあります。

もちろん、プログラミングの知識がゼロのまま何でもできるわけではありません。

エラーが出れば調べる必要もありますし、AIの回答がそのまま正解とは限りません。

それでも、

「こんなアプリがあったらいいな」

というアイデアを形にするところから始めて、AIに相談しながら開発を進め、データベースを設定して、動作確認をして、実際にWeb上へ公開する。

ここまで自分でやれたことは、かなり大きな経験になりました。

「作ってみる」って大事かもしれない

今回アプリを作ってみて、一番感じたのは、

「プログラミングができなくても、作りたいものがあれば、とりあえず挑戦してみてもいい」

ということでした。

もちろん、専門的な知識がある人と比べれば、自分はまだまだ初心者です。

でも、以前だったら「アプリを作る」なんて、自分には完全に無理だと思っていたはず。

それがAIに相談しながら進めてみたら、実際に1つ完成させることができました。

今回作った「おてつだいクエスト」も、まだまだ改善したいところがあります。

まずは無料で公開して、実際に使ってもらいながら、少しずつ使いやすくしていければと思っています。

そして、せっかくなので、これからも「こんなのあったら便利だな」と思ったものを、自分でいろいろ作ってみたい。

育休中の新しいチャレンジとして始めたアプリ開発。

思っていた以上に、面白い経験になりました。

応援していただける方へ

このアプリは、現在のところ収益化を目的として運営していません。

広告を掲載したり、有料プランを設けたりすることもなく、完全無料で公開・提供しています。

もし実際に使ってみて、

「応援したい！」

「これからも開発を続けてほしい！」

と思っていただけたら、とても嬉しいです。

今後の機能追加や改善の励みになります。

応援・感想・改善のアイデアなどがありましたら、noteのコメントやSNSなどからお気軽にお知らせください。
お仕事のご依頼も大歓迎です。

▼X

▼YouTube

▼TikTok