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

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

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

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

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。
Webアプリ、業務アプリ開発において、要件定義、設計、インフラ、製造、テスト、運用保守など、様々な経験あり。
また、侍ブログ編集部として、これまでに200記事以上の記事を執筆。
現在はフリーランスエンジニア兼テックライターとして活動中。