ビルドツール（Vite）とホスティング
📖 このページのゴール：フロントを支える2つの“裏方”——ビルドツール（書いたコードをブラウザ向けに変換）とホスティング（どこに置いて配信するか）——の役割が分かる。 ← 目次・はじめにへもどる
(A) ビルドツール — 書いたコードを「ブラウザが読める形」に変換（🟢 基礎）
あなたが書くコードは、TypeScriptだったり、たくさんのファイルに分かれていたり、新しい書き方（JSX や最新構文）だったりします。でもブラウザがそのまま理解できるのは、素のJS・CSS・HTML。そのギャップを埋めるのが ビルドツール です。
主な仕事は3つ。
| 仕事 | 何をする | たとえ |
|---|---|---|
| トランスパイル | TypeScript→JS、新しい構文→古いブラウザでも動く形へ翻訳 | 方言を共通語に直す |
| バンドル | たくさんのファイルを、少数にまとめる | バラバラの荷物を箱詰め |
| 最適化 | 余計なものを削る・圧縮する（速く・軽く） | 真空パックで小さく |
代表的な道具：
- Vite（ヴィート）… いまの定番。開発中の表示が爆速で、設定も少ない。React/Vue/Svelte どれでもOK。
- webpack（ウェブパック）… 老舗で高機能（昔の定番）。
- esbuild / Rollup / Turbopack … さらに速い新世代（Viteの内部でも使われています）。
💡 むずかしく考えなくて大丈夫。React/Vue を
npm create vite@latestのように作り始めると、ビルドツール（Vite）は最初から入っています。「裏でこういう変換が走っている」と知っておけば十分です（🔧）。
(B) ホスティング — どこに置いて配信する？（🟢 基礎）
でき上がったフロントは、どこかに置いて・配る必要があります。ここで効いてくるのが、これまで学んだ描画戦略です。「サーバーで毎回作るか／作り置きを配るだけか」で、置き場所が変わります。
| あなたのアプリ | 必要なホスティング | 代表例 |
|---|---|---|
| SPA / SSG（作り置き・静的） | 静的ホスティング（HTMLを配るだけ。安い/無料も） | Vercel / Netlify / Cloudflare Pages / GitHub Pages / S3 + CloudFront |
| SSR / RSC（アクセス時にサーバーで生成） | サーバー／サーバーレス（実行環境が要る） | Vercel / Netlify Functions / Cloudflare Workers / Node を IaaS 上で |
🔗 ここは姉妹編 コンピューティングの選択肢 と地続きです。静的ホスティングや Vercel/Netlify は、あちらでいう PaaS／サーバーレス。「フロントをどこで動かすか」も、結局あの“はしご”の話なのです。
🔒 秘密の鍵はどう渡す？
ビルド時やサーバー側で、環境変数として鍵を渡します。ここで鉄則をもう一度——ブラウザに送るコードに鍵を埋め込まない。NEXT_PUBLIC_ や VITE_ の付いた変数はブラウザに出るので、秘密は入れない。秘密が要る処理は SSR / Server Components / サーバーレス関数（サーバー側）に置きます（姉妹教材「鍵を守る」と同じ話）。
🟢 ひとことで言うと
ビルドツール（Vite が定番）＝書いたコードをブラウザ向けに変換する裏方。ホスティング＝置き場所で、SPA/SSGは静的ホスティング（Vercel等で無料も）、SSRはサーバー/サーバーレス。置き場所選びは、姉妹編「コンピューティングの選択肢」の延長線上です。
➡️ 次へ
道具までそろいました。最後に、ここまでの全部を1枚にまとめます——選び方フローチャートと比較早見表、ペルソナ/用途別のおすすめです。