💊

エラーが起こったときの具体的な対処法をまとめてみた【コーディング・プログラミング】

2021/02/27に公開

初心者

プログラミングやコーディングで必ずと言っていいほど起こるエラーや動かない謎の現象。

私もまだまだ駆け出しのWEBデザイナーではありますが、かなりエラー起こしてきました。ただ、その中でこうやって対処したらいいんじゃ？を体系的にまとめたいなと思い、初めてZennを書いていきます。

ということで、今回はエラーが起こったときの対処法について自分なりにまとめてみました。エラーが起こった時にどこからどう確認していくかをざっと書いています。こんなのもあるよ！みたいなのがあれば気軽に教えていただけると幸いです。

エラーが起こったときの対処法10ステップ

コーディング漏れや抜けが無いか確認する

全角スペースがないか確認する

スペルミスがないか確認する

エラーメッセージから原因を突き止める

ググってみる

差分を確認する

どこから動いていないか確認する

該当箇所以外消してみる

最初からやり直す

すごい人に聞く

それでは1つ1つ書いていきます。

コーディング漏れや抜けが無いか確認する

まず最初にそもそも変数を定義しているか、CDNを呼べているか確認しましょう。
独学や個人開発だと少ないんですけど、チーム開発ではたまに起こる印象です。

特に他のページからコードを拝借してきた場合。PHPの変数宣言が抜けていたり、jQueryなどのCDN呼び出しが抜けていたり。ディベロッパーツールを使ってどこが通っていてどこが通っていないか確認しましょう。

全角スペースがないか確認する

HTMLなどのマークアップ言語では少ないけど、JavaScriptなどの場合は全角スペースがないか確認します。

これはちょっと極端ですが、1行目の＝の前部分ですね。

const foo 　= "hello" + "wanko!";
console.log(foo);

正直、ここはエディタの設定とかで全角か半角かわかるような初期設定をしておけばなかなか無いかなと。

ただ、それでもたまに起こるので序盤に確認しておきましょう。

スペルミスが無いか確認する

変数も定義している、全角スペースも無い、という状態なら、スペルミスが無いか確認していきましょう。ここもエディタの補完機能で大体わかるんですが、変数などを頻繁に使っている場合は要注意です。

こんな具合に変数を間違ってるパターンですね。

const foo = "hello" + "wanko!";
console.log(fooo);

SCSSやJavaScriptやPHPの場合は特に変数でのスペルミスが起こるので、検索コマンドでズレが無いか確認しましょう。

エラーメッセージから原因を突き止める

基本的な記入でエラーが起こっていない様子であれば、エラーメッセージに目を通していきましょう。エラーメッセージって英語でとっつきにくい印象がありますが、意外とかんたんで読みやすいです。

例えば、以下のようなエラーメッセージ。

foo is not defined

この場合、「fooって変数は定義してへんで。」ということ。なので変数の定義か宣言あたりで間違っているなとわかります。

ググってみる

エラー内容がわからない、エラーメッセージが見当違い、という場合はググります。

大体、使っている言語やフレームワーク＋エラー内容で調べます。「Swiper.js スライドしない」「SCSS コンパイルエラー」とか。

teratailで質問されていたり、誰かがブログやQiita、Zennでまとめていることもあるので、それを参照してエラーを対処していきましょう。

差分を確認する

ググってもよくわからない場合は、現在のファイルと編集前のファイルを比較してみましょう。
GitHubやdiffコマンドを使って差分を比較して何かしら変な修正をしてしまっていないか確認すると意外とエラーが見つかることもあります。

どこから動いていないか確認する

前のファイルと比較しても微妙なときは、どこから動いていないか段階的にチェックしていきましょう。

JavaScriptならconsole.log()をいろいろなところに入れてディベロッパーツールで動作しているか確認します。どこは動いていて、どこが動いていないか、どこから通っていないか、などを確認してエラーが起こっている箇所を特定していきましょう。

該当箇所以外消してみる

console.logでもエラーの原因がわからないなら、動いて欲しいところ以外をコメントアウトしてみましょう。 コメントアウトして動いている部分から徐々に広げていくと原因が掴めるようになります。

もしくは、動いていない箇所だけコメントアウトして、他の場所に原因が無いか考えてみるのもおすすめ。

最初からやり直す

コメントアウトしまくっても無理なら最初からやり直します。（私はこの行為を勝手にリセマラと呼んでいます。）

決してゼロからまたコードを書くというわけじゃなくて、別のファイルを作成してエラーが起こっている部分だけで動かしたり、正常の部分だけをつなぎ合わせて確認したり。該当箇所以外全部消すというさきほどのやり方の上位互換的手法。

一見コメントアウトするやり方と違いが無いように思いますが、意外とこれで普通に動くみたいなことはあります。なぜかわからんけど。

すごい人に聞く

それでもわからん！！という場合は、すごい人に聞きましょう。職場の上司や技術コミュニティのすごい人や、teratailなどで質問します。

ただ、むやみに「わかりません！」って質問しても意味がありません。どうしたくてどう困っているかを明確にして質問していきましょう。

自分なりの質問の型としては、以下の感じです。

【質問】困っていること

やろうとしていること

エラー内容（実行したコマンドやエラーログ含む）

わからないこと、困っていること

まず、チャットでいきなりエラー内容を書かれても、相手はこの内容が相談なのか依頼なのか質問なのかわかりません。なので、最初に要件として【質問】と表記して困っていることを書きましょう。

そして、どういうことをしようとしているか、しかしどうなってしまったのかを具体的なコードや動きがわかるように書いていきましょう。

それを踏まえて、自分なりに

考えたこと

試したこと

も付け加えるとよりわかりやすいかなと。

ちなみに、困っていることについても大きく2種類あって、

原因がわからない
解決方法がわからない

のどちらか。
さらに細分化すると、

原因がわからない

エラー内容の意味がわからない

エラーがどこで起こっているかわからない

解決方法がわからない

アプローチ方法がわからない

具体的なコードがわからない

という具合。
なので、自分が困っているときはこのうちのどれに当たるのかを伝えると回答者的にもわかりやすいです。質問する際に心がけてみるとおすすめ。

最後に

ということで長くなりましたが、エラーが起こったときの対処法10ステップでした。まとめると以下の通り。