見出し画像

【プログラミング学習法】エラーが起きたときの解消方法（例で説明します）

wtnb_dev

こんにちは、ワタナベ（wtnb_dev）です。

プログラミングの学習においては、「文法の理解」のほかに、エラーが発生した際の解消方法（要は考え方）も重要になってきます。

私自身、趣味で色々な方にプログラミングを教える機会がありますが、その中でよく感じるのが、「いくら基本文法を教えても、考え方自体が身につかないと成長は遅い」というものです。

そこで今回、１つのエラー例を取り上げて、それを解消するまでの考え方を解説します。

対象読者

・プログラミング初学者
・エラーがでるたびに躓いてしまう方

今回取り上げる例

以前、メンター中に実際にご質問いただいた内容を例として取り上げます。（内容は少し変えてます）

「エラー時」という風に書きましたが、今回取り上げる例はエラー自体は発生していません。ただ、「うまく動かない」という意味で、エラーとしています。

内容は以下。

HTMLとCSSを使って、赤文字にしたい文章が、赤色にならない。

キャプチャ1

実際のHTMLとCSSは以下。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div　class="red">
   赤色で表示する文言
 </div>
</body>
</html>

style.css

.red {
 color: red;
}

とても簡単なHTMLとCSSの例ですね。しかしうまく赤色で表示されない。

なぜでしょうか？

問題が発生したときは確実に動くものを作って、どこが悪いのか順にみていくのが良い

これが大事な考え方になります。

今回の例はコードが少ないのでまだマシですが、大規模なシステムになってくると、どこでエラーが発生しているのか、コードを見るだけでは判断が難しいです。

そこでまずは、確実に動くものを自分で作ってみて、少しずつ解析を進めていく方法がおススメです。

実際にやってみよう

今回の例で実際にやってみます。

Step. 1

まずは、赤文字を表示するために、以下のプロトタイプを作ってみます。

<body>
 <div style="color: red;">
   赤色で表示する文言
 </div>
</body>

キャプチャ2

これはちゃんと赤文字で表示されました。

つまり、

・divタグに「color: red;」のスタイルを適用すれば、その中の文字列が赤くなるのは間違いない

ということが判明します。

Step.2 

では次に、「color: red;」の部分をCSSファイルに切り出してみましょう。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="red">
   赤色で表示する文言
 </div>
</body>
</html>

style.css

.red {
 color: red;
}

キャプチャ3

だいぶ最初のコードに近づいてきましたね。これもちゃんと赤文字で表示されます。

つまり、

・cssファイルの読み込み方は間違っていない

ということも判明します。

Step. 3 

ここまでで、

・「color: red;」の指定方法は間違っていない
・cssファイルの読み込み方も間違っていない

ということが判明しました。

では後は何が残っているでしょうか？

そうですね。CSSが間違っていないということは、残るはHTMLが間違っている可能性が高いです。

なので、問題のHTMLと、Step. 2で示した正しく動いたHTMLを見比べてみましょう。

問題のHTML

 <div　class="red">
   赤色で表示する文言
 </div>

Step. 2で正しく動いたHTML

 <div class="red">
   赤色で表示する文言
 </div>

よく見ると、問題のHTMLは、classの前が全角スペースになっているという差異があることに気づきます。

ではこれをStep. 2と同じように、半角スペースにして再度動かしてみましょう。正しく赤文字で表示されるはずです。

まとめ

今回の例は簡単なものでしたので、「そんな面倒なことしなくてもすぐ気づけるよ」って思う方も多いかもしれません。

ただ、より大きなシステム開発などでは、この「確実に動くものを作って、どこが悪いのか順にみていく」という考え方は役に立つことが多いです。

ぜひ、エラーが出るたびに自分で解決できずに困っている方は、いきなりメンターに聞く前に、試してみてはいかがでしょう？

おわり！

この記事が気に入ったらサポートをしてみませんか？