LoginSignup
0

More than 1 year has passed since last update.

Webの基本〜クライアントとサーバ〜

Posted at

はじめに

今回のテーマであるHTTPは、Webエンジニアなら必ず抑えておきたいワードかと思います。

当方は2022年9月現在、バックエンドエンジニアとして従事してはや2ヶ月が経過しております。独学で学習をしていたとはいえ、このあたりの知識がかなり曖昧であったため、「頭の中の整理」という意味も込めて投稿したいと思います。

そもそもHTTPとはなんぞや

HTTPは、「Hyper Text Transfer Protocol」の略です。
HTTPはRFC2616(※)で規定された、WebサーバとWebブラウザの間でWeb情報をやりとりするためのプロトコル(コンピュータでデータをやりとりするために定められた手順や規約)です。
クライアントはHTTPに従ってサーバリクエストを送り、レスポンスを得ます。

RFCとはインターネット技術の標準化などを行う団体が発行している、技術仕様などについての文書群。「2616」は割り当てられた通し番号。最新の通し番号は8000番代。

クライアントとサーバ

前述しているクライアントサーバとはなんでしょうか。
クライアントは、「顧客」や「依頼人」という意味が、世間一般の認識だと思います。
イメージとしては割と近いです。
サーバはどうでしょうか。映画やドラマでたまに見る、「寒くて薄暗い部屋に所狭しと設置された黒い筐体が、緑色の怪しい光を放つ姿」を想像するのではないしょうか?
IT、Web業界における2つの言葉の意味をご説明します。

クライアント

clientという英単語の意味は本来、「顧客」や「依頼人」という、サービスや商品を提供される側の人のことを指します。
ITやWebの領域においても似たようなイメージをもって頂けたらと思うのですが、
クライアントは、Webブラウザからコンテンツをリクエスト(取得)する側、つまりコンテンツを提供される側のモノのことを指します。
例) Chrome, Safari, Firefoxなど

サーバ

サーバ(Server)とは、クライアントから送られたリクエストを、サーバ側で解析・処理してそれに対する回答(レスポンス)を提供するソフトウェアやコンピュータのことを指します。

クライアントとサーバのやりとりを見てみよう

Chromeに標準搭載されている開発者用の検証ツールである、Google Chrome デベロッパーツールを使って、クライアントとサーバのやりとりのデータを確認することができます。

Chromeで、Googleのトップページにアクセスしてみます。
トップページに遷移したら、

  • macOSをご使用の方:Command + Option + i
  • windowsをご使用の方:Ctrl + Shift + i
    以上のショートカットキーを入力すると、ページ上にデベロッパーツールが表示されます。

    上部のバーにご注目ください。
    Elements, Console, Sources, Network... といくつかタブが表示されているかと思いますが、今回はNetworkタブを使用します。

    すでにGoogleのトップページがレスポンスされているため、今は殆ど何も表示がありません。
    ではこの状態で、ページの再読み込み(
  • macOS:Command + R
  • windows:Ctrl + R
    )をしてみてください。

    なにやらたくさん情報が表示されました。
    一番上の項目、www.google.comをクリックしてください。

    この項目は、表示されているページのHTMLファイルの通信記録です。
    クリックすると、HTTPヘッダの中身を確認することができます。
    HTTPヘッダは、HTTPのリクエスト・レスポンスのやりとりのデータに関する説明書きを記載している部分のことです。
    上部の「General」を簡単に読み解くと、『Googleのトップページにアクセスしたときにサーバに要求(※GET)したリクエスト(HTMLファイル)を、200でレスポンスしている』と記載されています。
    '200'はHTTPステータスコード(Webサーバからレスポンスの結果を表す三桁の数字コード)の一つです。

HTTPステータスコード

HTTPステータスコードは5つのクラスに分類されています。

  • 100~199:情報レスポンス
  • 200~299:成功レスポンス
  • 300~399:リダイレクトメッセージ
  • 400~499:クライアントエラーレスポンス
  • 500~599:サーバーエラーレスポンス

    つまりここでは、「Googleのトップページを見せてほしい」というクライアントからのリクエストに対して、サーバー側のレスポンスが無事成功していることを意味します。

    GETとは、HTTPメソッドの一つです。次回以降の投稿でHTTPメソッドについて触れていきたいと思います。

クライアントとサーバで行われていることのまとめ

ここまでの、クライアントとサーバのやりとりについてまとめると、

  1. クライアントがリクエスト・メッセージを構築・送信
  2. サーバがそのメッセージを受信・解析
  3. サーバがアプリケーション(今回でいうとGoogle)に処理を委譲
  4. アプリケーションからコンテンツを取得したサーバが、レスポンスメッセージを構築・送信
  5. クライアントがサーバからのレスポンスメッセージを受信・解析
  6. クライアント側でページを表示するための処理が行われる
    以上のような流れとなります。

最後に

プログラミングやITの知識をキャッチアップする際、どうしても表立った部分(言語やフレームワーク、トレンドなど)が取り沙汰されがちな気がします。しかしこういった所謂「裏側」の知識をきちんと知っておくことで、より深い学びになると思います。
私自身こういった領域の知識習得が疎かになってしまっていましたが、今回記事にしたことでかなり学びになりました。

参考文献

山本陽平 著 . "Webを支える技術" . 技術評論社 . 2010年4月8日出版

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0