🌐 WebアプリとWeb技術（WWW）の仕組み

Flask
2025.05.03

FlaskでWebアプリを開発したことをきっかけに、「WebアプリやWeb技術、サーバーの仕組み」について改めて学びました。本記事ではその内容を整理して、初心者にも分かりやすく紹介します。
基礎からわかる！Webアプリの仕組み【歴史〜HTTPの仕組みまで】 – YouTube
を参考にさせていただきました

Webアプリ・ネイティブアプリ・フロントエンド・バックエンド・GET・POST・WWW(World Wide Web)・ハイパーテキスト・ハイパーリング・HTML・HTTP．URL・Flask・リクエスト/レスポンス・静的/動的コンテンツ

🧩 Webアプリとは？

「アプリ」と聞くと、多くの人がスマホのアプリを思い浮かべると思いますが、開発の文脈では「ユーザーの目的に応じて使うソフトウェア」を指します。

  • Webアプリ：ブラウザ上で動作し、Web技術（HTML/CSS/JSなど）を使って開発される
  • ネイティブアプリ：端末にインストールして直接動作し、OSごとに異なる言語で開発される（例：Swift、Kotlinなど）
観点Webアプリネイティブアプリ
🛠 作り方HTML/CSS/JSなどSwift/Kotlin/Javaなど
💻 実行環境ブラウザ端末にインストール
🔗 通信方式HTTP/HTTPS同じくHTTP/HTTPSが多い

🌍 ネットワーク・インターネット・Webの違い

  • ネットワーク：複数の機器を接続する仕組み（LANなど）
  • インターネット：世界中のネットワークを相互に接続した巨大なネットワーク
  • Web（WWW）：インターネット上で情報をリンク構造で結びつける仕組み

🛣 例え話：

  • ネットワーク → 道路
  • インターネット → 世界中の道路をつないだもの
  • Web → その道路を走る車（情報）

※ Webはインターネットの一部。他にメールやFTPも存在します。

🔗 ハイパーテキストとWebの3要素

  • ハイパーテキスト：文書内にリンクを埋め込むことで、他の情報とつなぐ仕組み
  • ブラウザ：ハイパーテキストを表示するためのソフトウェア

📦 Webを構成する3要素：

  1. HTML：文書の構造や内容を記述する言語
  2. URL（URI）：文書の場所を示すアドレス
  3. HTTP：情報のやり取りのルール

🖥 クライアント・サーバーとWebの流れ

  • クライアント：サービスを利用する側（例：ブラウザ）
  • サーバー：サービスを提供する側（例：Webサーバー）

🔁 基本の流れ：

  1. クライアントがURLを指定してHTTPリクエストを送信
  2. サーバーがHTTPレスポンスでHTMLを返す
  3. ブラウザがHTMLを解釈して表示

🗂 URLの構成

例）http://www.example.jp/contents/index.html

  • http:// → 通信プロトコル（HTTP）
  • www.example.jp → ホスト名（Webサーバーのドメイン）
  • /contents/index.html → ページのパス（場所）

🛠 Web技術の進化とバックエンドの登場

初期のWebは静的なHTMLだけでしたが、

🧩 課題：

  • ログインユーザーごとの表示変更ができない
  • 入力や投稿などに非対応

▶ 解決：動的コンテンツを作るためにバックエンドが必要

📜 バックエンドの歴史：

  • CGI：PerlやCを使用。リクエストのたびに起動されるため負荷が大きい
  • Javaサーブレット：常駐型で高速・マルチスレッド対応。JVMによりOS非依存
  • フレームワーク：Django、Flask、Laravelなど。再利用性と保守性に優れ、短期間で開発可能

📡 HTTP通信の仕組み

📥 リクエスト（クライアント → サーバー）

  • リクエストライン：メソッド / URI / HTTPバージョン
  • ヘッダー：ホスト名、ユーザーエージェント、言語設定など

✅ 主なメソッド：

  • GET：データ取得
  • POST：データ送信

📤 レスポンス（サーバー → クライアント）

  • ステータスライン：HTTPバージョン / ステータスコード / フレーズ
  • ヘッダー
  • ボディ：HTMLや画像などのデータ

📋 主なステータスコード：

コードフレーズ内容
200OK正常に取得成功
301Moved Permanently恒久的に移動
404Not Foundページが見つからない
500Internal Server Errorサーバー内部エラー

🔄 GETとPOSTの違い

項目GETPOST
送信先URLの末尾に付加メッセージボディ内に格納
セキュリティ見えやすい（URL）比較的安全（非表示）
情報量制限あり（255文字など）制限なし
再現性URLをコピーすれば再現可能URLだけでは不可

📌 HTTPはステートレス

HTTPは「ステートレス（状態を保持しない）」なプロトコル。

🔒 問題：

  • ログイン状態やカート情報などを保持できない

🛠 解決：

  • Cookie：クライアント側に情報を保存
  • セッション：サーバー側で管理。IDはCookieに保存されることが多い

Flaskなどのフレームワークには、こうした機能が標準で備わっており、簡単に利用できます。

✅ まとめ

本記事では、Webアプリを作るうえで必要な基礎知識を整理しました。

  • Webアプリはブラウザ上で動作し、HTML・URL・HTTPで構成されている
  • ネットワーク → インターネット → Webという階層的な理解が大切
  • クライアント・サーバー間はリクエストとレスポンスで情報をやり取りする
  • 動的な処理にはバックエンドが必要で、フレームワークを使うと効率的に開発できる
  • HTTPはステートレスなので、Cookieやセッションによる状態管理が重要

こうした仕組みを理解したうえでFlaskを使えば、Webアプリの動作原理がよく見えるようになります。

参考にしたもの

基礎からわかる！Webアプリの仕組み【歴史〜HTTPの仕組みまで】 – YouTube

コメント

タイトルとURLをコピーしました