夕食の麻婆茄子を見て、子どもが嫌そうな顔をする。「食べなさい」と言い続けるより、食べものに興味を持つきっかけを作れないか。そこから、アプリ「ひとくちクエスト」を作り始めました。
プログラミングの専門知識はほとんどない状態から、Codexへ分からない言葉をそのまま質問し、画面を自分で触って確かめながら進めた記録です。2026年9月9日時点で、Noteマガジンには第3話まで公開しています。
完成したアプリのねらいや家庭での使い方は、先に公開した「食べなさい」を少し休むために。開発者が家庭で試した「ひとくちクエスト」で読めます。今回は、そこへ至る開発の記録を案内します。
「作れた結果」だけではなく、判断した過程を残す
このマガジンには、なぜ作ろうと思ったのか、最初に何を試したのか、分からない技術用語とどう付き合ったのかを、実際の順番で残しています。
AIを使った副業の情報が気になっていたことも、作り始めた理由の一つです。ただ、アプリを作ることと収益が出ることは別。まず身近な困りごとを、動く形へ落とし込めるか試しました。
最初の範囲は、なす一種類、食べたときに押すボタン、口数の記録です。コードが読めなくても、「押したら数字が増えるか」「閉じても記録が残るか」は自分で確かめられます。
第1話は、麻婆茄子から公開までの全体記録
第1話「ひとくちクエスト作成開始」では、夕食の麻婆茄子を嫌がる子どもを見て、食への興味につながるものを作れないかと考えたところから始まります。
CodexからPWAを提案されても、私は意味を知りませんでした。そこで、PWAとWebアプリ、ストアアプリの違いを初心者向けに説明してもらいました。知らない語は質問し、次の判断は自分でする。この進め方は、その後も変わっていません。
第1話は環境準備だけではなく、試作から公開までの全体像です。なす一種類と「たべたよ」ボタン、口数から始め、後に画像、固定音声、Netlify公開、Stripe Checkoutの購入状態まで実装しました。3日で公開できたのは私の場合で、販売成果とは別です。
AIとの自由会話も試しましたが、通信、費用、子ども向けの安全性から固定音声へ切り替えました。作れるかだけでなく、家庭で使う条件に合うかも見ています。
第2話は、なす一つを実際に動かす回
第2話「はじめてのCodex、ナスのアプリを動かす」では、WindowsでCodexを使い始め、なす一つの小さな試作を動かします。
なす、食べたときのボタン、口数、押し間違いを戻す操作を作り、ブラウザとスマートフォン幅で表示を確認します。エラー時は、見えている状態と期待する動きを伝えて原因を調べます。
第1話は無料で読め、第2話からは有料実践編です。第2話以降では、操作画面や指示例に沿って手を動かします。無料部分で内容を確認してから読み進められます。
第3話は、翌日も続きを作れる環境を残す回
第3話「環境づくりとGit」では、一度動いたアプリを翌日も同じ場所から再開するための環境を扱います。
Next.js、React、TypeScript、Node.js、npm、ターミナルの役割を必要な分だけ整理し、実際の起動手順と翌日の再開方法をREADMEへ残します。
ファイルの保存、Gitのcommit、外部へのpushが別の操作であることも扱います。良い状態を記録してから一か所だけ直し、画面で動きを見て、問題がなければ次の記録を残します。
読者が得られるのは、小さく作って確かめる基準
この開発記で伝えたいのは、自分の困りごとから機能を一つ選び、目で結果を判断できる大きさまで小さくする進め方です。
家族向けなら記録ボタン一つ、仕事なら毎回手で写す項目を一つ。副業を考える場合も、「誰のどんな手間を減らすのか」を一つ動かせば、次の判断材料になります。
完成条件も先に決めます。ボタンの結果が見える、保存内容が残る、翌日も開ける。この三つなら自分で合否を見られます。食への効果や収益は、その後に別途確かめることです。
まず全体像を読み、作る範囲を一つ決める
これから読む方は、まず無料の第1話で、きっかけから公開までの流れを見てください。そのうえで自分でも手を動かしたい場合は、第2話で小さな試作、第3話で再開と記録へ進めます。第4話以降は、公開できた段階でマガジンへ追加します。
読む前に、「自分なら何を一つだけ押せる形にするか」を考えると、自分の生活へ置き換えやすくなります。立派な完成品でなくて構いません。