動的サイト

🚀 はじめに この記事でわかること 動的サイト（Dynamic Website）とは何かと、静的サイトとの違い 動的サイトがなぜ必要になるのか、使うと何ができるのか 実際の例（ブログ・EC・会員サイト） で、イメージをはっきりつかむ こんな人向け 中学生〜大人まで、IT知識がほとんどない人 「動的サイトって、何が動いてるの？」をやさしく知りたい人 初心者でも安心な理由 身近なたとえと図解イメージでやさしく説明 このページだけで全体像が完結（最後に参考リンクもまとめ） このブログ自体は Hugo（静的サイトジェネレーター）+ PaperMod（テーマ）+ Cloudflare Pages（公開） という静的サイトの構成です。 記事の途中で、静的でも一部を“動的っぽく”する方法にも触れます。 ✅ 概要解説 動的サイトとは何か 見る人・タイミングによって、ページの中身が変わるサイトのこと。 例：ログインしている人だけに「購入履歴」を表示、朝は「おはよう」、夜は「こんばんは」と表示、在庫数をリアルタイム表示…など。 静的サイト：完成済みの出来上がったページ（HTMLファイル） をそのまま配信 動的サイト：見る直前に「ページを調理」 して配信（サーバーやAPIが計算してHTMLを作る） 何のためにあるのか 人によって内容を変えたい（ログイン状態・購入履歴・おすすめ表示） よく変わるデータを表示したい（在庫数、天気、ニュース、ランキング） ユーザーからの入力に応じたい（検索、投稿、コメント、予約） 動的サイトがないとどうなるのか 同じ内容しか出せない：全員に同じページ。会員限定ページやマイページが作りにくい 更新の手間が大きい：在庫や価格の手動修正が増える 双方向のやり取りが弱い：検索／投稿／予約といった入力→反応が苦手 どんな場面で使えるのか（具体例） ブログ／ニュースサイト：管理画面で記事を投稿 → 自動でトップに最新記事を表示 ECサイト：ユーザーごとにカートや購入履歴、在庫数を表示 学習サイト：ログイン後に学習進捗やおすすめ教材を表示 社内ポータル：部署や権限に応じて見える情報を出し分け 💡 小話・豆知識・逸話 1) 「動的＝動くアニメ」ではない “動的”はアニメーションのことではなく、ページ内容が状況で変わるという意味。 アニメーションは見た目の動き（フロントエンド）、動的は内容の変化（多くはサーバーやデータベース） の話です。 2) 動的の“調理場”はどこ？ サーバーで調理（SSR）：PHP、Ruby、Python、Node.js などのサーバーサイドが HTML を生成 ブラウザで調理（CSR）：JavaScript が API からデータを取り、画面で組み立て ハイブリッド：最初の一皿はサーバー、追いソースはブラウザ、など両方のイイとこ取り 3) 静的でも“ちょい動的”は実現できる 静的サイト（Hugo + Cloudflare Pages）でも、外部のAPIやフォームサービスを使えば、 検索フォーム／問い合わせ／コメント／閲覧数カウントなどを後付けできます。 「全部を動的に」ではなく、必要なところだけ動的にするのが最近のトレンドです（Jamstack）。 ...