模写修行メディア

プログラミングのエラー解決のコツを伝授!脱わからないイライラ!(初学者向け)

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

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

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

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

プログラミングを仕事にするならエラーとの付き合い方は大切!コツを掴んで『わからないイライラ』から解放されよう!👍

gakuのアイコン

エラーで困ったときに質問できるサービス紹介!

※ 全額返金保証あり

当サイト限定の60%OFFクーポンを使えば
1ヶ月目1,192円~ご利用可能!

  • 質問し放題(回答率100%)
  • 毎月現役エンジニアとZoomレッスン可
  • 作りながら学べる教材が50種類以上
  • かかる費用は月額2,980円~だけ
試しに見てみる →
侍テラコヤの口コミ・評判を調査!現役エンジニアが評価!
当サイト限定の60%OFFクーポンを使えば
1ヶ月目1,192円~で利用できます!
クーポンコード 👉 MOSYA60クーポンの使い方

この記事の目次

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

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

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

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

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

ただし、現役エンジニアの方はエラーとの付き合い方がうまく、対応方法のコツを知っています!

gakuのアイコン

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

エラー異常事態による中断。
ex)パスワードが正しくありませんとエラーが返ってきた。
バグプログラムやシステムの不具合
ex)正しくないパスワードでもログインできるバグがあった。

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

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

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

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

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

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

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

エラーメッセージを読む

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

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

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

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

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

当てずっぽうの解決は自分のためになりません!エラーメッセージを読むことが最も重要!✊

gakuのアイコン

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

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

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

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

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

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

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

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

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

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

言語によっては、もう少し効率的なデバック方法もありますが、最初のうちはコメントを使った方法で良いと思います!

gakuのアイコン

変数を表示する

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

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

console.log(変数名);

デバッガを使うともっと効率的&便利にデバッグができます。プログラミングに慣れてきたら、詳しく調べてみると良いです!

gakuのアイコン

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

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

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

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


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

Googleで期間指定して検索

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

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

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

💡 英語記事に絞って検索

Googleで英語のみで検索

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

分野日本語記事で解決するか
web制作◎ ほとんど解決する
フロントエンド◯ 解決しないこともある
サーバーサイド△ 解決しないことが多い

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

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


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

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

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

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

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

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

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


💡 GitHubのissuesを見る

GitHubのissues

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


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

条件指定をしたTwitter検索

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

  • from:moshamusha2010 CSS Grid

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

あまりエラーの解決では使いませんが、〇〇さんは××に関してどんな意見を持っているのだろう?と疑問に思った時に使っています!

gakuのアイコン

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

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

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

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

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

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

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

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

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

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

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

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

バグを疑う

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

💡 最近あった事例

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

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

『どう考えても間違っていない!』と思ったら、使用しているサービス等のバグも疑うと良いです!ただ、ほとんどの場合、自分のミスです!😭

gakuのアイコン

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

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

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

Prettierを入れる

Prettier

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

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

Linterを使う

ESLint

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

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

学習中のエラー解決はメンターや質問できるサービスを使うと効率的!

学習中の方は、何時間もエラーに悩まされるのは時間の無駄です。30分程度自分で努力をしても解決しなければ、教えてもらった方が効率的です。

高額なスクールに通わなくても、メンターや質問できるサービスを使えば、少しの投資でストレスなく学習ができます。

最後に2つ『エラー解決に役立つ』おすすめの質問ができるサービスを紹介します。

挫折しないことが重要なので、少額の投資であれば積極的にすると良いです!👍

gakuのアイコン

対応言語多数!月額2,980円から使える【学び放題&質問し放題】の侍テラコヤ!

侍テラコヤ

侍テラコヤは月額2,980円から使える、プログラミング / コーディング / デザインの学び放題&質問し放題サービスです。

こんな方におすすめ!

  • 本格的にプログラミングの勉強がしたい方
  • わからないことをチャットやZoomで質問したい方
  • 少額の投資で学習の効率化したい方

サブスクサービスで入会金や解約料など他にかかる費用もありません。いつでも辞めれて、初月の1ヶ月間は全額返金保証も付いています。

よくある『入学金〇〇万円は別でかかります!』みたいなトラップはありません。

僕の知り限り、1番コスパが良い学習サービスです。

口コミ・評判や対応言語に関しては、下記の記事をご覧ください。

侍テラコヤの口コミ・評判を調査!現役エンジニアが評価!

1ヶ月返金保証もあるからリスクなし!🚀

侍テラコヤ 公式サイト

現役エンジニアのサポートでもう無駄に悩まない!

当サイト限定の60%OFFクーポンを使えば
1ヶ月目1,192円~で利用できます!
クーポンコード 👉 MOSYA60クーポンの使い方

【完全無料】動画でweb制作が学べるZeroPlus Gate!

ZeroPlus Gate

ZeroPlus Gateは30日間無料でweb制作が学べるサービスです。31日目からお金がかかるわけではなく、30日で完結するサービスです。

こんな方におすすめ!

  • これからweb制作の勉強をしたい方
  • 学習期間1年未満の初学者の方

リスク0なのでweb制作を学びたい方は挑戦してみると良いです。中級者やweb制作ではなくプログラミングを勉強をしたい方には向いていません。(web制作ではなく、プログラミングを勉強したい場合は前述した↑侍テラコヤの方が向いています。)

無料の理由や30日でどんなサイトを作るかは、下記の記事で詳しく紹介しています。

【無料】ZeroPlus Gateの口コミ・評判を調査!web制作志望は必見?

無料期間は終了する可能性あり&人数制限あり!

ZeroPlus Gate 公式サイト

リスク0!完全無料で学べる!

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。フリーランス歴11年 / 今は法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材