0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Web技術】Webの仕組みが今すぐわかる最初の一歩【用語の解説あり】

Posted at

Web技術のもっとも基本的な部分を解説していきます。
この記事でわかることは2つです。

  • クライアントサーバモデルの仕組み
  • Web上に存在するリソースを指定するURIの構成要素

まずはこの2つを理解し、より深い内容を書籍で理解してみてください。
今回の記事で興味をもってもらえると嬉しいです。

Webってなに?

調べてみると、Webの定義はさまざまですが、ここではこれからの話がわかりやすくなる定義を引用します。

Webは、世界中に配置されたサーバに世界中のブラウザがアクセスする分散システムです。
書籍:Webを支える技術より引用

わかったような、わからないような…という感じですかね。
事項で基本的なWebの仕組みを解説します。

クライアントサーバモデル

web_image.jpeg

もっともわかりやすい、基本の形です。
ブラウザからサーバに対して表示したいファイルを伝えます(リクエスト)。
サーバはブラウザから送られてきたリクエストに従い、ファイルを返します(レスポンス)。

上の図を見ればほとんど解説不要ですね。
わかりやすい例えだと、ウォーターサーバーとかも同じです。
水を備えたサーバーに、水を出してください。とボタンを押す感じですね。

この図のイメージを理解しておきましょう。
次はよく聞く用語の解説をしていきます。

URI

URIは、Webページなど、ネット上のリソースを指定します。
例えば、Webサーバに対して「このファイルを探してー」とリクエストするのがこのURIです。
普段使うURLもこのURIの一種です。
事項ではURIの構成要素を個別に解説していきます。

http

httpは、 「Hyper Text Transfer Protocol」の略称です。
データ通信をあらわします。
上の図でいうリクエストとレスポンスの部分です。
ちなみにhttpsとの違いは、データ通信の安全性です。
httpsは、データ通信が暗号化されるので、悪意をもった第三者に情報を抜き取られることを防ぎます。

ポート番号

ポート番号とは、Webサーバのリソースにアクセスする出入り口です。
httpでは:80httpsでは:443をそれぞれデフォルトで使用しています。
そのため通常は省略されています。

パス

パスは、Webサーバ内のリソースの位置を階層的に記述します。
例)https://.......static_pages/home
強調された部分がパスです。

フラグメント

リソース自体の特定の位置をあらわします。
ページ内リンクでよく使われていますね。
スクリーンショット 2021-02-09 8.51.02.png
#なぜn1問題を回避すべきかの部分がフラグメントです。

まとめ

本記事では以下の解説をしました。

  • クライアントサーバモデルの仕組み
  • Web上に存在するリソースを指定するURIの構成要素

今回紹介した内容はWebの大枠であり、入り口の部分です。
Web系エンジニアになるためには、もっと詳しく理解しておく必要があるでしょう。
Web技術に関する書籍はたくさんあるので、ぜひ探して一読しておくことをおすすめします。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?