見出し画像

Web関係の仕事をするなら知っておこう！Web技術の基本

アスカ

今回は「イラスト図解式 この一冊で全部わかるWeb技術の基本」についてまとめていきます〜！
技術についての本なので、やっぱりちょっと読みづらい部分はありながらも毎回図で説明してくれているのでかなりわかりやすかったです🫶


そもそもWebとは？

🌏Webとは
正式名称はWorld Wide Web（世界に広がる蜘蛛の巣）
文書の公開や閲覧のためのシステムをWebと呼びます

Web 上の文書はハイパーテキストと呼ばれる言語で構成されています。
ハイパーテキストは1つの Web ページの中に別のWeb ページへの参照（ハイパーリンク）を埋め込むことが可能です。

こうして、Web ページ同士がリンクして別のWebページにつながり、最終的に世界中のあらゆるページと 蜘蛛の巣状につながっていることが名前の由来となっています🕷️

Webとインターネットの関係

そもそもWebとインターネットは別の目的で開発されました！

Webは各国の研究者がすぐに情報にアクセスするために作られたもので、それが改良されWorld Wide Webになっています。
インターネットの原型はARPANETというコンピューターネットワークです。
当初は接続回線が高価だったため使用用途は限られていましたが、技術の発展とともに安価になり、一般ユーザーに広まり始めた頃Webがインターネットで使用されるシステムとして発表されたのです。
文字だけだったWebは画像が扱えるようになったり、Webブラウザが普及したりして、インターネットとWebは爆発的に普及しました💣

HTTPとは

📄HTTPとは
WebブラウザからWebサーバーにコンテンツを要求し、Webサーバーが要求されたコンテンツをWebブラウザに送信するやり取りの手順のこと

すごく簡単にするとこんな手順

HTTPはこんなふうに使われてWebページを表示しています👇

  1. URL（https://note.com/_ash_design　のような）を使ってWebページをWebブラウザに指定する

  2. Webブラウザは指定されたURLを元に指定されたHTTPリクエストを送りデータを要求する

  3. Webサーバーからリクエストに応じてHTTPレスポンスを返す（コンテンツを転送する）

  4. Webブラウザはコンテンツの内容を解釈し、見えやすいように表示する

  5. さらに必要な画像などがあれば転送する


HTTPSって何が違うの？

先ほど例に出したこのURL↓
https://note.com/_ash_design

先頭が http じゃなくて https なのですが、これは一体何が違うのでしょうか🤔

📄HTTPSとは
HTTP over SSL/TLS の略で、HTTPの通信において暗号化方式であるSSLやTLSを利用することで安全にWebサイトを使用できる仕組みのこと

つまり「S」がつくことでWeb上のあらゆる脅威からユーザーを守ってくれるのです🔒

安全性を確保する仕組み

1.盗聴防止（暗号化通信）
Webサイトを閲覧する際、幾つものサーバーを経由するため第三者が通信内容を傍受することは比較的簡単です。しかし、通信内容を暗号化し、万が一傍受されても内容がわからないようにしています

2.改ざん防止
ネットバンキングにおいて振込先が書き換えられてしまう、といったデータの改ざんを防ぐため「メッセージダイジェスト」を利用します

3.なりすまし防止
Webサーバーに「SSL証明書」と呼ばれる電子証明書を配置しておき、接続時に検証することによりWebサイトを運用する会社の身元を確認できます

Webサービスを提供する各社も HTTPS を推進しており、GoogleはHTTPSを導入している Web サイトの検索順位を優遇するなどしています。
将来的には「HTTP」のページは無くなるかもしれません…！

キャッシュサーバー

更新の少ないコンテンツやデータであれば、リクエストに対するレスポンスを一回一回読み込まなくても覚えておけばデータ検索をする必要はありません。
そしてこの「リクエストに対するレスポンスの記憶」をキャッシュと呼びます。

キャッシュは有効期限を設定することができます。永遠にレスポンスを覚えられているとせっかくサイトを更新しても新しい内容がユーザーに届かなくなってしまうからです。

キャッシュという概念をよく知らなかった頃、CSSを書き換えてアップロードしたのにWebサイトが変わらず戸惑った記憶があります、、
キャッシュの中に元のCSSのデータが残っていてそちらを読み込んでいたから書き換えたCSSが反映されていなかったんですよね🥲
キャッシュをクリアしたら変更箇所が反映されて初めてキャッシュという概念を知りました

Web API

🧚🏻‍♀️Web APIとは
Webの「クライアントがデータを送信して、サーバーからデータを返送してもらう」という動作を利用してWebを通じてユーザーではなくプログラムが直接サービスを利用する窓口のこと

例えば、緯度、経度などの位置情報を送信すれば、対応する場所の天気予報が返信される天気予報APIだと以下のように動作します☀️

まとめ

今回はWeb技術の基本についてまとめました！
いくつか抜粋して紹介していますが、これの他にもかなり幅広く書いてあるので気になった方は読んでみてください🙌

この記事が気に入ったらサポートをしてみませんか？