TypeScriptとVSCodeの「ナイスな関係」を築こう：設定の迷子にならないための処方箋
こんにちは。TypeScriptの世界へようこそ。
初めての型定義や`tsconfig.json`という聞き慣れないファイルに直面して、「何を書けばいいのか分からない…」「VSCodeが急に赤線を引いてきて怖い！」と感じていませんか？
大丈夫です。TypeScriptは、あなたのコードを「より安全に、より速く」するための頼れる相棒です。今回は、その相棒であるTypeScriptと、エディタであるVSCodeの間で「うまく連携するためのルール決め」について、少しだけ掘り下げてみましょう。
—
1. `tsconfig.json` は「料理のレシピ」です
まず、`tsconfig.json`というファイルについて。これは、TypeScriptという料理人が、あなたのコードをどうやって「JavaScriptという料理」に変換するかを決めるレシピ本です。
VSCodeは非常に優秀な執事ですが、レシピ本がないと「この食材（コード）をどう調理すればいいんですか？」と迷ってしまいます。
最初のレシピ（設定ファイル）を作ってみよう
プロジェクトのルートフォルダに `tsconfig.json` を作成し、まずは最小限の設定を書いてみましょう。
{
“compilerOptions”: {
/ JavaScriptに変換する際のターゲット（ES6にすると最近のブラウザで動きやすくなります） /
“target”: “ES6”,
/ VSCodeに「厳しくチェックして！」と伝える魔法のスイッチ /
“strict”: true,
/ モジュールの読み込みルール（今のモダンな開発のスタンダードです） /
“module”: “ESNext”
},
/ このフォルダの中のファイルをチェックしてね、という指示 /
“include”: [“src//”]
}
—
2. VSCodeと「言語サーバー」のいい関係
VSCodeでTypeScriptを書いているとき、裏側では「tsserver（ティーエス・サーバー）」という小さな妖精さんが常にあなたのコードを監視しています。
この妖精さんが、「あ、ここで変な名前の変数を呼び出そうとしてる！赤線を引かなきゃ！」と教えてくれているのです。これが「型チェック」の正体です。
VSCodeの設定で「言語サーバー」を調整する
もし、「TypeScriptのチェックが重いな…」「保存のたびに止まるな…」と感じたら、VSCodeのワークスペース設定 `.vscode/settings.json` を活用しましょう。
`.vscode/settings.json` を作成し、以下のように記述してみてください。
{
// TypeScriptの自動インポートをより賢くする設定
“typescript.preferences.importModuleSpecifier”: “non-relative”,
// VSCodeが使うTypeScriptのバージョンを、プロジェクト内のものに固定する
// (これをしておくと、チームでバージョンがズレる悲劇を防げます)
“typescript.tsdk”: “node_modules/typescript/lib”
}
—
3. なぜ「設定の同期」が大事なのか？
一番つまずきやすいのが、「コマンドラインで実行するTypeScript」と「VSCodeで見ているTypeScript」の意見が食い違う瞬間です。
- コマンドライン： 「エラーないよ！」
- VSCode： 「赤線だらけだよ！」
この状況、すごく怖いですよね。これを防ぐコツは「VSCodeの右下のステータスバー」を見ることです。
VSCodeの右下を見ると、「TypeScript 5.x.x」という表示があるはずです。これをクリックすると、「Use Workspace Version（ワークスペースのバージョンを使う）」という選択肢が出てきます。迷わずこれを選んでください。
これにより、`package.json` でインストールしたTypeScriptと、VSCodeが読み込んでいるTypeScriptが一致し、世界が平和になります。
—
4. 最後に：怖がらずに「設定」を楽しもう
初心者のうちは、`tsconfig.json` の設定項目が多すぎて目が回りそうになるかもしれません。でも、全部を完璧に理解する必要なんてないんです。
まずは `strict: true` だけ入れておいて、あとは困ったときに「このオプションは何だろう？」と少しずつ紐解いていけば十分。
TypeScriptは、あなたのコードを壊すためのものではなく、「未来のあなたがコードを修正する時に、過去の自分がヒントを残してくれている」そんな温かい仕組みです。
VSCodeという最高の環境と、TypeScriptという丁寧な相棒を使って、ぜひ楽しい開発ライフを送ってくださいね。もし赤線が出ても大丈夫。それはTypeScriptがあなたに「ここ、もっと良くできるよ！」と教えてくれている合図なのですから。
それでは、また次の記事でお会いしましょう！
コメント