はじめに
「プロになるためのWeb技術入門」を読了しました。
対象者：これからWebアプリ開発を学んでいこうとする初学者。
良いところ：WWWの歴史やクライアントサーバー構成から、MVCモデルやアーキテクチャなどのWebアプリ開発を効率的に行うための技法や、Webアプリのセキュリティまで、Webアプリ開発に必須の知識をわかりやすく解説しています。
前提知識：HTMLの基礎文法、いずれかのプログラミング言語の基礎文法、Ruby on Railsなどのフレームワークに触れた経験（Progateなど）があるとよいです。
本書で学んだ用語
本書の前半部分は、HTMLからWeb アプリまで、WWWの歴史を説明しています。今回は自分のアウトプットとして、本書の前半部分の内容に基づいて、WWWで使われる基本的な用語を解説していきます。
次の文章は今回説明したい用語を使って私が作成した、WWWに関する説明文です。 この文章に出てくる用語のうち、意味を説明することができない用語があれば、この記事を最後まで読んでいただければ意味が理解できるようになると思います。
WWWに関する説明文
WWWではクライアントがサーバーにリクエストを送信し、サーバーがクライアントにレスポンスを返すことでHTMLが受け渡されます。クライアントとサーバー間の通信はHTTPというプロトコルでやり取りされます。HTTPでクライアントがサーバー上のWebページにアクセスするためにはIPアドレスとポート番号が必要です。WWWが発明された当初は、どのクライアントがアクセスしても内容が変化しない静的なWebページが主流でしたが、現在はクライアントの要求に応じて内容が変化する動的なWebページが主流です。動的なWebページではしばしばログイン機能などのステートフルな機能が求められますが、HTTPはステートレスに設計されています。ステートレスなHTTPをステートフルに利用するために考えられたのがクッキーという仕組みです。
用語解説
では、今の文章に出てきた用語を文章①～文章⑥に分けて解説していきます。
文章①
WWWではクライアントがサーバーにリクエストを送信し、サーバーがクライアントにレスポンスを返すことでHTMLが受け渡されます。
WWW
- World Wide Webの略です。HTMLとインターネットと組み合わせることで、世界中のサーバーに存在する情報を構造化し効率的に閲覧できるようにした仕組みです。ここで言う構造化とは、例えば机の上に散らばった紙を、きちんと見出しを付けてフォルダに整理することで、目的の情報に辿り着きやすくするようなイメージです。HTML同士が複雑につながりあった様子を蜘蛛の巣に例えています。単にWebとも呼ばれます。
HTML
- HyperText Markup Languageの略です。文字、画像、リンクを文字情報で表したものです。他のHTMLへのリンク機能を活用することで、情報と情報を関連付けて、整理しやすくします。
サーバー
- server（仕える人）から来た言葉です。HTMLで整理された情報を集約して保持し、クライアントの要求に応じてHTMLを提供するコンピュータです。情報はサーバーに集約して管理することで、分散した場合に比べて情報の追加、更新といった作業を行いやすくしています。
クライアント
- client（依頼人）から来た言葉です。サーバーにアクセスし情報を取得するためのコンピュータです。インターネットに繋がれたクライアントを利用し、離れた場所からでもサーバーから情報を取得できるようにしたことで、WWWが実現しました。
リクエスト
- request（要求）から来た言葉です。クライアントがサーバーに欲しい情報（HTML)を要求することです。
レスポンス
- response（応答）からきた言葉です。クライアントのリクエストに応答することです。リクエスト通りの情報を渡したり、存在しない情報をリクエストされた場合は、情報が存在しないことをクライアントに回答します。
文章②
クライアントとサーバー間の通信はHTTPというプロトコルでやり取りされます。
HTTP
- HyperText Transfer Protocolの略です。クライアントとサーバー間でHTMLをやりとりするための通信のルール（プロトコル）です。１つのリクエストに対し、1つのレスポンスを返すというシンプルな構造をしています。
プロトコル
- protocol（手順、規約）からきた言葉です。クライアントとサーバーのような異なるコンピュータ同士が通信するためには、どういった方法で情報を伝達するのかを定めたルールが必要です。これらのルールを定めたものをプロトコルといいます。例えば人間同士でコミュニケーションを取るためには、同じ言語を使う必要があります。この場合の言語がプロトコルにあたります。
文章③
HTTPでクライアントがサーバー上のWebページにアクセスするためにはIPアドレスとポート番号が必要です。
Webページ
- Web上に存在するHTMLのことです。ブログや用語解説サイト、SNSなど様々なコンテンツがあります。
IPアドレス
- インターネット上に繋がれているコンピュータを特定するための数値です。インターネットでの住所のようなものです。例：「192.168.0.1」などです。
ポート番号
- コンピュータ同士が通信する際に、コンピュータの中のどのソフトウェアと通信をするかを指定するための番号です。HTTPでは、 主に80番ポートが使われています。例えば、現実世界で郵便を送る場合で考えます。住所が○ー○－○の□□会社の△△部に郵便を送るとします。住所に○ー○－○、宛先に□□株式会社を記載すれば、少なくとも□□株式会社には届きます。しかし、部署名の記載がないとどこの部署に送ればいいかわからないので、必ず△△部も書く必要があります。この場合の住所○ー○ー○に当たるのがIPアドレス、△△部にあたるのがポート番号です。
文章④
WWWが発明された当初は、どのクライアントがアクセスしても内容が変化しない静的なWebページが主流でしたが、現在はクライアントの要求に応じて内容が変化する動的なWebページが主流です。
静的なWebページ
- 作成者が更新しない限り、内容が変化しないWebページです。用語の解説サイトや、企業サイトなど、内容を頻繁に更新する必要がないWebページです。
動的なWebページ
- クライアントの操作に応じて内容が変化するWebページです。例えば、検索エンジンのようにクライアントが入力した検索ワードに応じた検索結果を表示したり、SNSのように記事を投稿したりコメントすることが出来るWebページです。
文章⑤
動的なWebページではしばしばログイン機能などのステートフルな機能が求められますが、HTTPはステートレスに設計されています。
ステートフル
- stateful（状態を持つ）という意味の言葉です。クライアントの過去のリクエスト履歴を記録し、クライアントを区別する仕組みのことです。動的なWebページのうち、ログイン機能やショッピングサイトで買い物かごに入れた商品を保持するような機能を実現するために必要です。
ステートレス
- stateless（状態を持たない）という意味の言葉です。どのクライアントがリクエストしているのか区別しない仕組みのことです。どのクライアントがリクエストしても同様のレスポンスを返します。HTTPは本来、静的なHTMLを表示するために開発されたため、ステートレスな設計になっています。
文章⑥
ステートレスなHTTPをステートフルに利用するために考えられたのがクッキーという仕組みです。
クッキー
- Cookie（クッキー、由来は諸説あります）はクライアントを区別するための情報です。Cookieは最初にクライアントがサーバーにアクセスしたときに作成され、サーバーからクライアントに送信されます。Cookieは、クライアントを区別するための情報が含まれており、クライアントで保存されます。Cookieはクライアントがサーバーへリクエストを送る際に一緒に送信されます。サーバーはクライアントから送信されたCookieに記載されている情報を確認することで、クライアントを区別し、クライアントに応じたレスポンスを返すことができます。
以上が用語解説になります。改めて最初の文章を読んでみてください。最初は理解できなかった用語も理解できるようになっているはずです。
おわりに
本書では、これらの用語、知識についてより深くわかりやすく解説されています。また用語だけではなく開発技術についても、技術が生まれた背景を知ることでより理解しやすくなり、新しい技術も学びやすくなるというスタンスで丁寧に解説されています。Webアプリ開発に興味のある方は、今後の開発の基礎になる知識が身につくので是非読んでみてください。
