AIでアプリを作ったら、まず「正しい入力で動くか」「入力を間違えたらどうなるか」「保存した内容が残るか」を確かめましょう。画面が表示され、ボタンが一度動いただけでは、普段使いできるかはまだ分かりません。
この記事では、学習内容と時間を記録する小さなWebアプリを例に、テスト項目の作り方、入力ミスの見つけ方、AIへの修正依頼、直ったことの確かめ方まで紹介します。記事用に制作した練習教材を実際に操作した結果です。受講生の作品や授業の実績ではありません。
この記事でわかること
- 操作する前に「こう動いてほしい」という期待結果を書く。
- 普通の入力に加えて、空欄・0・上限を超える値も試す。
- 修正後は同じ手順を繰り返し、正常な操作も再確認する。
まだ最初のアプリを作っていない人は、AIでアプリを作る方法と最初の1本を作る手順から始めてください。
AIで作ったアプリで、最初に確かめること
最初にテストするのは、アプリで一番使う操作です。学習記録なら「入力して保存する」、割り勘なら「金額と人数を入れて計算する」が当てはまります。機能を増やす前に、この操作がどうなれば成功なのかを決めます。
| 確かめること | 学習記録アプリなら |
|---|---|
| 基本の動作 | 「英単語の復習」「30」を保存すると、内容と30分が一覧に出る |
| 入力の間違い | 時間が空欄のときは、保存せずに入力方法を案内する |
| 許可する値の境目 | 1〜1440分と決めたなら、0・1・1440・1441を試す |
| 保存の継続 | ページを再読み込みしても、保存した記録が残る |
| 使う環境 | 実際に使うスマートフォンやブラウザで入力・保存できる |
この「どうなれば成功か」を期待結果と呼びます。「保存できる」だけでなく、「何が、どこに、いつまで残るか」まで書くと、確認漏れを減らせます。
実例：学習時間メモのルールを先に決める
今回の教材は、学習内容と時間を入力して保存するだけのアプリです。テストを始める前に、次のルールを決めました。
- 学習内容は、前後の空白を除いて1〜60文字。
- 学習時間は、半角数字で1〜1440分の整数。0分・小数・空欄は保存しない。
- 入力に問題があれば、直す場所が分かるメッセージを出す。
- 保存した記録は、同じブラウザで再読み込みしても残す。
- 別の端末との同期は行わない。
1440分は1日分の分数を上限にした、この教材のルールです。すべての学習記録アプリが同じ範囲にする必要はありません。休憩時間や複数日の合計を記録するなら、別の決め方もあります。正しい値は、アプリを何に使うかによって変わります。
不具合を含むv0.1と、入力チェック・端末内保存を追加したv0.2を用意し、2026年10月5日にmacOSのChrome、ローカルHTTP環境で同じ12ケースを操作しました。
同じ教材で試す
修正前・修正後のアプリ、12ケースの結果CSV、起動手順を同梱しています。Python 3が入ったPCでローカルHTTPサーバーを起動する方法をREADMEに記載しています。HTMLファイルを直接開く方法では保存の動きがブラウザにより異なるため、保存の比較は同梱の手順で行ってください。
公開前に試す12項目｜空欄・数値の境目・再読み込み
時間の欄を試すケースでは、学習内容に「英単語の復習」を入れています。各ケースは記録を消した状態から始めました。「保存しない」が期待結果のときは、エラー案内が出て、記録が増えないかを見ます。
| ケース | 操作・入力 | 期待結果／修正版の確認 |
|---|---|---|
| 01 通常 | 時間に30を入れる | 30分で保存される／確認済み |
| 02 空欄 | 時間を何も入れずに保存 | 保存せず入力を案内／確認済み |
| 03 空白 | 時間に半角スペースだけを入れる | 保存せず入力を案内／確認済み |
| 04 下限の外 | 時間に0を入れる | 保存しない／確認済み |
| 05 負の数 | 時間に-5を入れる | 保存しない／確認済み |
| 06 小数 | 時間に1.5を入れる | 保存しない／確認済み |
| 07 下限 | 時間に1を入れる | 1分で保存される／確認済み |
| 08 上限 | 時間に1440を入れる | 1440分で保存される／確認済み |
| 09 上限の外 | 時間に1441を入れる | 保存しない／確認済み |
| 10 内容なし | 学習内容は空白だけ、時間は30 | 保存せず内容の入力を案内／確認済み |
| 11 文字 | 時間にabcを入れる | 保存しない／確認済み |
| 12 保存の継続 | 30分を保存し、再読み込みする | 記録が残る／確認済み |
v0.1では、ケース01・07・08の3件だけが期待結果と一致しました。残る9件では、空欄を0分として保存したり、再読み込みで記録が消えたりしました。v0.2では12件とも期待結果を確認できました。
ただし、これは意図的に不具合を入れた教材の比較です。AI製アプリ全般の不具合率を調べた結果ではありません。また、内容の60文字制限、複数タブからの同時操作、ブラウザの保存が使えない場合などは、この12ケースとは別に確認が必要です。
入力と保存の不具合を実画面で確認する
見つかった不具合1：時間が空欄でも0分で保存される
v0.1で学習内容だけを入力し、「保存する」を押すと、「保存しました。」と表示され、一覧に「英単語の復習 / 0分」が追加されました。入力していない時間が、保存時に0へ変わっています。
この教材では、時間の文字列をJavaScriptのNumber()で数値に変えています。Number("")は0になります。空欄かどうかを先に確かめずに数値へ変換したことが、この不具合の原因でした。空の文字列や空白だけの文字列が0に変換される仕様は、MDNのNumberの説明でも確認できます。
直すときは、単に「0を禁止」するだけで終わらせず、空欄・負の数・小数・上限を超えた数をどう扱うかまでそろえます。v0.2では、許可する入力形式と範囲を確認してから記録を保存するようにしました。
入力チェックには、HTMLのrequiredやmin、max、stepなども使えます。どの指定が使えるかは入力欄の種類によります。ブラウザでのチェックだけでは、サーバーへ送られるデータの検証を代替できない点にも注意してください。出典：MDNのフォーム検証ガイド。
見つかった不具合2：「保存しました」と出ても再読み込みで消える
v0.1では30分の記録を画面に追加できました。しかし、ページを再読み込みすると一覧は空になりました。画面に表示するための一時的なデータしか持っておらず、再読み込み後に取り出す保存先がなかったためです。
v0.2ではブラウザのlocalStorageに記録を書き込み、ページを開いたときに読み出します。通常の利用でブラウザのセッションをまたいで保持できる仕組みですが、端末間で自動的に共有されるものではありません。ブラウザのデータ削除やプライベートモードなど、残り方に影響する条件があります。出典：MDNのlocalStorageの説明。
自作アプリでも、保存ボタンの表示だけで判断せず、保存→再読み込み→同じ記録が残っているか確認までを1セットにしてください。「翌日も使いたい」「スマートフォンとPCで共有したい」といった目的があるなら、その使い方をテスト項目に加えます。
AIへの修正依頼と、修正後の確認方法
「動かないから直して」だけでは、AIが別の機能を変えたり、見た目だけを直したりすることがあります。操作手順、期待結果、実際の結果、変えてほしくない点を渡すと、修正する範囲を絞れます。
学習時間メモの入力チェックを修正してください。
再現手順：
1. 学習内容に「英単語の復習」と入力する。
2. 学習時間は空欄にする。
3. 「保存する」を押す。
期待結果：記録を追加せず、時間の入力方法を表示する。
実際の結果：「保存しました。」と表示され、0分の記録が追加される。
仕様：時間は半角数字、1〜1440分の整数。
空欄、空白だけ、0、負の数、小数、文字、1441以上は保存しない。
画面デザインと、正しい入力を保存する動作は維持する。
まず原因と修正箇所を説明し、修正後に確認する入力例を示してください。修正の説明を受け取ったら、ケース02だけでなく01〜11も繰り返します。空欄を止められても、正常な30分まで保存できなくなっていたら、修正完了とはいえません。保存処理を変えた場合は、ケース12も確認しましょう。
JavaScriptの基本動作を確かめながら進めたい人は、JavaScriptのサンプルコード集も参考にしてください。
公開前に追加するチェックと、公開を止める判断
ここまでの12ケースは、入力と保存を練習するための小さな範囲です。誰かに使ってもらう前には、実際の使い方に合わせて確認を増やします。
- 端末と操作：使うスマートフォン・ブラウザで、入力欄、ボタン、エラー文が読めるか。キーボードでも操作できるか。
- 失敗した後：通信や保存に失敗したときに、成功したように見えないか。入力し直せるか。
- データ：不要な個人情報を集めていないか。共有・削除したときの範囲が分かるか。
- 外部サービス：ログイン、決済、外部APIを使うなら、それぞれの権限・失敗時の処理・利用上限を確認したか。
特に、記録が消える、他人の情報が見える、金額が間違うといった問題が残っているなら、その機能の公開を止めて直します。すべてのアプリに同じ件数のテストを当てはめるより、失敗したときに利用者が困る操作から確かめることが大切です。
AIがコードを書いてくれても、何を作りたかったのか、使う人にとって正しい動作は何かを説明する役割は残ります。テスト表を書く練習は、その説明を具体的にする練習にもなります。
よくある質問
アプリのテストもAIに全部任せていいですか？
テスト項目の候補やコードを作る作業には使えます。ただし、アプリの目的に合う期待結果かを人が確認し、実際の画面で操作した結果と照合してください。「テストに通った」という回答だけで、利用者の操作が成功したとは判断できません。
初心者は何件くらいテストすればいいですか？
決まった件数はありません。まずは一番使う機能について、正常な入力、空欄、許可範囲の境目、保存後の再読み込みを確かめます。ログインや決済など機能が増えたら、その機能に合わせた項目を追加してください。
保存した直後に一覧に出れば、保存のテストは終わりですか？
続けて使う記録なら、再読み込み後にも残るかを確認します。別の端末でも使う仕様なら、端末を変えた場合も別に確かめます。画面への表示と、必要な期間・場所にデータを残すことは、それぞれ確認が必要です。
12ケースに通れば公開できますか？
この記事の12ケースだけでは判断できません。入力と保存を学ぶための教材の範囲だからです。実際のアプリの機能、扱うデータ、使う端末、失敗時の影響に合わせて追加の確認を行ってください。
まとめ：よく使う1機能からテスト表を作ろう
自分のアプリでよく使うボタンを1つ選び、正常な入力と入力ミスをそれぞれ試してみてください。「入力値・期待結果・実際の結果」を残しておけば、AIや人に修正を頼むときも、直ったことを確かめるときも使えます。
作ったものを動かし、説明するところまで学びたい方へ
KredoのAI留学では、英語でAIを学び、制作したものを英語で発表するプログラムを案内しています。学習内容を知りたい方は、AI留学のカリキュラムと1日の時間割をご覧ください。
英語でIT・AIを学べるKredo
英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？
当メディアを運営しているKredoは、英語×ITをオンラインで学ぶ「Kredoオンラインキャンプ」と、フィリピンのセブ島で英語とIT・AIを学ぶ「KredoIT留学」「KredoAI留学」を提供しています。これまでの卒業生は3,000名以上。卒業生の多くが、国内外のIT企業への転職、フリーランスなどへのキャリアチェンジを実現しています。これからの時代に必要な英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？
