簡単なWebの仕組み

April 21, 2020

概要

今回は、Webの仕組みについて話していきます。普段何気なくインターネットサーフィンとかしていると思いますけど、仕組みはかなり深いです。深海です。

Webとは

WebとはWorld Wide Web(WWW)の略称です。これは日本語としては、「世界規模の蜘蛛の巣」という意味になります。ちょっと気持ち悪いですがそういう意味です。網目状に世界中のページとページがつながっている様子を表しているのです。

WebのURL、例えば弊サークルのURLは「 https://www.winc.ne.jp/ 」となっていますが、「 https:// 」の後に「www」という文字が見て取れると思います。これは、このサイトはWorld Wide Web(WWW)上にあるサーバーだよということを表しています。

それでもって、Webはインターネット上で運用されているハイパーテキストシステムのことを指します。  

ハイパーテキストシステムとは、複数の文書を相互に結びつける仕組みです。リンクを押すと、他のWebページに移行するという点でも、想像しやすいかと思います。ぽちぽち押して移動していくの楽しいですよね(主観)。 

Webの仕組み

Google ChromeやFirefoxなどのWebページをみることのできるソフトウェアをWebブラウザと言います。WebブラウザからWebページにアクセスしたときになぜページが表示されるのでしょうか。

WebサーバとWebクライアントの関係性

Web上で情報を公開するために必要となる情報を格納しておく場所をWebサーバと言います。ここに、自分の作ったWebサイトのコードを載せておきます。一方で、Webサーバーから情報を受け取るほうをクライアントと言います。私たちがネットサーフィンをしているときはクライアントであるということです。

  • Webサーバ=情報を渡す側
  • Webクライアント=情報を受け取る側

ということだけ覚えておけば、ひとまず大丈夫です。

URLにアクセスすると

URLは一意のもので、Webページの住所・宛名のようなものです。Webブラウザの上部に表示されてるこんな感じのやつです→「 https://www.winc.ne.jp/
Webブラウザの検索バーに直接URLを入力したり、そのURLへのリンクを踏むと、そのURLに対応するWebページが表示されますね。

これは、次のような手順で行われます。

  1. WebクライアントがURLを踏む
  2. WebクライアントがWebサーバにそのURLに当たるページをリクエストする
  3. Webサーバがレスポンスを返す
  4. 受信したデータをWebクライアントが画面に表示する

僕らが適当にリンクをぽちぽちしている間でも、Webサーバ君とWebブラウザ君は非常に複雑な処理をして頑張ってくれているのです。労ってあげましょう。

じゃあWebサイトはどうやって作るの?

昨今はWordpressやWixのような簡単にWebサイトを作るソフトウェアがあります。大体枠組みが決まっていて、その要素をおいていくだけでWebサイトができちゃうような感じです。

しかし基本的には、Webサイトを作るにはHTMLというマークアップ言語で、ページの枠組みを記述していき、その後、CSSというスタイルシート言語でそれを装飾することになります。

あれ、プログラミング言語じゃないの?という人もいるかと思いますが、そうなんです。HTMLやCSSはプログラミング言語とは言えないのです。なぜならば、HTMLやCSSは基本的には動的処理(端的に言えば計算)を行うことができないからです。

しかし、Webサイトを作る過程で、プログラミング言語を使わないわけではありません。HTMLやCSSを習得したのちに更なるステップアップとして用いることになります。
聞いたことあるかもしれませんが、JavaScriptやPHP、Python、Rubyなどがそれにあたります。それらを習得すると動きをつけたり、ログイン機能をつけたりできるようになります。ここら辺までくると、自分の作りたいものが少しはできるようになって楽しいです。

まあ、何はともあれ、HTMLとCSSをやらなければ始まりません。HTMLとCSSはしょぼくもなんともありません。ローマは一日にしてならずです、着実に力をつけていきましょう。

まとめ

  • Webとは、正式にはWorld Wide Webといい、インターネット上のハイパーテキスト機能のことです
  • WebクライアントがURLを踏むと、Webサーバーにリクエストが行き、レスポンスが返ってきます。レスポンスのデータを元に、Webクライアント側が画面に描画します
  • WebサイトはHTMLとCSSを基礎として作成します