use strictって何?JavaScriptをもっと安全に書こう
JavaScriptのuse strict(厳格モード)について初心者向けに分かりやすく解説。エラーを防いで安全なコードを書く方法を学びましょう。
みなさん、JavaScriptを書いていてこんな経験はありませんか?
「なんでこんなエラーが出るの?」「変数のスペルミスに気づかなかった」「なんで動かないの?」
こんな悩み、実はとても多いんです。 でも大丈夫です!use strictを使えば、こういった問題を未然に防げるようになります。
この記事では、JavaScriptの「use strict」(厳格モード)について初心者向けに分かりやすく解説します。 より安全で質の高いコードを書くための便利な機能を、一緒に学んでいきましょう!
use strictって何?基本を理解しよう
簡単に言うと「厳しいチェック機能」
use strictは、JavaScriptの厳格モードを有効にする特別な命令です。
簡単に言うと、「いつもより厳しくコードをチェックしてくれる機能」のことです。 普通なら見逃してしまうミスも、きちんとエラーで教えてくれるようになります。
"use strict";
// この行以降は厳格モードで動作するfunction myFunction() { console.log("厳格モードで実行されています");}
この例では、ファイルの最初に"use strict";
と書くことで、厳格モードを有効にしています。
どうやって使うの?
use strictの使い方はとても簡単です。
// ファイル全体で使う場合"use strict";
let userName = "田中太郎";console.log(userName);
ファイルの一番最初に"use strict";
と書くだけです。
これで、そのファイル全体が厳格モードで動作するようになります。
// 関数だけで使う場合function strictFunction() { "use strict"; // この関数内だけ厳格モード let userName = "佐藤花子"; console.log(userName);}
function normalFunction() { // この関数は通常モード console.log("通常モードで実行");}
関数の最初に書けば、その関数だけを厳格モードにすることもできます。
厳格モードで何が変わるの?
変数の宣言を忘れるとエラーになる
厳格モードの一番分かりやすい効果がこれです。
"use strict";
// 通常モードなら動く(でも危険)function normalMode() { userName = "田中太郎"; // let や const を忘れている console.log(userName); // 動いてしまう}
// 厳格モードならエラーになるfunction strictMode() { "use strict"; // userName = "田中太郎"; // ReferenceError: userName is not defined let userName = "田中太郎"; // 正しい書き方 console.log(userName);}
変数宣言(let
やconst
)を忘れると、すぐにエラーで教えてくれます。
これで、スペルミスや宣言忘れを防げるんです。
読み取り専用のプロパティを守ってくれる
オブジェクトの大切なプロパティを間違って変更することを防げます。
"use strict";
const config = {};Object.defineProperty(config, "version", { value: "1.0.0", writable: false // 変更不可に設定});
console.log(config.version); // "1.0.0"// config.version = "2.0.0"; // TypeError: Cannot assign to read only property
通常モードなら静かに失敗してしまいますが、厳格モードならエラーで教えてくれます。
削除できないプロパティの削除を防ぐ
大切なプロパティを間違って削除することも防げます。
"use strict";
const user = {};Object.defineProperty(user, "id", { value: 12345, configurable: false // 削除不可に設定});
console.log(user.id); // 12345// delete user.id; // TypeError: Cannot delete property
データの整合性を保つのに役立ちますね。
実践的な使い方を見てみよう
スペルミスを防ぐ
プログラミングでよくあるスペルミスを防ぐ例です。
"use strict";
function calculateTotal(prices) { let total = 0; for (let i = 0; i < prices.length; i++) { // スペルミスがあった場合 // totak += prices[i]; // ReferenceError: totak is not defined total += prices[i]; // 正しい書き方 } return total;}
const prices = [100, 200, 300];console.log(calculateTotal(prices)); // 600
total
をtotak
と間違えて書いても、すぐにエラーで教えてくれます。
オブジェクトの安全な操作
ユーザー情報のような大切なデータを安全に扱う例です。
"use strict";
function createUser(name, age) { const user = { name: name, age: age }; // 名前を変更できないようにする Object.defineProperty(user, "name", { writable: false }); return user;}
const user = createUser("田中太郎", 30);console.log(user.name); // "田中太郎"
// user.name = "佐藤花子"; // TypeError: Cannot assign to read only property
重要なデータを間違って変更してしまうことを防げます。
関数内でのthisの安全な扱い
厳格モードでは、this
の扱いもより安全になります。
"use strict";
function showThis() { console.log(this); // undefined(厳格モードでは)}
// 通常モードなら window オブジェクト// 厳格モードなら undefined で安全showThis();
// オブジェクトのメソッドとして呼び出した場合const obj = { name: "テストオブジェクト", showThis: showThis};
obj.showThis(); // obj オブジェクトが表示される
予期しないthis
の値による問題を防げます。
厳格モードを使う理由
バグを早く見つけられる
プログラムのバグを早い段階で発見できます。
"use strict";
function calculateDiscount(price, rate) { // スペルミスがあるとすぐにエラーになる let discountPrice = price * (1 - rate); // discountPrize = price * (1 - rate); // ReferenceError return discountPrice;}
console.log(calculateDiscount(1000, 0.1)); // 900
間違いがあっても、実行前にエラーで教えてくれるので安心です。
より安全なコードが書ける
データの安全性を高めることができます。
"use strict";
class BankAccount { constructor(balance) { this._balance = balance; // 残高を直接変更できないようにする Object.defineProperty(this, "balance", { get: function() { return this._balance; }, set: function(value) { if (value < 0) { throw new Error("残高は負の値にできません"); } this._balance = value; } }); } withdraw(amount) { if (amount > this._balance) { throw new Error("残高が不足しています"); } this._balance -= amount; } deposit(amount) { if (amount <= 0) { throw new Error("入金額は正の値である必要があります"); } this._balance += amount; }}
const account = new BankAccount(1000);console.log(account.balance); // 1000account.deposit(500);console.log(account.balance); // 1500
銀行口座のような重要なデータも安全に管理できます。
コードの品質が向上する
厳格モードを使うことで、自然とより良いコードが書けるようになります。
"use strict";
// 厳格モードでは一部の最適化も可能function fastCalculation(numbers) { let sum = 0; let count = numbers.length; for (let i = 0; i < count; i++) { sum += numbers[i]; } return sum / count;}
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];console.log(fastCalculation(data)); // 5.5
パフォーマンスの向上も期待できる場合があります。
使うときの注意点
ファイル全体に影響する
ファイルの最初に"use strict"
を書くと、そのファイル全体が厳格モードになります。
// 推奨:ファイル全体で厳格モード"use strict";
function myFunction() { // 自動的に厳格モードが適用される console.log("厳格モードで実行");}
新しいプロジェクトでは、最初から使うことをおすすめします。
既存のコードとの互換性
既存のコードがある場合は、段階的に導入しましょう。
// 既存のコード(通常モード)function legacyFunction() { userName = "田中太郎"; // 古い書き方 return userName;}
// 新しいコード(厳格モード)function newFunction() { "use strict"; let userName = "佐藤花子"; // 正しい書き方 return userName;}
一度に全部変更するのではなく、少しずつ移行していくのが安全です。
最新のJavaScriptでは自動で有効
ES6モジュールでは自動適用
最新のJavaScriptモジュールでは、自動的に厳格モードが有効になります。
// ES6モジュール(module.js)export function calculate(x, y) { // "use strict" を書かなくても厳格モードが適用される return x + y;}
export class Calculator { constructor() { // 厳格モードで動作 this.result = 0; } add(value) { this.result += value; return this; }}
モジュールを使う場合は、特に意識しなくても厳格モードが使われます。
ES6クラスでも自動適用
クラス内では自動的に厳格モードになります。
class MyClass { constructor() { // クラス内では自動的に厳格モード this.value = 0; } setValue(val) { // 'use strict' を書かなくても厳格モードが有効 this.value = val; }}
現代のJavaScriptでは、厳格モードがより身近になっているんです。
実際の開発での活用例
フォームのバリデーション
入力フォームの検証処理での活用例です。
"use strict";
function validateForm(formData) { const errors = []; // 必須項目のチェック if (!formData.name || formData.name.trim() === "") { errors.push("名前は必須項目です"); } if (!formData.email || !formData.email.includes("@")) { errors.push("有効なメールアドレスを入力してください"); } if (!formData.age || formData.age < 0 || formData.age > 150) { errors.push("年齢は0から150の間で入力してください"); } return { isValid: errors.length === 0, errors: errors };}
// 使用例const formData = { name: "田中太郎", email: "tanaka@example.com", age: 30};
const validation = validateForm(formData);if (validation.isValid) { console.log("フォームは有効です");} else { console.log("エラー:", validation.errors);}
入力チェックのような重要な処理でも安心して使えます。
データ処理の安全性確保
ユーザーデータの処理での活用例です。
"use strict";
function processUserData(users) { const processedUsers = []; for (let i = 0; i < users.length; i++) { const user = users[i]; // 必須プロパティの存在チェック if (!user.hasOwnProperty("id") || !user.hasOwnProperty("name")) { throw new Error(`ユーザーデータが不正です: インデックス ${i}`); } // データの正規化 const processedUser = { id: user.id, name: user.name.trim(), email: user.email ? user.email.toLowerCase() : null, createdAt: new Date() }; processedUsers.push(processedUser); } return processedUsers;}
大切なデータを扱う時も、エラーをしっかりチェックしてくれます。
ブラウザでの対応状況
use strictは多くのブラウザでサポートされています。
対応ブラウザ:
- Internet Explorer 10以降
- Chrome 13以降
- Firefox 4以降
- Safari 5.1以降
- Opera 12以降
古いブラウザでは無視されるだけなので、安心して使えます。 最新のブラウザなら、ほぼ確実に対応していますね。
まとめ
JavaScriptの「use strict」について学んできました。
基本的なポイントをおさらいしましょう。
- 基本の使い方: ファイルや関数の最初に
"use strict"
と書く - 主な効果: 変数宣言の強制、プロパティ保護、より安全なthis
- メリット: バグの早期発見、安全なコード、品質向上
- 最新JavaScript: ES6モジュールやクラスでは自動で有効
実践的なメリットも覚えておきましょう。
- スペルミスや宣言忘れを防げる
- データの安全性を高められる
- エラーを早い段階で発見できる
- コードの品質が自然と向上する
使用時の注意点も大切です。
- 既存コードには段階的に導入する
- ファイル全体に影響することを理解する
- 最新のJavaScriptでは自動で有効になる
use strictは、より安全で質の高いJavaScriptコードを書くための強力な味方です。 最初は少し厳しく感じるかもしれませんが、慣れると手放せない機能になりますよ。
ぜひ今度のプロジェクトで、use strictを使ってみませんか?