フロントエンド技術を学ぼう 2-2.インターネット/Webについて学ぶ

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

第12回はPart II: Learning Front-End Devから、2項の Learn Internet/Webを紹介します。

インターネット/Webについて学ぶの説明です。

インターネット/Webについて学ぶ

インターネットは、インターネットプロトコルスイート(TCP/IP)を使用して相互接続された、世界中の数十億台のコンピュータネットワークのグローバルシステムです。これは広範囲にわたる電子、無線、および光ネットワーキング技術によってリンクされており、数百万のプライベート、パブリック、アカデミック、ビジネス、政府のローカルからグローバルまでのネットワークで構成されています。

インターネットは、相互リンクされたハイパーテキスト文書やWorld Wide Web(WWW)のアプリケーション、電子メール、電話、ファイル共有のためのピアツーピアネットワークなど、広範な情報資源とサービスを運びます。

参照元：英語版Wikipedia

インターネットの通信

インターネット上のページはHTMLを使用して書かれており、HTTPを使用して通信されています。
そして、Webブラウザを使用することで、HTTPを解釈し、HTMLを人間が読める形式に変換することが出来ます。

HTML

Webページを作成するときに、ページ内の各部分に目印をつけることで、コンピュータがその文書の構造を理解できるようになります。
HTMLはインターネット上に配置するのに適した、文書形式(書き方)です。

HTTP

Webにアクセスする様々なデバイスは、お互いに通信が出来るように幾つかのルールを定める必要があります。
HTTPはインターネットでの通信ルールです。

要求/応答サイクル

ブラウザにURLを入力すると、HTTPによってクライアントコンピュータはWebページを探しに行きますが、この時ブラウザは入力したURLを使用しません。
Webページが配置されているサーバを識別する為にはIPアドレスを使用しています。
たとえば、以下の2つのアドレスは同じappleのホームページのURLを意味します。

• http://www.apple.com
• http://17.172.224.47

これは、文字列のURLの方が人間にとって使いやすい為、DNSという機能を持つサーバがWebアドレスとIPアドレスの変換をしてくれるからです。

要求/応答サイクルは以下のようになります。

1. クライアントコンピュータのブラウザにWebページのURLを入力する
2. クライアントコンピュータはDNSにWebページが配置されているサーバのIPを聞く
3. DNSはクライアントコンピュータにサーバIPを教える
4. クライアントコンピュータはWebページの要求をサーバに送信する
5. サーバは要求を受け取り必要なWebページを見つけ出しクライアントコンピュータに戻す
6. クライアントコンピュータはサーバから受け取ったWebページをWebブラウザに表示する

インターネット上のコンテンツの種類

プレーンテキスト

主に拡張子が.txtのファイルのことです。
プレーンテキストファイルがインターネット上で見つかると、ブラウザーは処理を行わずにそのまま表示します。

Web標準

HTML、CSS、JavaScriptの3つを使用して作成されたコンテンツのことです。

• HTML(Hypertext Markup Language)は、文章の内容と構造を指定するマークアップ言語です。
• CSS(Cascading Style Sheets)は、HTMLで指定された構造の見た目を指定するスタイルシート言語です。
• JavaScriptは、ブラウザ上で実行できる動的な機能を、Webサイト/アプリケーションに提供するプログラミング言語です。

サーバサイド・スクリプト

ブラウザ上で実行されるJavaScriptには限界があり、サーバーサイドのWebテクノロジーを使用する可能性もあります。これは、ページがWebブラウザーに送られて表示される前に、サーバー上のページに与えられた変数の値に応じてWebページを生成します。

他のアプリケーションやプラグインを必要とする形式

Webブラウザは、Web標準のような特定の技術を解釈して表示する機能しか備わっていません。ブラウザが解釈できない形式のファイルを指定するリンクを入力された場合は、以下の2パターンの動作をします。

静的Webサイトと動的Webサイト

静的Webサイトとは

コンテンツが静的であるWebサイトのことです。
その静的Webサイトの管理者がコンテンツの更新をしない限りは、すべての訪問者に対して同じ情報を提供します。

動的Webサイトとは

動的なコードが含まれているWebサイトのことです。動的なコードは、時刻、ユーザーなどの情報に応じて異なるデータを表示することが出来ます。

例：Amazon.co.jpのユーザーにおすすめの商品を表示する機能など

参照元

What is the Internet? (インターネットって何？)

How the Internet Works in 5 Minutes (5分でわかる、インターネットの仕組み)

• How does the Internet work? - Mozilla [読み物]
  (インターネットの仕組み)
• How does the Internet work? - Stanford Paper [読み物]
  (インターネットはどの様に機能するのか？)
• How the Internet Works [視聴]
  (インターネットの仕組み)
• How the Web Works [読み物]
  (Webの仕組み)
• How the Internet Works [視聴]
• Internet Fundamentals [視聴]
• How the Web Works [視聴]
• Don’t Fear the Internet
• インターネットの仕組み [読み物][日本語]

From Visually.