「TypeScriptの世界へようこそ！」
まずはここまで踏み出したあなたに、心からの拍手を送らせてください。
新しい技術に触れるとき、最初に出会う「設定ファイル」の壁。特に `tsconfig.json` と `jsconfig.json` の違いなんて、公式ドキュメントを読んでも専門用語が並んでいて、頭が痛くなりますよね。
でも、大丈夫です。安心してください。
今日は、この二つのファイルが「あなたの開発を助けてくれる相棒」だということを、日々の生活に例えて紐解いていきましょう。
—
1. そもそも、なぜ「設定ファイル」が必要なの？
いきなりですが、あなたの部屋を想像してみてください。
もし、「どこに何があるか」を記したメモや地図がなかったら、探し物をするたびに家中をひっくり返すことになりますよね。
プログラミングの世界でも同じです。
「このコードはどのルールに従って書くの？」「このファイルを読み込むときは、どこを基準に探せばいいの？」ということを、エディタ（VS Codeなど）に教えてあげる地図。それが `tsconfig.json` や `jsconfig.json` なんです。
これらがあるおかげで、エディタは賢くなり、コードを書いている最中に「あ、ここ間違ってますよ！」と優しく教えてくれるようになるんですよ。
—
2. tsconfig.jsonとjsconfig.jsonの「立ち位置」の違い
この二つの関係を一言で言うなら、「教育熱心な先生（TypeScript）」と「親切な案内係（JavaScript）」の違いです。
tsconfig.json：TypeScriptという「完璧主義な先生」
TypeScriptを使っているプロジェクトでは、必ずこれが必要です。
このファイルは、いわば「我が家の厳しい（でも愛のある）教育方針」。
「変数の型はちゃんと決めてね！」「曖昧なコードは許さないよ！」と、コードがバグを生み出さないように、厳しくも頼もしいチェックを行ってくれます。
jsconfig.json：JavaScriptという「自由な旅人」
一方で、まだJavaScriptだけで書いているプロジェクト。ここではTypeScriptの厳しいチェックは不要ですよね。
でも、だからといって「何もなし」だと、エディタは迷子になってしまいます。
そこで登場するのが `jsconfig.json`。これは「地図とコンパス」です。「このプロジェクトの範囲はここだよ」「このフォルダの中身を優先的に探してね」と、最低限の道案内だけをしてくれる、とっても気さくな存在なんです。
—
3. 具体的にどう書くの？（実践編）
実際にエディタに貼り付けて試してみてください。どちらも、プロジェクトの「一番上の階層」に置くのがルールです。
tsconfig.json の例
TypeScriptのプロジェクトなら、こう書きます。
{
“compilerOptions”: {
// 厳しめのチェックレベル（これがTypeScriptの醍醐味！）
“strict”: true,
// ES6というモダンな書き方をサポートする設定
“target”: “ES6”,
// importのときに深い階層まで書かなくて済む魔法（パスエイリアス）
“baseUrl”: “./src”
},
// srcフォルダの中身を監視してね、という指示
“include”: [“src//”]
}
jsconfig.json の例
JavaScriptプロジェクトなら、こう書くだけで十分です。
{
“compilerOptions”: {
// TypeScriptの機能を一部借りて、補完（ヒント出し）を賢くする
“checkJs”: true,
// これを書くだけで、コードを書くときにすごく楽になります
“target”: “ES6”,
“baseUrl”: “./src”
},
“include”: [“src//”]
}
—
4. 迷ったら、どうすればいい？
「結局、どっちを使えばいいの？」と迷ったら、こう考えてみてください。
- 「型」を使って安全に開発したいなら… → `tsconfig.json` 一択です！
- 「型」はまだ怖い。まずはJavaScriptで気楽に書きたいなら… → `jsconfig.json` を作ってみましょう。
実は、JavaScriptのプロジェクトでも、途中で「やっぱりTypeScriptに挑戦したい！」と思ったら、`jsconfig.json` を `tsconfig.json` に名前を変えて、中身を少し書き換えるだけで、すぐにTypeScriptデビューできるんです。
—
最後に：つまずくのは「成長の証」です
設定ファイルでエラーが出たり、思い通りに動かなかったりすると、「自分には向いていないのかな」と落ち込んでしまうことがあるかもしれません。でも、それは全くの逆です。
「どうすればより効率的に、安全にコードを書けるか？」
そうやって悩んでいる時点で、あなたはすでに立派なエンジニアの思考を持っています。
最初はコピペで構いません。少しずつ設定の意味を理解して、自分だけの「心地よい開発環境」を作っていきましょう。
何かわからないことがあれば、またいつでも聞きに来てくださいね。あなたの挑戦を、心から応援しています！
コメント