新しい経済

【初心者向け】Web(ウェブ)とは?イラストと図解でわかりやすく解説!

新しい経済
コインチェック

現在のインターネット社会は、Webによって大きく変化しました。しかし、意外とWebとは何か?についてわかっている人は少ないように思われます。

実際に、このような情報は、これからエンジニアになろうとしている方や、Webマーケティングに携わっている方には必須です。

この記事は、Webとは何かについて図解を交えながら分かりやすく解説して行きます。

この記事でわかること
  • 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はハイパーメディアハイパーリンクという技術の一例になります。

ハイパーメディアとは、テキストや画像、音声、映像などさまざまなメディアをハイパーリンク(Hyper Link)で結びつけて構成されたシステムです。

ハイパーリンクは特定のメディアと他のメディアを結びつける機構になります。ハイパーリンクは、URI(URL)によって実現されています。

分散型システム

Webには、分散システムという特徴があります。もともとWebは蜘蛛の巣を意味する英単語であり、Webの特徴でもあります。この特徴を分散型システムと言い表します。

分散型システムの対義語を集中管理型システム(Centralize System)と呼びます。集中システムは、1つのハブとなるコンピューターのみが処理を行います。

一方で、分散システム複数のコンピューターがネットワーク上に分散して存在し、それらがハブとなり処理が行うので、集中システムと比べ効率的に処理が実現できます。

Webは、分散システムになっています。Web全体に入っている情報膨大になるため、1つのコンピューターでは処理しきれません。そこで分散システム採用されたのです。

CHECK
  • Web(ウェブ)、別名はWorld Wide Webという
  • インターネット上で文字や画像、動画などの閲覧を可能にするシステム
  • また、Webはハイパーメディアとハイパーリンクという技術の一例になります。
  • 分散型システムを特徴としてもつ

WebはURI、HTTP、HTMLによって成立している

Webの本質は、情報を伝達することにあります。Webを支える最も基本的な技術は、

  • HTTP(Hypertext Transfer Protocol)
  • URI(Uniform resource Identifier)
  • HTML
  • ブラウザ

があげられます。これらの4つの技術を使うことでWebによる情報の伝達が可能になっています。

全体の枠組み:クライアントサーバーシステム

まず前提として、Webにおいて、データのやり取りはクライアントサーバの間でやり取りされます。これをクライアントサーバーシステムと言います。これが基礎としてあります。

CHECK

クライアントサーバアーシステムがWebの前提にある

この枠組みの中で、これから説明するHTTPやURI、HTML、ブラウザが動いています。

それぞれ詳細に解説して行きます。

URL(URI)

まず情報には、名前と住所が必要になります。この情報に名前と住所を授けるルールの総称をURI(Uniform Resource Identifier)と言います。また厳密にはURIは

  • URL(Uniform Resource Locator)
  • URN(Uniform Resource Name)

の2つに分類することができます。URLは情報の住所のことを指します。そして、情報の名前はURNと言います。これらの総称をURIというのです。

CHECK
  • URI:情報に名前と住所を授けるルールの総称を
  • URL:情報の住所のこと
  • URN:情報の名前

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サイトを見ることができるのです。

CHECK
  • HTMLとは、情報の中身を表現する文章フォーマット
  • サーバーがレスポンスの際にHTMLの情報を送信することでWebサイトを見ることができる

HTTP

HTMLとURIだけでは、情報はそれ自体では、伝達することはできません。

そこで、HTTPというプロトコル(ルール)を使い、情報の伝達が可能になります。

プロトコルとは、コンピュータでデータをやりとりするために定められた手順や規約、信号の電気的規則、通信における送受信の手順などを定めた規格のことです。

CHECK
  • HTTPというプロトコル(ルール)を使い、情報の伝達が可能
  • HTTP:コンピュータでデータをやりとりするために定められた手順や規約、信号の電気的規則、通信における送受信の手順などを定めた規格

世界中でWeb上で情報をサーバーとやり取りする際には、HTTPという決まり事を守っているのです。

ブラウザ

Webの情報を一般人でも理解できるようにするソフトウェアをブラウザといいます。

あなたが現在このサイトを見ることができているのもブラウザのおかげです。ブラウザを通して、天気予報やニュースをみたり、買い物をしたりYoutubeを閲覧することができています。

ブラウザがなければ、われわれWebの情報は理解することができないでしょう。ちなみに、ブラウザは、microsoftやApple、Googleなどのサービスが有名です。以下に有名なものをいくつか挙げてみました。

  • Google Chrome(グーグルクローム)
  • Firefox(ファイヤーフォックス)
  • Microsoft Edge(マイクロソフト エッジ)
  • Internet Explorer(インターネットエクスプローラー)
  • Safari(サファリ)

また、現在はこのように多くのブラウザが群雄割拠していますが、今日に至るまでには様々な出来事がありました。ブラウザの歴史やブラウザの仕組みに関しては別の記事で書いているのでそちらをお読みください。

WebはAPI、Webサービスなどで使われている

Webは、さまざまな用途で使用されています。ここでは主に3つの用途について解説してい来ます。

  • Webサイト
  • ユーザーインターフェース
  • プログラム用API

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と連携した方が、確実に質が高くアプリケーションの開発コストを削減することができるのです。

CHECK
  • UI:ユーザーとコンピュータとが情報をやり取りをする際に接する、機器やソフトウェアの操作画面や操作方法
  • API:プログラム向けのインターフェースになります。

さいごに


タイトルとURLをコピーしました