非エンジニアのためのウェブの基礎知識
デザイナーやウェブディレクターのように、エンジニアではないけどウェブに関わる仕事をしている方や、プログラミングスクールの生徒さんにウェブの基礎知識を説明することがよくあります。いろんな所で同じ説明を何度もしているので文章にまとめてみました。
ウェブとは何か
ウェブページなどの「ブラウザで見るもの」をウェブと呼びます。ブラウザとは Safari, Internet Explorer, Chrome, Firefox などのことです。
リンクとフォームはウェブを構成する代表的な要素です。
リンクをタップしたりマウスでクリックすると、リンクされている先のウェブページを開くことができます。
一方で、フォームは情報を送信できます。以下の画像を見てください。これは Amazon の会員登録フォームです。
このフォームの場合、Amazon の会員登録に必要な氏名やEmail アドレス、パスワードなどの情報を Amazon に送信するわけです。
フォームの例をもう一つ見てみましょう。これは Twitter でツイートするときのフォームです。
見た目は随分違いますが、この Twitter のフォームも先ほどの Amazon の会員登録フォームも、どちらもフォームであることに違いはないです。Twitter のフォームの場合、ツイートの文章や画像、位置情報などを Twitter に送信するわけです。
インターネットとは何か
ウェブとインターネットを混同している人も多いかと思います。ウェブはインターネット上で動いています。ウェブ以外にもインターネットを活用したものは色々あります。
例えば、iPhone の「メール」というアプリや Windows の Outlook で Email を読んだり送ったりする、というのはウェブではないです。だって、iPhone の「メール」や Windows の Outlook はブラウザではないですよね？繰り返しになりますが、ウェブとは「ブラウザで見るもの」のことなんです。
スマートフォンの LINE でメッセージやスタンプを送る、というのもウェブではないです。LINE はブラウザではないからです。同様に Windows に Skype をインストールして音声通話する、というのもウェブではないです。Skype はブラウザではないからですね。
インターネットとは、世界中に張り巡らされたネットワークのことです。インターネット上で、ウェブや Email や LINE のメッセージや Skype の音声通話などの様々な通信が行われています。つまり、ウェブはインターネットの一部なんです。
HTTP とは何か
HTTP とは、ウェブで主に使われている通信の仕組みです。次の画像のブラウザのアドレスバーを見てください。
ここに http と表示されていますよね。これは HTTP で通信しているよ、ということを意味しています。
HTTP リクエストとレスポンス
HTTP において、ブラウザはリクエストを実行します。このリクエストを受け取りレスポンスを返すものをウェブサーバーといいます。代表的なウェブサーバーとして Apache（アパッチ）や nginx（エンジンエックスと読んでください）が一般的によく使用されています。
ウェブサーバーはレスポンスとして、例えば HTML を返します。ウェブページは通常、HTML という書式で記述されていて、レスポンスとして HTML を受け取ったブラウザがウェブページを表示するのです。
404 とは何か
ウェブページを開こうとして 404 あるいは 404 Not Found と表示されるのを見たことはありませんか？404 とはなんでしょうか。
404 は、HTTP のステータスコードです。例えば見ようとしたウェブページが既に削除されている場合、そのページを表示することはできないので、ウェブサーバーは 404 というエラーのステータスコードをレスポンスで返します。404 とは、リクエストしたものが存在しない場合のエラーを意味するステータスコードです。
他にもステータスコードは色々あります。代表的なものをいくつか挙げると 200, 301, 302, 500, 503 などがそうです。それぞれ順に見ていきましょう。
200 は成功した場合のステータスコードです。あるウェブページを開こうとして、正常に表示することができました。そのときブラウザは内部的に 200 というステータスコードを受け取っています。
300 番台のステータスコードはリダイレクトです。例えばステータスコードが 301 あるいは 302 だった場合、ブラウザはリダイレクトします。リダイレクトとは、ブラウザがリクエストした URL から別の URL に転送することです。
例えば、僕のブログの URL が http://example.com/blog だったとして https://blog.example.com に引っ越したいとします。リダイレクトを使うと https://example.com/blog へのリクエストを https://blog.example.com へ転送することができます。郵便局で住所変更の手続きをするようなものです。旧住所への郵便物も新住所に届くようになります。
では、301 と 302 の違いは何でしょうか。それは転送する期間の違いです。一時的にリダイレクトしたい場合、 302 を使います。恒久的にリダイレクトしたい場合は 301 を使います。
400 番台のステータスコードはクライアントエラーです。クライアントエラーとは、つまり「あなたが悪い」という意味です。例えば前述した 404 はリクエストしたものが存在しない場合のエラーでした。存在しないものを取得しようとしているからエラーになっているわけで、サーバーとしては何も間違ったことはしていません。エラーが起きているのはあなたの操作に原因があるわけです。なので「そんなことはできません。間違ったリクエストですよ」と言っているわけです。
逆に 500 や 503 などの 500 番台のステータスコードはサーバーエラーといって「サーバーが悪い」という意味です。503 も見かけたことがないでしょうか。サイトにアクセスが殺到してサーバーが混み合っていて、一時的に正常に処理できなくなっているときサーバーは 503 を返します。これはサーバーが悪いです。なぜなら、もっとスペックの高いマシンを使っていれば処理できるかもしれないですし、サーバーの台数を増やすことで対応することもできるわけです。リクエストには何の問題もないので、サーバーは「こちらが悪いです」と言っているわけです。
500 は、Internal Server Error と言って、つまりバグのことです。サーバーのプログラムに問題があって、正常に処理できませんでしたという意味です。エンジニアにとって 500 は敗北なので、恥ずかしいことです。この場合もやはりリクエストには何の問題もないので、サーバーは「こちらが悪いです」と言っています。
以上のステータスコードの分類を表にまとめるとこうなります。
GET と POST
HTTP リクエストにはいくつかの種類があり、代表的なものに GET リクエストと POST リクエストがあります。ここでは GET と POST について説明します。
前述したとおり、リンクとフォームはウェブを構成する代表的な要素ですが、リンクは GET リクエストである一方で、フォームは GET だけではなく POST リクエストを送信することもできます。
リンクをタップしたりクリックすると、ブラウザはウェブサーバーにリクエストするわけですが、このとき実行するのは GET リクエストです。GET リクエストとは、情報を取得するときのリクエストです。例えばリンクされている先が「ウェブページA」だとして、GET リクエストでブラウザは「ウェブページA」を取得して、そのページを表示するのです。
次に、フォームで POST リクエストを送信する場合について説明します。POST リクエストとは、情報を送信するときに使うリクエストです。先ほど例に挙げた Amazon の会員登録フォームや Twitter のフォームを思い出してみてください。Amazon の会員登録フォームは Amazon に会員情報を送信します。Amazon は受け取った会員情報をもとに Amazon アカウントを作成します。Twitter のフォームは Twitter にツイートの文章や画像、位置情報などを送信します。Twitter は受け取った情報をもとにツイートを作成しタイムラインに追記します。
このように GET で情報を取得して表示し、POST で情報を送信することでウェブは動いています。
では、アドレスバーにキーボードで URL を直打ちして Enter ボタンを押した場合は GET と POST どちらのリクエストになるでしょうか。
アドレスバーに URL を直打ちした場合もリンクと同様、GET リクエストです。ウェブページを取得して表示するという意味ではリンクをタップやマウスでクリックする場合と同様だからです。
もっと詳しく知りたい方へ
この記事に書いたことは、IT に関する知識のなかでも、ウェブに関係する部分の基礎の基礎です。こういったことをもっと詳しく知りたい方は、ITパスポートの参考書などを読むのが良いと思います。ITパスポートは、情報処理推進機構（IPA）が実施している IT に関する資格試験です。
IPA の試験のうち、 ITパスポートがもっとも簡単で、その上に 基本情報技術者 という試験があります。また、そのさらに上に 応用情報技術者 という試験もあります。僕は非エンジニアの方には ITパスポートを、エンジニアを目指す人には基本情報技術者と応用情報技術者の取得を薦めています。エンジニアではないけどウェブに関わる仕事をしている、という場合には IT パスポート程度の基礎知識があればとりあえずは十分ではないかなと思っています。