どのようなプログラミング言語であっても、習得中や使用時には必ずエラーに遭遇するもの。エラーメッセージは通常、コード問題を特定するのに役立ちます。
エラーメッセージは、わかりやすいものから、理解し難いものまでさまざまです。
この記事では、最も一般的なJavaScriptのエラーの1つである「Uncaught TypeError: Cannot read property」エラーについて掘り下げます。
「Uncaught TypeError: Cannot read property」エラーの意味、主な原因、そして解決策を順に解説していきますので、ぜひ最後までご覧ください。
JavaScriptの「Uncaught TypeError: Cannot read property」エラーとは
「Uncaught TypeError: Cannot read property」エラーは、undefined変数を使用またはアクセスしようとしたときに発生するのが通例です。Vanilla JSなど、任意のJavascriptフレームワークで見られます。
Chromeのデベロッパー ツールやKinstaのワンクリックステージング環境機能など、開発ツールを使用すれば、エラーの検出やコードのテストなど、コーディング中に素早くエラーに対処することができます。
JavaScriptの「Uncaught TypeError: Cannot read property」エラーの原因と解決策
それでは早速、JavaScriptの「Uncaught TypeError: Cannot read property」エラーの原因と解決方法について、コード例を用いながら見ていきます。
未定義のオブジェクトのプロパティにアクセスする
まず考えられるのは、未定義（undefined）のオブジェクトのプロパティにアクセスしようとしていること。
例を見てみます。
let person;上のコードは、personという変数を作成します。この変数をname、age、hobbyのようなプロパティを持つオブジェクトにするとします。
しかし、このプロパティを作成しておらず、それを忘れてアクセスしようとすると、以下のようにエラーが発生します。
let person;
console.log(person.name);
// Uncaught TypeError: Cannot read properties of undefined (reading 'name')アクセスしようとしたnameプロパティが存在しないため、「Uncaught TypeError:Uncaught TypeError: Cannot read properties of undefined (reading ‘name’)」というメッセージが返されます。
オブジェクトへのプロパティの作成や追加を忘れてしまうのは、よくあることです。
エラーを修正するには、オブジェクトにプロパティをいくつか追加してみてください。
let person = {
name: "John",
age: 200,
hobby: "coding"
}
console.log(person.name);
// John上記は、nameプロパティを追加し、アクセスすると「John」という値が返されるコードです。
配列に存在しない要素にアクセスする
先ほどのオブジェクトと同様に、まだ初期化されていない配列の要素にアクセスしようとしても、このエラーが発生します。
以下はその例です。
let arr;
console.log(arr[0]);
// Uncaught TypeError: Cannot read properties of undefined (reading '0')これは、arrという配列の最初の要素にアクセスするコード。
この配列は宣言されているものの、初期化されていません。つまり、まだどの要素も割り当てられていないことを意味します。
これを解決するには、例えば以下のように、アクセスする前に配列要素を追加しておきます。
let arr = [2,4,6,8]
console.log(arr[0]);
// 2存在しないDOM要素にアクセスする
JavaScriptでDOM（ドキュメントオブジェクトモデル）を操作している際にも、「Uncaught TypeError: Cannot read properties」エラーに遭遇することがあります。
原因としては、DOM要素を取得する際のスペルミス、アクセスしたい要素が存在しない、DOMが読み込まれる前に要素にアクセスしようとしている（これについては次のセクションで）などが考えられます。
以下、存在しないDOM要素にアクセスし、「Uncaught TypeError: Cannot read properties」エラーが返される例を見てみましょう。
HTMLコードは以下の通り。
<!DOCTYPE html>
<html>
<head>
<title>Error Tutorial</title>
</head>
<body>
<h1 id="content">Hello World!</h1>
<script src="app.js"></script>
</body>
</html>これは、基本的なHTML文書を作成し、IDが「content」であるh1要素を作成するコードです。
JavaScriptのコードは、以下のようになります。
let content = document.getElementById("constent");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');すべて正しく実行したように見えますが、エラーが返ってきます。
些細な点ですが、h1要素のIDを取得するのに「content」を「constent」とスペルミスしているのが原因です。
document.getElementById("content");ではなく、document.getElementById("constent");になっています。
DOMにまだ作成されていないIDやクラス名を取得しようとしても、同じエラーが発生します。
これを解決するには、スペルミスを修正するか、アクセスしたい要素がDOMに存在しているかを確認してください。
Bodyタグ内の他のDOM要素上にScript要素を配置
script要素の位置は、JavaScriptのコードがブラウザでどのように実行されるかを決定します。
このscript要素を HTML文書のbody内のすべての要素よりも上に配置すると、DOMが読み込まれる前にJavaScriptのコードが実行されることに。
つまり、JavaScriptがDOM要素の読み込みを待たずに実行されるため、DOM要素への参照がないことを意味します。
例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>Error Tutorial</title>
</head>
<body>
<script src="app.js"></script>
<h1 id="content">Hello World!</h1>
</body>
</html>上のコードでは、script要素がh1要素の上に配置されています。
以下は、h1要素のIDを使って、要素にアクセスするJavaScriptのコードです。
let content = document.getElementById("content");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');このように、h1要素より前にあるJavaScriptコードがDOMに追加されたため、「Uncaught TypeError: Cannot read property」エラーが投げられました。
これを解決するには、bodyタグを閉じる前に、script要素を記述してください。そうすることで、DOMのすべての要素が読み込まれた後、スクリプトが実行されるようになります。
<!DOCTYPE html>
<html>
<head>
<title>Error Tutorial</title>
</head>
<body>
<h1 id="content">Hello World!</h1>
<script src="app.js"></script>
</body>
</html>まとめ
開発作業にエラーはつきもの。コーディング中にはイライラすることもありますが、そのプログラミング言語について、より深く学び、スキルを磨く糧になります。
エラーに遭遇したら、必ずエラーメッセージに注目しましょう。何から手をつけて、何を修正すればいいのかを紐解くことができます。また、同じようなエラーメッセージを持つ他のエラーも解決できるようになります。
ウェブサイトを構築するには、さまざまなスキルが求められます。言語やツールを効率的に使用できるよう、練習も重ねることが必要です。DevKinstaを使うと、デザインから開発、デプロイまで、全ての作業をローカルマシンで簡単に行うことができ、2万5,000人以上の開発者、ウェブデザイナー、フリーランサーが使用しています。無料ダウンロードはこちらから。
