Webサイト構築の基礎知識、本当に理解できていますか? Webの仕組みを正しく理解することは、効果的なWeb戦略を立案し、ユーザーエクスペリエンスを向上させるために不可欠です。
この記事では、Webの基礎である「Webとは何か」を、その構成要素や仕組みから丁寧に解説します。 Web担当者として、Webサイト構築や運用に携わる中で、「なんとなく」で使っているWebの専門用語も、この記事を読めば、その意味や役割がクリアになるはずです。この記事を読むことで、以下の内容を理解できます。
- Webの構成要素(URI、HTTP、HTML)
- Webの仕組み(クライアントサーバーシステム)
- Webの用途(Webサイト、ユーザーインターフェース、API)
Web技術の進化は目覚ましく、Web担当者として常に最新情報をキャッチアップしていく必要があります。 この記事を参考に、Webの基礎知識を改めて確認し、日々の業務に役立てていきましょう。
Web(ウェブ)とは?ネット上で文書の閲覧を可能にするシステム
ここでは、Web(ウェブ)についての概要をざっくり解説していきます。
Webの意味
Web(ウェブ)、別名はWorld Wide Webといいます。インターネット上で文字や画像、動画などの閲覧を可能にするシステムのことです。
Webとは、インターネット上で標準的に用いられている文書の公開・閲覧システム。文字や図表、画像、動画などを組み合わせた文書を配布することができる。
引用元:IT用語辞典 e-word;https://e-words.jp/w/Web.html
現在、Webなしで生活できている人は世界にほとんどいないと言って良いでしょう。Webが誕生するまでには様々な紆余曲折がありました。
Webとインターネットの違い
インターネットは、世界中のコンピュータが繋がる巨大なネットワークです。例えるなら、情報が行き交うための道路や線路のようなものです。
一方、Web(World Wide Web)は、インターネット上で動く情報システムの一つです。Webページを閲覧したり、動画を見たり、オンラインショッピングを楽しんだりできるのは、Webのおかげです。Webは、インターネットという道路の上を走る車のような存在と言えるでしょう。
つまり、インターネットは情報伝達のインフラであり、Webはそのインフラ上で動くサービスの一つなのです。
特徴 | インターネット | Web (World Wide Web) |
---|---|---|
定義 | 世界中のコンピュータが相互に接続された巨大なネットワーク | インターネット上で情報を共有するためのシステム |
役割 | 情報伝達の基盤 | 情報の閲覧・共有 |
提供サービス | Webページ閲覧、メール送受信、オンラインゲーム、ファイル共有など | Webページ閲覧、動画視聴、オンラインショッピングなど |
例え | 道路、線路などのインフラ | インターネットという道路上を走る車 |
プロトコル | TCP/IP | HTTP, HTTPS |
アクセス方法 | 様々なデバイス (PC、スマホ、タブレットなど) でアクセス可能 | Webブラウザ (Chrome, Safari, Firefoxなど) を使用してアクセス |
Webの仕組み
ハイパーメディアとハイパーリンク
また、Webはハイパーメディアとハイパーリンクという技術の一例になります。ハイパーメディアとは、テキストや画像、音声、映像などさまざまなメディアをハイパーリンク(Hyper Link)で結びつけて構成されたシステムです。
ハイパーリンクは特定のメディアと他のメディアを結びつける機構になります。ハイパーリンクは、URI(URL)によって実現されています。
分散型システム
Webには、分散システムという特徴があります。もともとWebは蜘蛛の巣を意味する英単語であり、Webの特徴でもあります。この特徴を分散型システムと言い表します。
分散型システムの対義語を集中管理型システム(Centralize System)と呼びます。集中システムは、1つのハブとなるコンピューターのみが処理を行います。一方で、分散システムは複数のコンピューターがネットワーク上に分散して存在し、それらがハブとなり処理が行うので、集中システムと比べ効率的に処理が実現できます。
Webは、分散システムになっています。Web全体に入っている情報膨大になるため、1つのコンピューターでは処理しきれません。そこで分散システムが採用されたのです。
WebはURI、HTTP、HTMLによって成立している
Webの本質は、情報を伝達することにあります。Webを支える最も基本的な技術には以下の4つが挙げられます。これらの4つの技術を使うことでWebによる情報の伝達が可能になっています。
全体の枠組み|クライアントサーバーシステム
まず前提として、Webにおいて、データのやり取りはクライアントとサーバの間でやり取りされます。これをクライアントサーバーシステムと言います。これが基礎としてあります。
この枠組みの中で、これから説明するHTTPやURI、HTML、ブラウザが動いています。
要素①|URL(URI)
まず情報には、名前と住所が必要になります。この情報に名前と住所を授けるルールの総称をURI(Uniform Resource Identifier)と言います。また厳密にはURIは以下の二つに分類することができます。
名称 | 運営会社 |
---|---|
URI(Uniform Resource Identifier) | 情報に名前と住所を授けるルールの総称 |
URL(Uniform Resource Locator) | 情報の住所のこと |
URN(Uniform Resource Name) | 情報の名前 |
の2つに分類することができます。URLは情報の住所のことを指します。そして、情報の名前はURNと言います。これらの総称をURIというのです。
▼関連記事
リンク(ハイパーリンク)とは?|種類やURLとの違いやSEOに関連する用語を徹底解説。
要素②|HTML
HTMLとは、情報の中身を表現する文章フォーマットです。つまり、情報の中身を記述する言語のことを言います。
みなさんが、普段見ているサイトの裏は以下のようにHTMLという言語で書かれています。
<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
<meta charset="UTF-8">
</head>
<body>
<h1>HTMLのサンプルです</h1>
<p>HTMLはこんな感じで書きます。</p>
</body>
</html>
クライアントがサーバー側にリクエストを送ると、サーバーがレスポンスの際にHTMLの情報を送信することでWebサイトを見ることができるのです。
要素③|HTTP
HTMLとURIだけでは、情報はそれ自体では、伝達することはできません。
そこで、HTTPというプロトコル(ルール)を使い、情報の伝達が可能になります。
プロトコルとは、コンピュータでデータをやりとりするために定められた手順や規約、信号の電気的規則、通信における送受信の手順などを定めた規格のことです。世界中でWeb上で情報をサーバーとやり取りする際には、HTTPという決まり事を守っているのです。
要素④|ブラウザ
Webの情報を一般人でも理解できるようにするソフトウェアをブラウザといいます。
あなたが現在このサイトを見ることができているのもブラウザのおかげです。ブラウザを通して、天気予報やニュースをみたり、買い物をしたりYoutubeを閲覧することができています。
ブラウザがなければ、われわれWebの情報は理解することができないでしょう。ちなみに、ブラウザは、microsoftやApple、Googleなどのサービスが有名です。以下に有名なものをいくつか挙げてみました。
- Google Chrome(グーグルクローム)
- Firefox(ファイヤーフォックス)
- Microsoft Edge(マイクロソフト エッジ)
- Internet Explorer(インターネットエクスプローラー)
- Safari(サファリ)
また、現在はこのように多くのブラウザが群雄割拠していますが、今日に至るまでには様々な出来事がありました。ブラウザの歴史やブラウザの仕組みに関しては別の記事で書いているのでそちらをお読みください。
WebはAPI、Webサービスなどで使われている
Webは、さまざまな用途で使用されています。ここでは主に3つの用途について解説してい来ます。
用途①|Webサイト
Webの用途としてWebサイトは最も私たちにとってみじかな例といえます。Yahoo!のようなポータルサイトや、アマゾンのようなショッピングサイト、Googleを代表とするような検索エンジン、ブログ、SNSなどのことを指します。
多くのバリエーションが存在しますが、これらはWebサイトの裏がどうなっているのかをユーザーが意識する必要がない点が特徴です。
さらに、PCに限らず携帯電話やゲーム機、テレビなどのさまざまなデバイスで広く利用されています。
用途②|ユーザーインターフェース
Webは、ユーザーインターフェイスでも使用されています。ユーザーインターフェイスとは、User Interfaceの略です。
ユーザーとコンピュータとが情報をやり取りをする際に接する、機器やソフトウェアの操作画面や操作方法を指します。
例えばWi-Fiのルーターの設定画面、プリンターなどネットワークに接続する必要のあるデバイスの設定は画面は、Webブラウザで行われます。
用途③|プログラム用API
API(Application Programming Interface)としてWebが使用されています。ユーザーインターフェースは人間向けに作られたインターフェースでした。一方で、APIとしてのWebはプログラム向けのインターフェースになります。
API を使用することで、利用中の製品やサービスをそれらと連携することができます。また、API を使用することで、アプリケーション開発にかかるコストを軽減することができます。
例えば、アプリ内に地図機能を入れようとした際に、自分で一から作るより、Google Mapと連携した方が、確実に質が高くアプリケーションの開発コストを削減することができるのです。
名称 | 運営会社 |
---|---|
UI | ユーザーとコンピュータとが情報をやり取りをする際に接する、機器やソフトウェアの操作画面や操作方法 |
API | プログラム向けのインターフェースになります。 |
さいごに
現在のインターネット社会は、Webによって大きく変化しました。しかし、意外とWebとは何か?についてわかっている人は少ないように思われます。
実際に、このような情報は、これからエンジニアになろうとしている方や、Webマーケティングに携わっている方には必須です。
ぜひ、しっかり押さえておきましょう。