「インターネット」や「Web」 は、一般的によく使われている言葉ですが、この二つの違いはご存知でしょうか？
この記事では、「Web」や「インターネット」をはじめ、Webサイトの基本的な知識について解説します。
少し難しい内容を含みますので、全てが理解できなくても問題ありません。Webサイトが表示される基本的な仕組みを理解し、説明できるようになれれば完璧です！
- Webサイトが表示される仕組み
- Webサイトを構成する技術の内容
プログラミング学習でこのような経験はありませんか？ これらの悩みは、学習環境を整えることで全て解決することができます。 ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。 条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。 少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
ただし、無料サービスの提供には参加者の数に制限があります。
目次
インターネットを使用した技術の一つがWeb
インターネットとは、世界規模でコンピューター同士を繋げ、様々な情報のやりとりをする仕組みのことです。
それでは、「Web」との違いはなんでしょうか？
Webというのは英語で「蜘蛛の巣」、正式には「World Wide Web」(=WWW)というもので、インターネット技術が利用されている機能の一つです。
このように名付けられたのは、「ハイパーテキスト」というWebサイト同士を結びつける機能によって、世界規模で張り巡らされた文書データが蜘蛛の巣のように繋がって見える、という理由からです。「ハイパーテキスト」とは直訳で「文書を超える」という意味で、ハイパーリンクによって、複数のWebの文書データ（文章、画像、音声など）が結びつけられています。
「ハイパーリンク」は、一般的に「リンク」と呼ばれます。例えばサイトのナビやリンクテキスト、リンク画像などのように、Webサイト同士をつなげる役割をしています。テキストや画像をクリックする事で別のページに移動できるのは、ハイパーリンクがあるからです。
WWWは無数の「Webページのまとまり」から出来ています。今ご覧いただいているこのページも「WWWの中のWebページ」であるということです。
また、みなさんは今Webページを ”Webブラウザ(以下、ブラウザ)” を通して見ていると思います。
ブラウザはWebページやインターネット上のシステム(クラウドサービス)を閲覧・操作するときに使用するアプリケーションの総称です。今、この記事も、ChromeやEdge、Safariなどといった、何らかのブラウザで表示されています。
「Web」について何となく理解したところで、次はその具体的な仕組みについて学んでいきましょう。
Webサイトの仕組みを理解するために知っておくべきこと
Webサイトの仕組みを理解するために、「ドメイン」「サーバー」について押さえておきましょう。
ドメイン
ドメインとは、インターネット上に存在するコンピューターやネットワークを識別するための名前のことです。WebサイトのURLやメールアドレスの中で使われています。
ドメインは単純に「インターネット上の住所」と説明ができます。Webサイトが「どこにあるのか」を判別する情報は、ドメインに紐づく「IPアドレス」というものにあります。IPアドレスは「000.00.00.00」といったような数字のみを用いた文字列です。見たいページのIPアドレスを、ドメインのアドレスバーに入力すればそのページを開くことができます。しかし、数字だけでは覚えづらく人間にとってわかりにくい、ということから、文字列(名前)に変換してWebサイトの場所を示そう！ということになりました。その文字列が 「ドメイン」です。
メールアドレスでドメインを使用する際は、＠より前の部分の文字列(ユーザー名)を変更するだけでメールアドレスを複数作成・所持することができます。
ドメインには「独自ドメイン」と「サブドメイン」があります。
「独自ドメイン」というのは、ムームードメインやお名前.comのようなドメイン取得サービスを用いて、ユーザーが好きなように名前を決め、利用できるドメインです。「サブドメイン」というのは、独自ドメインをさらに細かく分割し、複数のユーザーに割り振るためのドメインです。独自ドメインを取得することで作成することができ、独自ドメインの前に「.(ドット)」、その前に好きな文字列を挿入して使用します。
例えば、レンタルサーバー「ロリポップ！」に登録した際に使用できるドメインは「ロリポップ！が所有している独自ドメイン」ということになります。サブドメインを作成(自分の好きな文字列を決めて使用)することが可能ですが、ドメインの一部を間借りするような状態です。つまり、ドメイン自体の所有者はロリポップ！ということになります。
独自ドメインを取得・使用するメリット
好きな文字列が決められる
サイトの内容や世界観をドメインを見て分かるようにすることでユーザーに覚えてもらいやすくなり、ブランドイメージを確立する1つの要素にもなります。
信頼度が高まる
ドメイン名に会社やお店の名前、サイト名を含ませることで認知度や信頼度が高まります。メールアドレスとしての使用も可能なので、オリジナルのアドレスを使用することでビジネスでの信頼度アップにもつながります。
ずっと使い続けることができる
ドメインの所持者が登録者自身であるため、サーバーを変更するということがあっても、そのままのドメインを使用することができます。レンタルサーバーなどのサービスが提供しているドメインとは違い、サービスの終了などにより消去されてしまうリスクがありません。
サーバー
次に、前項で出てきた 「サーバー」 について説明していきます。
サーバーとは「サービスを提供する側のコンピューター」を指します。パソコンやスマホと同じような、「サーバー」という種類のコンピューターのことです。クライアントの要求に応じて、加工したデータを送ったり、データを保存する役割があります。
サービスを提供する側に対して、「そのサービスを受け取る側」のことを、「クライアント」と呼びます。つまり、サーバーとクライアントは供給と需要の関係にあります。私たちは普段コンピューターを使用してWebサイトを見たり、メールを送ったりします。これが「リクエスト(クライアントからの要求)」です。そして、サーバーからそれに応じたデータファイル(画像ファイルやHTMLファイル)が送り返されます。これが「レスポンス」です。
Webサイトの例では、ユーザー（クライアント）のリクエストに対してサーバーがWebサイトを表示するようにレスポンスします。このようなサーバーとクライアントのやり取りによって、ユーザーは様々なサービスを受けられるようになっています。
サーバーの利用方法と種類
次に、サーバーの利用方法と種類について説明していきます。
「レンタルサーバー」はサーバーの機能の貸し出しを行っているサービスです。ユーザーはレンタルサーバーの運営会社と契約をしてサーバーを利用することができます。
運営会社側でサーバーの管理を行ってくれるため、サーバー構築やメンテナンスを自分でする必要はありません。レンタルサーバーを借りることで、自分のホームページやブログ・アフィリエイトサイト・インターネットショップなどの公開を行うことができたり、独自ドメインのメールアドレスの利用が可能となります。
レンタルサーバーにも種類があるので紹介します。
共有サーバー
エックスサーバーやロリポップ！などのような運営会社が持つ1つのサーバーを複数のユーザーが共有して使用するサーバーのことです。
専用サーバー
1契約者が1台のレンタルサーバーを利用します。法人などのビジネス利用ではこのタイプが選ばれることが多いです。
他にも、レンタルサーバーの中には仮想サーバーと言われるVPS（バーチャル・プライベート・サーバー）や、クラウドサーバーといったものがあります。どちらも専用サーバー同様、利用をするには高度な専門的な知識やスキルが必要です。
Webの仕組み
まずWebサイトを閲覧する際に入力する「URL」の構造について説明します。
このようなURLの場合、画像のように3つの要素に分けることができます。
HTTPプロトコル(Hyper Text Transfer Protocol)
プロトコルとはコンピューター同士が通信をする際の手順や約束事のことです。
よってHTTPとは、Webブラウザを使用してWebサイト（Webサーバー）にアクセスする際に、ハイパーテキストをやり取りするための手順・約束事になります。
ドメイン名
ドメインのメインとなる部分です。
「www.」のように、ドメイン名の前に.（ピリオド）で区切られた文字列がある場合、その部分が「ホスト名」になります。
パス
Webブラウザで表示させたいWebページのファイル名を指定する部分です。デフォルトはindex.htmlになります。
Webページの表示は、HTTPというとてもシンプルなプロトコルによって行われています。ブラウザとサーバとの間で、データを要求する「HTTPリクエスト」と、要求に応じてデータを送り返す「HTTPレスポンス」です。このようなやり取りの繰り返しで私たちが閲覧しているWebページが成り立っています。
ここまでの説明を踏まえて、私たち(ユーザー)がWebサイトにアクセスしてから表示されるまでの仕組みについて説明します。
例）http://zero-plus.io/index.html にアクセスする場合
※ドメイン「zero-plus.io」のIPアドレスは「000.000.000.00」とします
- ユーザーがブラウザにURL(http://zero-plus.io/index.html)を入力しEnterを押す
- Webブラウザ：DNSサーバにドメイン「zero-plus.io」のIPアドレスを要求
- DNSサーバ：対応するIPアドレス「000.000.000.00」をWebブラウザに返信
- Webブラウザ：確認したIPアドレスのWebサーバにアクセスし、Webページのデータを要求(=HTTPリクスト)
- Webサーバ：Webブラウザから受信したHTTPリクエストを解析→要求されたデータを返信(=HTTPレスポンス)
- Webブラウザ：HTTPレスポンスを解析してWebページとして表示
- ユーザーが閲覧
このようにして、Webサイトは画面に表示されるようになっています。
Webサイトを構成する言語と技術
Webサイトの見た目は、
- テキストや画像に構造を指定するための言語 →「HTML」
- 構造化されたテキスト・画像に装飾を加える言語 →「CSS」
- サイトに動きを加える言語 →「JavaScript」
の3つの言語で構成されます。それぞれどのようなものか、簡単に説明していきます。
HTMLとは
「HTML」とは「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ) 」の略で、プログラミング言語ではなくマークアップ言語です。
Webサイトを開いた時に見えているテキストや画像に、構造を指定するための言語で、他にも主要なマークアップ言語としてSGML、XHTML、XMLがありますが、最も基本的なものがHTMLです。その名のごとく「マークアップ＝しるし（タグ）をつける」をすることで、文書の中で「見出し」「段落」「画像」「表」「リスト」など、それぞれのテキストや画像に意味付け、構造化する役割があります。
CSSとは
「CSS」とは、「Cascading Style Sheet(カスケーディング・スタイル・シート)」の略で、プログラミング言語ではなくスタイルシート言語です。スタイルシート言語とは、文書構造を定義するマークアップ言語を装飾する言語で、CSSのほかにSASS、LESSなどがあります。
CSSは基本的にHTMLと組み合わせて使用され、HTMLで構造化されたテキストや画像に対し、見た目・スタイル(装飾)を加える役割があります。
CSSで指定できるものには
- 色・サイズ・背景・レイアウトなどの「表示スタイル」
- プリンタ等の機器で印刷や出力をする際の「出力スタイル」
- 音声で再生される際の「再生スタイル」
などがあります。
JavaScriptとは
「JavaScript」はHTML/CSSとは異なり、Webページを”活かすため”に作られたプログラミング言語です。Webサイトを表示するブラウザ上で動くプログラムで、ユーザーが何らかのアクションをすることで、それに対応して動きを加えるための指定をする言語です。
JavaScriptでできることは
- 「ページを読み込んだ時」「クリックした時」に起こすイベントの操作
- 入力フォームに入力があった際に入力値をチェックして表示、入力ミスがあった際のアラート表示
- 一定時間毎に文字や画像を切り替えるなどのタイマーの操作
などがあります。
JavaScriptは、通信がなくても動作することができます。また、時間やマウスの動きなど、クリック以外の動作にも対応ができる、などの特徴があります。
まとめ：Webサイトは多くの技術が組み合わさって表示される
インターネットとWebの違い、Webサイトが表示される仕組みについて何となく理解することができましたか？
- インターネットとは、世界規模でコンピューター同士を繋げ、様々な情報のやりとりをする仕組み。
- Webとは、インターネット技術が利用されている機能の一つ。複数のWebの文書データ（文章、画像、音声など）が結びつけられている。
- 「ハイパーリンク」は、一般的に「リンク」と呼ばれ、Webサイト同士をつなげる役割をしている。
- ブラウザはWebページやインターネット上のシステムを閲覧・操作するときに使用するアプリケーションの総称。
- Webサイトの骨格を構成するのがHTML、装飾をするのがCSS、動きをつけるのがJavaScriptという言語。
ここで紹介したものはほんの一部です。実際にはさらに複雑な技術や言語を使ってWebサイトやWebシステムが構築されています。
実際にプログラミングをして、手を動かしながらWebやWebサイトの仕組みを理解するのもおすすめです。30日間でWeb制作プログラミングの基本が学べるプログラミングスクールを開講しておりますので、よろしければご活用ください。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
