プログラミングでエラーが起きた時、解決するための4つの手順(*'ω'*)

f:id:CONPURO:20201013071832j:plain

みなさんこんにちは(*'▽')
みなさんはプログラミングをやっているときにエラーが出てきたときに
イラっとしませんか( ゚Д゚)
この記事を書いた人も、エラーが出てくると少しイラっとします(;^ω^)


なので今回はプログラミングでエラーが起きた時の解決方法を4つの手順で解説していきます。(*´ω`)


この記事を読めばエラーが起きた時のイラっとした感じが減ります(;^ω^)


この記事を書いた人はプログラミング歴5ヶ月です。
まだまだ未熟ですが頑張ります(*'ω'*)


目次

 


プログラミングでエラーが起きた時、
解決するための4つの手順


プログラミングでエラーが起きた時の解決するための手順は次の4つです。

 

  1. エラーが起きている場所を確認する
  2. コードのスペルミスがないか確認する
  3. ;や{}の付け忘れがないか確認する
  4. 変数の定義し忘れがないか確認する

 

それぞれ解説していきます(*´ω`)

 

 

1.エラーが起きている場所を確認する

 


最初に、エラーが起きている場所を確認します!(^^)!
なぜ確認しないといけないかというと、エラーが起きている場所を確認しないとこの後の手順が面倒くさくなるからです。この記事をよく読めばわかると思います。


具体的にはデベロッパーツールを言うものを使ってエラーが起きている場所を確認します。手順は次の3つです。

 

  1. ブラウザでF12キーを押してデベロッパーツールを開く
  2. コンソールを開いて、エラー文を確認する
  3. ソースを開いて赤線が引かれているところを確認する


それぞれ解説していきます(*´ω`)


1.ブラウザでF12キーを押してデベロッパーツールを開く


まずブラウザを開いて、パソコンのキーボードの数字キーよりもさらに上のほうにあるF12と書かれたキーを押してください!(^^)!


そうするとデベロッパーツールが開きます。


実際の画面はこんな感じです。この記事を書いた人はGoogle Chromeというブラウザを使っていますが他のブラウザでも同じような画面が開くと思います。

f:id:CONPURO:20201013164950p:plain



ちなみにF12キーを押さなくても、マウスを右クリックしてメニューを開き、そこの検証というところをクリックしてもデベロッパーツールは開きます。


しかしF12キーを押した方が簡単なのでF12キーを押して開くことをおすすめします


2.コンソールを開いて、エラー文を確認する


次にデベロッパーツールのコンソールというところを開きます!(^^)!
開き方は、デベロッパーツールのコンソールと書かれているところをクリックするだけです。GoogleChromeの場合はConsoleと書かれています。
実際の画面はこんな感じです。

f:id:CONPURO:20201013165059p:plain
ここにはエラーが起きている場所も書かれていますが、それよりもエラー文を軽く読んでおきましょう。


エラー文というのはエラーの原因が書いてある文です。
赤い文字で書かれているところがエラー文です。  
エラー文は英語で書かれています。


だったらエラー文を翻訳して、どうしてエラーが起きているのか理解してエラーを直せばいいんじゃないの(; ・`д・´)と思うかもしれません。


しかしエラー文は、回りくどい言い方でエラーの原因が書いてあります。とても分かりづらいです。それよりかはこの後紹介する手順のほうがいいと思います。


ではなぜ回りくどい言い方をしているエラー文を読んでおく必要があるのでしょうか?理由は次の2つです。

 

  • この後の手順に必要だから
  • エラーにすぐに対処できるようにするため


詳しくはこの記事の後半で解説します。
とりあえず、エラー文に軽く目を通しておきましょう(^▽^;)


3.ソースを開いて他と違うところを確認する


次にデベロッパーツールのソースのというところを開きます!(^^)!
開き方はさっきと同じような感じでデベロッパーツールのソースと書かれているところをクリックするだけです。コンソールの右にソースがあります。


開いてみると、コードが表示されます。エラーが起きているとコードのどこかにマークみたいなものが付いていると思います。
そこがエラーが起きている場所です。
具体的にはこんな感じです。

f:id:CONPURO:20201013165704p:plain

今回はエラーが起きているところの背景の色が薄いピンク色になっていて、
文の先頭に赤い丸のマークがあります。そこがエラーが起きている場所です。

 


2.コードのスペルミスがないか確認する

 


さっき紹介した手順1をしてエラーが起きている場所を確認したら、その場所のコードにスペルミスがないか確認しましょう。コードにスペルミスがあるとエラーが起こってしまいます。ダメな例は次のような感じです。

 

f:id:CONPURO:20201013174108p:plain



自分の体験談ですが、自分もプログラミングをやっているときにエラーが起こって、このコードを使っちゃダメなのかな、別の方法で表現しないとダメなのかな、のような感じで30分くらい頭を悩ませました( ;∀;)


そしてふとパソコンの画面に映っているコードを見てみるとコードのスペルが間違っていたことに気づいてそれを修正してみたらエラーが直って
自分は本当に鈍感だなというようなことがありました(;^ω^)


なのでコードのスペルミスがないか確認しましょう( ..)φメモメモ


3.;や{}の付け忘れがないか確認する


手順2をしてもエラーが治らなかったら、エラーのある文の後ろなどに;や{}などが付け忘れていないか確認しましょう。これらの付け忘れもエラーにつながります。
ダメな例は次のような感じです。

 

f:id:CONPURO:20201013174201p:plain


手順2の方で語った自分の体験談のようなことが、;や{}の付け忘れでも起こります( ;∀;)なので;や{}の付け忘れがないか確認しておきましょう。

 


4.変数の定義し忘れがないか確認する

 


手順2や手順3をしてもエラーが直らない場合は、エラーが起きている文で使っている変数を定義し忘れていないか確認しましょう。定義していない変数を使っても意味はありません。エラーにつながるだけです。ダメな例は次のような感じです。

 

f:id:CONPURO:20201013174257p:plain

  


それでもだめだった場合

 


上の手順をすべてしてもダメだった場合は次の方法をやってみてください。

 

  • デベロッパーツールのエラー文を翻訳する
  • あきらめて別のコードで表現する


それぞれ解説していきます(*´ω`)


デベロッパーツールのエラー文を翻訳する


手順1でも説明した通り、エラー文は英語で書かれています。なので翻訳という作業が必要になってきます!(^^)!


具体的なやり方としては、まずエラーの文をコピーします。そしてブラウザの検索する所に張り付けて、それで検索すると出てくると思います。


手順1ではエラー文は回りくどい言い方でエラーの原因が書いてあって、とても分かりづらいと解説しました。ではなぜそんな分かりづらいものを翻訳しなければいけないのでしょうか?


理由はもしかしたらエラーが解決するかもしれないからです。
別の言い方をすると、運が良ければ解決する、ダメもとでやってみる、という事です。

 


あきらめて別のコードで表現する

 


手順1・2・3・4をしたりデベロッパーツールのエラー文を翻訳したりしてもエラーを解決することができなかったらあきらめて、ダメだったコードを何か別のコードで表現をしてみましょう( ;∀;)


手順1・2・3・4のほかにエラーを解決する方法があるかもしれませんが、
この記事を書いた人はこれら以外の解決方法はわかりません。


この記事を書いた人がエラーについて思う事

 

この記事を書いた人はプログラミングをやって5ヶ月になります。なのでエラーについてもいろいろなことを思います。


この記事を書いた人がエラーについて思う事は次の2つです。

 

  1. エラーが起こることを当たり前だと思ったほうがいい
  2. 何回かエラーを解決していると次にエラーが起きてもすぐに対処できる


それぞれ解説していきます(*´ω`)


1.エラーが起こることを当たり前だと思ったほうがいい


プログラミングをやっているときにエラーが起こることを
当たり前だと思ったほうがいいです。そのほうがエラーが起きても気持ちが楽になります


例えば学校で数学のテストがあって、今それを解いている最中です。
その時に何の前触れもなくいきなり難しい問題が出てきたら「( ゚Д゚)ハァ?ふざけんなよ」みたいなことを思いませんか?


でもテストの前に先生が、「今回のテストはかなり難しいからしっかり勉強しておいてね(^_-)-☆」のようなことを言っていました。


それを踏まえて難しい問題が出てきたら、「まあ先生が今回のテストはかなり難しいって言っていたし問題も難しいのが出るよね。しょうがないよね」
みたいなことを思いませんか?


プログラミングのエラーも同じような感じで、エラーが起こることを当たり前だと思っておけば、エラーが起きても「まあしょうがないよね(^▽^;)」のような感じに思って解決に向かうことができます。


なのでエラーが起こることを当たり前だと思ったほうがいいです( ..)φメモメモ


2.何回かエラーを解決すると次にエラーが起きた時すぐに対処できる


何回かエラーを解決すると次にエラーが起きた時すぐに対処することができます。
具体的にはデベロッパーツールのコンソールに書いてあるエラー文を読むだけでエラーに対処できるようになります!(^^)!


なぜかというと繰り返しやっていると脳や体が覚えるからです。


例えば、学校で数学の問題集があります。そして問題集全体を3回くらい解いてみます。そして4回目を解いているとき、問題を見てみると「あ!この問題の答えは890だ(゚д゚)!」のような感じで答えがぱっと頭に思い浮かびませんか?


プログラミングのエラーも同じような感じで、何回もエラーを解決しているとまたエラーが起きてもエラー文を見ただけで「このエラーは確かこうすれば解決するはずだ」と頭にぱっと思い浮かび、エラーを解決することができるようになります。

 


まとめ

 


今回の記事のまとめをします。
エラーが起きた時、解決するための4つの手順は次の通りでした。

 

  1. エラーが起きている場所を確認する
  2. コードのスペルミスがないか確認する
  3. ;や{}の付け忘れがないか確認する
  4. 変数の定義し忘れがないか確認する


エラーの起きている場所を確認する方法は次の通りでした。

 

  1. F12キーを押してデベロッパーツールを開く
  2. コンソールを開いてエラー文を確認する
  3. ソースを開いて他と違っているところを確認する


確認出来たら手順2・3・4をしてエラーを解決しに行きます。
これらをやってもエラーが解決しなかった場合、次のような方法をとりましょう。

 

  • デベロッパーツールのエラー文を翻訳する
  • あきらめて別のコードで表現する

 

この記事を書いた人が思う事は

 

 

  1. エラーが起こることを当たり前だと思ったほうがいい
  2. 何回かエラーを解決していると次にエラーが起きてもすぐに対処できる

 

でした。
これらが今回のまとめです(*'ω'*)

 


ここまで読んでいただきありがとうございました(*'▽')
よかったらまた読んでください!(^^)!