アプリにデータを保存する機能を作って、画面に「保存しました」と出た。ここで完成にしたくなります。

ただ、画面のメッセージと、保存先に実際に入っているデータは、別々の場所にある別々のものです。画面は「そう表示しなさい」と書かれたとおりに文字を出しているだけで、保存先の状態を見て言っているとは限りません。

この記事は、成功の表示が出ているときにどこを開いて何を見れば確かめられるかの話です。コードのどこが危ないかを列挙する話ではなく、保存先という別の場所を見に行く手順の話だと思ってください。

画面のメッセージは、アプリが自分で出しています

保存機能のコードは、おおまかに2つの部分でできています。

  • データを保存先へ送る部分
  • 画面に結果を表示する部分

この2つは、つながっているとは限りません。送った結果を受け取って、成功か失敗かを見てから表示を切り替えている場合もあれば、送る処理を書いたあとに表示の処理を並べているだけの場合もあります。

後者だと、送信に失敗していても同じメッセージが出ることがあります。とくに、返ってきたエラーを確認せずに次の行へ進む書き方になっているときは、画面上は何ごともなく成功したように見えます。

いちばん確実なのは、保存先を直接見にいくことです

コードを読んで確かめる方法もありますが、学び始めのうちは保存先を自分の目で見るのがいちばん早いと感じています。

Supabase のようなサービスを使っているなら、管理画面にデータを一覧で見られるページがあります。そこを開いて、いま保存したはずのデータが1行増えているかを見る。それだけです。

どこを見ればいいか分からなければ、そのまま聞いてしまうのが早いです。

いま作った保存機能で、データが実際に入ったかを確認したいです。
SQLを書く方法ではなく、管理画面のどこを開いて何を見れば
確認できるかを、画面の流れに沿って教えてください。

「SQLではなく画面で」と指定しているのは、学び始めの時期にSQLを書く手順を挟むと、確認したいだけなのに新しい詰まりどころが増えるからです。まずは目で見られる方法を教えてもらって、SQLは必要になったときに覚えれば十分だと思っています。

見に行くと、思っていたのと違うことがあります

実際に中身を見ると、入っていると思っていたものが入っていなかったり、予想していない形で入っていたりします。たとえば、こういうところです。

1行も増えていない
そもそも保存できていないケースです。画面のメッセージだけが出ています。

増えてはいるが、一部の項目が空になっている
入力欄が5つあるのに、保存先には3つ分しか入っていない、という状態です。画面側では5つ入力できているので、フォームを見ているかぎり気づけません。

同じ内容が2行入っている
保存先を見ると、同じ内容が2行入っていることがあります。画面のほうは、保存先から取り直すのではなく「いま追加した1件」を自分で足して表示していることがあるので、保存先には2行、画面には1件という食い違いになります。

「失敗したら失敗と表示する」を後から足す

中身を確認できたら、次はメッセージのほうを直します。

いまの保存処理は、失敗しても「保存しました」と表示される作りになっていないか確認してください。
なっている場合は、保存が失敗したときは失敗したと分かる表示になるように直してください。
表示の文言は今のままで構いません。

最後の「文言は今のまま」は、余計な変更を巻き込まないために添えています。ここを書かないと、メッセージの文面やデザインまで一緒に変わってくることがあります。

結果は、画面の外で確かめる

学び始めのうちは、画面に出ている表示がそのまま結果だと感じやすいと思います。ただ、画面はあくまで、そう表示するように書かれた結果です。

画面で触ってみるのは第一歩として有効です。そのうえで、保存したなら保存先を見る。送信したなら送信先を見る。自分の目で結果のほうを確認する癖をつけておくと、後になって「いつからデータが入っていなかったのか分からない」という状況を避けやすくなります。

最初の1回だけでも見に行っておくと、そのアプリが本当に動いているかどうかの手触りが、だいぶ変わってくるはずです。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全20セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください