こんにちは！TypeScriptの世界へようこそ。
コードを書いていると、「あれ、これってどうしてこうなるの？」と迷子になる瞬間、ありますよね。大丈夫、みんな最初はそこから始まります。
今日は、TypeScriptの「影の立役者」とも言える、ちょっと賢い設定「importHelpers」についてお話しします。これを知っておくと、あなたの書いたコードがスリムになり、パフォーマンスも向上します。一緒に見ていきましょう！
—
1. コンパイル後のコードに隠された「おまけ」の話
TypeScriptは、私たちが書いたモダンなコードを、ブラウザが理解できるJavaScriptに変換してくれます。この変換作業を「コンパイル」と呼ぶのですが、実は裏側でTypeScriptは「おまけの機能（ヘルパー関数）」をこっそり追加しているんです。
例えば、新しい構文（スプレッド構文など）を古いブラウザでも動くように変換する際、TypeScriptは「これをうまく動かすための部品」を、変換後のファイルの先頭に毎回コピペしてくれています。
想像してみてください
あなたが料理（開発）をしているとして、レシピ（コード）を書くたびに、一番上に「包丁の使い方」「火の起こし方」という説明書を毎回毎回、手書きで書き写しているようなものなんです。
- 1ファイルだけなら良いけれど、10ファイル、100ファイルになったら？
- 同じ説明書を何百回も書き写すのは、スペースの無駄ですよね。
この「無駄」を解消するのが、今回紹介する `importHelpers` です。
—
2. 「importHelpers」という魔法のスイッチ
`importHelpers` を有効にすると、TypeScriptは「説明書を毎回コピペするのやーめた！」と決断します。代わりに、「詳しくは `tslib` という本棚を見てね！」というリンクを貼るようになるんです。
こうすることで、各ファイルが驚くほど軽くなります。
設定のやり方はとっても簡単！
プロジェクトのルートにある `tsconfig.json` を開いて、`compilerOptions` の中に以下の1行を追加してください。
{
“compilerOptions”: {
// …他の設定…
// これを true にするだけで、ヘルパー関数を外部から読み込むようになります
“importHelpers”: true
}
}
たったこれだけです。でも、これだけだとTypeScriptは「どこにその本棚（ヘルパー）があるの？」と迷子になってしまうので、 `tslib` というパッケージをインストールしてあげる必要があります。
ターミナルで以下のコマンドを打ち込んでみてください。
npmを使う場合
npm install tslib
yarnを使う場合
yarn add tslib
これで準備完了です！
—
3. 具体的に何が変わるの？
言葉だけだと少し抽象的なので、イメージしてみてください。
設定前（importHelpers: false）
// A.js (ヘルパー関数がベタ書きで入ってくる)
var __assign = …; // 毎回生成される
// …あなたのコード…
// B.js (ここにも同じものが！）
var __assign = …; // また生成される！
設定後（importHelpers: true）
// A.js (tslibから借りてくる！)
import { __assign } from “tslib”;
// …あなたのコード…
// B.js (ここもtslibから！)
import { __assign } from “tslib”;
どうでしょう？ `tslib` という共通の部品庫から必要なものだけを呼び出すので、最終的なファイルの合計サイズがぐっと小さくなります。特に大規模なプロジェクトになればなるほど、この効果は絶大です。
—
最後に：完璧主義にならなくて大丈夫
「えっ、じゃあ今すぐ全部のプロジェクトで設定しなきゃいけないの？」と焦らなくても大丈夫ですよ。
最初は「コードが動くこと」が一番大切です。`importHelpers` は、アプリケーションが成長してきて、「あれ、なんだかファイルサイズが大きくなってきたな？」と感じ始めた頃に思い出して設定するだけでも、全く遅くありません。
TypeScriptは、エンジニアの皆さんが心地よく開発できるように、こうした便利な機能がたくさん隠されています。一つずつ知っていくことで、あなたのコードはもっと洗練され、もっと美しくなっていきます。
ぜひ次のプロジェクトを立ち上げるときに、`tsconfig.json` を覗いてみてくださいね。応援しています！
コメント