【超大事】エラーの解決方法について

こんにちは
よっしーです。

今日の記事は
エラーの対処法について
解説していきます。

Web制作をしていると
1日は一回エラーで
立ち止まります。

エラーで立ち止まってる間は
「これ一生解決しないんじゃないか…」

となかなか解決せず
苦しい時間が続いてしまうことが
辞めたくなることよくあります。

最悪の場合
せっかく勇気を出して
行動し学習を始めたのに

「私には無理だ…」と
学習を放棄してしまうという
ことになってしまいます。

この記事を読むと
エラーが起きても自分で
対処ができるようになります。

そして、学習時間を
最大限有効活用できる
ようになります。

目次

1. VSCodeの拡張機能を使おう
2. mdnを確認してイメージを掴もう！
3. 【必殺！】比較ツールを使おう！
4. まとめ

それでは、
エラーの対処法について
みていきましょう！

1. VSCodeの拡張機能を使おう

まず最初にやっておきたいのが、
「コードの整形」です。

HTMLやCSSなどの
マークアップ言語では、

タグの開始と終了が
しっかり対応していないと、
正常に表示されません。

でも、初心者のうちはタグが増えると
どこがどのタグに対応しているのか
よく分からなくなります。

そこでおすすめしたいのが、
VSCodeの拡張機能「Prettier」です。

これは、ショートカットひとつで
コードを自動で綺麗に整形してくれる
便利なツールです。

Macなら：Shift + Option + F
Windowsなら：Shift + Alt + F
で整形することができます。

このように簡単に整形できるため、
「あれ？なんかタグの閉じ方が変かも？」と、
見た目の違和感にすぐ気づけるようになります。

エラーが出た時って、
「そもそもコードが見づらくて
どこが間違っているのか分からない…」
という状態になることが多いです。

でもPrettierを使って整形すると、
インデント（字下げ）も揃って
構造が明確になるので、
ミスが格段に見つけやすくなります。

特にタグの入れ子（ネスト）が
深くなってくると、手動で整えるのは大変なので、
ぜひ最初のうちから習慣にしておきましょう。

2. mdnを確認してイメージを掴もう！

次に大事なのが、
「分からないことは必ず調べる」という
習慣をつけることです。

「このコード何だっけ？」
「書き方これで合ってるの？」と思ったら
迷わず検索して調べましょう。

その時におすすめしたいのが、
mdn Web Docsです。

mdnはMozillaが運営する
開発者向けのドキュメントサイトで、
初心者にも分かりやすく、
信頼性も高い情報が掲載されています。

しかも、実際にブラウザで動かして
試せるデモコードも豊富！

たとえば、「display: flex ってなんだっけ？」と
悩んだ時、mdnで調べれば

• そのプロパティの意味
• どういう場面で使うのか
• 各値の違い（flex-start, space-betweenなど）
• コードのサンプルと動きの確認

これらをすべて見ることができます。

つまり、「ただ暗記する」のではなく、
「理解しながら身につける」ことができるのです。

AIを使えば答えが出る時代。
「なんとなくコピペ」から一歩進んで、

調べながら「このコードの意味はなんなのか」
まで理解することで、エラーにも強くなれます。

3. 【必殺！】比較ツールを使おう！

それでも解決しないときに
使いたいのが、「コード比較ツール」です。

これを使うことで、「なぜ動かないのか」が
一瞬でわかることもあります。

おすすめなのは、「Mergely」
という無料のオンラインツールです。
（https://www.mergely.com）

使い方はとてもシンプルです。

1. 左側に自分のコードを貼る
2. 右側に見本コード（教材や解答例など）を貼る
3. 違いがハイライトされる！

これだけで、
「あっ！</div>が1個足りなかった！」とか、
「全角スペースが混ざってた！」など、

自分では気づきにくいミスを
瞬時に見つけることができます。

特に最初は、ほんの1文字の
違いでも気づくことが難しく
解決に時間がかかります。

自分で気づくのって
本当に難しいんですよね…。

そんな時にこの比較ツールを
使えば、「見本通りに書いたはずなのに
動かない…」というストレスから解放されます。

原因が分かれば、直すのは簡単。
問題は「原因に気づけるかどうか」なんです。

まとめ

ここまで「エラーへの対処法」を
3つ紹介しましたが、
最後に伝えたいことがあります。

それは、エラーは
「あなたが成長している証拠」だということです。

学習を始めたばかりの頃は、
何をしてもすぐにエラーが出てしまい、
思うように進みません。

「このままじゃ一生できるように
ならないんじゃないか…」と
不安になることもあると思います。

でも、
今Web制作を仕事にしている人たちも、
みんな最初は同じ気持ちでした。

むしろ、何度もエラーを経験した人ほど、
「どうすれば早く解決できるか」が身について、
最前線で活躍しています。

今回紹介した方法は、
どれも今日からすぐに使えるものです。

• コードを整えてミスに気づく（Prettier）
• 正しい情報を調べて理解する（mdn）
• 見本と見比べて原因を発見する（Mergely）

これらを習慣化すれば、
エラーに強くなっていきます。

そして、あなたの学習効率も、
どんどん上がっていきます。

最後にエラーが出ても
絶対に解決します、
大丈夫です。

焦らず、落ち着いて、
今回の3ステップで
対処していきましょう！

あなたの努力は、必ず力になります。

この記事が少しでも役に立ったら、
ぜひ感想を送ってくださいね！

これからもみなさんの支えになるような
発信をしていきますので
よろしくおねがいします！

あなたの一歩を、心から応援しています。

よっしー