こんにちは！TypeScriptの世界へようこそ。チーフアーキテクトの私です。
今日お話しするのは、TypeScriptのプロジェクトを作る時に絶対に避けて通れない、だけど名前がちょっといかめしい設定`alwaysStrict`についてです。
「また難しそうなコンフィグの話が出たよ……」なんて、ブラウザバックしようとしていませんか？
大丈夫です！今日は難しい専門用語はなるべく封印して、身近な例えを交えながら、この子（設定）がどれだけ私たちの開発を守ってくれる心強い相棒なのかをお話ししますね。
ゆっくりコーヒーでも飲みながら、リラックスして読んでいってください。
—
そもそも `alwaysStrict` ってなに？（身近な例えで考えてみる）
いきなりですが、みなさんのお部屋を想像してみてください。
片付けが苦手な人が住むお部屋は、床に脱ぎ捨てた靴下が転がり、散らかった雑誌の上にリモコンが……と、やりたい放題（JavaScriptの緩い世界）。
「まあ、いっか！」で済むうちはいいですが、夜中に暗い部屋を歩いたとき、転がっていたおもちゃを踏んで「痛っ！」となった経験、ありませんか？
一方、`alwaysStrict`をONにしたお部屋は、「夜中でも安全に歩けるように、床のものはすべて決まった場所にピシッと片付ける！」というルールが徹底されたお部屋です。
TypeScriptの `alwaysStrict` は、コンパイル（変換）されたJavaScriptファイルの一番上に、おなじみの魔法の呪文 `”use strict”;`（厳格モードで動かしてね、という合図）を自動で差し込んでくれる設定です。
これによって、JavaScriptの「うっかりミスしがちな危なっかしい書き方」を、JavaScriptエンジン（ブラウザなど）がガッチリとガードしてくれるようになります。
—
なぜこの設定が「お守り」になるの？ つまずきポイントを解説
TypeScriptを書き始めたばかりの頃って、「型エラーが出なくなったから万全だぜ！」と思いがちです。でも実は、TypeScriptのチェックをすり抜けたコードが、いざブラウザで動いたときにJavaScriptの仕様のせいでバグを引き起こすことがあるんです。
ここでは、`alwaysStrict` がオフのままだと見逃してしまいがちで、初心者が一番やりがちな「うっかりミス」を2つほど見てみましょう。
1. うっかりグローバル変数を生み出してしまう事件
例えば、変数のスペルを打ち間違えたときのことです。
// alwaysStrictが「オフ」の世界だと…
function updateUser() {
//本当は name と書きたかったのに、うっかりusreと打ってしまった！
usre = “Taro”;
console.log(“ユーザーを更新しました！”);
}
`alwaysStrict` がオフの場合、JavaScriptは「おっ、新しい名前の変数 `usre` が勝手に作られたんだな！じゃあ、外の世界（グローバルスコープ）に登録しとくね！」と優しく（そしてお節介に）受け止めてしまいます。
これ、プログラムが大きくなったときに、どこから変数が書き換えられたのか分からなくなるバグの温床になります。
しかし、`alwaysStrict` を `true` にしておくと、TypeScript（およびその先のJavaScript）はこう怒ってくれます。
> 「おいおい、宣言もされていない `usre` なんて変数に突然代入しようとするなよ！ スペルミスじゃないのかい？」
おっと、教えてくれてありがとう！と、事前にミスに気づくことができるわけです。
—
どうやって設定するの？（設定ファイルのぞき見コーナー）
「難しそう」と思われがちな `alwaysStrict` ですが、設定はとってもシンプルです。
プロジェクトの根っこ（ルートディレクトリ）にある `tsconfig.json` というファイルを開いてみてください。
大抵の場合、最初から下のように設定されているか、コメントアウトされているはずです。
{
“compilerOptions”: {
/ すべてのモジュールを厳格モードでパースし、’use strict’ を出力します /
“alwaysStrict”: true
}
}
「あれ？ 私のファイルには書いてないよ？」という方、安心してください。
TypeScriptには、`”strict”: true` という最強のまとめパックが用意されています。この `strict` を有効にしていれば、`alwaysStrict` も自動的に `true` になります。
実務の現場では、基本はこの「まとめパック」を有効にしておくのが、現代のフロントエンド開発のスタンダードであり、最も安全な道です。
—
実践：実際にコードを書いてその安心感を体験しよう
それでは、実際にエディタに貼り付けて試せるサンプルコードを見てみましょう。
`alwaysStrict: true` の世界では、次のような「ちょっと危ういコード」を書くと、TypeScriptが優しく、かつビシッと止めてくれます。
/
- alwaysStrictの恩恵を体感するサンプルコード
- エディタに貼り付けて、赤波線（エラー）がどう出るか確認してみよう！
/
// 1. 読み取り専用のプロパティを書き換えようとした場合
const user = Object.freeze({
name: “花子”,
age: 28
});
// 厳格モード（alwaysStrict）では、凍結されたオブジェクトのプロパティを
// 書き換えようとすると、容赦なく実行時エラー（またはコンパイルエラー）になります。
// user.age = 29; // ❌ エラー: Cannot assign to read only property ‘age’
// 2. 予約語を変数名に使おうとした場合
// let public = “ホームページ”; // ❌ エラー: 予約語を変数名にすることはできません
console.log(“安全なコードの世界へようこそ！”);
このように、私たちが「あ、やっちゃった！」と気づく前に、TypeScriptとJavaScriptの二重のチェック体制で守ってくれるのが `alwaysStrict` の最大の魅力です。
—
チーフアーキテクトからのメッセージ
新しい技術を学ぶとき、最初は覚えることが多くてパンクしそうになりますよね。「コンフィグの細かい設定なんて、とりあえず動けばいいや」って思いたくなる気持ち、痛いほどよく分かります。
でも、この `alwaysStrict` のような「厳格にする設定」は、あなたを縛り付けるためのものではありません。
「未来のあなたが、深夜のデバッグ地獄で泣かなくて済むように先回りして守ってくれる、優しいお守り」なんです。
最初はエラーがたくさん出て「厳しいな……」と感じるかもしれませんが、それはTypeScriptがあなたに寄り添って、より良いコードへと導いてくれている証拠です。
焦らず、一歩一歩、自分のペースで進んでいきましょう。あなたのTypeScriptの旅を、私はいつも応援しています！
コメント