じょんの美ライフ

じょんのび~新潟の方言で「のんびり、ゆったり」~

Webサイトの仕組みをわかりやすく解説【JavaScriptを勉強する前に知っておくべき知識】

f:id:RakuRakuOwl:20210504193033j:plain


いつも購読いただき、ありがとうございます。

前回の記事で「JavaScriptとはWebページに「動き」をつけるプログラミング言語」という解説をした。

今回は、「Webページに「動き」をつける」イメージを掴むため、Webサイトの仕組みについて解説記事を書いていく。

結論からまとめると、

  • Webページの正体はWebサーバからの配信データ
  • WebページのデータはHTMLとCSSで書かれている
  • ブラウザはWebサーバから配信されるデータの翻訳機


といった内容。

 


Webサイトの仕組み

f:id:RakuRakuOwl:20210416142400p:plain

普段、当たり前のようにスマホやパソコンで見ているWebサイトだが、目的のページが画面に表示されるまではいくつかの手順を踏んでいる。

Webページが画面に表示されるまでの流れは以下のとおり。

  1. Webサーバから表示したいページのデータを受けとる
  2. 受け取ったデータをブラウザで解読して画面に表示する


意識することはないが、スマホやパソコンでページを移動するたびに上記の処理が繰り返されている。

各項目を詳しく解説していく。


Webサーバからデータを受けとる

f:id:RakuRakuOwl:20210504202438j:plain

私たちが見ているWebページのデータはインターネット上の「Webサーバ」の中に保存されている。

Webサーバというと専門用語で拒否反応が出るかもしれないが、一言でまとめると、

「インターネット上でWebサイトの情報を配信しているパソコン」

である。

誰もが一度は見たことがあるYouTubeTwitterもインターネット上のWebサーバにアクセスしてページを表示している。


目的のページをWebサーバへ要求

f:id:RakuRakuOwl:20210504210820j:plain

まずは、スマホやパソコンから目的のWebページへアクセスしなければならない。

つまり、インターネットに接続されている膨大な数のパソコンの中から目的のWebサーバを探しだす必要がある。

ここで登場するのが、インターネット上での住所の役割をもつURLだ。

URLは「https://rakurakuowl.com/entry/programming-0001」のように表され、Webサーバはそれぞれが固有のURLをもっている。

普段、何気なく閲覧しているWebサイトもページを移動するたびに、各ページに設定されているURLへアクセスしているということだ。

実際のWebサイトでは、URLが設定されたページ上のテキストや画像をクリックすることで次のページへ移動するためのデータをWebサーバへ「要求(リクエスト)」している。

f:id:RakuRakuOwl:20210504210854p:plain

URLはインターネット上に1つしかない住所の役割

このように、Webページを表示する際には、

「目的のWebサーバがもつURLへアクセスし、表示したいページのデータを要求する」

という処理が行われている。


HTMLとCSSのコードデータを受けとる

f:id:RakuRakuOwl:20210504202514j:plain

スマホやパソコンから要求が行われると、Webサーバは要求に対して対象のWebページのデータを送りかえす「応答(レスポンス)」が行われる。

このように、Webページを閲覧する際にはスマホ・パソコンとWebサーバ間で、

スマホ・パソコン→「〇〇のWebページのデータを送ってください(要求)」
Webサーバ→「〇〇のページのデータを送ります(応答)」

という、インターネットを経由した受け答えが行われている。

Webサーバから応答があると、スマホやパソコンは目的のWebページのデータを受けとる。

この時、WebページのデータはHTMLやCSSといった「Web言語」で記述されたコードデータとしてスマホやパソコンに送られてくる。

これらの言語で書かれたデータには後で解説するWebページに関する様々な情報が記述されている。


ブラウザでデータを解読して表示する

f:id:RakuRakuOwl:20210504204353j:plain

前項でスマホやパソコンからの要求に対して、Webサーバから目的のWebページのコードデータが応答されるという解説をした。

この時、スマホやパソコンに届いたWebページのデータはHTMLとCSSのコードでできている。

つまり、Webページをそのまま画面表示してしまうと、意味不明な文字列が表示されてしまう。

f:id:RakuRakuOwl:20210504205841j:plain

HTMLで表示すると複雑な文字列にしか見えない

(出典:iPadがパソコンにならない理由【最強のタブレットだがパソコンではない】

しかし、普段見ているWebサイトでHTMLとCSSのコードデータが表示されることはなく、直感的な操作ができるレイアウトでページが表示される。

これは、今まさにこの記事を見るために使っている「ブラウザ」がコードデータを読み解き、いつも見ているような画面に変換して表示してくれているから。

ブラウザはWebサーバからコードデータが応答されるたびに、以下の処理を行なっている。

  • HTMLとCSSのコードデータを解読
  • 直感的なレイアウトでWebページを画面表示する


各項目を詳しく解説していく。


コードデータはそのままでは文字列

f:id:RakuRakuOwl:20210504205033j:plain

Webサーバから送られてきたデータは、Webページに関する情報がHTMLやCSSといったWeb言語で書かれている。

具体的には、

  • ページに記述する文章
  • 画像データ
  • 別のページに移動するリンクの設定
  • ページの背景色
  • 文字の大きさや色
  • ページのコンテンツの位置(レイアウト)


といった情報が、各言語の文法にしたがった「コード(文字列)」で書かれている。

f:id:RakuRakuOwl:20210504205108j:plain

しかし、Web言語で書かれたコードデータはコンピュータにページの表示内容を指示するための言葉で記述されているため、人間にとってはアルファベットの文字列でしかない。

HTMLやCSSの知識をもっていれば、コードデータを読み解いていくことはできるが、Webページを快適に閲覧することは不可能と言っていい。

つまり、コードデータに書かれているWebページの情報を読み解き、人間の目で認識しやすく、直感的な操作ができるような表示に変換する処理が必要となる。


ブラウザはHTMLとCSSの翻訳機

f:id:RakuRakuOwl:20210504204920j:plain

 Webページのデータは、そのまま画面に表示してしまうと、人間が認識するには不便な文字列となってしまう。

このコードデータを解読し、文字の大きさや色、画像や文章の配置を整えることで、視覚的に見やすいWebページとして表示する役割をもつのが「ブラウザ」である。

ブラウザはHTMLやCSSといった文字で記述されているWebページのコンテンツやレイアウトの情報を実際の表示内容に変換する機能をもっている。

一言でまとめると、ブラウザは、

「Webサイトを見やすく表示し、快適に閲覧するための「翻訳機」の機能をもつソフトウェア(アプリ)」

代表的なものとしては、Googleが開発している「Chrome」やAppleが開発している「Safari」などがあげられる。

どのブラウザもHTMLやCSSのコードを解読して、快適にWebサイトを閲覧することが目的のためブラウザごとに表示内容や動作が大きく変わったりすることはない。

しかし、微妙に表現方法や文法の解釈が異なることから、ごく稀に「Chromeでは問題なく表示されるのに、Firefoxでは崩れた表示になってしまう」ということが起こる。

そのため、実際にWebサイトを作成する際には、ページが正常に表示されるかを確認するための標準ブラウザを設定する。


まとめ

f:id:RakuRakuOwl:20210505100143j:plain

今回の記事をまとめると、

  • スマホやパソコンとWebサーバは要求と応答を繰り返している
  • WebページのデータはWeb言語(HTMLやCSS)で記述されている
  • ブラウザはWeb言語を解読してページを表示している


といった感じ。

前回の記事で「JavaScriptはWebページに「動き」をつけるプログラミング言語」という解説をした。 

rakurakuowl.com

 
そして今回の記事では、「WebサイトのページはHTMLやCSSといったWeb言語で書かれてたデータをブラウザが読みとって画面に表示している」という解説をした。

2つの記事でプログラミング学習を始める前の基礎知識を解説してきたので、次回からはいよいよJavaScriptやHTML・CSSの文法や学習記録の記事を書いていこうと思う。

ということで、これからも「じょんのび」とブログを更新していくので、また次の記事でお会いしましょう。最後まで購読いただき、ありがとうございます。