【入門書／前半】プロになるためのWeb技術入門

はじめに

今回は「プロになるためのWeb技術入門」について、要点をまとめます。

※おことわり※
基本的に学習内容のアウトプットです。
初学者であるため、間違い等あればご指摘いただけますと嬉しいです。

本の概要

「何年経っても役に立つ基本的な考え方を伝えること」を目的とした、Web技術に関する入門書です。

この記事の内容

前半
１. Webアプリケーションは何か
２. Webはどのように発展したか
３. HTTPを知る

後半
４. CGIからWebアプリケーションへ
５. Webアプリケーションの構成要素
６. Webアプリケーションを効率よく開発するための仕組み
７. セキュリティを確保するための仕組み

1. Webアプリケーションは何か

■ Webアプリケーションとは
（Google, クックパッドなど）

• Webブラウザ上で動作するアプリケーションソフトウェアのこと
• インターネットを使用しているため、インストール不要
• サーバが処理を行う

■ Webサイトとは
（ECサイトなど）

• webページのまとまった集合体のこと

■ デスクトップアプケリーションとは
（Word, Excelなど）

• アプリケーションをPCへインストールし、すべての処理を手元のPCで行う
• OS上で動作する

■ インターネットとは

• 世界中のコンピュータを接続するネットワーク網のこと

2. Webはどのように発展したか

この章の目的

「技術とは偶然ではなく必然をもって生まれてくる」ものだからこそ、
必然性を理解し、新しい技術を素早くキャッチするための知識を身につけること。

この章のまとめ

研究者同士の情報共有ツールとしてWWWが誕生し、Webの利用が一般化されるとともに動的コンテンツが普及した。Webアプリケーション開発において、現在進行形で課題の発生と解決が繰り返し行われ、開発は大規模になり、技術は複雑化している。現在では、フロントエンドとバックエンドの分業や、フレームワークを使用した開発が主流である。

■ Webの歴史

• 「World-Wide Wed」の誕生
  研究者同士の情報共有ツールとして開発された、現在でいう「Web」のこと。
  WWWの仕組みを使い、HTML形式で研究結果などを共有していた。

• 「NCSA Mosaic」の登場
  テキストだけでなく、画像や文字を混合させて表示することができる、現在でいう「Webブラウザ」のこと。

■ クライアントとサーバの役割
不特定多数の利用者に多様なWebコンテンツを公開するため、役割が分かれている。

• クライアント：インターネットに接続し、手元のPCから自由に閲覧
• サーバ：コンテンツを1ヶ所にまとめて管理

■ URLの役割
インターネット上のコンテンツを一意に指定するための仕組み。
「スキーム+ホスト名+パス名」という構成。

• 通信プロトコル
  情報のやり取りのための取り決めを、コンピュータ同士の通信に利用したもの。
  HTMLに適したプロトコルとして、「HTTP」が考案された。

■ CGIの誕生
Webサーバ上で動作するプログラムがHTMLを生成し、レスポンスとしてクライアントに返す仕組みのこと。（動的コンテンツ）
「リクエストに応じて、処理を行うアプリケーション」の作成がCGIの技術により実現する。

■ Java／サーブレット／JSPの登場
CGIの技術を補うべくして誕生し、大規模なシステムの開発に貢献した。

• Javaの特徴

  • オブジェクト指向の機能をフルサポート
  • 特定のOSやハードウェアに依存せず動作する

• サーブレット

  • Javaで作られたコンテンツを生成するためのプログラム

• JSP
  フロントエンドとサーバエンドのエンジニアによる、アプリケーション開発の分業に貢献した。
  サーブレットがJavaの中にHTMLを埋め込むのに対し、JSPはHTMLの中にJavaコードを埋め込むことによって分業が実現した。

3. HTTPを知る

この章の目的

WebサーバとWebクライアントを繋ぐ根幹である、HTTPを知ること。

この章のまとめ

現在の開発で用いられるフレームワークでは、HTTP通信を知らなくても実装できてしまうが、
Webアプリケーションの根幹となる技術の仕組みを理解することによって、適切な情報の受け渡しを行うことできる。

■ HTTPについて

• 前章の復習
  HTTPとは、WWWの世界で定められたHTMLをやりとりするための通信プロトコルのこと。

• HTTPの特徴

  • 1回のリクエストで1つのリソースを取得する。
    例：多くの画像を含むページの場合、場号の数だけリクエストを発行する。

  • デフォルトのファイルを返す機能
    Webサーバ側の機能であり、URLを短く設定することができる。

• HTTPの構造について
  リクエストとレスポンスの構造は、以下のようになっています。
  

■ 情報の送受信について

• IPアドレス
  HTTPリクエストに含まれているホスト名は、IPアドレスに置き換えて識別される。（例：住所と宛名）
  • ドメイン：IPアドレスを人間が覚えやすいように文字列に変換したもの
  • hostコマンド ：ドメインからIPアドレスを調べるコマンド

# GoogleトップページのIPアドレスを調べる
% host google.com

# 戻り値
google.com has address 142.250.206.206　　←IPアドレス
google.com has IPv6 address 2404:6800:400a:813::200e
google.com mail is handled by 10 smtp.google.com.

• TCP/IP
  IPアドレスを頼りに、ホストへ任意の情報（パケット）を届ける役割。（例：郵便局）
  

• パケット
  やりとりされる情報は、パケット単位に分割し、インターネットを介して送受信が行われる。
  ※理由：送信に失敗した場合、そのパケットだけを送り直せば済むから

• DNS
  ドメイン名からIPアドレスに変換する仕組みのこと。
  DNSは、ドメイン名に対応したDNSサーバによって情報は分散管理されている。

  • ルートサーバ：DNSサーバを管理する大元締めであり、世界に13個存在している（※2022年現在）
  • トップレベルドメイン(TLD)：最上位のドメイン

• ポート(Port)
  サーバ側に「待ち受けポート」が用意されており、TCP/IPによって運ばれた情報がポートで受け取る。

• ウェル・ノウン・ポート(well-know ports)
  デフォルトでポートが決められている代表的なプロトコルのポートのこと。

• Origin(オリジン)
  URLを構成する以下3点をまとめた総称のこと。
  例：http://localhost:3000 など

  • スキーム（プロトコル）
  • ホスト（ドメイン）
  • ポート

  URLとの違い・・URLの場合、http://localhost:3000/hoge/hoge まで該当する

最後に

「プロになるためのWeb技術入門」を前半と後半に分けてまとめています。
後半の内容は、【入門書／後半】プロになるためのWeb技術入門 にてまとめます。

後半の内容について
４. CGIからWebアプリケーションへ
５. Webアプリケーションの構成要素
６. Webアプリケーションを効率よく開発するための仕組み
７. セキュリティを確保するための仕組み