プログラミングのエラー解決のコツを伝授！脱わからないイライラ！

プログラミングにエラーはつきものです。

どれだけキャリアを積んでも、エラーとの戦いは終わりません。ただし、歴が長いエンジニアは**エラー解決の"コツ"**を知っています。

• 普通にググる以外の解決方法を知らない
• エラーの起こってる場所や原因の特定が出来ない
• エラーで進まなくてイライラする・楽しくない

このような悩みを抱えている方は、ぜひこの記事の内容を参考にしてみてください。

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

👆 メンターやってます 👆

現役エンジニアもプログラミングのエラーと戦っている！

初学者の方はエラーに嫌気が差しているかもしれません。

• いつもエラーの解決に時間がかかる...
• いつになったらプログラミングができるのだろうか...

このように思うかもしれません。ただ、現役のエンジニアもエラーと戦っています。まずは『自分だけじゃない』ことを頭に入れておきましょう。それだけで気持ちが楽になります。

現役エンジニアでも、時にはエラー解決に数日かかることもあります。エンジニアをやる以上、一生エラーとは付き合うことになります。

そもそもエラーとは？バグとの違いは？

一般的に定義は上記のようになります。

ただし、定義を厳密に区別する必要はありません。

この記事を読んでいる方は、『上手くいかないことの解決方法』を知りたいはずなので、これ以降エラー / バグ / 自分のミス等あまり区別せずに解説します。

【駆け出しの方へ】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

プログラミングのエラーが起こった時の解決方法

エラーが起こったときの解決方法を紹介します。

正直、エラーの解決は経験がものを言う場合も結構あります。初学者の方は、ここで紹介したことを試しながら、徐々にエラーとうまく付き合えるようになりましょう。

プログラムやシステムの不具合を探して直すことをデバッグといいます。

エラーメッセージを読む

まずは出ているエラーメッセージを読みましょう。

エラーメッセージを読まずに、なんとなくいじって試すの繰り返しをする方がいますが、とても非効率です。たまたま解決できたとしても理解ができていないので、応用も効きません。

英語で意味の分からない文章が出てくるので、見たくないのはわかりますが、『エラーメッセージをちゃんと読む』ことは最も重要で真っ先ににやるべきことです。

英語が苦手な方はDeepLのChrome拡張機能を入れておくのがおすすめです。

エラーメッセージを見て解決すれば良いですが、特に慣れていない学習初期には解決しないことの方が多いでしょう。その場合はこれ以降で紹介する方法を試してみてください。

凡ミスがないかチェックする

初学者のうちは、なんてことない凡ミスでエラーが起きている場合も多いです。

後述しますが、便利な拡張機能やツール等を使うと、明らかなミスには事前に気づけるようになります。

慣れも必要ですが、最初のうちは凡ミスがないかチェックしましょう。

基本ですが、まずはこの辺りをチェックしてみましょう。

コメントを使ってエラーの場所を特定する

• エラーは出ていないけどうまく動いていない
• エラーが出ているけどどこが悪いかはっきりしない

↑こういった場合、まずは『どこが悪いのか』を特定する必要があります。

1. エラーの原因と疑わしい箇所をコメントにする
2. 実行してみる

この繰り返しでエラー箇所の特定をしてみましょう。コメントにしたらエラーがなくなった = コメントにした箇所が悪いことになります。

変数を表示する

変数に入っている値を確認すると、解決のヒントになることがあります。

JavaScriptであれば、下記のようにすればコンソールにログを出力できます。言語によって書き方は違いますが、同じようにログを出力する方法があるはずです。

console.log(変数名);

Google / Twitter / GitHubなどで検索する

Google / Twitter / GitHubなどを使って、検索することもよくあります。

前述した通り、まずはエラーメッセージを読みましょう。その上でわからなければ、そのエラーメッセージを検索します。

検索する際のポイントがあるので紹介します。

---

💡 良い記事がなければ期間指定してみる

プログラミング言語 / フレームワーク / ライブラリはアップデートがあり、古いバーションの書き方では動かないことがよくあります。

記事の通り書いたのにうまくいかない場合は、最近の記事に絞って検索してみると良いです。

ato-ichinen(Chrome拡張機能)を入れておくと、1クリックで1年以内の記事に絞れるのでおすすめです。

---

💡 英語記事に絞って検索

言語によっては、日本語の記事が少ないこともあります。日本語記事がなければ、英語に絞って検索してみましょう。

もちろん何をググるかによりますが、ざっくり上記のような特徴があります。

• https://www.google.com/webhp?gl=us&hl=en

このURLから検索すると英語のみに絞れます。ブックマークしておくと良いです。

---

💡 特定メディアの記事内から検索

今のSEOは純粋に良い記事が上位に表示されるとは限りません。低品質な記事もあるので、信用できるメディアに絞って検索してみるのも良いです。

• site:https://moshashugyo.com/media CSS Grid

例えば、このように検索すると、『https://moshashugyo.com/media』配下の記事に絞って、検索ワード『CSS Grid』で調べることができます。

• Zenn
• Qiita
• GitHub
• お気に入りのメディア

これらで絞って検索してみるのも良いでしょう。

---

💡 GitHubのissuesを見る

フレームワーク / ライブラリはGitHubのissuesで検索すると解決策が見つかることもあります。

---

💡 タイムリーなことはTwitter検索

バージョンを上げた際のエラーなど、タイムリーな情報は記事がないことが多いので、Twitter検索も有効です。

• from:moshamusha2010 CSS Grid

このように検索すると、@moshamusha2010さんの投稿に絞って、検索ワード『CSS Grid』で調べることができます。

公式ドキュメントで調べる

情報の正しさ的には公式ドキュメントで調べるのが1番です。

英語に抵抗がなく、プログラミングに慣れている方は、Google検索よりもドキュメント内で検索するほうが良いです。

ほとんどのプログラミング言語 / フレームワーク / ライブラリは充実したドキュメントがるので、困ったらドキュメントを見る癖もつけましょう。

学習中なら一旦放置して進む

もし学習中でどうしてもエラーの解決ができない場合は、一旦放置して次に進むほうが良い場合もあります。

1. エラーが出る
2. 自分で調べる(けど解決しない)
3. メンターや質問できるサービスで質問する
4. 返答が返ってくる間は次に進む

このような流れで学習するととても効率的です。

プログラミングの質問ができるサービスは下記で詳しく紹介しています。

プログラミング質問し放題サイト8選！有料・無料に分けて紹介！

正しい質問の仕方をすることは、効率的な学習につながります。コピペで使えるテンプレートもあるので、下記の記事も参考にしてみてください。

プログラミングの質問の仕方を解説！コピペで使えるテンプレートも紹介！

バグを疑う

自分のコードが問題ではなく、使用しているサービスなどのバグが原因であることも考えられます。

💡 最近あった事例

• 明らかに問題ないファイルでエラーが出てビルドが失敗する

原因は使用しているホスティングサービスのバグでした。

プログラミングのエラーが起こらないためにやるべきこと

エラーが起こりにくくするために、やるべべきことを紹介します。

初学者の方は難しいと感じるかもしれません。その場合は、まずはPrettierだけ入れてみましょう。

Prettierを入れる

Prettierはコードフォーマッターです。ファイルを保存することで、自動でインデントなどを綺麗に整形してくれます。

コードを見やすくしておくことは、ミスを減らすことに繋がります。VSCodeのプラグインを使えば、簡単に使えるのでまだ入れていない方は必ず入れましょう。

• Prettier - Code formatter - Visual Studio Marketplace

Linterを使う

Linterはコードが正しいか自動でチェックものです。上の画像はJavaScriptpのLinterである、ESLintというものです。

バグやエラーになりそうな箇所を事前に教えてくれます。

• ESLint - Visual Studio Marketplace

独学に限界を感じていませんか？