WordPressで作った計算ツール。昨日まで動いていたのに、ボタンを押しても反応しない！
うちのブログでも、そんな事件が起きました。画面もボタンもちゃんと表示されているのに、肝心の計算だけできないんです。
今回は、AIの先生と一緒に調べて復旧した「038事件」の記録です。
結論！計算ボタンが動かないときに覚えること3つ
① 公開ページで確認する：シークレットモードでも試してみる。
② エラーを確認する：Chromeの「Console」に手がかりがあるかも。
③ コードは慌てて触らない：元のコードを保存してから原因を調べる。
うちの場合は、JavaScriptの一部が別の文字に変わっていました。
計算ボタンはあるのに結果が出ない！
うちが作っていたのは、家族の人数や日数を入力すると、水や食料などの備蓄量を計算してくれる「防災備蓄カウンター」。
以前はちゃんと動いていたんです。
ところが、久しぶりに確認してみると「計算する」を何度押しても無反応。買い物リストをコピーするボタンも動きません。
「えっ、なんで!?」
Chromeのシークレットモードでも確認しましたが、やっぱり動かない。
これは単なる画面の表示問題ではなさそうです。
ChromeのConsoleに赤いエラーが出ていた
ここからはAIの先生と調査開始です。
Chromeには「開発者ツール」という、Webページの不具合を調べる機能があります。
Windowsなら、次の順番で確認できます。
- 問題が起きている公開ページを開く。
- キーボードの「F12」を押し、「Console」を選ぶ。
- エラーの赤文字を確認して、スクリーンショットを残す。
うちの画面に出ていたのは、こんなエラーでした。
Uncaught SyntaxError: Invalid or unexpected token
簡単にいうと、プログラムの中に正しく読み取れない文字がある、という意味です。
うちはコードが読めないので、スクリーンショットや元のコードを先生に渡して、一緒に調べてもらいました。
原因を調べたら謎の「038」が出てきた！
調査を進めると、公開ページのJavaScriptに不思議な文字が見つかりました。
本来は、
&&
と書かれていた部分が、公開ページでは、
&&
になっていたんです。
「038って何なん!?」🤣
実は、この「038」はHTMLで使われる文字の表し方に関係しています。
ところが、JavaScriptの中で本来の記号がこの文字列に置き換わると、プログラムを正しく読み取れなくなることがあります。
うちのページで起きていたエラーも、これと一致していました。
修正版を全文コピペしたら復旧した！
ここは正直に書いておきます。
うちが自分で399行のコードを解析して、修正したわけではありません。
AIの先生が元のコードを確認し、修正版を全文作成。うちは、そのコードをWordPressのカスタムHTMLに丸ごと貼り替えました。
そして公開ページで再確認すると……。
計算できたー！🤣
買い物リストのコピーも復活。高齢者用と乳幼児用のおむつ計算も、ちゃんと動作を確認できました。
ただし、今回の修正はうちのページに合わせたものです。同じ症状でも、ほかのサイトにそのまま使えるとは限りません。
WordPressが原因だったの？
ここはまだ、はっきりしていません。公開ページのコードが変わっていたことは確認できましたが、いつ、どの処理で変わったのかまでは特定できませんでした。
WordPressの開発記録にも、似たような文字変換の問題が報告されています。
でも、それが今回の直接の原因だったとは断定できません。だからこそ、同じ症状が出たときは、いきなりコードを書き換えず、まずエラーを確認することが大切なんですね。
まとめ｜表示されているから動いているとは限らない
今回の038事件で、うちが一番驚いたのはここ。見た目は完成していても、中身が動いていないことがある。公開したときに動いていても、あとから不具合が起きることはあります。
計算ツールや便利なボタンをブログに置いているなら、ときどき自分でも押して確認してみてくださいね。うちみたいに、久しぶりに押して「なんで動かんの!?」とならないためにも🤣
WordPressやAIとの失敗談、ちょっと変わった実験も書いています。
ほかのトラブル解決・実験記録を見る
▶ ゾンビアイの掘り出し録 トップページへ
記事の出典候補
なお、今回の文字変換が発生した直接の原因は特定できていません。
コメント