【僕の学習ノート】Webページとは？仕組みについて分かりやすく解説
こんにちは、なおやです。
今日は、Courseraというプラットフォームで、Metaの社員さんたちから授業を受けました。
そこで得た学びが、下記のツイートです。
【今日学んだ】Webページとは一体どんなものなのかについて
1. Webブラウザを使って閲覧できる文書ファイルのこと
2.主にHTML、CSS、JavaScriptの３つで構成
3.レンダリングをすることでWebページが表示される
4. ハイパーリンクというシステムのお陰で、私たちは他のWebページに瞬時に飛べる— Naoya (@kaigaiblog63) September 24, 2022
今回は、これを掘り下げて解説していきます。
この記事の信憑性
この記事は、Courseの授業を受けて、学び、理解したことを基に、僕なりの言葉と解釈で分かりやすく解説しています。まあ簡単にいうと、僕が学んだことのアウトプットノートです。※ 注意：僕はまだ日々学習している段階です。解説していることに間違いがある可能性も否定できません。何か間違いを見つけて下さった方は、このWebサイトの向上のと僕の学習の為に、教えてください🙏
» Courseraという素晴らしいプラットフォームはこちら (授業は全て英語です)
【僕の学習ノート】Webページとは？仕組みについて分かりやすく解説
今この瞬間にも、何千もの新しいWebサイトがインターネット上に公開されており、毎日何十万もの新しいWebサイトが生まれています。
ここで質問です。現在のインターネットの速度でインターネット上にある全てのWebページをダウンロードしようとすると何年かかると思いますか？
答えは、300万年です。
つまり、何が言いたいのかというと、インターネット上には数十億っていうWebページが存在しており、これらは全てメインとなるテクノロジーに依存しています。
私たちは、毎日「Safari」や「Google Chrome」などのWebブラウザを利用して、Webページを見たりしていますが、実際にどう機能しているのか知っていますか？
私たちが普段見ているWebページはどのように構成されており、どうやって私たちの手元のデバイスに表示されているのでしょうか？
そこで今回は、Webページの構成と仕組みについて分かりやすく解説しました。この記事を読むことで、Webページってこういったもので、こういう仕組みで動いてるんだーって事が分かります。
この記事の目次
- 1. Web
- 2. Webページ (Web Page)
- 3. Webサイト (Website)
- 4. ハイパーリンク (Hyperlink)
- 5. Webページの構成
- 6. Webページが表示される仕組み
Webとは？
Web（ウェブ）、別名World Wide Web (世界規模のクモの巣) といいます。これは、インターネット上のさまざま情報をクモの糸に見立てて、世界中に張り巡らせている様子を表しています。
また、この世界中に張り巡らされたWebというシステムによって、私たちはインターネット上のあらゆる情報にアクセスすることが出来ます。
Webページ (Web Page) とは？
Webページとは、「Google Chrome」などの Webブラウザに表示される文書ファイルのことです。これを使うことで、テキスト、画像、動画などのコンテンツを Webブラウザ上に表示することが出来ます。
ちなみに、あなたが今読んでいるこのページも「Webページ」です。
Webサイト (Website) とは？
沢山のWebページを１つのドメイン名上で総括しているのが、Webサイトです。
まあ簡単にいったら、Webページが１枚の紙で、Webサイトとは「それらの紙をまとめた本」ってことになります。
ハイパーリンク (Hyperlink) とは？
Webというシステムがなぜ凄いのかというと、「ハイパーリンク」という仕組みが使えるからです。
例えば、あなたが紙の辞書を使って「楽しむ」という言葉の意味を調べるとします。まずは、「た」から始まる言葉が沢山ある所を開いて、そこから「楽しむ」という言葉を探すプロセスに入りますよね？
それをWeb上で可能にしてくれるのが「ハイパーリンク」というシステムです。略して「リンク」と一般的に呼ばれています。
このリンクを使うことで私たちは、同じWebサイト内の他のWebページに「リンクをクリック」するだけで飛ぶことだって出来ますし、他のWebサイトの特定のWebページにも飛ぶことだってできます。
つまり、飛びたいページの参照情報 （URL）を「ハイパーリンク」と呼ばれるシステムを使ってWebページ上に埋め込む事で、私たちは「クリックするだけ」で他のWebページに瞬時に飛ぶ事が出来るという訳です。
» URLとは？
Webページの構成
Webページは、テキストエディターを使って作る事ができ、「HTML」「CSS」「JavaScript」の３種類のテクノロジーが相互に作用することで成り立っています。
- HTML：コンテンツを構成
- CSS：色とスタイルを加える
- JavaScript：ユーザーインタラクションを担当
※ ユーザーインタラクションとは：ユーザーがなんらかのアクションを行なったとき、システムがそれに応じた反応を返すこと
１つずつ解説をしていきます。
HTML (Hypertext Markup Language) とは？
HTMLでは、「マークアップタグ」と呼ばれるものを使ってWebブラウザに表示されるコンテンツを記述します。
マークアップタグを使うことで、見出し、段落、画像やオーディオなどの要素までWebページ上に作る事ができます。
CSS (Cascading Style Sheets) とは？
色やレイアウトなどの見栄えに関する情報をWebページに追加します。
CSSを使うことで、本当にWebページの見栄えは全く違います。例として、時計を作ってみましょう。
1. HTMLのみ
この場合、まずはHTMLを使って時計で使用する数字「０から１２まで」を作ります。
2. CSSを加えたもの
そして、CSSを使ってデザインをします。この時計の針や背景の色、また数字の位置などもCSSで作ることができます。
かなり違いますよね。まあ、CSSはWebページのデザイン部門って所です。
JavaScriptとは？
JavaScriptとは、Webブラウザに組み込まれているプログラミング言語です。
JavaScriptは、HTMLとCSSで構成されたWebページに、動作を加えます。例えば、Webサイトにログインしようとして、「パスワードが違います」みたいなのが表示された経験はないですか？そういった動作を実行するのがJavaScriptです。
紙の本と、Webページの違いの１つとして挙げられるのは、動作があるかどうかだと思います。そういったWebページ上で行われる色々な動作、紙の本にはなくてWebページにはある「動き」を作りだしているのがJavaScriptです。
実際、JavaScriptがなければWebサイトは退屈で、Webページ上でできることはかなり限られてきます。
また、先ほどCSSの所で時計の例を出しました。こちらは、先ほどの時計にJavaScriptを加えたものです。動作を写真で紹介するのは難しいので「こちら」をご覧ください。JavaScriptについてのイメージを深める事ができると思います。
Webページが表示される仕組み
- 検索エンジンで検索したいキーワードを検索
- その検索に基づいて検索結果が表示される
- その中から見たい記事をクリックする
- ブラウザは、その記事のURLを元に、指定のWebサーバーに「そのWebページを表示するのに必要なファイル」を要求する (HTTPリクエスト)
- Webサーバーは、そのリクエストに対して、そのページを表示するのに必要なファイル(HTML,CSS,JavaScriptなどのファイル)をWebブラウザに送り返す。(HTTPレスポンス)
- Webブラウザは、そのファイルに書かれているコードを１行ずつ上から読み込んで、Webページを生成する(レンダリング）
- WebブラウザにWebページが表示される
私たちがWebブラウザを使ってWebページをみるステップはこんな感じです。
なんとなく、Webページってこんなもんなんだーていうイメージは出来たでしょうか？この記事が参考になれば幸いです。以上！