Webの概要について丁寧に

はじめに

現在、就職活動中のプログラミング初心者です。
学びを深めるため基礎をアウトプットしていきたいと思います！
今回はWeb技術の基本についておさらいしたいという方向けの内容です。
Webって何？
普段使ってるインターネットはどういうふうに動いてるの？
このような疑問を解決していきたいと思います！

この記事のゴール

• Webについて概要を把握する

• Webページがどのように表示されるか裏で起きていることを理解する

目次

1.Webやインターネットとはなんぞや
2.Webの用途
3.まとめ

1.　Webやインターネットとはなんぞや

Webとかインターネットって言葉がすごく抽象的で、車とか家とは違い"形"がありません。
だからイメージしづらいし専門用語が多すぎてなんか近づきがたい。
そういうイメージがありませんか？（僕はあります笑）
なのでこの記事ではなるべく専門用語を排除し、かつ全体像を把握することを目的として頑張ってまとめたいと思います！
まずはWebとインターネットの意味の違いについて整理していきます。

1-1.インターネットとは

アメリカにARPA（アーパ）という大きい組織があります。
インターネットはアーパが「世界中のコンピューター同士を繋げられたら研究とかするのに便利だよね」と仕組みを開発したのがもとになっているんです。
昔はコンピューターを接続するための回線が高価だったので、企業や研究機関でしかその恩恵を受けられませんでしたが、技術が発展してきた現代になってようやく一般の人たちに普及してきたというわけです。

このインターネットという大きな仕組みの中で機能しているのがWebというまた別の仕組みです。

1-2.Webとは

グーグルやヤフーなどをWeb検索エンジンと呼ぶのですが、その検索窓で単語を入力して検索を押すと検索結果が表示されますよね。今まさにご覧頂いているこのQiitaの記事も様々な情報を画面に表示しています。
Webとはインターネットを通じて文字や画像を公開や閲覧するための仕組みのことなんです。
だから、携帯がオフラインになってたり通信制限になってインターネットとつながらなくなると情報が表示されないですよね？そういうことなんです。

Webはもともと文字しか表示できなかったのですが、技術の進歩で画像が表示されるようになると先程説明したインターネットとともに世界中に広まっていたというストーリーになります。

実はWebの正式名称はWorld Wide Webと言います。Webページ同士がつながることで世界中のあらゆる情報にアクセスできる、まるで世界に広がるクモの巣のようである。
そんなイメージです。

1-3.Webを構成する要素

先程、Webは文字や画像を表示させる仕組みのことであると説明しました。
Web上で見れる文書のことをWebページ（サイトやブログなどをイメージしていただければ！）と呼ぶのですが、このWebページは裏でハイパーテキストという言語で作られています。

このハイパーテキストには別のWebページのリンクを貼ることができ、こうすることでWebページ同士がつながり全体でおおきな情報の集合体になっていきます。

2.　Webの用途

現代のWebは文字や画像の表示すること以外にも、ユーザーからあるデータを受け取ったり、受け取ったデータに対する何らかのリアクションをユーザーに返すなどいろんな機能が追加されてものすごく広い用途で使われています。
今回は上で説明した文書の閲覧以外に２つ機能を紹介いたします。

2-1.ユーザーインターフェース(UIと呼ばれるもの）

よくUI/UXという単語がささやかれるのを聞いたことがあるでしょうか？
UI/UXの詳しい説明については今回のゴールの趣旨と外れるため省きますが、この記事にとてもわかり易くまとめられているので参考にしてください。
UI?UXとは？

簡単に説明するとUXとはユーザー体験のことで要はそのサービスに触れて人がどう感じるか（文字が見やすい、デザインがきれいなど）の設計全体の話でUIはUXの中でもユーザーとコンピューターとのやりとりの機能の橋渡しをする窓口のような役割を担っています。

例えば,Webメール（Gmailなど）を例にして考えていましょう。
メール画面を操作するユーザーとメールのデータが保管されているメールサーバー（以下サーバー君）の二人の登場人物がいるとします。（サーバーについては後の記事で詳しく説明します。）

ユーザーは携帯かパソコンのキーボードから文字を入力してメール画面の操作をしているのですが、このときユーザーが直接サーバー君に「ありがとうって文字を画面に表示して」と指示しているわけではないのです。
サーバー君は画面の向こう側にいる遠い存在です。
だからユーザーと直接コミュニケーションはできないので、サーバー君からそのようなリアクションは受け取れないのです。

そこで登場するのがUIです。

UIはユーザーとサーバー君の両方とコミュニケーションを取ることができます。
なのでユーザーの指示をサーバー君に伝えて、その返事をユーザーに届けるまさに橋渡しとなる存在です。
みなさんが画面上でなにか操作してその結果が再び表示されるまでにUIを通して実はこのようなやり取りが裏で行われていたんです。

2-2.プログラム用API

ユーザーインターフェースに対してコンピューターとコンピューター同士のやり取りの橋渡しする機能を**API（アプリケーションプログラミングインターフェース）**と呼びます。

例えば、天気予報アプリを例に考えていきましょう。
予報アプリは今いる地域の情報をキャッチして、サーバーに情報を渡します。
サーバーは受け取った地域情報に対応する天気情報を予報アプリに返すという流れです。

みなさんもご存知のGoogle MapもAPIのひとつです。
地域に対応する地図情報を返してくれますよね。
これも裏でアプリとサーバーがAPIを通してやりとりしているので実現することなんです！

3.　まとめ

Webの概要についてなんとなく理解が深められたでしょうか？
次回の記事以降でもWebについて更に理解を深めるためアウトプットがんばります！

• インターネットは世界中のコンピューターをつなげるための仕組み
• Webはインターネットを通じて文書を公開や閲覧するための仕組み
• Webの用途は大きく文書の公開・閲覧、UI、APIの３種類がある

以上です！ここまで読んでいただきありがとうございます！
お疲れさまでした。。

参考文献

• Web技術の基本