【JavaScript入門】strictモードの使い方を徹底解説！

こんにちは！　フリーランスエンジニア兼ライターのワキザカ サンシロウです！

皆さんは、予期せぬバグに遭遇したことがありますか？開発をする上では、バグとの遭遇、対処は切っても切れない作業ですよね。javascriptをコーディングする際に潜在バグを減らしていく方法の1つに、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モードでコードを書くことができるようになれば、後々バグになりにくい綺麗なコードが書けるようになります。

設定方法も簡単なので、ぜひ試してみてくださいね！