こんにちは！ フリーランスエンジニア兼ライターのワキザカ サンシロウです！
皆さんは、予期せぬバグに遭遇したことがありますか？開発をする上では、バグとの遭遇、対処は切っても切れない作業ですよね。javascriptをコーディングする際に潜在バグを減らしていく方法の1つに、strictモードがあります。
そこで今回は、
- strictモードとは？
- strictモードの使い方
- strictモードのエラーチェック例
- strictモードの注意点
などの基本的な内容から、応用的な使い方も含め、strictモードについて解説します！
strictモードとは？
strictモードとは、javascriptのコードをより厳しくエラーチェックすることができる仕組みです。通常エラーとなっていなかったバグになりそうなコードに対して、エラーを表示することができます。
そのため、バグになりそうな可能性を潰しつつ、開発を進めることができるようになります！
strictの使い方とは？
次に、具体的な使い方について説明します。
以下のコードを1行追加すると、strictモードにすることができます。
"use strict";
strictは全体に設定する場合と、関数に設定する場合があります。全体に設定する場合は、コードの一番上に「”use strict”;」を書きます。
サンプル：
"use strict";
function test1(){
x = 0;
console.log(x);
}
test1();
関数に設定する場合は、関数の先頭に「”use strict”;」を書きます。
サンプル：
function test2(){
"use strict";
x = 0;
console.log(x);
}
test2();
2つのサンプルはどちらもstrictモードでエラーが出るように書いています。
strictモードのエラーチェックサンプル
次に、strictモードでエラーとなる具体例をいくつかご紹介します！
グローバル変数への値の代入
通常、変数宣言をせずに値を入れてしまった場合は、関数内でもグローバル変数になってしまいます。ただ、関数内で変数を使う場合は関数内のみで使うケースがほとんどですよね。strictモードにすることで、変数宣言なしの変数に値を入れた場合、エラーにすることができます。
サンプル：
"use strict";
function test3(){
x = 0; // グローバル変数
console.log(x);
}
test3();
実行結果：
VM296:3 Uncaught ReferenceError: x is not defined
with文
with文は一見便利そうに見えますが、パフォーマンスが悪くなりやすく、予期せぬバグを含む可能性もあるため推奨されていません。strictモードでは、wiith文がエラーになります。
サンプルコード：
"use strict";
var test = { a:123, b:"test" };
with (test) { // Strict Mode では SyntaxError になる。
console.log(a);
console.log(b);
}
実行結果：
Uncaught SyntaxError: Strict mode code may not include a with statement
予約語を変数名に使用
予約語を変数名に使った場合、エラーになります。
"use strict";
var public = 1000
function test4(){
console.log(public);
}
test4();
実行結果：
Uncaught SyntaxError: Unexpected strict mode reserved word
予約語の一覧は以下に記載されているため、変数名を設定する際は見てみてくださいね！
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Reserved_Words
strictの注意点
予期せぬバグをなくしつつ開発を進めることができるため、strictモードは使いこなすととても便利です。しかし、使用する際にはいくつか注意点があります。
全体適用で外部スクリプトがエラーになる場合がある
処理全体でstrictモードを実行してしまうと、インポートする外部スクリプトを含め、全てがstrictモードになってしまいます。そのため、外部スクリプトがstrictモードに対応した書き方になっていない場合は、エラーとなってしまう可能性があります。
外部スクリプトを使う場合は注意して下さい。
ブラウザ・バージョンによって対応していない場合がある
ブラウザやバージョンによってはstrictモードが動作しない可能性があります。使用するブラウザでstrictモードになるか、事前に確認した上で開発を進めると良いでしょう。
まとめ
今回は、javascriptのstrictモードについて徹底的に解説しました。strictモードでコードを書くことができるようになれば、後々バグになりにくい綺麗なコードが書けるようになります。
設定方法も簡単なので、ぜひ試してみてくださいね！
