ウェブ運用・制作

記事一覧

【初心者向け】Webの仕組みをやさしい言葉で解説

このエントリーをはてなブックマークに追加

Webの業界で働き始めた方、もしくはこれから働く方(未経験)など、初心者にとってWebの概念を理解するのは少々難しく感じると思います。
 
Googleで「Web 仕組み」などと調べても、なかなかやさしい説明が見つからず、自分が初心者のときに苦労したため、本当に初心者の人がなるべく簡単にウェブを理解できるようにと思って、この記事を書きました。

1.「Web」とは

Web(ウェブ)とはインターネットを利用して情報を発信したり閲覧したりするための仕組みのことで、正式名称は「World Wide Web(ワールド ワイド ウェブ)」といいます。

2.「インターネット」とは

インターネットとは、世界中のコンピュータを通信させるネットワークのことです。
「通信」とは、通信回線を使って、メールのやりとりや、Webサイトへアクセスすることなどを言います。
例えば、スマホでLTE回線を使ってウェブサイトにアクセスすることです。
 
普段は意識することがないかもしれませんが、厳密には「インターネット」と「Web」は別の意味です。「インターネット」がネットワーク(通信網)そのものを指しているのに対し、「Web」はそのネットワークを利用してウェブサイトを公開したり、閲覧したりできる仕組みのことを指しています。

3.Webページを閲覧するソフト「ブラウザ」

ブラウザとは、Webページを閲覧するためのソフト(アプリ)です。
例えば、

  • Internet Explorer(インターネットエクスプローラー)
  • Safari(サファリ)
  • Chrome(クローム)
  • Firefox(ファイヤーフォックス)

などがあります。
 
これらは、Webページのもととなるファイルを読み取り、画面上に文字や画像を表示する役割を果たしています。
 
通常、Webサイトを構成しているファイルは、HTML(※詳しくは後述します)などの、暗号のような文章が書かれているファイルのため、そのままでは人が読めません。
ブラウザでそのファイルを読み込むことで、人が読むためのきちんとレイアウトされた文書や画像を閲覧することができます。

4.Webサイトは「サーバー」の中にある

サーバーとは、コンピュータの一種です。
パソコンやスマホと同じように、「サーバー」という種類のコンピュータです。
画像や文書などのファイルを保存するなど、その他色々な機能がありますが、基本的に人が直接触って操作することはないので、画面やキーボードはついていません。
作成したWebサイトはサーバーの中に保管されます。
 
画面もキーボードもないのにどうやってサーバーにWebサイトを置くのかというと、それ専用のソフト(「FTPクライアント」という)があり、自分のパソコンからサーバーにファイルを転送することができるのです。(FTPの詳細はまだ知らなくて大丈夫です。パソコンで作ったWebサイトのファイルをサーバーに送れるソフトがあるということだけ理解しておきましょう。)
 
サーバーは普段、企業が提供しているデータセンターというところに何台もまとめて置いてあるケースが多く、Webサイトを作りたい場合は、その中の一部をレンタルしたり、購入したりします。
 
購入したサーバーを会社に置くこともできますが、場所をとる、人が蹴ってしまう、線が抜けてしまう、盗まれる、など色々な心配があり管理が大変なので、管理環境が整ったデータセンターに置いてあるのが一般的です。
Webサイトはサーバーの中にあるため、サーバーが壊れたら、世界中の人がそのWebサイトを見ることができなくなります。
また、そのWebサイトの会員情報(メールアドレスなど)などもサーバーに保管されるため、デリケートに扱わないとやばいのです。


データセンターのサーバールームはこんな感じで、たくさんのサーバーコンピューターがラックに並んでいます。
Photo by Torkild Retvedt – Server room(2009)/CC BY 4.0

このサーバーひとつひとつに、ウェブサイトを構成するファイルなどが保存されていて、私たちはブラウザを通してそこにアクセスしています。

5.Webページは「HTML」でできている

HTMLとはHyper Text Markup Language(ハイパー テキスト マークアップ ランゲージ)の略で、ブラウザに文書の構造を伝えるための言語です。
「言語」といっても会話で使うことはできません。
様々な英単語や記号の組み合わせなどが混じった暗号のようなものを使って、文書を作成(マークアップという)します。

HTMLの中身はこんな感じ。
例えば、ここが「見出し」で、ここが「本文」、ここが「リスト」など、文字だけではわからない文書構造をブラウザに伝えます。
その他、上のHTMLには以下のような情報が含まれている、もしくは含むことができます。

  • Googleなどで検索されたときに表示するタイトルや文章
  • このサイトの持ち主の情報
  • このページをお気に入りに入れたときに表示されるアイコン

などです。
 
こうして作成したHTMLファイル(「○○○○.html」というファイル)をブラウザで読み込むと、ブラウザが文章の構造を理解して、人が見やすいように表示してくれます。

上記のHTMLをブラウザで読み込むと、このように表示されます。
このように作成されたHTMLファイル(=Webページ)の集合体が、サーバーの中に存在しており、Webサイトになっています。
 
実際、WebサイトではHTML以外にも色々な言語が使われていますが、一番代表的で、みなさんの目に触れているものがHTMLです。

6.コンピュータについている番号「IPアドレス」

コンピュータにはIPアドレスというものがついています。
IPアドレスとは、「192.168.000.000」のような「.」で区切られた番号で、みなさんがお使いのパソコンやスマホにも個別の番号がついています。
サーバーにも同じくIPアドレスがついています。
 
Webサイトにアクセスする際には、このIPアドレスが必要になります。
世界には無数のサーバーが存在しているので、そのWebサイトがどこのサーバーにあるのかわからなければアクセスできないのです。
IPアドレスはWebサイトの住所の役割を果たします。
(Webサイトに限らず、インターネット上のすべての通信でIPアドレスが使われます)
 
ブラウザのアドレスバーにIPアドレスを入力することで、特定のWebサイトにアクセスできる場合もあります。(ウェブサイトによってはIPアドレスでのアクセスを制限しています)
 
しかし、IPアドレスは覚えにくいため、普段は「ドメイン」を利用します。

7.IPアドレスには「ドメイン」が割り当てられている

ドメインとは、「○○○○.jp」「○○○○.com」「○○○○.co.jp」のようなアルファベットの文字列です。
この「ドメイン」にはそれぞれIPアドレスが割り当てられています。
 
例)
aaaa.jp = 210.149.100.100
bbbb.com = 210.149.100.200
cccc.co.jp = 210.149.100.300
 
ドメインを入力してWebサイトへアクセスしようとすると、ブラウザはまずDNSサーバーにアクセスし、「このドメインに対応するのはどのIPアドレスか」を確認し、該当のIPアドレスのサーバーへアクセスします。
(DNSの詳細はまだ知らなくて大丈夫です。ドメインを入力すると、そのドメインに対応したIPアドレスを教えてくれるサーバーがあるということだけ理解しておきましょう。)

8.URLの「http://」の意味

HTTPとはHyper Text Transfer Protocol(ハイパー テキスト トランスファー プロトコル)の略で、ブラウザとサーバーが通信するときの「プロトコル = 約束事」と、よく説明されますが、「通信の約束事」といわれても直訳過ぎて意味不明なため、現時点では、「HTTPという通信方法を使っている」と理解しておけば大丈夫です。
 
また、「http」ではなく「https」となっている場合がありますが、これはHyper Text Transfer Protocol Secure(ハイパー テキスト トランスファー プロトコル セキュア)といって、「httpよりもセキュリティがしっかりしている通信」という意味です。
 
例えば、お問い合わせフォームのついたWebページから、メールアドレスなどを送信するとき、サーバーと通信中にハッカーに情報を盗まれないよう、httpsを使って通信するといった具合で使われます。

9.Webページにアクセスするまでの流れ

ここまでの内容を踏まえた上で、Webページへアクセスするときの流れを説明します。
 
(例)
https://www.google.co.jp/ にアクセスする場合
※ドメイン「www.google.co.jp」のIPアドレスは「153.142.218.28」

  1. ブラウザにURLを入力
  2. ブラウザはDNSサーバーと通信し、www.google.co.jpに割り当てられたIPアドレスを要求
  3. DNSサーバーは対応するIPアドレス「153.142.218.28」をブラウザに返す
  4. ブラウザは確認したIPアドレス「153.142.218.28」のサーバーにアクセスし、HTMLファイルを要求
  5. ブラウザはHTMLファイルを読み込んで表示する

Webページにアクセスする一瞬の間に、裏ではこんな仕組みが動いています。
 
サーバーとの通信ではこのように、ブラウザからの要求(リクエスト)とそれに対するサーバーからの応答(レスポンス)というキャッチボールのような動き方が基本になります。
ブラウザ「○○が欲しい」→サーバー「はいこれあげる」→ブラウザ「××が欲しい」→サーバー「はいこれあげる」の繰り返しです。
今回説明した流れは、わかりやすくするために細かい部分を端折っています。
実際には、この間に他にも色々な処理が入る場合がありますが、まずざっくりと基本的な仕組みを理解するにはこのくらいで十分です。
各項目の詳細については、また別の機会に学んでいきましょう。

カテゴリー/

ウェブ運用・制作

タグ/
このエントリーをはてなブックマークに追加
この記事を書いた人
Livewire 編集部Livewire 編集部
Web、マーケティングに携わる方々へのインタビューを通して、ビジネスの背景やお考えをご紹介します。今後は、他の分野にも取材先を広げていく予定です!
お問い合わせはこちら

関連記事

TOP