ゲームを公開した。
自分のPCでは動く。GitHubにも修正版が入っている。デプロイも成功している。
なのに、スマホで開くと動かない。
しかもAnalyticsに残っていたエラーは、
SyntaxError: Unexpected token '<'
だった。
「<」？ JavaScriptを書いていたはずなのに、なぜ突然HTMLみたいな記号が出てくるのか。
個人でWebゲームを作っていると、コードを書く時間より、こういう「何が起きているのか分からない時間」の方が長いことがある。
今回は、私が制作しているWebゲーム「ORA Quest」で実際にこのエラーに遭遇し、何を疑うべきなのかを学んだ話を書く。
「<」は犯人ではなかった
最初はJavaScriptの文法ミスだと思った。
どこかに変な記号を入れたのか。JSONが壊れたのか。翻訳ファイルのカンマが抜けたのか。
でも、問題はそこではなかった。
Unexpected token '<' が出たとき、本当に見るべきなのは、JavaScriptやJSONを取りに行ったのに、サーバーからHTMLが返ってきていないかだった。
たとえばブラウザが game.js を読み込もうとしているとする。当然、中身はJavaScriptだと思って読み始める。
ところが実際に返ってきたものが <!DOCTYPE html> から始まるエラーページだったらどうなるか。
JavaScriptとしては、最初の < の時点で意味不明になる。そこで Unexpected token '<' になる。
つまり「<がおかしい」のではない。そもそも違うファイルを食わされている。
これを理解した瞬間、エラーの見え方がかなり変わった。
厄介なのは「全員壊れる」とは限らないこと
ORA Questでは、もっと面倒だった。
全員が遊べないわけではない。PCでは動く。あるスマホでも動く。でも別のスマホや、SNSアプリ内のブラウザでは失敗する。
これが一番つらい。
自分で確認すると正常だから、「もう直ったかな」と思ってしまう。
でも、実際のユーザー側ではまだ壊れている。
こういうとき私は以前、
コードを直す → デプロイする → 自分のPCで開く → 動いた → 終了
という確認をしていた。
今考えると、それでは足りなかった。
私が今なら最初に確認する5つ
- エラーになったJS・JSONのURLを直接開く
- 本当にJavaScriptやJSONが返っているか確認する
- 404ページやWordPressのHTMLが返っていないか見る
- GitHub上のファイルと本番サーバーのファイルが一致しているか確認する
- キャッシュを消した別端末・別ブラウザでも確認する
特に重要なのが1番目。
エラー画面だけ見てコードを直し続けるより、「そのURLは実際に何を返しているのか」を先に見る。
これだけで、無駄な修正をかなり減らせる。
GitHubが正しくても、本番が正しいとは限らない
これも今回かなり痛感した。
GitHubに正しいコードがある。だから安心していた。
でも、GitHubの状態と、ユーザーが実際に受け取るファイルは別物だった。
その間には、GitHub Actions、サーバーへの転送、WordPress、キャッシュ、ブラウザキャッシュ、SNSアプリ内ブラウザなど、いくつもの層がある。
どこか一つで古いものが残れば、「コードは直したのに、ユーザーには直っていない」が起きる。
今は、本番URLで、実際のユーザーと同じ条件で動くところまでが修正だと考えている。
エラーを消すより「次に分かるようにする」
以前の私は、エラーが出ると「とにかく直したい」と思っていた。
でも原因が分からない状態で修正を繰り返すと、たまたま直っても次にまた困る。
だから最近は、次に同じことが起きたとき、原因を特定できる情報を残すことも修正の一部だと考えている。
どのファイルで起きたのか。どのURLを読もうとしたのか。どの環境だったのか。どのバージョンだったのか。
こういう情報が残っていれば、「また出た」ではなく、「前回と同じ原因か、別の原因か」を判断できる。
個人開発は「作る」より「何が起きているか分かる」に時間がかかる
プログラミングを始める前は、ゲーム開発というのはキャラクターを作る、物語を書く、プログラムを書く、そういう作業だと思っていた。
実際には、「なぜこの端末だけ動かない？」「なぜ昨日のJavaScriptが出てくる？」「なぜJSONのURLからHTMLが返ってくる？」みたいな時間がかなり長い。
でも、その一つ一つを理解すると、次に作れるものの範囲が少し広がる。
今回の Unexpected token '<' も、ただのエラーではなく、Webアプリでは「自分が書いたコード」と「ユーザーに届いているもの」が同じとは限らないということを教えてくれた。
もしこの記事のエラーで困っているなら、まずコードを書き直す前に、問題のJSやJSONのURLを直接開いてみてほしい。
そこにJavaScriptではなくHTMLが表示されたら、かなり大きな手がかりになる。
そして、こういう失敗の積み重ねから実際に作っているものが気になった人は、ORA Questの無料体験版も遊べます。
コメント