React課題はサイト制作課題に比べて複雑であり、コーディングをしているときにエラーに直面すると思います。プログラミング初心者にとって、エラーメッセージは恐ろしいものに見えるかもしれませんが、これらは実際にはプログラムの問題点を指摘し、解決に導くヒントを与えています。エラー文を理解することは、プログラミングの基本的なスキルの一つであり、エラーを正確に解釈し対処する能力は、開発者としての成長に不可欠です。そのためエラーに怯えず根気よく取り組みましょう！
以下にはエラー文に対しての一般的なアプローチやReact課題を取り組んでいる際によく質問されるエラーに関する対処法を記述します。今はまだ内容がわからなくても大丈夫です。今後、エラーに直面し、困ったらこのページにまた戻ってみて下さい。
以下の記事はエラーが起こった際のアプローチが載っています。フロントエンドに限らず、プログラミング一般について述べてる記事です。とても参考になるので一度目を通しておきましょう。
エラーメッセージの読み方と対処, 検索や質問の原則 - Qiita
先ほどの記事で一般的なエラーに対するアプローチは学んだと思います。では実際にエラー文を見ていきましょう。以下はエラーがあった際のvscodeのターミナルで表示される文です(実際には下にもっと続いています)。
こんなに長いとどこを見ればいいか悩むと思いますが大抵は最初か最後にエラーの内容が書いてあります。今回は最初のほうに書いてあります。
注目するべきはたった1行であり画像の中で囲っている部分です。
ModuleNotFoundError: Module not found: Error: Can't resolve './../index' in 'C:\\...\\src\\components\\Example'
意味としては「 **src/components/Example内で./../index**を解決しようとしましたが、該当するモジュールが見つかりません」みたいな感じです。
これの対処法としてエラーが指しているパスにファイルが存在するか確認します。ファイルが存在しない、またはパスが間違っている場合は、適切なファイルを配置するか、インポート文を修正します。
このようにエラー文には解決するヒントが書かれているので適切に対応していけば恐れることは何もないです。
react課題ではJavaScriptを使用してコーディングを行いますが、開発している途中でうまく実装できない時があります。こういったときはエラーが起こっているのですが、ターミナルに現れないエラーもあります。そんなときに役に立つのが開発者ツールにあるコンソール(console)です。
コンソールではログの出力であったりプログラムで発生したエラーの表示を確認することができます。
では実際のエラー文を確認してみましょう。