🐹

[自己学習]静的・動的とは

2025/01/18に公開

✒️記事を書いた経緯

去年の夏にJavaScriptで簡単なじゃんけんゲームを作りました。

GitHubでURLを作成できたので、AWSとかいらないのでは?と思って、chatGPTに聞いたところ…

GitHub Pagesは基本的に静的サイト専用のホスティングサービスで、大量のトラフィックが発生してもスケーリングの自由度はありません。
AWSでは、静的・動的なサイトやアプリケーションに対応しており、スケーラブルなインフラを利用できます。例えば、負荷が高まれば自動スケーリングする仕組みを構築することが可能です。

と出てきました。
静的・動的それぞれの意味をわかってなかったので、まとめます。


✅静的サイト

サーバーからクライアント(ブラウザ)に送信されるファイルがそのまま表示されるサイト。

  • HTML、CSS、JavaScriptファイルで構成。
  • データや内容は事前に作成されており、ユーザごとに変化しない。
  • GitHub Pagesは静的サイト専用
  • 不可が軽く、デプロイが簡単(アップロードするだけ)。

✅動的サイト

ユーザーのリクエストに応じて、サーバーが動的にデータを生成して表示するサイト。

  • サーバサイド言語(Python, PHP, Ruby, Node.jsなど)を使用。
  • データベースと連携し、ユーザーごとにカスタマイズされた内容を提供。
  • ログインシステム、ショッピングカート、掲示板、ブログなどの機能が実装可能。
  • AWSは静的サイトでも動的サイトでも利用可能。

✅サーバサイド言語とは

サーバー上で動作し、動的にデータを生成したり処理したりするために使用されるプログラミング言語。

サーバサイド言語の役割

  • リクエスト内容を解析:「特定の商品情報を表示してほしい」というリクエストが来た場合、その商品IDを解析
  • データベースと連携: 必要に応じてデータベース(例: MySQL, PostgreSQL, MongoDB)にアクセスし、商品データを取得。
  • HTMLやJSONを生成:取得したデータを元にHTMLを動的に生成したり、APIのレスポンスとしてJSONデータを作成など。

昨日書いた記事と絡めてブラウザに画面が表示される流れをまとめると…

  1. ユーザーがブラウザでURLを入力してページにアクセスすると、ブラウザはHTTPリクエストをWebサーバに送る。
  2. Webサーバ(例: Apache, Nginx)は、このリクエストを受け取り、どのリソース(HTMLファイルや画像など)を返すべきかを判断する。静的ファイル(HTMLやCSS)ならそのまま返しますが、動的なページの場合は処理のためにアプリケーションサーバにリクエストを渡す。
  3. アプリケーションサーバ(例: Node.js、Django、Ruby on Rails)はサーバサイド言語を使ってリクエストを処理する。
  4. アプリケーションサーバで生成された動的なHTMLやJSONをWebサーバに返し、Webサーバがレスポンスをブラウザに返す。
  5. ブラウザは受け取ったHTMLやCSS、JavaScriptを解析し、ユーザーが見れる形で画面に表示する。

サーバサイド言語の例

  • PHP
  • Python
  • Ruby
  • Node.js
  • Java

🐥調べたことを経て

本当ブラウザをを表示するまでにやることがめちゃくちゃ多い!!!!
でも、読んでた本の情報ややってきたことがどんどん繋がって調べていて面白かったです。
ものすごい伏線回収のある物語を見ている気分。勉強の一番楽しい瞬間ですね。


📚リンク

じゃんけんサイトで使用した素材
いらすとや様(https://www.irasutoya.com/)

Discussion