TypeScriptのモジュールやScriptについて

学んだこと

Script とモジュール

• Script
  • プログラムの命令を書いたファイルやその一部分のこと
  • JavaScript や TypeScript では<script>タグや.jsファイルで書かれたコードのことをさす
  • 特徴
    • すべてのコードがグローバルに置かれる
    • 自動的に読み込まれない
    • 実行タイミングは HTML に読み込まれた順番
    • 再利用性は低い
• モジュール
  • 独立した小さなプログラムのパーツ
  • 必要なものだけ外に出したり(export)、他から取り入れたり(import)できる
  • 特徴
    • モジュール毎に独立している
    • 他のモジュールと安全につながることができる
    • HTML パース後に遅延実行される
    • 再利用性は高い

Webpack を使う理由

• モダンでないブラウザでモジュールを使うため
  • 古いブラウザでも動作するようにしてくれる
• HTTP 通信を一括で行うため
  • 一括で行うことで、HTTP リクエスト数を減らすことができるためパフォーマンスにつながる
• コードの最適化のため
  • 必要なときだけ読み込む動的インポート(コードスプリッティング)が可能で、初回の読み込みを速くすることができる
• プラグインの追加
• いろんな種類のファイルを扱うため
• HMR 付きのローカルサーバを使うため
• ホットリロードなど開発が便利になる
• プラグインやローダーで柔軟にカスタマイズすることができる
  • 画像の最適化、Sass のコンパイル、Linter の実行など Webpack の設定に組み込むことができる

Vite との違い

• Vite も Webpack と同じバンドラー
  • 開発サーバ起動速度が速い
  • ホットリロードの速度が速い
  • 必要なファイルだけその場でビルドする
  • 必要な設定だけ最低限して、カスタマイズすることができる
  • TS や Sass の対応あり
  • 本番用ビルドは Webpack より Vite のほうが速い
  • 大規模プロジェクトはいけるが、複雑化すると工夫が必要
    • 初学者や中小規模のプロジェクトで導入しやすい

esbuild との違い

• Go で書かれているバンドラー
  • Go で書かれており、コンパイル済みのバイナリとして動作するため非常に速い
  • Vite や Rome の内部で使用されている
  • JS や TS のビルドが高速
  • 単体で Webpack のようなバンドルも可能
  • Babel の代替として使うケースも多い
  • プラグイン API あり

Rome との違い

• 次世代オールインワン開発ツール
  • Lint、Formatter、Complier などが全部入っている
  • Rust 製で非常に高速
  • 設定が統一されていて管理が楽
  • TS 対応している、将来的に JSX やバンドルも正式対応予定
  • 将来注目されるかも