もふのアウトプットブログ

Webエンジニアへの転職を目指すもふのプログラミング学習アウトプットブログ

Web技術の基礎について

書籍「プロになるためのWeb技術入門」を読了しました。
ここではWebの基礎となる部分のルールや仕組みに関するアウトプットです。

はじめに

WebサイトやWebアプリなどブラウザからURLでアクセスするものは、すべてHTTP(Hypertext Transfer Protocol)に則って行われています。 HTTPにはさまざまなルールや仕組みがあります。今回はその中の基礎部分と関連知識についてです。

プロトコル

プロトコルは通信を行う際の約束事です。現実の世界でいうと法律のようなものですね。
WebサイトやWebでブラウザとWebサーバが通信する際に使われるプロトコルが、先述したHTTPです。

ひとえに「通信」といっても、Web以外にもさまざまなものがあります。
プロトコルは通信するアプリによって異なり、Webブラウザ通信にはWebブラウザ通信用の、メール通信にはメール通信用のプロトコルがあります。
メールの場合は、送信にはSMTP(Simple Mail Transfer Protocol)、受信にはPOP(Post Office Protocol)またはIMAP(Internet Message Access Protocol)というプロトコルが使われます。
法律でも、人の権利を守るための民法や、労働に関する労働基準法などがあるのと同じですね。

他にも、ファイル転送をするためのFTP(File Transfer Protocol)なども存在し用途によってさまざまなものがありますが、これらをまとめてプロトコルまたは通信プロトコルといいます。

ポート番号

上記で紹介したHTTPの中に「Webブラウザでの通信は80番のポートを使ってね」という約束事があります。
ポートとはインターネットとコンピュータをつなぐ通信の出入口です。
Webブラウザやメールなど主要アプリで使われる出入口は番号が決まっています。

たとえば、友人にメールを送るとしましょう。
送信したメールは自分のコンピュータからまずインターネットに出ていきます。この時は25番の出口を使います。

次にメールを受け取る友人の場合です。
インターネットで運ばれてきたメールが友人のコンピュータに入る時は110番の入口を使います。
Webブラウザでの通信の場合は80番でしたね。

このように、ブラウザやメールなど主要アプリで使われるポート番号は世界共通で決められており、受け取るアプリケーションによって異なります。

リクエストとレスポンス

Webアプリにアクセスすると目的のアプリが表示されます。
当たり前のように感じますが、これはリクエスレスポンスという2つの動作で成り立っています。

リクエスはWebサイトにアクセスした人の操作に起因するものです。

たとえば、Amazonにアクセスしたとしましょう。
AmazonのURLにアクセスしたとき、ブラウザはWebサーバーに「Amazonのサイトを見せてください」と要望を出しています。これがリクエスです。
これに対してサーバーは「Amazonのサイトですね!どうぞこちらです!」とAmazonのサイトのデータを返してくれます。これがレスポンスです。
このやりとりはAmazonのトップページにアクセスした時だけではなく、別のページに移動したり商品をカートに追加した時など、サイトを利用している人が通信を含む操作を行なった時に毎回発生します。

ステートレスとステートフル

HTTPの特性としてステートレスというのがあります。
ステート(state)は「状態」を意味しますが、Webサーバが状態を保持しないというのがステートレスです。

Amazonで実際に商品を購入するとしましょう。Amazonでの買い物はログインが必須ですね。
ログインすれば、Webサーバは「田中さんがアクセスしている」とわかります。

次に、カートに移動するとしましょう。
ブラウザは「カートを見せてください」とリクエストを送信しますが、Webサーバは状態を保持できません。
「あなたは誰ですか?カートの情報はログインしていない人には見せられません」と言われてしまいます。
Webサーバはあなたの名前も、ログインしたという事実も覚えていません。

現実にはこんなことは起きませんが、それは後述するクッキーという仕組みによってカバーされているためです。
本来HTTPでのWebサーバは「リクエストに一度レスポンスを返したら、リクエストの内容は覚えていない」のです。

ステートレスに対して、前回までの情報を覚えているのがステートフルです。FTP通信などがこれにあたります。
ステートフルの場合は前回までの情報を記憶しているため、先ほどのAmazonを例に例えると

ブラウザ「商品一覧を見せてください」
Webサーバ「どうぞ、商品一覧ページです」
ブラウザ「カートを見せてください」
Webサーバ「田中さん!カートですね、ログインしてるのでOKですよ。田中さんのカートです、どうぞ!」

…という感じになります。
こちらが実際の動きですよね。

では、HTTPはステートレスなのになぜ情報を記憶しているのでしょうか?
そこで登場するのがクッキーです。

クッキー

クッキーはブラウザがテキスト情報を保存する機能です。
ステートレスでお伝えした通り、Webサーバは情報を保持しません。その代わり、IDを発行してくれます。

ログインに成功すると、Webサーバは「田中さんですね!認証OKです!これIDです。僕情報覚えられないので、次回からこれ見せてください!」という感じでセッションIDというものを発行してくれます。
このセッションIDはブラウザのクッキーに保存され、同じWebサイトである限りリクエストのたびにWebサーバに送信されます。
そのため、実際のAmazonのサイトのように一度ログインしたらログイン情報が保たれるというわけです。

クッキーが保存するのはログイン情報だけではありません。
ログインしていないECサイトなどでも、過去にアクセスして商品情報を見ていた場合「閲覧履歴」として表示されることがあります。
これも、ブラウザが前回の情報をクッキーで保存しており、リクエスト時に送信することによって表示されています。

さいごに

Web技術の基礎中の基礎ですが、普段Webを使っている裏側でどんなことが行われているか少しでも想像できたら幸いです。
また、書籍「プロになるためのWeb技術入門」はWebを体系的に学べる上、インターネットの始まりから進化の歴史を中心にWebの本質が理解できる良書です。
図解や噛み砕いた説明が多く初学者にも読みやすいので、気になった方はぜひ読んでみてください!