1
0

第三回: WEBサイトが手元に届くまで

Posted at

こんにちは、株式会社カスタマトリックスの寺尾です。

こちらは 新卒社員と学ぶWEBプログラミング 企画になります。
可能な限り毎日更新していくのでご期待ください。

本日は第三回、「WEBサイトが手元に届くまで」を説明していきます。
どうしてURLをWEBブラウザで開くだけで勝手にWEBサイトの表示まで辿り着けるのか、そしてその裏でどのようなサービスが動いているのか、その辺りを簡単に説明します。

前回はこちら
https://qiita.com/r-terao/items/26fca77cf5fc1e1db218

第一回はこちら
https://qiita.com/r-terao/items/e6237c4dc59db9e96ec6

前回のあらすじ

前回学んだ事は覚えていますでしょうか?

  • WEBサイトはサーバが持っていて、それをクライアントがお願いして表示する
  • フロントとかバックというのはあくまで仕事内容が違うだけで、仕事場所に左右されるとは限らない

image.png

間に横たわる距離

前回、クライアントがサーバに対して「サイトください」とお願いする事でWEBサイトが表示できると説明しました。
これ自体は何もおかしな事のない説明なのですが、その裏で動いている機能があります。

それは「 遠く離れたどこにあるか分からないサーバをどうやってクライアントは発見しているのか 」です。

このクライアントとサーバの間にある距離を繋いでくれる仕組みが今回の主役になります。

インターネット上の住所

ここで問題です。

WEBサイトの住所といえば何を指すでしょうか?

URLと答えた方も多いのではないでしょうか?
それは残念ながらちょっと違います。

正解は「 IPアドレス 」です。

IPアドレスはネットワークに接続する端末一つ一つに割り当てられる識別番号で、必ず被らない値になっています。

image.png

画像は適当な数値ですが、多くの場合上側のような四分割の数字が割り当てられます。
近年数字の枯渇に伴い、画像下側のIPv6という英数字対応の新しいものが出てきていたりもします。

WEBブラウザでhttps:{IPアドレス}などと入力する事でクライアントは世界のどこかにあるサーバを特定しアクセスする事ができるわけですね。

URLとドメイン

ここまで聞いて「じゃあURLって何なんだろう?」「IPアドレスなんて普段見た覚えない気がする」といった疑問が湧いた方もいらっしゃるのではないでしょうか?

URLの説明のためにはまずはドメインの理解から始める必要があります。

ドメインとは、 人間でも理解できる言葉にIPアドレスを置き換えたもの です。

image.png

ドメインは「自由な文字列 + 管理名」で作られていて、IPアドレスと同じように他と被ることはありません。
同じに見えるドメインでも.jp.com.netなどの管理元が違うことで全体を見ると違う名前になっています。

image.png

基本的にトップレベルが「管理する団体」を示し、セカンドレベルかトップレベルが「目的、種別」などを指します。
また、ホスト名を足し合わせることで FQDN(完全ドメイン) と呼びます。

さて、ではURLとはなんなのかという話になります。
URLとは「 サーバにアクセスして、どこにあるどのような何が欲しいのか 」まで記載されたモノの事です。

image.png

  • スキームは「どんな種類のモノを欲しいか」
  • ポートは「サーバのどの出入口からデータを出入りさせるか」
  • ディレクトリとファイル名は「どのデータが欲しいか」

を指し示しています。
難しい事を省くと、サーバの住所以外の細かい諸々の指定を足した文字列がURLというわけです。

DNS

ドメインについて学んでいくと「 DNS(ドメインネームシステム) 」という存在が出てきます。

これは「 IPアドレスとドメインの対照表 」を管理するシステムです。
URLからサーバにアクセスする際、WEBサイトが置いてあるWEBサーバアへクセスする前に対照表を管理しているDNSサーバにアクセスし、自分が見たいサーバのIPアドレスをチェックするという処理が挟まります。

image.png

DNSサーバにも更に「権威DNSサーバ」「キャッシュDNSサーバ」とかあるので、気になる方はチェックしてみよう。

まとめ

  • サーバの住所はIPアドレスで管理している
  • IPアドレスだと読みにくいのでドメインを代わりに使う
  • DNSを使うことで、ユーザはIPアドレスを気にする事なくWEBサイトへアクセスできる
  • URLはどんなファイルが欲しいかなどの情報が更に足されている

多少はイメージがついたでしょうか?
CDNとかプロトコルとかもっと色々説明するつもりでしたが長くなってしまったので残りは次回にします。

次を乗り切れば仕組みは大枠理解したといえるので、もうひと踏ん張り頑張っていきましょう。

その後はプログラミング言語に触れて実践的な内容をやっていこうと思います。

おまけ

株式会社カスタマトリックスはエンジニアを募集しています!
完全未経験でも可!

1
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
1
0