Webの仕組みについて知っておきたいこと
2023.11.06
皆さんが普段当たり前に使っている「Web」という言葉ですが、これは実際のところ何を指しているものなのでしょうか。
本記事では、知っているようでよくわからない、この「Web」がどのようなものなのか解説したいと思います。
Webとは
まず「Web」とは「World Wide Web」の略称です。
なのでこの記事では「World Wide Web」についての解説になります。
まず最初に「インターネット」と「Web」の違いを理解しておく必要があります。
この2つは今では同じような意味合いで使われており、それで困ることは滅多にありませんが、実際には違うものを指しています。
例えて言うと「インターネット」は「道路」、「World Wide Web」は「車を運転して目的地に辿り着く手段」でしょうか。
つまり、「Web」と一口に言っても様々な要素を含んでいるという事がわかると思います。
この「Web」を構成する要素として「URL/URI」「ブラウザ/HTML」「HTTP/HTTPS」の3つがあります。
これらも馴染み深い言葉なので、勘の良い方はこれで「Web」が何を指しているものなのかイメージが湧いたかもしれません。
それでは次にこれらについて説明したいと思います。
URL/URI
まずURLとURIの違いについて、この2つも普段は同じような意味合いで使っていると思います。
これに関してはそれでも間違っていないので、違いについては簡単にだけ触れてきます。
「URI」には「URL」と「URN」の2つの種類があります。
ですが「URN」はあまり一般的に使わないので、結果「URI」と言ったらおおよそ「URL」の事を言っているという事になります。
本記事では「URL」で統一して記載します。
では、次にURLを構成している要素について説明したいと思います。
以下の「YahooでSEOで検索をした時にURL」を例に説明します(本当はもっと長いですがわかりやすいように削っています)
https://search.yahoo.co.jp/search?p=seo#meo
URLは以下のブロックに区切って意味が分かれていますので、左から順番に説明します。
[https:][//search.yahoo.co.jp][/search][?p=seo][#meo]
プロトコル
- https:
これは使用する通信方法を指しており、この後に出てくる「HTTP/HTTPS」の事です。
http、https以外にもありますが、ここではこの2つのどちらかが書かれているという認識で大丈夫です。
ホスト名
- //search.yahoo.co.jp
ホスト名は、どのコンピュータ(Webサーバーと言います)にアクセスするのかを示しています。
ほとんどがアクセス先のWebサーバーを示すドメイン名を指定しています。
Webサーバーやドメイン名については今回は説明を省きますが、ドメイン名の示す他のコンピュータにアクセスしているという点をイメージしてください。
パス
- /search
ホスト名で指定したアクセス先のコンピュータにあるファイルの位置を指定します。
例ではsearchフォルダの中にあるindex.htmlファイルにアクセスするよう指定しています。
ほとんどのWebサーバーはファイル名を省略した場合はindex.htmlファイルにアクセスするよう設定されているため、例のような書き方が可能となっています。
なので、正しく書くと「/search/index.html」となります。
クエリ
- ?p=seo
?以降はクエリと呼ばれるもので、他にもパラメータ、引数等と言ったりもします。
パスを指定したファイルに対して何か値を渡すために記述します。
ですので、渡す値がなければ記述しません。
プログラムがわかる方であれば、例はpという変数名でseoという値を渡している､と言えばわかるかと思います。
複数の値を渡す場合は&を使って繋げていきます。
「?p=seo&p2=seo2」
こうすればpという変数名でseo、p2という変数名でseo2という値を渡すことになります。
アンカー
- #meo
#以降の文字はアンカーというものでページ内リンクの際に使用します。
次項で説明するHTMLでは、ページ内の特定の場所に「アンカー」という名前を付ける仕組みがあります。
URLにて#でアンカーの名前を指定することで、ページ内の指定のアンカーの場所までスクロールして画面が表示されます。
例の場合は「meo」というアンカー名の場所までスクロールします。
ブラウザ/HTML
ブラウザとは、今このサイトを開いているChromeやSafari等のアプリケーションの事を指します。
そして、HTMLとはブラウザが理解できる形で書かれたテキストです。
つまりHTMLファイルというのは、ざっくり言えばただのテキストファイルです。
これは実際に試した方が理解できると思いますのでやってみましょう。
以下のテキストをメモ帳(等のテクストエディタ)に貼り付けて、「index.html」というファイル名で保存してください。
<!doctype html>
<html>
<span style="color: #FF0000">Hello</span> world
</html>
そうしたら一度ファイルを閉じ、もう一度メモ帳でindex.htmlを開いてみてください。
もちろん先程の内容が書かれていると思います、ただのテキストファイルですね。
では今度はChrome等のブラウザでindex.htmlを開いてみてください。
おそらくこのように表示されるかと思います。
Hello world
Hello world以外の文字はどこに行ってしまったのでしょうか。
これは、ブラウザが<〜>で囲われた部分を
- これはHTMLで書かれている
- Helloという文字を赤くする
と理解して、そのように表示しているためです。
つまりWebサイトは、HTMLの書き方に沿って書かれたテキストで作らてていて、ブラウザを使うことで多彩な表現をすることができているのです。
HTTP/HTTPS
「URL/URI」の項で少し触れた「HTTP/HTTPS」ですが、これはブラウザがURLを使ってWebサーバーに対して要求を行い、Webサーバーは要求に対してHTMLで返答を行うという仕組みの事を指します。
具体的な何かがあるわけではないので少しイメージしにくいかもしれません。
ここで覚えておきたい点は、HTTPとHTTPSの違いです。
この2つは、一見Webサーバーに対する要求と、Webサーバーから得られる結果は変わりません。
ただし、HTTPSはその際にインターネットを通して行き来するデータが暗号化されているという点が異なります。
HTTPSの方がセキュリティ上優れているため、可能であるならHTTPSを選択しない理由はありません。
ただ、HTTPSを使うにはアクセスするWebサーバー側にSSLという仕組みが導入されている必要があります。
導入されていない場合はHTTPのアクセスしかできません。
まとめ
これらの情報をまとめて、先の例の「https://search.yahoo.co.jp/search?p=seo#meo」を考えてみましょう。
- ブラウザにhttps://search.yahoo.co.jp/search?p=seo#meoというURLを入力します。
- ブラウザはsearch.yahoo.co.jpというWebサーバーに対して、/search/index.htmlのファイルにp=seoというパラメータを渡した結果をください、とhttpsの仕組みを使って要求します。
- search.yahoo.co.jpというWebサーバーは要求を受け取ると、要求に沿った結果をHTML形式でhttpsの仕組みを使って返答します。
- ブラウザはその返答のHTMLを理解して、HTMLの解釈に沿った内容を表示します。
- 受け取ったHTMLの中に「meo」というアンカー名が指定されている箇所があればそこまでスクロールします。
我々が普段行っているWebサイトの閲覧は、上記の手順を踏んで行われています。
これらの仕組みを総括して「World Wide Web」と呼び、我々が普段「Web」と呼んでいるものです。
World Wide Webの仕組みは実際にユーザーとして使うにあたっては、ほとんど意識しなくても使うことはできます。
しかしSEO等、Webを使って何かをする上ではこれらへの理解が無いと自分が何をやっているのかわからなくなってしまいます。
本記事がWebを使う様々な人への理解の手助けになれば幸いです。
関連
Webサイト制作Web開発
Webサイト制作Webデザイン
