作業していたら、画面が赤くなりました。英語がずらずらと並んでいます。
その瞬間、頭のなかが真っ白になって、とりあえず全部コピーしてAIに投げる。あるいは、そっとタブを閉じる。
これは能力の問題ではありません。読み方を教わっていないだけです。
エラーメッセージには決まった型があります。型を知ってしまえば、英語が読めなくても"どこを見ればいいか"は分かります。この講を終えると、赤い画面を見たときの最初の3秒が変わります。
エラーメッセージは、診断書だと思ってください。
病院でもらう診断書は、素人には難しい言葉が並んでいます。でも、書いてあることは結局この3つです。
エラーメッセージもまったく同じ構造をしています。順番も、だいたい決まっています。
読む順番にもコツがあります。上から順に読まないでください。
見るのは、まず"最初の1~2行"と、"自分のファイル名が出ている行"の2箇所だけです。
なぜかというと、長いエラーの大半は、自分が書いていない部品の内部の話だからです。10行目から40行目まで、知らないフォルダ名がずらずら並んでいることがありますが、そこは基本的に通り道であって、事故現場ではありません。事故現場は、たいてい"自分のファイル名が最後に出てくるところ"です。
もうひとつ、覚えておくと世界が変わる区別があります。
赤い画面を見たら、まずこの5つのどれかに仕分けする。それだけで、次にやることが変わります。書き方の間違い系なら自分の直近の編集を疑い、権限系なら鍵と期限を疑う。当てずっぽうが減ります。
最後に、逆のケースにも触れておきます。赤い画面より本当は厄介なのが、"エラーが出ないのに、思ったとおりに動かない"ほうです。診断書が出ないのだから、読みようがない。そのときはログ(第11講)と切り分け(第12講)の出番になります。エラーが出てくれるのは、実はありがたい状態なのだと覚えておいてください。
これは"わざと壊す"演習です。第0講で作った自分の一枚(実物がある人は、その中のHTMLファイル1枚)をフォルダごとコピーして、壊していい複製を用意してから行ってください。本格的な"戻せる仕組み"は第13講でやるので、いまは手動コピーで十分です。
まず、HTMLが読み込んでいるファイル名をわざと間違えます。たとえば style.css を styles.css に書き換える。
保存してブラウザで開き、開発者ツールのConsole(コンソール)タブを見てください。
赤い行が出ているはずです。そこにファイル名と、404という数字が見えます。「探しに行ったが、無かった」という報告です。
次に、JavaScriptの適当な行で、閉じカッコをひとつ消してみてください。今度は違う種類のエラーが出ます。「書き方として成立していない」という報告です。
この2つを見比べてください。同じ"赤"でも、言っていることが全然違うのが分かるはずです。
自分で壊した直後なので、原因を100パーセント知った状態でエラーを読める。これがいちばん効率のいい練習です。実戦では原因が分からない状態で読むことになるので、"答えを知っている状態で読む"経験を先に積んでおきます。
エラーは全文を貼るのが基本です。ただし、貼る前に10秒だけ確認を。エラー文には、ファイルの置き場所や、接続用の文字列(データベースの住所と鍵が一体になったもの)が混ざることがあります。鍵やパスワードらしきものが見えたら、そこだけ伏せ字にしてから貼ってください。この話は第14講で本格的にやります。
3つ目は、長いエラーで消耗しないための質問です。「どこを見なくていいか」を先に確定させると、読む量が一気に減ります。
エラー文をそのまま検索して、上位に出てきた解決策をコピーして貼ること。
これがいちばんやってはいけません。理由は2つあります。
1つ目。同じエラー文でも、原因はまったく別のことがあります。「ファイルが見つかりません」は、打ち間違いでも、置き場所の違いでも、権限の問題でも出ます。他人の解決策は、他人の原因に対する処方です。
2つ目。効いたかどうか分からないまま次の対処を重ねると、元の状態に戻れなくなります。エラーが1つだったのが、3つに増えます。
ルールをひとつだけ決めてください。直すのは一度に1箇所。直したら必ず確認する。効かなかったら元に戻してから次を試す。
急いでいるときほど、これを守ると速く終わります。