【WEBプログラミング初心者必読】意外と知らないWEBの仕組み

私たちは、毎日のようにスマートフォンやパソコンでホームページを見ます。
しかし、どのようにページが表示されているのか知らない方は多いのではないでしょうか？

今回は、

ブラウザとサーバの役割
通信の流れ
HTTPって何？
IPアドレスとDNSサーバ
構築に使われる言語

について解説したいと思います。
WEBプログラミングを勉強していく上でも、アプリやWEBページの挙動・仕組みなどへの理解の必要性が出てくるので、今のうちから少しずつ理解していきましょう。

Webを表示するための3つの要素

Webを表示するには3つの要素があります。
ブラウザ、Webサーバ、そしてそれらを繋ぐネットワークです。
ブラウザ側をクライアント側、Webサーバ側をサーバ側といいます。
それぞれの特徴について理解しましょう。

ブラウザとは

ブラウザとは、私たちがWeb上でホームページを見たりする際に使用するソフトです。
Internet ExplorerやGoogle Chrome、Firefoxなどがそれにあたります。
URLで見たいページを指定して、後述するサーバに指示を出したり受け取ったりします。

サーバとは

サーバとは、情報の受け渡しを専門にしたコンピューターです。
そのサーバ内にホームページの情報などが置いてあります。
私たちは、そこにある情報をブラウザを介して見に行くことで、Webページを見ることができます。
上記のWebサーバの他に、データの格納をするDBサーバ、メールのやり取りが専門のメールサーバ、URLのドメインをIPアドレスに変換するDNSサーバがあります。
DNSサーバについては後ほど説明します。

通信はどのように行われているのか(ネットワーク)

WebブラウザでURLを打ち込むとページが表示されます。
具体的にどのような流れで表示されているのでしょうか。

まずブラウザからクライアントがURLを打ち込みます。
するとURLに紐づいた情報がWebサーバに送られます。
サーバはURLに応じたテキスト情報をサーバ内で探してきて、HTMLという形式でブラウザに返します。
この流れによってクライアントの端末にページが表示されます。

サーバにこのページをもってきてと指示を出すことをリクエスト、逆にサーバから受け取ることをレスポンスといいます。

ブラウザ -> Webサーバ: リクエスト
Webサーバ -> ブラウザ: レスポンス

URLに書かれているHTTPの意味

URLを見ると、最初にhttpやhttpsという文字が書かれていると思います。
これらはスキーム名を示しており、通信プロトコルと呼ばれているものを指定しています。

通信プロトコルとは、ネットワーク上でデータを通信するための手順や規約の集合のことである。
「protocol」には「規約」「議定書」といった意味がある。
通信プロトコルとは何？ Weblio辞書: https://www.weblio.jp/content/%E9%80%9A%E4%BF%A1%E3%83%97%E3%83%AD%E3%83%88%E3%82%B3%E3%83%AB

この規約に基づいて情報のやり取りが行われていきます。
この通信プロトコルには他にも様々な種類がありますが、Web上で一番多く使われているのがHTTPプロトコルになります。

httpとhttpsの違い

httpとhttpsの違いは暗号化の有無にあります。
httpsのsはsecureの頭文字で、HTTPで送られたプロトコルがSSLやTSLといった別のプロトコルによって暗号化されている状態を指します。
現在ではほとんどのサイトのURLがhttpsになっていて、このサイトのURLもhttpsとなっています。

それによって、クレジットカードの暗証番号や自分のGoogleアカウント情報など、人に知られてはいけない情報が守られており、セキュリティ上より安全と言えるでしょう。

リクエストの形式: GETとPOST

先の説明でWebサーバへこのページを持ってきてと指示を出すことをリクエストと言うことの説明をしました。
しかし、このリクエストの形式には様々な種類があります。
そのほとんどを占める形式がGETとPOSTと呼ばれるものです。

GET

簡単に言うとGETは、「このページを持ってきて」という命令です。

GETは単純にWebページの表示だけを行うため、サーバ内の情報そのものは変化しません。
またGETリクエストを受信したサーバは、リクエストされたページのHTMLを返す以外のことはしません。
例えば、GETリクエストをもとに、新規にユーザアカウントを作成するといったことはしません。

POST

これも簡単に言うと、「このデータを送信して」という命令です。

しかしPOSTの場合は、サーバ内の情報そのものが変化します。
上記の例の場合、POSTでIDやPASSWORDを送信すれば新規アカウントが作成されます。
また、POSTは必ずしもページの更新があるわけではありません。
見た目に変化がないため一見するとsursurその代わり、クライアント側にはHTTPステータスコードというものを使って処理が行われたかを知らせます。

より正確に言えば、GETリクエストでも新規アカウントを作成するように設計することもできますが、悪意のあるユーザーに情報を抜き取られたり、改ざんされる恐れがあるので使用しません。

結果を表示するHTTPステータスコード

ホームページのリンク先に飛んだ際に自分の見たいページが表示されておらず、代わりに404という表示されているところを見たことがあるかもしれません。

下のリンクを見ると404と表示されているページを見ることができます。https://www.python.org/1

それがステータスコードと呼ばれるものです。
ステータスコードは3桁で示されており、百の位の数で意味が分かれています。

ステータスコード	内容
100番台	案内(インフォメーション)
200番台	正常処理
300番台	移転通知
400番台	(クライアントにおける)処理失敗
500番台	サーバエラー

例えばリクエストが成功すれば、ステータスコード200が表示されます。
GETに対して最も多く返されます。
POSTには提示するものがない、ステータスコード204が表示されます。