MENU

WEB技術について知る

2021 3/17
WEB技術について知る

おつかれさまです。

コードを書いて書き方や用法を学ぶことも大切ですが、

根本となるWeb技術の歴史や仕組みについて知っているとよりそれらの知識や理解が深まりますよね。

さらにこれらの知識は、今後廃れることのない基盤となる知識であると考えております。
なので、今回は改めてWeb技術に関する概要や知識についておさらいをしていこうと思います。

目次

Webってなに?

そもそも「Web」と言う言葉は「WWW(World Widw Web)」という言葉の派生から生まれた言葉です。

では、WWWとは何かと世界中のホームページをインターネットを通じて閲覧することができる仕組みのこと

を指します。

まず、ハイパーテキスト(テキストを超えたテキスト)という言葉があるのですが、これはインターネット上でリンクによって結ばれた文書を結びつける仕組みのことになります。

ハイパーテキストの中にはハイパーリンクと呼ばれる、文書と文書間を行き来できる参照があり、これを踏むことによって他の文書へと飛ぶことができます。ハイパーテキストは文書のほか、画像、図表、音声、動画、3次元グラフィックなどもリンクできるため、この仕組みが生まれた当時、作成した論文などを見識者の間で共有するため、学者や研究者たちにとってとても重宝されました。

それでこのハイパーテキストを作成する言語というのが、HTML(HyperText MarkUp Language)になります。

文書と文書を行き来できるハイパーテキストが大規模になったものをWWWと呼びます。いわば、ハイパーテキストの集合体みたいな感じですね。

インターネットとWebは違う?

インターネットは情報伝達のために世界中のコンピュータやスマホなどを相互に接続する通信網もしくは、複数のコンピュータが繋がった状態ともいえます。

また。コンピュータ間で情報伝達のプロトコル(ルール)を統一する通信規約をTCP/IPと呼びます。

プロトコルとは簡単に「規約、ルール」という意味になります。なんでもそうですが、情報を受け渡しするには何らかの“情報の渡し方”が必要になります。
そこで先人の人達は、コンピュータ上でどのようにして情報を伝えられるのかという取り決めを決めました。

例えば、野球の例でいうとピッチャーがキャッチャーに対して投げる球種のサインを出しますよね。あれは互いにサインの意味がわかっているから互いのコミュニケーションが成り立つのであって、もしキャッチャーがそのサインの意味を理解していなければ全く情報伝達がなされていないという事になります。

このように何か情報を伝達する上でルールや規定がないと、お互いにやりとりができなくなるため、必要不可欠になってきます。

一方でWebとは、先にお伝えした通り、文書と文書を行き来するハイパーテキストシステムのことを指します。

さらにWebで通信するにあたってHTTP(Hyper Text Transfar Protocol)という通信プロトコルの仕組みが必要になってきます。これは先に述べたTCP/IP(通信プロトコルの総称のようなもの)が前提にあって、さらにその上位の位置にあたる仕組みを指しています。(HTTPに関してはこの後説明します)

TCP/IPの上位には、HTTPのほかに、FTP(ファイルを転送する上でのプロトコル)、SMTP(メールを転送する上でのプロトコル)などが存在します。それぞれ取り扱うコンテンツによって、プロトコルが個々に策定されているという事になります。

なのでまとめますと、そもそも

インターネット:コンピュータとコンピュータ

Web:文書と文書

という関係性で双方は違いますし、さらにいえば通信プロトコルの話でいえば、イメージとして

インターネット > Web

という関係性が成り立ちます。なので、Webとインターネットという言葉は双方で意味合いがまあまあ異なってきます。

HTTPってなに?

繰り返しになりますが、HTTPというのはWeb上で情報伝達をする上でのプロトコル(規約、取り決め)のことを指します。

まず、普段Webサイトを利用されているのであれば必ず目にしたことのある文字列があると思います。それが以下のような「URL」です。

https://www.google.co.jp/

こちらのURLの先頭にHTTPSとありますが、こちらがHTTPの根幹に当たる部分です。私たちは、現在のWeb技術においてこのHTTPという通信プロトコルがある事によってスムーズにWebサイトを閲覧することが実現しております。

それではこのHTTPに関してはもう少し詳しく掘り下げたいと思います。

クライアントとサーバー

Webサイト上では単に利用するユーザー側のコンピュータのことをWebクライアントと呼びます。
もう少し具体的に言うと、身近なもので言うとGoogle ChromeやFireFox などといったWebサイトを閲覧するために使うブラウザーなどを指します。

一方でそのクライアントから送られた情報を受けて、
それを元に必要なコンテンツをクライアントに送り返すコンピュータをWebサーバーと呼びます。コンピュータにサーバソフト(ApacheやNgnix)をインストールしたものを指します。

クライアントとサーバーは言ってみればどちらもコンピュータになります。
なので、ここでインターネットの関係性が成り立ちます。

そして、その中でさらに、Webというカテゴリの中で情報伝達をする上での取り決めやルールが用いられる事になり、その通信規約のことをHTTPと呼びます。

HTTPではクライアントがサーバーに対して行う要求のことをHTTPリクエストと呼びます。

一方でサーバーがクライアントからの要求を受け、クライアントに指定の情報を送り返すことをHTTPレスポンスと呼びます。

ここでクライアントの要求でWebサーバーからはWebサイトを閲覧するためのコンテンツが返ってきます。
しかし、実際に返ってくるのはプログラムで書き込まれた文字の羅列データが返ってきます。

このままではとても読みにくいので、Webブラウザがそれらの情報を解読して、人間に見やすくするようよしなに整形をしてくれているわけです!助かる!!

そんなこんなあって、私たちが今現在Webサイトを閲覧できていると言うのはこのHTTPと言う取り決めによってWebクライアントとWebサーバーがいい感じに情報のやりとりをしてくれているため、であるということが理解してもらえたかと思います。

最後にURLについて説明していきたいと思います。

URLってなに?

さて、最後にURLについて今一度おさらいしていきます。

まず、一般的に見るURLの形式は以下のような形になると思います。

URLの文字列区分

左から説明します。

①通信手段

スキーム名と呼びます。これはコンピュータに対してどのような通信手段を行うかを示しています。写真の場合はhttpプロトコルを使用することになります。(ちなみにhttpsはhttpを暗号化しセキュリティ強化したものになります。なので実態はhttpになります。)

なので、ここが「FTP」であればファイル転送、「SMTP」であればメールシステムのための通信をするんだな〜みたいなイメージでいいかと思います。

②ホスト名+ドメイン名

サーバーのことを「ホスト」と呼びます。こちらでホームページが置かれているサーバーコンピュータを特定することができます。

③ポート番号

ポート番号とはクライアントとサーバーが通信をする際に、サーバー上で稼働しているどのプログラムと通信するかを特定する用途で用いられる番号になります。

例えば、クライアントがHTTP通信をしたいときにサーバーがメール受信用のプログラムで受け取ってしまうとメール受信用のサーバーはHTTPリクエストを理解することができません。そこで、ポート番号というものを振ってやるとクライアントからのリクエストが適切なサーバーに送られて双方の通信がうまく成立するということになります。

しかしながら、ポート番号を自分で振る必要はほとんどありません。ポート番号は使用する通信プロトコルに応じて自動的に指定の番号に振られるからです。この通信プロトコルによって決められたポートのことを「well-knownポート」といいます。

例えば、HTTPで言えば80番ポート、HTTPSは443番ポートを使う決まりになっており、それを使う場合はポート番号の指定を省略することが出来ます。

④パス:サーバー内のファイルが入っている場所を示しています。画像のURLで言えば、example.comのprojecr1のというフォルダを指定しています。

⑤ファイル名:で、④の中の実際のファイルがこちらになります。ここにはHTMLファイルだったりPHPファイルの名前がここに表示されます。

以上が、URLの簡単な概要になります。

まとめ

これまでの流れを実際にWebサイトを見る流れでまとめると以下のようになります。

  1. Webブラウザを起動し、適当に「hogehoge」と検索する。
  2. hogehoge.comと言うサイトをクリックする。
  3. ここでWebクライアントからはHTTPリクエストがWebサーバーに投げられ、Webサーバーからは指定のHTTPリクエストに該当するリソースを探して、Webクライアントに送り返される
  4. HTTP通信のやりとりを終え、html, css, javascript諸々のファイルをもとにレンダリングが行われ、初めてWebサイトが閲覧できるようになる。

といった仕組みになります。(だいぶざっくりですが)

概要だけでも理解していただけたでしょうか?

かなり基礎的な内容ではありましたが、この辺りの内容はWeb技術に触れる上で土台となると思いますので、改めて目を通していただけますと幸いです!

それではまたお会いしましょう〜!


もりけん塾で学習中!

もりた先生のブログ: kenjimorita.jp (武骨日記)
もりた先生のアカウント: twitter.com/terrace_tech

参考:

フルスタックエンジニアのノウハウ
URLの基礎
URLの基礎​今回は「URL」についてご説明します。​Webプログラマーは、サービスをどのようなURLで公開するかを設計するために、URLの仕組みを理解しておく必要があります。​ここでし...
https://saruwakakun.com/it/web/www

この記事を書いた人

コメント

コメントする

CAPTCHA


目次
閉じる