前回の記事で、
スマホで何度「保存」を押しても
記録がどこにも残らない地獄の話を書きました。
パソコンでは動くのに、スマホでは消える。
写真を入れるとさらに保存できない。
正直、意味が分かりませんでした。
でも、ChatGPTに聞き続けるうちに、
ある言葉が出てきます。
「PHPをサーバーに置きましょう」
このときの私は、
PHPって何？
どこに置くの？
何のために？
完全にゼロの状態です。
でも言われた通りにやりました。
すると――
世界が変わりました。
それまでの私は「見た目だけのアプリ」を作っていた
ここで、初めて知ったことがあります。
Webアプリは4つでできている、ということ。
- HTML：見た目の骨組み
- CSS：デザイン
- JavaScript：ボタンを押したときの動き
- PHP：データを保存する役割
私が最初に作っていたのは、
①②③だけ。
だから、
入力できる
ボタンも押せる
見た目は完全にアプリ
なのに、
保存だけできなかった。
理由はシンプルで、
「保存する場所」が存在していなかったから。
PHPをサーバーに置く＝保存先を作るということだった
ChatGPTに言われた通り、
Xサーバーの中に
save.phpdata.json
というファイルを置きました。
たったこれだけです。
でも、これが決定的でした。
今までは、
スマホの中だけで動いていた処理が、
サーバーにデータを書き込むようになったんです。
つまり、
「その場だけの動き」から
「記録として残る動き」に変わった瞬間でした。
ここでひとつ、あとから気づいたことがあります。
PHPが書き込む data.json は、いわばアプリの「宝箱」でした。
でもこの宝箱、実はそのままだと
URLを知っている人なら、誰でも中身を見られる状態だったんです。
このときの私は、そこまで気が回っていませんでした。
後になって、.htaccess という「鍵」をかける方法を知ります。
この話は、別の記事で詳しく書きます。
保存を押したとき、裏で起きていること
保存ボタンを押すと、
JavaScriptが入力内容をまとめてsave.php に送ります。
PHPはそれを受け取って、data.json に書き込みます。
そして次に画面を開いたとき、
その data.json を読み込んで表示している。
これを知ったとき、
あ、だから今まで何も残らなかったんだ
と、やっと腑に落ちました。
スマホで保存できるようになった瞬間
PHPを置いて、コードを少し直して、
スマホで保存を押しました。
正直、半信半疑でした。
すると、
ちゃんと記録が残ったんです。
このとき、本気で声が出ました。
「うわ…できた……」
意味は分かっていないのに、
確実に「作れている実感」がありました。
この体験で分かったこと
Webアプリは、
見た目を作るだけではダメで、
保存する仕組みをサーバー側に作らないといけない。
このことを、身をもって知りました。
そして同時に思いました。
これ、初心者は絶対ハマるところだ…
だって、
画面はもうアプリなんです。
動くんです。
だから「完成した」と思ってしまう。
でも実は、
一番大事な「保存」がまだ無い。
ここが、最大の落とし穴でした。
次の記事では
「なぜスマホだけで保存できなかったのか」を書いていきます。
ここまで読んでくださってありがとうございます。ではまた「そらねこノート」で！
コメント