この記事は初心者が試行錯誤した記録です。セキュリティや設計は未熟な部分があります。実運用・公開用途ではそのまま使わないでください。
スマホで保存ができない。
何回やっても、記録が残らない。
パソコンでは動くのに、スマホでは動かない。
写真があると保存できないどころか、
写真なしでも保存できない。
エラーも出ない。理由も分からない。
もう完全にお手上げでした。
このときの私は、こう思っていました。
「きっとPHPがおかしい」
「Xサーバーの設定が悪い」
「スマホのブラウザの問題かもしれない」
でも、原因はまったく別のところにありました。
しかも、とんでもなく単純なところに。
私は「変数」というものを作っていなかった
ChatGPTに言われるままにコードを追加しました。
そのとき追加したのが、この4行です。
const weightEl = document.getElementById('weight');
const foodEl = document.getElementById('food');
const memoEl = document.getElementById('memo');
const photoEl = document.getElementById('photo');
render();
このときの私は、
「言われたから貼った」だけで、
何の意味かはまったく分かっていませんでした。
でも、これを入れた瞬間――
スマホで保存できるようになりました。
実は、ずっとエラーが起きていた
私はJavaScriptの中で、こんなことを書いていました。
weightEl.value
foodEl.value
memoEl.value
ここで、私は大きな勘違いをしていました。
私はずっと、
「weightEl.value と書けば、このデータをどこかに送る指示になる」
と思っていました。
でも違いました。
weightEl という“入れ物”自体を、一度も作っていなかった。
後から分かったのですが、
getElementById というのは、
画面の中にある「入力欄」という箱を探し出して、
そこに名前（weightEl など）を付ける作業でした。
そして .value は、
その箱の中に入っている文字や数字を取り出す、という意味でした。
私はずっと「中身（.value）」の話ばかりしていました。
でも、そもそもどの「箱（入力欄）」から中身を出すのかを、
プログラムに教えてあげていなかったんです。
たとえるなら、
「この箱に荷物を入れて」と言っているのに、
その箱がどこにも存在していなかった状態。
だからスマホのブラウザは、
「箱がないので、処理を続けられません」と止まっていました。
私はずっと、
「どこに送るか」の話をしていたけど、
本当はその前の
「受け取る場所を作る」ことが、抜けていました。
だからスマホのブラウザでは、
「そんなものは存在しない」とエラーになって、
処理がそこで止まっていました。
保存ボタンを押しても、
PHPにデータが送られるところまで、処理が進んでいなかった。
つまり――
保存できなかった原因は
PHPでも
サーバーでも
写真でもなく
JavaScriptが途中で止まっていたこと。
後から知ったのですが、
このエラーは、ちゃんと画面に出ていました。
ただ私は、その表示の見方を知らなかっただけでした。
また、ブラウザには「検証」や「デベロッパーツール」と呼ばれる画面があり、
そこを見ると、JavaScriptのエラーがすべて表示されます。
もし当時これを知っていたら、
私は何時間も迷わずに、この原因にたどり着けていたと思います。
なぜパソコンでは動いていたのか
これが一番不思議でした。
でも理由は単純で、
パソコンのブラウザは、このエラーを無視して動いていた。
スマホのブラウザは、エラーで処理を止めていた。
たったそれだけの違いでした。
だから
パソコン → 保存できる
スマホ → 何も起きない
という現象が起きていました。
私はずっと、見当違いなところを直そうとしていた
サーバーを疑い
PHPを疑い
写真サイズを疑い
本当の原因は、たった4行の不足でした。
これに気づいたとき、
「今までの時間なんだったの…」と思いました。
でも同時に、
「なるほど、Webアプリってこうやって動いてるんだ」と、
初めて点と点がつながった瞬間でもありました。
この体験で分かったこと
初心者がつまずくのは、
難しいところじゃない。
“自分が何を書いていないのかに気づけないところ”
ここが一番むずかしい。
だから私は、ずっと原因にたどり着けませんでした。
同じことで悩んでいる人へ
もしあなたが、
「スマホだけ動かない」
「保存できない」
「理由が分からない」
で止まっているなら、
PHPでもサーバーでもなく、
JavaScriptがエラーで止まっていないか
を疑ってみてください。
私とまったく同じ状況かもしれません。
次の記事では、
なぜこのWebアプリが「記録を保存できるようになったのか」。
PHPをサーバーに置いたことで、何が起きたのかを、
初心者の目線のまま書いていきます。
コメント