プログラミングにエラーはつきものです。
どれだけキャリアを積んでも、エラーとの戦いは終わりません。ただし、歴が長いエンジニアはエラー解決の"コツ"を知っています。
- 普通にググる以外の解決方法を知らない
- エラーの起こってる場所や原因の特定が出来ない
- エラーで進まなくてイライラする・楽しくない
このような悩みを抱えている方は、ぜひこの記事の内容を参考にしてみてください。
エラーで困ったときに質問できるサービス紹介！
※ 全額返金保証あり
当サイト限定の60%OFFクーポンを使えば
1ヶ月目1,192円~ご利用可能！
- 質問し放題(回答率100%)
- 毎月現役エンジニアとZoomレッスン可
- 作りながら学べる教材が50種類以上
- かかる費用は月額2,980円~だけ
この記事の目次
現役エンジニアもプログラミングのエラーと戦っている！
初学者の方はエラーに嫌気が差しているかもしれません。
- いつもエラーの解決に時間がかかる...
- いつになったらプログラミングができるのだろうか...
このように思うかもしれません。ただ、現役のエンジニアもエラーと戦っています。まずは『自分だけじゃない』ことを頭に入れておきましょう。それだけで気持ちが楽になります。
現役エンジニアでも、時にはエラー解決に数日かかることもあります。エンジニアをやる以上、一生エラーとは付き合うことになります。
ただし、現役エンジニアの方はエラーとの付き合い方がうまく、対応方法のコツを知っています！
そもそもエラーとは？バグとの違いは？
| エラー | 異常事態による中断。 ex)パスワードが正しくありませんとエラーが返ってきた。 |
| バグ | プログラムやシステムの不具合 ex)正しくないパスワードでもログインできるバグがあった。 |
一般的に定義は上記のようになります。
ただし、定義を厳密に区別する必要はありません。
この記事を読んでいる方は、『上手くいかないことの解決方法』を知りたいはずなので、これ以降エラー / バグ / 自分のミス等あまり区別せずに解説します。
プログラミングのエラーが起こった時の解決方法
エラーが起こったときの解決方法を紹介します。
正直、エラーの解決は経験がものを言う場合も結構あります。初学者の方は、ここで紹介したことを試しながら、徐々にエラーとうまく付き合えるようになりましょう。
- エラーメッセージを読む
- 凡ミスがないかチェックする
- コメントを使ってエラーの場所を特定する
- 変数やログを表示する
- Google / Twitter / GitHubなどで検索する
- 公式ドキュメントで調べる
- 学習中なら一旦放置して進む
- バグを疑う
プログラムやシステムの不具合を探して直すことをデバッグといいます。
エラーメッセージを読む
まずは出ているエラーメッセージを読みましょう。
エラーメッセージを読まずに、なんとなくいじって試すの繰り返しをする方がいますが、とても非効率です。たまたま解決できたとしても理解ができていないので、応用も効きません。
英語で意味の分からない文章が出てくるので、見たくないのはわかりますが、『エラーメッセージをちゃんと読む』ことは最も重要で真っ先ににやるべきことです。
英語が苦手な方はDeepLのChrome拡張機能を入れておくのがおすすめです。
エラーメッセージを見て解決すれば良いですが、特に慣れていない学習初期には解決しないことの方が多いでしょう。その場合はこれ以降で紹介する方法を試してみてください。
当てずっぽうの解決は自分のためになりません！エラーメッセージを読むことが最も重要！✊
凡ミスがないかチェックする
初学者のうちは、なんてことない凡ミスでエラーが起きている場合も多いです。
後述しますが、便利な拡張機能やツール等を使うと、明らかなミスには事前に気づけるようになります。
慣れも必要ですが、最初のうちは凡ミスがないかチェックしましょう。
- スペルミス
- パスが違う
- 型の違い
- 環境変数関連
- 書き方が古い(ネットの記事コピペした時などに起こる)
基本ですが、まずはこの辺りをチェックしてみましょう。
コメントを使ってエラーの場所を特定する
- エラーは出ていないけどうまく動いていない
- エラーが出ているけどどこが悪いかはっきりしない
↑こういった場合、まずは『どこが悪いのか』を特定する必要があります。
- エラーの原因と疑わしい箇所をコメントにする
- 実行してみる
この繰り返しでエラー箇所の特定をしてみましょう。コメントにしたらエラーがなくなった = コメントにした箇所が悪いことになります。
言語によっては、もう少し効率的なデバック方法もありますが、最初のうちはコメントを使った方法で良いと思います！
変数を表示する
変数に入っている値を確認すると、解決のヒントになることがあります。
JavaScriptであれば、下記のようにすればコンソールにログを出力できます。言語によって書き方は違いますが、同じようにログを出力する方法があるはずです。
console.log(変数名);
デバッガを使うともっと効率的&便利にデバッグができます。プログラミングに慣れてきたら、詳しく調べてみると良いです！
Google / Twitter / GitHubなどで検索する
Google / Twitter / GitHubなどを使って、検索することもよくあります。
前述した通り、まずはエラーメッセージを読みましょう。その上でわからなければ、そのエラーメッセージを検索します。
検索する際のポイントがあるので紹介します。
💡 良い記事がなければ期間指定してみる
プログラミング言語 / フレームワーク / ライブラリはアップデートがあり、古いバーションの書き方では動かないことがよくあります。
記事の通り書いたのにうまくいかない場合は、最近の記事に絞って検索してみると良いです。
ato-ichinen(Chrome拡張機能)を入れておくと、1クリックで1年以内の記事に絞れるのでおすすめです。💡 英語記事に絞って検索
言語によっては、日本語の記事が少ないこともあります。日本語記事がなければ、英語に絞って検索してみましょう。
| 分野 | 日本語記事で解決するか |
|---|---|
| web制作 | ◎ ほとんど解決する |
| フロントエンド | ◯ 解決しないこともある |
| サーバーサイド | △ 解決しないことが多い |
もちろん何をググるかによりますが、ざっくり上記のような特徴があります。
この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検索よりもドキュメント内で検索するほうが良いです。
ほとんどのプログラミング言語 / フレームワーク / ライブラリは充実したドキュメントがるので、困ったらドキュメントを見る癖もつけましょう。
学習中なら一旦放置して進む
もし学習中でどうしてもエラーの解決ができない場合は、一旦放置して次に進むほうが良い場合もあります。
- エラーが出る
- 自分で調べる(けど解決しない)
- メンターや質問できるサービスで質問する
- 返答が返ってくる間は次に進む
このような流れで学習するととても効率的です。
プログラミングの質問ができるサービスは下記で詳しく紹介しています。
プログラミング質問し放題サイト7選！有料・無料に分けて紹介！正しい質問の仕方をすることは、効率的な学習につながります。コピペで使えるテンプレートもあるので、下記の記事も参考にしてみてください。
プログラミングの質問の仕方を解説！コピペで使えるテンプレートも紹介！バグを疑う
自分のコードが問題ではなく、使用しているサービスなどのバグが原因であることも考えられます。
💡 最近あった事例
- 明らかに問題ないファイルでエラーが出てビルドが失敗する
原因は使用しているホスティングサービスのバグでした。
『どう考えても間違っていない！』と思ったら、使用しているサービス等のバグも疑うと良いです！ただ、ほとんどの場合、自分のミスです！😭
プログラミングのエラーが起こらないためにやるべきこと
エラーが起こりにくくするために、やるべべきことを紹介します。
- Prettierを入れる
- Linterを使う
初学者の方は難しいと感じるかもしれません。その場合は、まずはPrettierだけ入れてみましょう。
Prettierを入れる
Prettierはコードフォーマッターです。ファイルを保存することで、自動でインデントなどを綺麗に整形してくれます。
コードを見やすくしておくことは、ミスを減らすことに繋がります。VSCodeのプラグインを使えば、簡単に使えるのでまだ入れていない方は必ず入れましょう。
Linterを使う
Linterはコードが正しいか自動でチェックものです。上の画像はJavaScriptpのLinterである、ESLintというものです。
バグやエラーになりそうな箇所を事前に教えてくれます。
学習中のエラー解決はメンターや質問できるサービスを使うと効率的！
学習中の方は、何時間もエラーに悩まされるのは時間の無駄です。30分程度自分で努力をしても解決しなければ、教えてもらった方が効率的です。
高額なスクールに通わなくても、メンターや質問できるサービスを使えば、少しの投資でストレスなく学習ができます。
最後に2つ『エラー解決に役立つ』おすすめの質問ができるサービスを紹介します。
挫折しないことが重要なので、少額の投資であれば積極的にすると良いです！👍
対応言語多数！月額2,980円から使える【学び放題&質問し放題】の侍テラコヤ！
侍テラコヤは月額2,980円から使える、プログラミング / コーディング / デザインの学び放題&質問し放題サービスです。
こんな方におすすめ！
- 本格的にプログラミングの勉強がしたい方
- わからないことをチャットやZoomで質問したい方
- 少額の投資で学習の効率化したい方
サブスクサービスで入会金や解約料など他にかかる費用もありません。いつでも辞めれて、初月の1ヶ月間は全額返金保証も付いています。
よくある『入学金〇〇万円は別でかかります！』みたいなトラップはありません。
僕の知り限り、1番コスパが良い学習サービスです。
- 質問し放題(回答率100%)
- 毎月現役エンジニアとZoomレッスン可
- 作りながら学べる教材が50種類以上
- かかる費用は月額2,980円~だけ
口コミ・評判や対応言語に関しては、下記の記事をご覧ください。
侍テラコヤの口コミ・評判を調査！現役エンジニアが評価！【完全無料】動画でweb制作が学べるZeroPlus Gate！
ZeroPlus Gateは30日間無料でweb制作が学べるサービスです。31日目からお金がかかるわけではなく、30日で完結するサービスです。
こんな方におすすめ！
- これからweb制作の勉強をしたい方
- 学習期間1年未満の初学者の方
リスク0なのでweb制作を学びたい方は挑戦してみると良いです。中級者やweb制作ではなくプログラミングを勉強をしたい方には向いていません。(web制作ではなく、プログラミングを勉強したい場合は前述した↑侍テラコヤの方が向いています。)
- 60本の動画教材でweb制作が学べる
- 面談で学習サポートしてもらえる
- プロに何回でも質問し放題
- 30日以降お金がかかるわけではなく完全無料
無料の理由や30日でどんなサイトを作るかは、下記の記事で詳しく紹介しています。
【無料】ZeroPlus Gateの口コミ・評判を調査！web制作志望は必見？この記事を書いた人
Gaku / @gaku92014091
大学・大学院時代から個人で仕事をする。フリーランス歴11年 / 今は法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き！
プログラミングを仕事にするならエラーとの付き合い方は大切！コツを掴んで『わからないイライラ』から解放されよう！👍