エラーの見つけ方と対処方法

エラーの見つけ方

教材の指示通りにコードを書いてきたのに、エラーが出たり意図通りに動かない状態になったとき。

その1番の原因は、パッケージのバージョンが異なるためです。

2番目の原因は、単純なスペルミス。

本記事ではこの2つのエラーの見つけ方と修正方法を紹介します。

https://monotein.com/present-for-readers

バージョン情報を確認する方法

アプリ開発では様々なパッケージ（npmパッケージ）を使います。

その中には、教材の発売後に新しいバージョンがリリースされているものも多いでしょう。

このバージョンアップの時、コードの書き方にも変更が加えられていると、教材の指示通りにコードを書いてもミスが出てしまいます。

そのため、エラーが出た場合は、まずパッケージのバージョンを疑いましょう。

バージョンの確認は、GitHubにある完成見本のコードの中のpackage.jsonファイルで可能です。

package.jsonのdependenciesに書かれている各パッケージのバージョンを見てください。

そして、手元で開発しているアプリのpackage.jsonのdependenciesとを比較しましょう。

例えば、完成見本のpackage.jsonが次のようになっているとします。

そして手元のパソコンで開発しているアプリのpackage.jsonは、次のようになっているとします。

「mongoose」と「next」の右側の数字、つまりバージョンが異なっているのがわかります。

完成見本アプリの「mongoose」のバージョンは6.5.4、一方で手元のバージョンは6.5.9。

また、「next」は完成見本が12.2.5、手元では13.0.0となっています。

これは教材の発売後に新しいバージョンがリリースされたためです。

パッケージによって異なりますが、一般的に最初のドット.までの数字が変わっている場合（「next」のケース）には、コードの書き方も変化している可能性が高くなります。

一方で最初のドット.以降の数字が変わっている場合（「mongoose」のケース）は、そこまで大きな変化は加えられていないことが多い傾向にあります。

しかしどちらであれ、教材の指示通りのコードを書いてスムーズに進めていくには、完成見本のバージョンに合わせるのがベストです。

なので以下、バージョンを合わせる方法を紹介します。

アプリを一旦停止させましょう。

そして、ターミナルに次のコマンドを打って実行してください。

npm install next@12.2.5

これは「next」のバージョンを12.2.5に変更するコマンドです。

パッケージ名のあとに@を付け、インストールしたいバージョンを指定しています。

こうすると現在の13.0.0が12.2.5で上書きされるのです。

同じ要領で「mongoose」も次のようにしましょう。

npm install mongoose@6.5.4

こうすると、完成見本と同じバージョンの6.5.4が上書きでインストールされます。

（*なおnpm install nextやnpm install mongooseのように、npm install パッケージ名というコマンドを実行すると、そのパッケージの最新バージョンが自動でインストールされます。）

エラーのあるファイルと場所を特定する方法

上記の方法で、パッケージのバージョンが同じであることを確認してもまだエラーが出るとき。

その原因の大半は「単純なスペルミス」です。

例えばバッククオートを使うべきところに、シングル・クオテーションマークを使っている場合などです。

// 正解（バッククオート）

`https://api.weatherapi.com/v1/current.json?key=b613`

// 誤り（シングル・クオテーションマーク）

'https://api.weatherapi.com/v1/current.json?key=b613'

// 誤り（ダブル・クオテーションマーク）

"https://api.weatherapi.com/v1/current.json?key=b613"

とはいえ、このような小さなミスを自分で発見するのは大変です。

そのため、まずどのファイルにミスがあるのかを特定し、次にそのファイルのどこにミスがあるのかを発見するという、2ステップを踏みましょう。

ここでは区切りのいいところまでコードが書けていることを前提に話を進めます。

エラーのあるファイルを特定する

問題のあるファイルを特定するために、下記の手順で完成見本のアプリのコードを手元のコンピューターにダウンロードし、起動させます。

１：完成見本のコードをGitHubからダウンロードする

２：npm installで必要なパッケージをインストールする（APIのURLやMongoDBなどのデータベースのURLも設定してください）

３：npm run devやnpm startなどの起動コマンドでアプリを起動する

次に自分の開発しているアプリの任意のファイルのコード全体をコピーして、起動している見本アプリの同じファイルに貼り付けてください。

以下、例としてApp.jsを使って具体的に解説します。

まず自分のアプリのApp.jsのファイル全体のコードをコピーしてください。

次に、起動している見本アプリのApp.jsのコード全体を消し、代わりにコピーしてきたコードを貼り付けます。

保存をしてアプリが正常に起動したら、自分のApp.jsのコードにミスはないことになります。

同じ作業をアプリ内の他のファイルでも繰り返します。

そうすると、ある時点で起動ができない時が来るので、そこでその直前にコピー＆ペーストしたファイルに何らかのミスがあると予想できます。

エラーのある箇所を特定する

エラーのあるファイルが特定できた後、エラーの正確な場所を見つけるには次の2つの方法があります。

ひとつはAIを使う方法、もうひとつはコードの差分を表示するツールを使う方法です。

ChatGPTやGeminiなどのAIに、完成見本のファイルと、手元の自分のファイルをアップロード（もしくはコピペ）して、「違いを教えて」と聞きましょう。

この方法が現在では一番効率的です。

AIを使わない場合は差分ツールを使いましょう。

差分ツールは2つのコードを比較して、違いを表示するツールです。

同様のものはいくつもありますが、今回はブラウザで簡単に使える下記サイトを使いましょう。

3docs.com/tools/code-diff

下記画像のように赤で囲った左側に完成見本のコード、青で囲った右側に自分のコードを貼り付けてください。

コードが比較され、異なる箇所がマークして表示されます。

以上がエラーを特定する方法になります。