いきなりですが、Webアプリを作ってみました。
といっても、私は仕様を伝えてAIにコーディングしてもらい、
それをテスト検証して修正したいところをまた伝えて・・・という感じで。
なので私自身はJavaScriptコードはほとんど入力していません。
AIとのやり取りだけで完成出来たので、その手順について纏めてみました。
きっかけ
元々、UdemyでJavaScript講座をやってみて、その講座の最後がJSでアプリを作るという内容だったのです。
レクチャーを受けながら我が子用に１つアプリが欲しいなというアイデアが浮かんだので、
それならやってみようと思いました。
因みに、私が購入したのはこちらの講座です。
だいぶ前にちょっと血迷って全編英語の講座を買ってしまってたものなんですが、
ゆっくりでとても丁寧な説明だし、日本語の字幕も表示できますので良かったですよ。
仕様を考える
もう「顔は洗った？」「歯みがきした？」「宿題は終わった？」と、
毎日×∞同じことを我が子に言うのに疲れまして（笑）
ちょうど最近スマホを持たせ始めたこともあり、それなら
子どもが自分でチェックしながら達成感を持てるようにするタスク管理アプリにしようと思いました。
あわせて、遠足や発表会などの「イベント」に向けて持ち物やToDoリストも管理させたいなと。
デザインも作ってもらいたかったので、小学生女子が好みそうな可愛い雰囲気とペルソナ設定もしました。
開発環境について
エディタ：Antigravity IDE
AIツール：ChatGPT, Claude Code, Gemini
※無料プランの範囲内でやったので、色々ハシゴしながらです（笑）
言語環境：Vite + React
AIに伝えるのは、まず基本機能のみに絞ろう
いきなり全ての機能を詰め込んで伝えても、ちゃんと反映されたコードは出てこないんですよね。
それは普段のコーディング業務で痛感していましたので、
まず基本機能と細かい動きを言語化するところから始めます。
- 毎日やるタスクをリストにして、チェックしながら進められるアプリを作りたい
- 朝・放課後・夜ごとにタスク管理したい
- タスクは自分で登録・編集できるように
- タスクに目安となる時間も登録して、その時間順に並べ替えたい
- タスクの進捗度が分かるようにしたい
- 子どものスマホで使えるアプリにしたい
- ユーザーを追加できて、ユーザーごとにタスクリストが作れるようにしたい
詳細の文章は忘れてしまいましたが、最初はこんな感じで伝えた気がします。
どういう環境で使いたいかというのを伝えるのも、大事かなと思います。
それによってAIがコーディングする言語が変わってくるからです。
「子どものスマホで使いたい」というワードから今回AIが選んだのは、Reactでした。
えっでも私、Reactはよく分からないんだけど、、、、、と思いましたが大丈夫です。何とかなるんです。
エディタで開発環境を作ろう
AIにコーディングしてもらったものを、ブラウザでどう検証するのか。
Reactでコードを出されたので、いつものHTML/CSSと同じ環境では確認できません。
そこで、Antigravity IDEのAIチャット画面でReact検証をするための環境構築をしてもらいました。
まず、バックアップやバージョン管理をしておくためにも、Gitのリポジトリを作っておきましょう。
Web制作の際と同じ要領ですので、詳細はここでは省きます。
次に、開発環境として使えるディレクトリをローカルで準備し（Gitクローン）、
AIが出力してくれたコードを作成したディレクトリにコピー＆ペーストで保存します。
そのディレクトリをAntigravity IDEで開き、AIチャット画面上でこのコードをブラウザで確認する
開発環境を構築してと入力すると、自動でターミナルを動かしてくれます。
ターミナルを実行しても良いかという確認画面が出たら、Agreeをクリックすると自動で環境設定してくれます。
AIが構築してくれたのは、npm とVite（ヴィート）です（元々Web制作でNode.jsは入っていました）。
構築が終わったら、npm run devとターミナルでコマンドを打つと開発サーバーが起動し、
ブラウザ上でhttp://localhost:5173 にアクセスすると、Reaceアプリケーションが表示できるようになります。
テスト検証を繰り返そう
自分でほとんどコードは書きませんでしたが、動作や表示で追加・修正したいところを伝えるために
私自身はテスト検証者に徹していた感じです。
例えば、「基本の動きは良いけど、タスク名は日本語と英語の両方を設定できるようにしたい」とか、
「タスク名の日本語は必須項目にして、この入力がないと登録できないようにして」とか、
「なぜ登録できないのかユーザーに分かるように、エラーメッセージを〇〇の下に表示させて」とか、
「タスク名や時間は、後でも編集できるようにしたい」とか、
「進捗度を円グラフで表示して、その隣で猫ちゃんが応援するようにして」とか。
１つ１つの機能を丁寧に伝えるようにするのが良いかなと思います。
これは昔、PCアプリのテスト検証をする仕事をしていた経験が活きていた気がします。
「ある特定の動作をすると、画面が真っ白になってしまう」といった現象も、
細かく伝えた方がAIにも伝わるし、すぐにコードのどこを修正すればよいのか探してくれます。
これをひたすら繰り返して、基本機能だけなら1日で出来上がりました。
想像以上に早くできてしまって私が一番ビックリ！
あとは、旅行などのイベントに向けての準備するリストも管理できるようにしたかったので、
その機能をタブ分けで表示できるようにしたり、
ユーザーごとにアバター設定や背景色を設定できるようにしたりと、
少しずつ機能やUI/UXの面を整えていきました。
でもこの時点では、まだ基本機能だけでアイコンなどのデザイン面は後回しにしていました。
アイコンなどのイラストもAIに作ってもらおう
私はデザイン出来ないけど、小学生女子に使ってもらいたかったので可愛いデザインが必須でした。
これも〇〇のアプリみたいに可愛いデザインにしたいとAIに伝えたところ、
可愛いにも色々あるんだけどどんな雰囲気が良い？っと返されてしまいました。
この「可愛い」を言語化して伝えるのって、難しいですよね。
そこで私が参考にしたのは、「みんなのおこずかい帳」アプリです。
我が子が、このアプリを気に入って使っているんです。
このアプリのスクリーンショットをAIに送って、こんな雰囲気にしてほしいと伝えたら
画像生成で出力してくれたデザインがこちら。
何これ、めっちゃ可愛いーーー！っと、私のテンションが爆上がり（笑）
ちなみに猫ちゃんにしたのは、うちの子が猫好きだからです（私は犬派なんですが）。
でもこの通りのものが出来上がるわけではないんですよね・・・。
これを元に、アイコンなどを１つずつ作って表示させるためのコーディングをしていく必要があります。
AIの使い分け
何せどのAIも無料の範囲内で使っていますので、画像生成させるとすぐに上限がきてしまいます。
あと、AIが出力してくれたデザイン画像を添付しても、AIによって出来上がるアイコン画像の雰囲気が異なるので、
アイコンに設定する画像生成は全て、ChatGPTに任せることにしました。
今回のデザイン画像を作ってくれたのもChatGPTです。
トンマナをそろえるためにも、これは統一して良かったと思います。
あと、ChatGPTには普段からコーディング以外にもファッションやコスメのことも相談してたので、
私の好みをある程度分かっていたという前提があったのも、ポイントになるかもしれません。
しばらくは、アイコン画像を生成してもらう→React読み込み用に１つ１つの画像に分ける
→読み込み用コードも一緒にコーディング→表示や動作を検証するという作業をひたすら繰り返し、
タスク用アイコン・アバター用アイコン、進捗管理用猫ちゃん・イベント用アイコン等を少しずつそろえていきました。
前述のように画像生成ではすぐに無料の上限がきてしまうので、このあたりでは
画像生成：ChatGPT、React用のコード生成：Claude Codeを使うことが多かったです。
また個人的には、Geminiはかなり使いづらかった・・・・・・・。
指示していない部分のコードをを勝手に書き換えることが多く、それが連続したので
トークンを消費するばかりで疲れちゃいました。
この辺は普段の利用度や個人の好みにも寄るかと思いますのであまり参考にならないと思いますが、
私が使いやすかったのは、ChatGPTとClaude Codeです。
出来上がり！
出来上がったら、Viteでビルドする必要があります。
実はここで、スマホでダウンロード形式として使えるようにするには、
ReactではなくReact Nativeでコーディングしないといけないことを知りました。
・・・詰めが甘いですね。変換もけっこう手間がかかるらしい。
でも今回はアプリストアで公開することを考えていたわけでもなく、
あくまで我が子が使えれば良かったレベルなのでWebアプリでもいっかとあっさり諦めました。
元々WordPress勉強用にサーバーは契約していましたので、そこにアップロードして使えるように
AIに教えてもらいながらビルドするために必要なアイコンやmanifest.jsonというファイルを作成して、
ビルドしてアップロードしたものがこちらです。
前述のデザインとは多少違うものにはなりましたが、雰囲気は近いかなと。
一応、ユーザーマニュアルもAIに作ってもらいました。
今回学んだこと
AIにコーディングしてもらう上で気を付けることは、基本的にはWEBページ制作のコーディングと
あまり変わらないのかなと思いました。
- 仕様は細かく言語化して伝える
- テスト検証は必須
- バグについても細かく現象を言語化して伝える
- やはりReactやReact Native言語の基本は知っておいた方が良い
今回は個人利用目的なのでデザインなどはある程度妥協した部分もありますが、
本格的なプロジェクトとして制作するなら、もっとダウンロードのことも考えて
React Nativeで開発する必要も出てくるでしょうし、アプリストアで公開するなら
そのための審査の準備やメンテナンスのことも知る必要が出てくるかと思います。
ちゃんとしたReact やReact Nativeの勉強も必要になってくるのも痛感しました。
ただ、めっちゃ短期間で開発できるのはAIを使う大きな魅力ですので、
今後もAIを上手に使いこなせるように一緒に成長していきたいです。
