【初心者向け】エラーや修正沼状態、90％以上を予防・解決できる4つのポイント
エラー、修正不能の沼にハマりませんか？
HTML、CSS、JavaScript、WordPress……どの言語、CMSを使うにしろ、コードを書く時の一番の問題は「どこを直したら良いかわからない」状況に陥ることです。
例えばWordPressでコードに問題があると、ページもしくはサイト全体が見えなくなります。
画面が全部真っ白・エラー箇所が表示されないこともあるので、テンパった経験がある方が多いのではないでしょうか。
どこが悪いか見当がつかないと、まさに沼にハマった状態。
ここかなと思って直してもエラーが消えない、となったら地獄ですよね。私もWordPressのテーマを初めて作った時、ウンザリしすぎて最初から書き直した事があります。
エラーではないですが、初心者の方だとHTMLとCSSでも修正不能状態になってしまうことはあると思います。ちょっと直そうと思ってコードに触ったら、レイアウトが大幅に崩れたり、あるはずの要素が行方不明になったり。
スキルハブでも、よく以下のようなご質問（ご相談）を受けます。
ワードプレスで「重大なエラーが発生しました」と表示されます。 どこが悪いのかわかりません！
自分のデザインに合わせて変更していたら、ブラウザ表示が全体的に崩れてしまいました。どうしたら直りますか？
ご質問を頂けば「ここを直してください」と修正方法はご案内しますが、お仕事の場合は自力で解決しなくてはいけない事が大半。学習する場合は、一緒に自己解決力も向上させていくのが望ましいです。
実は、初心者の方が陥りやすいレイアウト崩れやエラーの多くは、自分で簡単に予防、もしくは原因発見と修正が可能なもの。WordPressのテーマ制作を例に、特別な知識やスキルがなくても、今すぐ実践できる４つの方法をご紹介します。
基本はこまめなプレビュー確認
エラー、修正不能状態に陥らないための基本はまめにプレビューを見ることです。
何を書いて（変更して）エラーになったかが分かれば、該当箇所の問題を探して直すだけ。チェック範囲が狭くて済み、集中力も途切れないのでスペルミスなども気付きやすいです。
テキストエディターやコードエディターの「元に戻す」で、エラーが出る前にもすぐ戻せます。どこが悪いか分からない時も、サイトは正常な状態に戻しておいて、余裕を持って問題の解決に取り組めるわけです。
WordPressでエラーが出やすいのは、PHP系の記述を書いたとき。
functions.phpを書いた、index.phpなどのテンプレートファイルでパラメーターや分岐を使ってカスタムした、なんて時が危ないタイミングです。一気に書き上げようとせず、1ファイル、もしくは1つのブロックを書いたタイミングでプレビューを確認するようにしましょう。
特に見チュートリアル、講座などはプレビュー確認を忘れがち。
コードを写すのに一生懸命でプレビューせず進めてしまい、気づいたときには「何が悪いかわからない」状態になってしまうケースも。スキルハブの講座では「プレビューを見てみましょう」というポイントを多く設けているので、一緒にチェックしてみてください。
フレームワークやCMSの公式チュートリアルなどでは、結構な量のコードを一挙に書いているものも珍しくありません。自発的にプレビューして確認しながら進めるだけでも、挫折率は結構下がると思います。
WordPressではプラグインにも注意
WordPressでのエラー、画面真っ白状態になってしまう原因にはプラグインもあります。
プラグインを有効化、もしくは更新したタイミングでも、エラーになっていないか確認すると良いです。
確認するのは、プラグインを使っているページ。
サイトの設定に関わるプラグインなど、どのページで確認して良いかわからない時は、トップページと記事ページを確認しておきましょう。
エラーが出た場合は、該当プラグインを無効化すればOK。
管理画面 > プラグインのページで、プラグイン名の下辺りに「無効化」があります。
管理画面まで真っ白になってしまった……という時は、直にWordPressのwp-content > pluginsを開いて、原因のプラグインのフォルダを探します。フォルダ名を変えるか、plugins以外の場所に移動させるとプラグインを停止できます。
どのプラグインが原因が見当がつかない、そもそもプラグインが原因かどうかわからない、という時は以下の手順でチェックしていきます。
- 一旦、全てのプラグインを停止する
- エラーが解除されたかを確認 （解除されない場合はプラグイン以外の原因を疑う）
- プラグインを1つ有効化して、エラーが出ないか確認する
- 次のプラグインを有効化...を繰り返す
エラーの原因であるプラグインはわかっても、自力で直せない場合は、同じような機能の別プラグインに切り替えてしまうのが確実。
更新によってエラーが出た場合は、ダウングレードして様子見しつつ使うことも出来ます。プラグイン自体に問題があれば、制作者の方が修正して更新してくれるでしょう。
エラーの原因特定・解決方法
編集前バックアップを取る
プレビューで確認しながら進めれば原因はすぐ分かる、と言っても、1行ずつプレビューしながら制作するわけにもいきません。大丈夫だろうとまとめて書いちゃったところに限って、上手くいかなかったりしますよね。
安全策として、編集前バックアップもとっておきましょう。
編集前にファイルをコピーして、編集前の状態で保管しておくだけです。
保管方法は人によって違いますが、下図のように日付別でフォルダを作るなどすると分かりやすいでしょう。
こうしておけば、最悪でも“その日、編集する前の状態”にまでは即座に戻せます。
デザインやコードの書き方を変えてみたけれど前のほうが良かった。でも、もう戻せないし……なんて事もなくなります。クライアントに「やっぱり前ので」なんて言われた時にも使えます。
コードを書くときだけではなく、サーバーにファイルをアップロードする時にもバックアップ必須。公開サイトだと「見られない」状態は致命的なので、上手くいかないときは即座に戻せるよう準備しましょう。
- サーバーにあるファイルをダウンロードして保管
- 新しいファイルをアップロードして上書き
- 表示確認
こうすることで、アップロード後に異変があった場合は、ダウンロードしたファイルを使ってすぐに元に戻せます。
また、デザインでも機能でも、大幅な変更がある時は全体のバックアップをとっておくことをお勧めします。Webサイトはページごとに独立しているわけではなく、色々な紐付きがあります。HTMLとCSSだけのサイトでも、CSSの書き方を変えたら別のページのレイアウトが崩れていた、という事はありますよね。
全体のバックアップがあったほうが復元もすぐでき、原因探しもしやすいです。
差分比較ツールを使って原因を探す
レイアウトが崩れた、エラーが出た時の原因特定・解決方法の基本は目視。
……なのですが、コードを延々見ていると時間もかかり、疲れてウンザリしてきますよね。
Diffツール (差分ツール)と呼ばれる、２つのテキストの差分をハイライトしてくれるツールを使うと、早く・楽に、アヤシイ部分を発見できます。特に、バックアップファイルがある、原形になっているデモコード（見本、チュートリアルのコード）がある場合に役立ちます。
インストール不要、Web上で無料で使えるものもありますよ。
https://www.oh-benri-tools.com/tools/programming/diff
機能はいたってシンプル。
右のテキストエリアと、左のテキストエリアで違っている部分をハイライト表示して教えてくれます。ファイルごとアップロードして比較もできます。
スペルが違う（文字が抜けている）のも一発でわかりますね。
下の例は、一見問題なさそうなコードですが、全角スペースが入っています。
スペルミスなどは、何回確認しても気付けない時は気付けません。
ゲシュタルト崩壊じゃないですけど、延々見ているとワケがわからなくなってきたりします。
そういう時は、Diffツール (差分ツール)でチェックすべき場所のヒントをもらうと良いです。
検索する
エラーの原因になっているコード部分は分かるけれど、何が悪いか分からない！というときは、そのコードで検索するのもありです。
そのまま、googleの検索バーに貼り付けちゃう。
数文字くらい間違っていても、似たワード、検索数の多いワードが出てくるので、間違いに気付きやすいです。もしかして機能で、正しいコードや直し方が表示されることもあります。
ただですね、独自の関数名や変数名が入っている場合は、よく分からないページが数個出てくる程度。上手くいきません。
Google検索以外に、Phindで調べたり、ChatGPTに聞いてみるのも良いですね。
(上級者向け）Git/Githubを使う
Gitとは、ファイルのバージョン管理が簡単にできるツールです。
上でご紹介したファイルのバックアップも、diffも、実はGitを使えばGitだけでできます。
Gitは便利なのですが、誰でも今すぐ使いこなせるものではありません。登録や設定がちょっと面倒だったり、コマンド入力で操作が必要だったりと、導入のハードルは少し高めの方法になります。
- HTMLのランディングページを数ページ作る
- 自分用のWordPressサイトのテーマを作っている
このくらいの作業なら、自分でコピペしてバックアップを取ったほうが早いです。
Gitを使えても、使わずに管理している人が多いのではないでしょうか。
Gitは複数人で作業をする場合や、エンジニアを目指す方には必修レベルで使われているツール。習得して損は無いでしょう。スキルハブではShopifyやRuby on Rails開発の講座で、Gitも合わせて学習していただいています。
公式動画を見て、まずはどんなツールかを把握するのもおすすめです。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
5月5日まで