【弊社向け】Webサイト制作あるあるトラブルシューティング【簡易版】

こんにちは、フロントエンドエンジニアの関根です。
HTML+CSS+JS(たまにPHP/WP)を用いたWebサイト制作を担当しております。

今回、社内向けTipsも兼ねてトラブルシューティング的コンテンツを書いてほしい、という依頼をいただきました。
というわけで、社内でWebサイト制作をしているときによくあるトラブルに絞って事例と解決策を書いていこうと思います。

最初に結論：だいたい全てが解決する魔法の呪文

Command(Ctrl) + Shift + R
または、Shiftキーを押しながら更新ボタンを押す

これです。これしかない。
普段使いもできる魔法の呪文です。おかしいなと思ったらだいたいこれでなんとかなります。
何をしているかというと、ブラウザに残ったキャッシュ（高速化のためにブラウザが保存してくれているWebサイトのデータ）を削除してページを更新しています。
キャッシュ、普段はとても便利なのですが、サイト制作では次々とデータを更新していく関係上、数分前のデータが邪魔になることはよくあります。
というわけで、このコマンドでよくお掃除をして常に綺麗な状態でサイトを確認するというわけです。
偏見ですが、Webトラブルの8〜9割もこれで解決すると思ってます。

問題は解決しましたか？　してない？
そうですか……(絶望)。では、下記に進んでください。

レイアウトが崩れている

レスポンシブサイトを作っているときにありがちです。
レスポンシブと言いつつ、画面幅に合わせて切り替わるギリギリのラインなどでよく起きます……。
最近は画面幅で切り替えるメディアクエリ以外にも、コンテンツ幅で判断するコンテナクエリという選択肢もあります。
各コンテンツごと柔軟に対応できるため、取り入れることで解決できる場合もあります。

え、そんなレベルじゃない？
なんだと……(驚愕)。では、下記に進んでください。

コンテンツが途中から消えている

PHP/WordPressを使用している場合に起きがちです。
Includeするファイルのパス指定をミスってるとか、よくやらかします。フォルダ構成には気をつけよう！
あとはJavaScriptの記述ミスもありそうです。この場合は、エディタ側で簡易なコードレビューをしてくれるように拡張機能を入れておくと事故が防げる……こともあります。
ファイル名のタイプミスは自分で気をつけるしかないので頑張ろう(n敗)！

おや、レイアウトやコンテンツではないトラブル？
なるほど……(沈思)。では、こういうやつでしょうか？

文字化けが起きている

Webフォントを利用した場合に起こる可能性があります。
特に日本語フォントはデータが重くなりがちのため、軽量化のために対応フォントを絞るサブセット化を行うのですが、常用外の漢字をよく使う文章が含まれていると、サブセット化して切り捨てた字がそこに含まれている場合があり、文字化けの原因になることがあります。
あとは文字コードの設定ミス要因も昔はよくありました。最近はあまり見かけないですが古いサイトのリニューアル時には注意が必要かもしれません。

なに、そもそもページが重すぎて見られない？
そ、それはもっと早く言ってください(狼狽)！

ページ／サイトが重い

WordPressが複数入っている、JavaScriptがページスクロール等でしょっちゅう反応する、リダイレクトが頻繁に発生する、など、原因は様々です。サーバが古すぎるとかも。
フロントエンドの小手先で解決する程度ならいいのですが、サイト構成から見直しが必要な場合も……。こうならないためにもサイトの設計と運用は丁寧に行う必要があります。

おまけ：番号が出てくるタイプのエラー

404エラー

アクセスしたページが存在しないときに表示されるエラー番号です。
リンク指定のミスがだいたい、あとはサーバ内のファイルを誤って消したとか移動させたとかリネームしたとか……。
どうでもいいですが某ドラマで誇らしげに404エラーを見せてくるシーンがあったときには戦慄しました。節子、それサイトが人気で落ちとるんやない、サイトごと消えとるんや！

503エラー

アクセス集中によりサーバの同時接続数を超えた場合に表示されるエラー番号です（某ドラマで誇らしげに見せるなら本当はこっち）。
ECサイトのセール時やポータルサイトなどでの新情報発表時など、アクセス数の増加が予想される場合は、一時的にサーバを増強して対策します。これができるかどうかはサーバの管理状況によります。

500エラー

「原因不明だけどとにかくエラーが起きているからサイトが見られないよ」という場合に表示されるエラー番号です。私のようなへっぽこエンジニアが一番絶望するやつです。
とはいえ、多くはPHP周りの記述ミスが原因です。WordPress関係で起こることも多いです。
エラーログが遡れるならそこから原因を割り出すこともあります。

トラブルは解決したでしょうか？　今回は社内製のサイトでよくあるようなものをピックアップしてみました。多くの問題はこれで解決する……はず！
もちろんエラーが起きないように制作していくのが一番なので、今後とも腕を磨いていかねばという次第です。
いつもライバルは数ヶ月前にコードを書いた自分！
それではまた！