見出し画像

デイトラ Web制作コース 初級編 DAY32 Webの仕組み

MIO

ご覧いただき、ありがとうございます！

今回は自分のポートフォリオサイトの公開にあたって、Webの仕組みについて学びました。


Webの仕組み

コーダーは公開作業まで行うことが多いので、Webの仕組みも勉強しました。仕組みと制作の流れも少しお話しようと思います。

Webとは

Webとは、Would Wide Webの略称で、インターネット上にある様々な情報をリンクで結びつけてアクセスできるシステムのことをいいます。

URL（https://〜）やリンクを指定することで、Webブラウザが表示されます。

Webサイトが表示されるまでの流れ

ざっくり説明すると、以下のような流れでWebサイトは閲覧者に表示されます。

  1. 閲覧者がブラウザでURLを指定

  2. ブラウザが、そのURLのファイルを持っているサーバー※に「このWebサイトのページをください」とリクエストする

  3. サーバーが対応するコンテンツ（HTML/CSS、JavaScript、画像などのファイル）をブラウザに提供する

  4. Webサイトが表示される

サーバー：
Webサイトをインターネット上で公開するために必要な特別なコンピューター

どうやってサーバーを特定するのか

世の中にはたくさんのサーバーが存在しています。
「どうやってブラウザが欲しい情報を持つサーバーを特定するのか」について少しお話しします。

ブラウザを表示するために必要なファイルが格納されているサーバーは「ウェブサーバー」と呼ばれます。
ウェブサーバーがサイトのコンテンツ（HTML/CSS、JavaScript、画像などのファイル）をブラウザに提供します。

そのウェブサーバーとは別に、「ネームサーバー」というものがあります。

ネームサーバーとは、インターネット上でドメイン名とIPアドレスを結びつける重要な役割を果たすサーバーです。

どちらもWebサイトの住所を表すもので、人間が覚えやすくしたものをドメイン名といいます。

IPアドレス：コンピューターが理解しやすい名前（例：192.168.1.1）
ドメイン名：人間が覚えやすく、理解しやすい名前（例："mio-web.site"）

市役所で例えると、様々なサービスや情報を求めるブラウザが「総合窓口」で、IPアドレスが「住民票」。
ドメイン名は「住所」そのものを表すような形です。

URLの中身

"https://mio-web.site"がURLで、このURLはドメイン名とプロトコルに分かれます。
ドメイン名は"mio-web.site"、"https://"は「プロトコル」と呼ばれます。

プロトコルとは、ブラウザとサーバーが通信する時のルールを表します。
私たちが日本人同士で会話をする時、多くの場合、日本語で会話するのは暗黙のルールだと思います。

ブラウザとサーバー間にもそのルールが存在していて、コミュニケーションを取りやすくしたものです。

Webサイトで使うプロトコル
http：基本ルール
https：httpのセキュリティを強化したもの（今はこっちが主流）

ちなみにhttpを"https"にすることを「SSL化」と呼びます。

Webサイトが表示されるまでの流れ（まとめ）

ドメイン名やIPアドレス、プロトコルなどを理解して、Webサイトが表示されるまでの流れを見ると以下のようになります。

  1. 閲覧者がブラウザでURLを指定

  2. ブラウザは、ネームサーバーに指定されたURLのIPアドレスを聞く

  3. ネームサーバーは、指定されたUTLのIPアドレスを提供する

  4. ブラウザは、どこのウェブサーバーにリクエストをすればいいか知る

  5. ブラウザがウェブサーバーに「このWebサイトのページをください」とリクエストする

  6. サーバーが対応するコンテンツ（HTML/CSS、JavaScript、画像などのファイル）をブラウザに提供する

  7. Webサイトが表示される

これでもまだざっくりらしいですが、今回学んだWebの仕組みはこのようになります。

ちなみに2〜3の工程を「DNS」と呼びます。

DNSは、Domain Name System（ドメイン名システム）の略称で、具体的には「IPアドレスをドメイン名に変換」したり、「ドメイン名からIPアドレスを特定する」役割を果たします。

アップロードの手順

最後に行ったアップロード手順を記載します。
この辺りの詳しい説明はサーバーやアップロード方法によって順序が変わるので割愛します。

  1. ウェブサーバーとドメイン名の準備

  2. ドメイン名とWebサイトの紐付け

  3. サーバーに必要なファイルをアップロード

  4. Web上での動作確認・修正

  5. 公開（お仕事だとお客様へ納品）

サーバーやドメイン名にはお金がかかりますが、ポートフォリオサイトをWeb上にアップロードしたかったり、手順を理解したければ、必要な投資だと思います。

私はXサーバーで契約しており、Xサーバーは国内でも非常に人気のレンタルサーバーです。
私の周りでは、その他に「さくらサーバー」も契約している人もいらっしゃいます。

感想

今回のセクションは、ほぼ座学でした。
勉強が苦手な私は時々、注意力が散漫になって全然頭に入ってこず、三回見直しました。

私が今学んでいる、Webサイトを作る工程を「フロントエンド」、今回学んだサーバーやその他にはデータベースなどを「バックエンド」と呼びます。

現在はフロントエンドのみですが、バックエンドも詳しく学びたいなと思っています。

そして、ここで初級編が終了しました。
中級編に入ると、新しいことがまた増えると思いますが、一つずつきちんと力をつけていきます。

最後までお付き合いいただき、本当にありがとうございました🌸

Xで毎日デイトラの学習記録つけてます！
応援していただけると嬉しいです✨
X : https://twitter.com/totoro_mi8





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