Zenn
⛳

Web技術入門

2025/02/26に公開
JavaScript
Web
http
TCP
IP
tech

はじめに

現代のインターネット社会で利用されるWebは、単なる画面表示だけでなく、複雑なネットワーク技術やセキュリティ対策に支えられています。この入門記事では、Webの基本概念からネットワーク技術、通信プロトコル、データ形式、アプリケーションの開発・運用、セキュリティまで、具体例や日常のアナロジーを交えて解説します。初めて学ぶ方でも、実際のコードや例え話を通じて全体像がイメージしやすくなるよう構成しています。

1.Webの基本概念と仕組み

Webとは、インターネット上で情報を閲覧・共有するための仕組みです。
例:
大きな図書館の中で、利用者（ブラウザ）が本（Webページ）を探して読むように、ユーザーはブラウザを通してWebサーバーから情報を受け取ります。

基本要素

クライアント（ブラウザ）: 利用者がWebページを閲覧するための窓口です。
サーバー: ページや画像、動画などのデータを保管・提供する役割を持ちます。
通信プロトコル: 主にHTTP（またはその暗号化版HTTPS）を利用して、クライアントとサーバー間のデータのやりとりを行います。

2. ネットワークの基礎

Web技術は、堅牢なネットワーク技術の上に成り立っています。ここでは、重要なTCP/IP、DNS、ルーティングについて具体例を交えて解説します。

2.1 TCP/IPの仕組み

概要とアナロジー:

TCP/IPは、インターネット上でデータを正確に届けるための「ルールブック」です。
例えば、手紙を送るとき、封筒に住所（IPアドレス）を書き、郵便局（TCPの接続管理）がしっかり届ける仕組みと似ています。

IP（Internet Protocol）:
各コンピュータには「住所」が割り当てられており、例として「192.168.1.100」（自分のPC）や「203.0.113.5」（Webサーバー）がそれにあたります。
TCP（Transmission Control Protocol）:
パケット（手紙の断片）が順番通りに届くように、送信前のハンドシェイクや再送制御が行われます。
パケット交換:
大きなデータは小さなパケットに分割され、受信側で再構成されます。これは、長い本を複数の冊子に分けて送るイメージです。

2.2 DNSでの名前解決

DNSの役割:
DNS（Domain Name System）は、ユーザーが覚えやすい「example.com」といったドメイン名と、機械が認識するIPアドレスを対応付ける仕組みです。
アナロジーとしてよく電話帳が用いられ、DNSは電話帳のように、名前から電話番号（IPアドレス）を探す感覚です。

具体的な流れ:

  1. ブラウザに「example.com」と入力。
  2. まず自分のPC内のキャッシュを確認し、無ければISP（Internet Service Provider、インターネット接続サービスを提供する事業者のこと）のDNSサーバーへ問い合わせ。
  3. 得られたIPアドレスは TTL（Time to Live、データ・パケットまたはレコードが、破棄または再検証されるまでにネットワーク、コンピューター、またはサーバー上に存在する時間を定義する値）に従って一時的に保存され、次回のアクセスが速くなります。

2.3 ルーティングでの道案内

ルーティングの基本:
ルーティングは、データパケットを最適な経路で目的地へ届ける仕組みです。

具体例:

  • ルーター:
    交差点のように、どの方向に進むかを判断。
  • ルーティングテーブル:
    各ルーターには、目的地に最も適した道を示す情報が登録されています。
  • 動的ルーティング:
    渋滞情報をリアルタイムで更新し、最適ルートを自動選択するシステム（例：BGPやOSPF）も利用されます。

3. HTTP/HTTPSによる通信の流れ

基本構造:

Webブラウザはサーバーに「このページを見せて！」とリクエストを送り、サーバーはそれに応じてHTMLなどのデータを返します。

具体例:
curlでのGETリクエスト:

curl -X GET https://www.example.com

このコマンドは、ターミナルからWebページを取得する操作です。

HTTPヘッダーとステータスコード:

  • ヘッダーは、Content-Type: text/html など「データの種類」を示す情報。
  • ステータスコードは、200（正常）、404（見つからない）、500（サーバーエラー）など、リクエスト結果を示します。

HTTPSの役割:

HTTPSは、SSL/TLSで通信内容を暗号化し、オンラインバンキングなど機密情報を安全に保つための仕組みです。
例: 郵便物に封印をするように、情報を守ります。

4. Webデータ形式と開発の基礎

4.1 HTML/CSS/JavaScriptの基礎

HTML:

Webページの骨組みを作成する言語です。
具体例:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <h1>ようこそ Web技術入門へ！</h1>
  <p>これは初めてのHTMLページです。</p>
</body>
</html>

JavaScript:

動的な動作を実現するプログラミング言語です。
具体例:

<button onclick="alert('ボタンがクリックされました！')">クリックしてね</button>

4.2 JSONとXMLの例

JSON:

軽量なデータ交換フォーマット。APIでよく利用されます。
例:

{
  "name": "太郎",
  "age": 25,
  "hobbies": ["読書", "プログラミング", "ジョギング"]
}

XML:

データ構造を記述するためのマークアップ言語。
例:

<user>
  <name>太郎</name>
  <age>25</age>
  <hobbies>
    <hobby>読書</hobby>
    <hobby>プログラミング</hobby>
    <hobby>ジョギング</hobby>
  </hobbies>
</user>

5. セキュリティと認証の実践例

Webでは、個人情報や機密データを保護するためのセキュリティ対策が必須です。

HTTPS:

  • 通信内容を暗号化し、データの盗聴や改ざんを防ぎます。
  • 例: オンラインショッピングサイトや銀行サイトでは、URLが「https://」となっており、情報が安全にやりとりされています。

認証と認可:

  • ログイン認証: ユーザーが正しい情報を入力して本人確認を行います。（例：SNSのログイン）
  • 二段階認証: パスワードに加えて、スマートフォンに送られる確認コードを入力する仕組みで安全性を強化します。

脆弱性対策:

  • 入力値検証: ユーザーからのデータが悪意あるスクリプトでないか確認し、SQLインジェクションやXSS攻撃を防止します。
  • 例: コメント投稿フォームで、不正なコードが含まれていないかサーバー側でチェックする処理など。

6. Webシステムの構築と運用

Webシステムの開発は、設計から運用・保守まで一連のプロセスを経て行われます。

設計と開発:

  • 例: 新しいブログサイトを作成する場合、まず必要な機能（記事投稿、コメント、ユーザー管理など）を洗い出し、ワイヤーフレームやデータベース設計を行います。その後、HTML/CSS/JavaScriptでフロントエンドを作り、PythonやPHPなどでバックエンド処理を実装します。

デプロイ:

  • 完成したアプリケーションは、Heroku、AWS、Azureなどのクラウドサービスへ展開されます。
  • 例: DockerコンテナやKubernetesを利用して、アクセスが増えた際にも自動でスケールアウトできる環境を構築します。

運用と保守:

  • モニタリング: New RelicやDatadogなどのツールでサーバーの状態を常に監視し、問題があれば即対応。
  • バックアップ: 定期的なデータベースのバックアップやリカバリ手順を整備し、万一の障害に備えます。

7. まとめ

本記事では、Web技術の基本概念からネットワークの基礎、HTTP/HTTPSによる通信、各種データ形式、開発の基礎、セキュリティ対策、そしてシステムの構築と運用まで、具体例やアナロジーを交えて解説しました。

  • TCP/IPでは、手紙を郵便で送るように、データが小さなパケットに分割され、正確に届けられる仕組みを理解しました。
  • DNSでは、電話帳のようにドメイン名からIPアドレスを調べるプロセスが、ユーザーの利便性を向上させています。
  • ルーティングでは、GPSのように最適な経路が選ばれ、効率的なデータ伝送が実現されています。
  • また、HTTP/HTTPSの通信や、HTML/CSS/JavaScriptによるWebページ作成、さらにセキュリティ対策やシステム運用の具体例を通して、実際の現場で役立つ知識を体系的に学ぶことができました。

これらの知識を土台に、まずは簡単なサンプルサイトやAPIを作成して実際に手を動かし、徐々により高度な技術へと挑戦してみてください。

Discussion