はじめに
Express を勉強していて、「動的」と「静的」の違いによってコードの書き方が変わることに混乱したため、自分の備忘録としてまとめました。
※Udemyや独学で勉強している方の基礎固めになれば幸いです。
独学初心者のため、考え方に相違がある場合はご指摘いただけると幸いです
動的ファイルと静的ファイルの違いとは？
Expressでは、「ファイルの提供方法」によって動的・静的に分かれます。
どちらを使うかは、ページの内容が変わるかどうかで判断！
下記で覚えるとイメージしやすかったです。
| 例 | 特徴 | |
|---|---|---|
| 静的ファイル | 会社概要ページ（about.html） | 事前に作成されたHTMLをそのまま配信 |
| 動的ファイル | 検索結果ページ（search.ejs） | ユーザーごとに異なるデータを埋め込んで生成 |
それぞれの特徴を詳しく見ていきます。
- 静的ファイル
.html や .css など、あらかじめ作成されたファイルをそのまま表示する
express.static("public") を使って提供する
例：静的なページ（about.html）を配信
app.use(express.static("public")); // publicフォルダの中身を静的ファイルとして提供
▼ 静的ファイルの構成
/my-express-static
├── public // 静的ファイルを格納するフォルダ
│ ├── about.html // 固定ページ（静的ファイル）
│ ├── styles.css // CSSファイル
│ ├── script.js // クライアント用のJavaScript
├── index.js // Expressサーバーファイル
├── package.json // Node.jsプロジェクト設定
- 動的ファイル
サーバーでデータを埋め込んで HTML を生成する
テンプレートエンジン（EJS など）が必要
res.render("search", { results }) でデータを渡して表示する
例：検索結果ページ（search.ejs）を動的に表示
app.get("/search", (req, res) => {
const results = ["Apple", "Banana", "Cherry"]; // 検索結果のデータ
res.render("search", { results }); // search.ejs にデータを渡して表示
});
▼ 動的ファイルの構成
/my-express-dynamic
├── views // 動的ファイル（EJSテンプレート）を格納するフォルダ
│ ├── search.ejs // 検索結果ページ（動的ファイル）
├── index.js // Expressサーバーファイル
├── package.json // Node.jsプロジェクト設定
💡まとめ
「サーバーからデータを取得・更新するなら動的、それ以外は静的」と考えると理解しやすかったです。