やあ。TypeScriptの世界へようこそ。
初めてこの言語に触れるとき、`tsconfig.json`という設定ファイルに出会って「うわっ、なんだこの呪文みたいな設定は…」とブラウザを閉じそうになった経験、誰にでもあるはずだよ。大丈夫、君だけじゃない。
今日は、その中でも特に「これを選べばいいの？ それともあれ？」と迷いやすい `compilerOptions.module` について、肩の力を抜いてお話ししようと思う。
—
TypeScriptの「モジュール」って、そもそも何者？
まず、「モジュール」という言葉を難しく考えすぎないでほしい。
例えば、君が料理をしているとしよう。冷蔵庫から「野菜」「お肉」「調味料」をバラバラに取り出すんじゃなくて、あらかじめ切って袋詰めされた「カレー用野菜パック」みたいなものがあるよね。
プログラミングにおけるモジュールも同じ。「関連する機能やデータを一つの箱にまとめて、必要なときに必要な場所へ呼び出せるようにしたもの」のことだ。
TypeScriptを書いていると、この「箱」をどういう形式で包んで外に届けるかを指定しなきゃいけない。それが `compilerOptions.module` の正体なんだ。
「配送業者」を選ぶイメージで考えてみよう
この設定は、言ってみれば「作った荷物を、どの配送業者に運ばせるか」を決めるようなものだよ。
- CommonJS (`”commonjs”`): 昔ながらの信頼できる「おじいちゃんがやってる郵便局」。Node.jsというサーバーサイドの世界では、これが標準だね。
- ES6 / ESNext (`”esnext”`): 最近の主流。「最新鋭の高速配送サービス」。今のモダンなWebブラウザや、React/Vueなどのフレームワークで最も好まれる形式だ。
- UMD (`”umd”`): 「どこでも届けるよ！」という欲張りな業者。古い環境でも新しい環境でも動くように工夫されているけれど、その分少し重たい。
初学者がまず選ぶべき「たった一つの正解」
もし君が、今流行りのReactやVue、あるいはNext.jsのようなツールを使ってWebサイトを作ろうとしているなら、悩む必要はないよ。
{
“compilerOptions”: {
“module”: “esnext”
}
}
これだけでOKだ。「今のブラウザは最新の荷物受け取りに対応しているから、一番効率の良い業者を使ってね」という指示になる。迷ったら `esnext`、これが今の現場のスタンダードだ。
もし、Node.jsで動く簡単なツールを作っているなら、`”commonjs”` を選ぶのが無難だね。
実際にコードで見てみよう
例えば、君が「挨拶をする機能」を別のファイルに切り出したとしよう。
greeting.ts (部品を作る)
// 外から呼べるように「export」をつけるのがモジュールのルール
export const sayHello = (name: string): string => {
return `こんにちは、${name}さん！`;
};
main.ts (部品を呼び出す)
import { sayHello } from ‘./greeting’;
// コンソールに表示してみる
console.log(sayHello(“TypeScript学習者”));
TypeScriptは、このコードをJavaScriptに変換するときに、設定ファイル（`tsconfig.json`）の `module` 設定を見て、相手（ブラウザやNode.js）が理解できる「梱包の仕方」に書き換えてくれるんだ。
つまずきそうなポイントへのフォロー
ときどき、「設定を変えたのに動かない！」という悲鳴を聞くことがある。それは、「JavaScriptの受け入れ体制」と「TypeScriptの梱包方法」が噛み合っていないからだ。
例えば、最新のブラウザは `esnext` という梱包は得意だけど、古いブラウザや特定の古いNode.jsは、その梱包を開ける方法を知らないことがある。
もしエラーが出たら、一度深呼吸をしてこう考えてみて。
「この荷物を開けるのは誰だろう？（ブラウザ？ サーバー？）」
そして、その相手が一番得意な「配送業者（module設定）」を選んであげるだけで、パズルのピースがカチッとはまるように解決することが多いんだ。
—
最後に：完璧を目指さなくていい
最初は `tsconfig.json` の設定なんて、呪文に見えて当たり前だよ。僕だって、初めて触ったときは「なんでこんなに細かいんだ！」と頭を抱えたものさ。
でも、一度この「配送業者のイメージ」を掴んでしまえば、あとは現場の状況に合わせて切り替えるだけ。君の書いたコードが、世界中のブラウザで軽やかに動く姿を想像してみてほしい。
これからも、一つずつ紐解いていこう。君のTypeScriptライフが、今日より少しだけ楽しくなることを祈っているよ。何か詰まったら、またいつでも聞いてね。
コメント