導入:なぜ ‘use strict’ が現代のフロントエンド開発で重要なのか
JavaScriptの ‘use strict’(厳格モード)は、言語の仕様として「あいまいな挙動」や「不適切な記述」をエラーとして弾くための仕組みです。かつてはスクリプトファイルの先頭に記述する必要がありましたが、現代のフロントエンド開発において、私たちは意識せずともこの恩恵を受けています。本記事では、ES Modules(ESM)環境下で ‘use strict’ がどのように適用されるのか、そしてなぜそれがバグの混入を防ぐために不可欠なのかを解説します。
基礎知識:厳格モードとモジュール環境の関係
厳格モードを有効にすると、以下のような記述が禁止または厳格化されます。
1. 未宣言の変数への代入をエラーにする(グローバル汚染の防止)。
2. delete演算子の誤用を禁止する。
3. 関数の引数名重複を禁止する。
4. ‘this’ がグローバルオブジェクトを参照する場合に ‘undefined’ にする。
重要な点は、ES Modules(type=”module”)として読み込まれたすべてのスクリプトは、自動的に厳格モードで動作するという仕様です。つまり、現代のWebpackやViteなどのビルドツールを使用して開発している場合、明示的に記述しなくても常に厳格モードが適用されています。
実装/解決策:モジュール環境での活用
モジュール環境では ‘use strict’ を手動で書く必要はありません。しかし、古いライブラリをレガシーな環境(scriptタグで直接読み込む場合など)から移行する際は注意が必要です。レガシーコードをモジュールとしてインポートすると、これまで許容されていた「緩いコード」が突然エラーを吐くことがあります。この挙動を理解しておくことが、安全なリファクタリングの第一歩です。
サンプルプログラム:厳格モードで発生するエラー例
以下のコードは、通常のJavaScriptでは動く可能性がありますが、厳格モード(モジュール)ではエラーになります。
// module.js として読み込まれることを想定
// 1. 変数を宣言せずに代入(グローバル汚染の防止)
// これを有効にすると "ReferenceError: x is not defined" が発生します
// x = 10;
// 2. 引数の重複(厳格モードでは禁止)
function sum(a, a, b) {
// "SyntaxError: Duplicate parameter name not allowed in this context"
return a + b;
}
// 3. delete演算子の誤用
const obj = { name: 'test' };
// delete obj; // "SyntaxError: Delete of an unqualified identifier in strict mode."
応用・注意点:現場で陥りやすい罠
実務で注意すべきポイントは、「Node.js環境との差異」と「レガシーなDOM操作」です。
・Node.jsのCommonJS環境では、’use strict’ を手動で記述しない限り厳格モードになりません。フロントエンド(ブラウザ)とバックエンド(Node.js)で共有するコードを書く際は、どちらの環境でも厳格モードが適用されるよう、常にESMで記述することを推奨します。
・古いライブラリを修正する場合、`this` の参照先に注意してください。厳格モードではグローバルスコープでの `this` は `undefined` になります。windowオブジェクトへ直接アクセスすることを前提とした古いコードをモジュール化する際は、必ず `window` または `globalThis` を明示的に参照するように修正してください。
現代のフロントエンド開発において、厳格モードは「バグを未然に防ぐための強力なセーフティネット」です。この仕組みを正しく理解し、型安全な開発環境を構築していきましょう。