JavaScriptの厳格モードと非厳格モード

JavaScriptには2つの実行環境、すなわち非厳格モード（Sloppy mode）と厳格モード（Strict mode）があります。これらは言語の特定の特性や動作においていくつかの違いがあります。

1. 厳格モードの有効化方法

• デフォルトでは、JavaScriptは非厳格モードで実行されます。
• スクリプトまたは関数の先頭に"use strict";を追加することで、厳格モードに入ります。
• 例えば、スクリプトのすべてのステートメントの前に"use strict";を直接配置して厳格モードに入ることができます。または、関数内に"use strict";を追加してその関数内で厳格モードを有効にすることもできます。

function strictFunction() {
  'use strict';
  const message = "こんにちは！厳格モードのスクリプトです！";
  console.log(message);
}

2. 非厳格モードで許可される動作

1. 変数が宣言される前に使用されることを許可（暗黙のグローバル変数の原因となる）
2. thisが特定のオブジェクトにバインドされていなくてもグローバルオブジェクトを指す
3. 関数のパラメータ名が重複できる
4. 設定不可なプロパティの削除を許可

// 宣言前に変数が使用される
data = 10;
console.log(data); // 出力: 10

// thisがグローバルオブジェクトを指す
console.log(this === globalThis); // ブラウザでは非厳格モードでtrueが出力

// 関数パラメータの重複を許可
function calculate(x, x, y) {
  console.log(x * x + y);
}

// 設定不可なプロパティの削除
const user = {};
Object.defineProperty(user, 'username', { value: 'Bob', configurable: false });
delete user.username; // 非厳格モードではエラーにならず、削除操作は無効になる
console.log('username' in user); // 出力: true

3. 厳格モードで許可される動作

1. 変数が宣言される前に使用されることを禁止
2. thisが特定のオブジェクトにバインドされる必要がある
3. 設定不可なプロパティの削除操作を禁止
4. 関数内でのthisのデフォルト値がundefinedになる
5. 8進数リテラルの使用を禁止

// 宣言前に変数を使用することを禁止
'use strict';
z = 20;
console.log(z); // エラー: ReferenceError: z is not defined

// グローバルスコープでのthisはundefined
'use strict';
console.log(this === undefined); // 厳格モードでtrueが出力

// 設定不可なプロパティの削除を禁止
'use strict';
const profile = {};
Object.defineProperty(profile, 'age', { value: 30, configurable: false });
delete profile.age; // 厳格モードではエラー: Uncaught TypeError: Cannot delete property 'age' of #<Object>

// 関数内でのthisのデフォルト値はundefined
'use strict';
function demonstrateThis() {
 console.log(this);
}
demonstrateThis(); // 出力: undefined

// 8進数リテラルの使用を禁止
'use strict';
const number = 070; // エラー: SyntaxError: Octal literals are not allowed in strict mode.

4. 非厳格モードと厳格モードの利点と制限

1. 非厳格モードでは、コードの互換性が高く、使用がより柔軟ですが、変数が宣言される前に使用されるなど問題を引き起こす可能性のある特性も存在します。
2. 厳格モードでは、コードの互換性は低くなりますが、より安全であり、コードの品質が向上します。

5. ReactとVueでの厳格モードの使用

// Reactでの厳格モードの使用
// 通常はindex.jsファイルで直接使用
import React from 'react';
import ReactDOM from 'react-dom';
import Application from './Application';

ReactDOM.render(
  <React.StrictMode>
    <Application />
  </React.StrictMode>,
  document.getElementById('root')
);

// Vueでの厳格モードの使用
// 通常はmain.jsファイルで直接使用
import Vue from 'vue';
import Application from './Application.vue';

Vue.config.productionTip = false;
Vue.config.devtools = true;
Vue.config.strict = process.env.NODE_ENV !== 'production';

new Vue({
  render: h => h(Application),
}).$mount('#app');