駆け出しフロントエンドエンジニアのためのエラーとの向き合い方

エラー解決はとても奥深いものです。

本当は問題の切り分け等の解決プロセスを踏む必要がありますが、
それらはある程度経験を積んでこそ分かることです。

ですので、初心者向けの本記事ではエラー解決の初歩の初歩として、
『ターミナルでのエラー』 と、『HTML/CSSとJSを書いているときのエラー』 について基本的なことを書きます。

ターミナルでのエラー

ターミナルに苦手意識を持っているフロントエンドエンジニアは少なくないと思います。
でも大丈夫、ちゃんとコツを押さえれば怖くありません。

まずじっくりエラー文を読む

『英語で書かれているから無理』とか言ってたらエンジニアやっていけません。
翻訳しながらでもエラー文を読みましょう。

エラー文には原因や解決策（「このコマンド打て！」的な助言）が書いてあることがほとんどです。
エラーが大量に出ている場合は、最初に赤文字で ERR! と書いている行から読み進めていくと良いでしょう。

まずは読む。それでも分からなかったら次です。

エラー文でググる

王道プロセス。
世界には情報が溢れています。ググりましょう。

エラー文そのままコピペしてググっても、結構答えは見つかります。
『〇〇というエラーが出たときの対処法』みたいな記事がたくさんヒットします。

もし、そのままコピペではダメだった場合、
『vue npm run dev エラー』 のようにシチュエーションでググるとGOODです。

HTML/CSSを書いているときのエラー

HTMLとCSSが効かない場合は、具体的にエラーは出ないですが一応デバッグの方法を紹介します。

ChromeのElementsタブを見る

該当ページをChromeで開き、右クリックで『検証』→タブでElementsを選択です。

HTMLの入れ子がおかしかったり、
CSSが上書きされていて効いていなかったりするのに気づくでしょう。

上記のスクショでは、 .top h1+p span で指定している color: #526a81 が効いていないですね。また、該当ファイル（Top.vue）と該当行（275行目）も示されています。

エディタ上では分からないことも、
Elementsタブを開けば実際にブラウザ上でどう解釈されているかが分かります。

JSを書いているときのエラー

では、『JSを書いてそれが動かないときのエラー』について見ていきます。
ほとんどの場合、JSはちゃんとエラーが出ます。

Chromeのconsoleタブを見る

ほぼ9割はこれで解決。
エラーに時間を取られすぎてしまう駆け出しの方はまずConsoleタブを開きましょう。

方法は簡単。
該当ページをChromeで開き、右クリックで『検証』→タブでconsoleを選択です。
（HTML/CSSのデバッグでElements開いたときと一緒です。）

こちらも、エラーの具体的な内容と該当する行、ファイルが記されています。

上記のスクショでは、『about.html』の『11行目』で『$は定義されていません』というエラーが出ています。
about.htmlを開いて、11行目を見れば、jQueryの記述があり、jQuery本体の読み込み忘れであることがわかります。

まとめ

何時間も解決しないときって、実はただエラーをじっくり読んでいなかったり、
ググらずに考え込んだりしている場合が多かったりするんですよね。

エラーが出ると気持ちが滅入るし、すぐ誰かに聞きたくなる気持ちはわかりますが、
まずはちゃんと上記のプロセスを踏みましょう。
基礎の基礎を押さえることが大事です。

それでも分からなかったらメンター的な立場の人に聞きましょう。