こんにちは！フロントエンドの現場を長年駆けずり回っているチーフアーキテクトの私です。
JavaScriptって、本当に自由で最高な言語ですよね。「とりあえず動く」コードが秒速で書ける。変数に数字を入れたかと思えば、次の瞬間には文字を代入していても怒られない。この懐の深さが、私たちの開発をどれほど助けてくれたことか！
……でも、あなたもこんな経験、ありませんか？
「あれ？さっきまで動いていたのに、急に画面が真っ白になったぞ……？」
原因をコードの海から必死に探ってみたら、関数に渡していたデータが、文字列（`”100″`）じゃなくて数字の（`100`）だったせいで計算が狂っていた、なんていう悲劇。
JavaScriptの「何でも受け入れちゃう優しさ」は、時として私たちを盛大に転ばせる落とし穴になるんです。
「TypeScriptを導入すれば完璧なんだろうけど、ビルド環境の構築とか難しそうだし、今のプロジェクトはいきなり変えられないよ……」
そんなあなたに、今日はこっそり、しかし確実にお仕事のクオリティを爆上げする「魔法の裏技」をお教えします。それが、今回テーマにする `jsconfig.json` と `checkJs` です！
—
TypeScriptのフリをした、JavaScriptの秘密兵器
まず安心してください。今回ご紹介する方法は、いま書いているJavaScriptファイルを、TypeScriptのファイル（`.ts`）に書き換える必要は一切ありません。 今までの `.js` ファイルのままでOKです。
身近な例えで言うなら、いつも使っている使い慣れていて少しボロいお気に入りの自転車に、「自動で危険を察知してブレーキをかけてくれる最新の安全センサー」を後付けするようなものです。
VS Codeなどのエディタに対して、「おい、このフォルダの中のJavaScriptを、ちょっと厳しめの目で見張ってくれよ！」とこっそりお願いするだけで、エディタがあなたのコードの「うっかりミス」を事前にバシバシ指摘してくれるようになります。
なぜ、そんなことができるの？
実は、私たちが普段使っているVS Codeの頭脳（TypeScript言語サービス）は、裏側でTypeScriptの仕組みを使ってJavaScriptのコードを読んでいます。
つまり、デフォルトの状態だと「まあ、JavaScriptだし、自由に書かせてあげよっと」とエディタが甘やかしてくれている状態なんです。この甘やかしを、「今日から厳しくいきます！」に設定を変えるのが、今回の主役たちです。
—
さあ、設定をしてみよう！やり方は驚くほど簡単です
準備するものは、あなたのプロジェクトの「一番上の階層（ルートディレクトリ）」に、ファイルを1つ作るだけ。たったこれだけです。
ステップ1: `jsconfig.json` というファイルを作る
プロジェクトの一番上の階層に、`jsconfig.json` という名前のファイルを新しく作ってください。
そして、そのファイルの中に、以下の魔法の呪文（コード）をそのまま貼り付けます。
{
“compilerOptions”: {
// ここが今回の主役！JavaScriptに対しても型チェックを厳しくするスイッチをONにします
“checkJs”: true,
// ついでに「最新のモダンなJavaScriptの書き方を前提にしてね」とエディタにお願いします
“target”: “ESNext”,
// モジュールの読み込みルールを指定します（基本はこのままでOK！）
“module”: “ESNext”
},
// チェックしてほしいフォルダを指定します（一般的にはソースコードが入っているフォルダなど）
“include”: [“src//”]
}
たったこれだけ。これだけで、あなたのエディタの背筋がスッと伸びます。
—
実際にどう変わるの？エディタの「お節介」を体験しよう
設定ができたら、普段書いているJavaScriptファイルを開いてみてください。
例えば、次のようなコードを書いたとします。
/
- 消費税込みの価格を計算する優しい関数
- @param {number} price – 元の価格（数字を想定）
/
}
おっと、ここで重要なポイントです。
上のコードに出てくる `/ @param {number} … /` というコメント、見たことありますか？
これは「JSDoc（ジェイエスドック）」と呼ばれる書き方で、JavaScriptのコメントの中に「このデータは数字ですよ」「ここは文字ですよ」という名札をこっそり貼っておく技術です。
`jsconfig.json` で `checkJs: true` にすると、エディタはこの名札をめちゃくちゃ真面目にチェックし始めます。
うっかりミスをエディタが見逃さない！
もし、あなたがうっかり以下のようなコードを書いたとします。
// 【実例】文字列の “1000”（数字じゃなくて文字！）を渡しちゃった！
const basePrice = “1000”;
// さっきの計算関数に渡すよ
const finalPrice = calculateTax(basePrice);
console.log(finalPrice);
`checkJs` を有効にしていない今までのJavaScriptなら、そのまま実行されて（あるいは変な計算結果になって）ブラウザのコンソールで頭を抱えることになっていました。
しかし、`jsconfig.json` を置いたあなたのVS Codeはどうでしょう？
`basePrice` の下に、赤く波線（エラー）が表示されているはずです！
> 「型 ‘string’ の引数を型 ‘number’ のパラメータに割り当てることはできません。」
エディタがこうやって優しく、しかしハッキリと教えてくれます。
「おいおい、君はさっき『ここは数字が入る』って名札を貼ったのに、文字の `”1000″` を渡してるよ？ 大丈夫？」って。
これ、すごくないですか？ コードを実行してブラウザを開く前に、書いているその瞬間にミスが分かるんです。これほど開発スピードを加速させてくれるものはありません。
—
初学者のあなたが、今日からつまずかないための温かいアドバイス
「でも、いきなり `checkJs: true` にしたら、既存のコードのあちこちで赤線が出て、画面が赤信号だらけになったよ……助けて！」
大丈夫です。私たちがよく通る道ですから、安心してください。
今まで自由気ままに書いていたコードに対して、突然「今日から厳格なルールね！」と言い渡すわけですから、エディタがパニックを起こすのは当然です。
もしエラーが多すぎて心が折れそうになったら、以下のステップで進めてみてください。
1. まずは特定のファイルだけ、あるいは新しいファイルから試してみる
最初からプロジェクト全体に適用するのが怖ければ、まずは設定の `include` の範囲を狭めたり、試したいファイルだけで小さく始めてみてください。
2. JSDocコメントを味方につける
JavaScriptのままで型を教えるには、JSDoc（`@param` や `@type`）が最強の相棒になります。難しく考えず、「エディタへのメモ書き」くらいの軽い気持ちで書き始めてみてください。
—
まとめ
JavaScriptの自由さは魅力的ですが、プロジェクトが大きくなったり、チームで開発したり、未来の自分が数ヶ月後にコードを見返したりするとき、その自由さは時に牙を向きます。
かといって、今すぐすべての環境をTypeScriptに移行するのはコストが高すぎる。
そんな私たちのために、VS CodeとJavaScriptが用意してくれた最高の妥協点であり、最強の盾が `jsconfig.json` と `checkJs` です。
面倒なビルドツールの設定も、難しいコンパイルの勉強もいりません。
ただファイルを1つ置いて、設定を1行書くだけ。
今日からあなたのJavaScriptライフが、ぐっと安全で、心地よいものになりますように。
チーフアーキテクトの私でした！また次の現場でお会いしましょう！
コメント