プログラミング

プログラミング学習日記①　～Webページが表示される仕組み～

みなさん、こんにちわ。

本ブログの管理人のRRです。

最近、「時代の流れに取り残されまい！」と、一大決心しまして、プログラミング学習を始めました。

40歳手前にして個人的に大きな挑戦です！

ここではそんな私の学習日記を綴っていきたいと思います。

初心者が学習したことを公開していきますので、

 

  • プログラミング学習を始めてみようかなと思っている方
  • プログラミング初学者でまだまだ知識が定着していない方

 

に役立つように学んだことを整理していこうと思います！

 

本日のテーマは「Webページが表示される仕組み」です。

コーディングする前のまずは基本的なテーマですね！

では、いってみましょう！！！

Webページが表示される仕組み

Webサイトは、個々のWebページを集めたものです。

一枚一枚の紙（Webページ）が集まって、本（Webサイト）になるのと同じイメージです。

Webブラウザについて

Webブラウザとは、みなさんがWebサイトを見るときに開くアプリケーションのことです。

具体例を言えばすぐにわかると思うのですが、

  • Internet Explorer
  • Google Chrome
  • Safari
  • Firefox
  • Edge
  • Sidekick

といったものたちです。

話は少しずれますが、

昔はInternet Explorer一択みたいな時代がありましたよね。

その後、Google Chromeが時代の中心となり、これで勝負決まりかなと思っていました。

ところが、最近だとSidekickみたいな新しいブラウザが注目を浴びています。

一見ただWebサイトを見るだけなので、そこまで差異がないように思えますが、実は各社さまざまな独自機能で優位性を保とうとしています。

 

いつも同じブラウザを使っているみなさん!

たまにはブラウザを変えてみるのもアリかもしれません！！

 

話を戻しまして、ブラウザが表示しているWebページについて解説します。

Webページの構成

繰り返しになりますが、Webページは、Webサイトを構成するひとつひとつのページを指しています。

そして、そのひとつひとつのWebページがどうやって構成されているかというと、

  • HTML
  • CSS
  • javaScript
  • 画像などのリソースファイル

で構成されています。

HTML

ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略した言葉です。

ひとことでいうと、コンピュータが理解できるように、文章構成を指示する言語です。

HTMLはWebページにおける編集者（情報のまとめ役）です。

Webページを表示する場合、HTMLが起点となります。

なので、CSS、javaScript、画像などのリソースファイルもHTMLで統合されます。

CSS

CSSはWebページのデザイン担当です。

ここでいうデザインとは、Webページのレイアウトや色、背景、フォントなどです。

javaScript

javaScriptは、ブラウザ上で使用できます。

ブラウザ上で使用できるという点でいうと、唯一のプログラミング言語です。

javaScriptを使用数と、HTMLやCSSを動かせるようになります。

Webページでマウスに反応して色が変わったり、大きさが変わったりするボタンなどがあります。

あの動きを表現しているのが、javaScriptです。

画像などのリソースファイル

画像以外にも、動画ファイル、フォントファイル、音声ファイルなどのリソースファイルがあります。

リソースファイルをWebページの一部として表示するために、HTML内に埋め込む必要があります。

Webページの表示

WebブラウザがWebページを表示するとき流れは以下の順番です。

 

  1. ユーザーが指定したURLへアクセスする。
  2. アクセスしたURLにあるリソース（HTML、CSS、javaScript、画像、動画など）を取得する。
  3. 取得したリソースを読み込む。
  4. 読み込んだリソースをもとに、文字や画像の配置、大きさ、色などを調整してWebページとしてまとめて表示する。

 

ここでよりイメージが湧きやすいように、

３，取得したリソースを読み込む。

の前段階のWebページを表示したいと思います。

上の画像はYouTubeのHTML表示をしたページです。

Webページで表示したときに、右クリックで「ページのソースを表示」を選択します。

すると、表示されているWebページのHTMLコードが表示されます。

これがWebページのありのままの姿です。

これをブラウザが読み込んで、ふだん私たちが見ているWebページの画面が表示されます。

おわりに

本日は、Webページが表示される仕組みについて話しました。

  • Webページが構成する主な要素はHTML、CSS、javaScript、画像などのリソースファイルの４つになる。
  • HTMLは、情報のまとめ役、CSSはデザイン担当、javaScriptは動的に操作、リソースファイルは画像ファイルなどの表示が役割となる。
  • WebブラウザがWebページを表示するときは、URLへアクセス→リソースを取得→リソースを読み込み→デザインを調整して表示という流れになる。

という話をしてきました。

本日は以上です！！

ではまた！

-プログラミング