.NET開発者のためのブログメディア
JavaScriptのスクリプトエラーの種類とその対策｜エラーハンドリング
2021年05月20日
- SE
- JavaScriptでスクリプトエラーが起こったときの対処方法について教えてください。
- PM
- 分かりました。それでは、JavaScriptのスクリプトエラーの種類と対策についてご紹介しましょう。
目次
JavaScriptのスクリプトエラーの種類とその対策を紹介します！
今回は、JavaScriptのスクリプトエラー（ReferenceError／RangeError／SyntaxError／TypeError）の種類を紹介します。また、エラーハンドリングの方法とTypeScriptを使う方法について紹介します。
興味のある方はぜひご覧ください。
ReferenceError
JavaScriptのスクリプトエラーの種類について紹介します。まずはReferenceErrorです。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
try {
//var val = 'hoge';
console.log(val.substring(1));
} catch (e) {
if (e instanceof RangeError) {
console.log("RangeError");
}
else if(e instanceof ReferenceError) {
console.log("ReferenceError");
}
else if(e instanceof SyntaxError) {
console.log("SyntaxError");
}
else if(e instanceof TypeError) {
console.log("TypeError");
}
else {
console.log("OtherError");
}
}
|
実行結果は以下のようになります。
|
1
2
3
|
~/JavaScript$ node test1.js
ReferenceError
~/JavaScript$
|
変数が定義されていない場合などに、スクリプトエラー（ReferenceError）が発生します。
RangeError
JavaScriptのスクリプトエラーであるRangeErrorについて紹介します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
try {
console.log((10).toString(2));
console.log((10).toString(1));
} catch (e) {
if (e instanceof RangeError) {
console.log("RangeError");
}
else if(e instanceof ReferenceError) {
console.log("ReferenceError");
}
else if(e instanceof SyntaxError) {
console.log("SyntaxError");
}
else if(e instanceof TypeError) {
console.log("TypeError");
}
else {
console.log("OtherError");
}
}
|
実行結果は以下のようになります。
|
1
2
3
4
|
~/JavaScript$ node test1.js
1010
RangeError
~/JavaScript$
|
基数が正しくない場合、スクリプトエラー（RangeError）が発生します。
SyntaxError
JavaScriptのスクリプトエラーであるSyntaxErrorについて紹介します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
try {
console.log("This is sample string1");
console.log(“This is sample string2”);
} catch (e) {
if (e instanceof RangeError) {
console.log("RangeError");
}
else if(e instanceof ReferenceError) {
console.log("ReferenceError");
}
else if(e instanceof SyntaxError) {
console.log("SyntaxError");
}
else if(e instanceof TypeError) {
console.log("TypeError");
}
else {
console.log("OtherError");
}
}
|
実行結果は以下のようになります。
|
1
2
3
4
5
6
|
~/JavaScript$ node test1.js
/home/ubuntu/JavaScript/test1.js:3
console.log(“This is sample string2”);
SyntaxError: Invalid or unexpected token
|
文法が正しくない場合にスクリプトエラー（SyntaxError）が発生します。
TypeError
JavaScriptのスクリプトエラーであるTypeErrorについて紹介します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
try {
console.log("Hello World".indexOf("Hello"));
console.log("Hello" in "Hello World");
} catch (e) {
if (e instanceof RangeError) {
console.log("RangeError");
}
else if(e instanceof ReferenceError) {
console.log("ReferenceError");
}
else if(e instanceof SyntaxError) {
console.log("SyntaxError");
}
else if(e instanceof TypeError) {
console.log("TypeError");
}
else {
console.log("OtherError");
}
}
|
実行結果は以下のようになります。
|
1
2
3
4
|
~/JavaScript$ node test1.js
0
TypeError
~/JavaScript$
|
演算子の使い方が正しくない場合に、スクリプトエラー（TypeError）が発生します。
エラーハンドリング
スクリプトエラー発生時に例外をthrowする方法について紹介します。まずは以下のソースを見てください。
|
1
2
3
4
5
6
7
8
9
|
function function2() {
throw ("例外発生");
}
function function1() {
function2();
}
function1();
|
実行結果は以下のようになります。
|
1
2
3
4
5
6
7
|
~/JavaScript$ node test1.js
/home/ubuntu/JavaScript/test1.js:2
throw ("例外発生");
^
例外発生
~/JavaScript$
|
例外が発生していることが分かります。しかし、コールスタックは表示されていません。
コールスタックを表示するには、throw new Errorと記述します。
|
1
2
3
4
5
6
7
8
9
|
function function2() {
throw new Error("例外発生");
}
function function1() {
function2();
}
function1();
|
実行結果は以下のようになります。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
~/JavaScript$ node test1.js
/home/ubuntu/JavaScript/test1.js:2
throw new Error("例外発生");
^
Error: 例外発生
at function2 (/home/ubuntu/JavaScript/test1.js:2:9)
at function1 (/home/ubuntu/JavaScript/test1.js:6:3)
at Object.<anonymous> (/home/ubuntu/JavaScript/test1.js:9:1)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
at internal/main/run_main_module.js:17:11
~/JavaScript$
|
コールスタックが表示されていることが分かります。
TypeScriptを使う
JavaScriptは動かしてみないとエラーになるか否かは分かりません。動かす前にスクリプトエラーを検出するにはTypeScriptを使用します。ここでは以下のVersionのTypeScriptを使用します。
|
1
2
3
|
~/TypeScript$ tsc -v
Version 4.1.3
~/TypeScript$ t
|
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
try {
//var val = 'hoge';
console.log(val.substring(1));
} catch (e) {
if (e instanceof RangeError) {
console.log("RangeError");
}
else if(e instanceof ReferenceError) {
console.log("ReferenceError");
}
else if(e instanceof SyntaxError) {
console.log("SyntaxError");
}
else if(e instanceof TypeError) {
console.log("TypeError");
}
else {
console.log("OtherError");
}
}
|
tscコマンドでコンパイルしてみます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
~/TypeScript$ tsc test1.ts
test1.ts:3:15 - error TS2552: Cannot find name 'val'. Did you mean 'eval'?
3 console.log(val.substring(1));
~~~
../.npm-packages/lib/node_modules/typescript/lib/lib.es5.d.ts:32:18
32 declare function eval(x: string): any;
~~~~
'eval' is declared here.
Found 1 error.
~/TypeScript$
|
JavaScriptとして動かす前に、スクリプトエラーを検出できていることが分かります。
- SE
- ありがとうございます。教えていただいた方法で対策をすればいいのですね。
- PM
- その通りです。コードはひとが書くものですので、思わぬエラーが起きます。その時のためにもぜひ覚えておくといいでしょう。
まとめ
いかがでしたでしょうか。JavaScriptのスクリプトエラーとその対策について紹介しました。
人がコードを書くので予期せぬエラーは発生するものです。エラーが発生しないような仕組み、発生しても原因を追究しやすいような仕組みを入れておくことで強いソフトになります。
ぜひご自身でソースコードを書いて、理解を深めてください。
Search キーワード検索
Popular 人気の記事
-
.NET Framework 3.5をWindows10にインストールする方法
2019年10月24日 -
EdgeとChromeはどう違う？それぞれのスペック7つを比較解説！
2020年09月28日 -
【VB.NET入門】DataGridViewの使い方まとめ
2019年12月22日 -
VB.NETをおすすめする3つの理由とは？VBAとの違いや勉強方法を解説
2019年12月21日 -
Windows10のテキストエディタおすすめ20選！選ぶポイント3つ
2020年04月28日
reccomended おすすめ記事
-
C#のusingステートメントでリソースの解放【Disposeとの違いとは】
2020年03月17日 -
【SQL Serverログの操作】トランザクションログの使用量を確認する方法
2020年03月16日 -
【.NETが統合】.NET 5の概要と今後のリリース予定
2020年03月05日
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
ソフトを用いた3DCGアート/東京都千代田区/【WEB面談可】/テレワーク
月給50万～50万円東京都千代田区(秋葉原駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅)