ツリーシェイキング

📖 もうちょい詳しく

何が新しいの？

ウェブのアプリは、たくさんの小さなコード（部品）を集めて作ります。ところが、取り込んだ部品の中には実際には使っていない関数も多く混ざります。ツリーシェイキングは、その「使われていないコード」を出荷前に見つけて落とす考え方です。

どうやって動いてるの？

JavaScript の import / export という書き方には、どの部品がどこから来てどこで使われるかを、プログラムを動かす前に静的に追える性質があります。バンドラー（複数ファイルを1つにまとめる道具）はこの依存関係をたどり、どこからも呼ばれていない部分に印をつけて出力から取り除きます。ただし、外から見えない場所で実行される処理など、消すと動作が変わるおそれがあるコードは、安全のため残されることが多いです。

何ができるの？

最終的にブラウザへ届けるファイルが軽くなります。読み込むデータが減るので、ページの表示が速くなり、通信量も小さくできます。ふだんの開発では設定をあまり意識せず、ビルドの段階で自動的に働くことがほとんどです。

🌱 身近なたとえ

引っ越しの荷造りで例えると、本棚をまるごと運ぶのではなく、実際に読む本だけを箱に詰める作業に近いです。木を揺すって枯れ葉を落とすように、使わない枝葉（コード）を振り落とし、必要な実だけを残します。これが「ツリー（木）シェイキング（揺さぶり）」という名前の由来です。

✅ まず覚えるポイント

• 使っていないコードを出力から取り除き、ファイルを軽くする最適化です
• バンドラーがビルドのときに自動でやってくれることが多いです
• import / export（ES Modules）の静的な構造が前提になります
• 軽くなると読み込みが速くなり、表示も速くなります
• 安全に消せないコードは残されるので、効果は書き方にも左右されます

🧭 よくある勘違い

コードを書くたびに自分で消す作業のこと？

いいえ、手作業ではありません。開発者が書いたソースはそのままにして、出荷用ファイルを作る「ビルド」の段階でツール側が自動的に落とします。書く側が特別な操作をしなくても効くのが基本です。

何でも消してくれるから書き方は気にしなくていい？

そうとは限りません。export を使わない古い書き方や、実行してみないと使う/使わないが決まらない処理は、安全のため消されずに残ることがあります。きれいに効かせるには、モジュールの書き方をそろえることが助けになります。

🧩 関連して覚えると楽な言葉

• バンドラー: 複数のコード部品を1つにまとめる道具。ツリーシェイキングはこの中で動きます
• モジュール: コードを役割ごとに分けた単位。import/export の構造が前提になります
• JavaScript: ウェブを動かす言語。ツリーシェイキングはこの言語のモジュール機能を利用します
• 遅延読み込み: 必要になるまで読み込みを遅らせる別の軽量化。組み合わせると効果的です

🏁 ひとことでまとめ

要らないコードをビルド時にふるい落として、ユーザーに届けるファイルを軽くする工夫です。