Webサイトはどのような仕組みで表示されているのだろうか?[Web制作講座_part.1]

Uncategorized
ゆうゆる
ゆうゆる

こんにちは、ゆうゆると申します。

今回から、僕の学んできたWeb制作の知識を無料で伝えていくという講座を開始いたしました。

そして、記念すべき第一回としてWebサイトを作るうえで、基礎中の基礎「Webサイトが表示されている仕組み」を知りましょう。

今後、HTML&CSSを学んでいく前に知っておいた方が良い情報なので、しっかりと理解しておきましょう。

おすすめの読者

  • Web制作について学びたい方
  • Webサイトが表示される仕組みを知りたい方

そもそもインターネットとは何なのか

ゆうゆる
ゆうゆる

そもそも、インターネットって何のことだと思いますか?

こう聞かれても、すぐさま答えられる人は少ないでしょう。

簡単に説明すると「世界中のデバイスをつなぐ道」といったようなものです。

その「道」が世間では「ネットワーク」といわれているんです。

一般的にネットワークというと企業ネットワークやホームネットワークなどの比較的少ない数のデバイス間でのやり取りという認識でしょう。

ですが、インターネットではその少人数のネットワークを一単位として、世界中のネットワークが相互的に接続されたもののことを言うのです。

つまり言ってしまえば「世界中に展開される大きなネットワーク」なんです。

逆に言うとデバイスは、インターネットを通じて大きなネットワークという道を歩くことができるのです。

インターネットとWebの違いとは?

先ほどの解説で、インターネットについてはある程度理解できたかと思います。

では次に、Webって何だと思います?

ゆうゆる
ゆうゆる

よくインターネットとWebが混同していることがあるので、理解しておきましょう。

インターネットを世界中のデバイスをつなぐ道だとするならば、Webは「その道に並ぶ建物」といった認識でしょう。

その建物内に入ることで、内容を確認できるのです。

ですが、インターネットにはたくさんのWebが存在します。

それを見分けるためには、住所のようなものがあったら便利でしょう。

ということで、作られたのが「URL」という仕組みでした。

URL(Uniform Resource Locator )とは

このURLと言うと、Googleなどの検索エンジンで検索するとWebサイトなどに飛ぶ、そういった認識だと思います。

便利な機能ではありますが、みなさん一度は「打つのが面倒くさい」と思ったことがあるでしょう(笑)

それを改善するために開発されたのが「ハイパーリンク」というものでした。

ハイパーリンクとは

  • 青色になった「ハイパーリンク」このようなもののことを指し、URLを入力しなくてもクリックするだけでサイトへ飛べる画期的な機能だ

URLと言われると、一般的に「https://〇〇.com/□□/index.html」という感じのようなものを想像されるかと思います。

URLをよく見てみると、4つの要素に分かれて知るように感じませんか?(詳しく言うと、もう少し分かれていますが…)

実際に分解してみてみましょう。

このように「プロトコル・ドメイン・ディレクトリ・ファイル」という4つの要素ごとに分解することができるのです。

今回はこの中でも一番重要であろう「ドメイン」に関して解説していきます。

ドメインとは

ドメインと聞いてもあまり馴染みがなさそうですが、意外と多くの場面で使われています。

ゆうゆる
ゆうゆる

例えば「Google.com」と検索することはありませんか?

検索すると、Googleに飛ばされるはずです

ゆうゆる
ゆうゆる

そのほかにもこのブログのドメイン「yuuyuru.com」でも飛ばされます。

そして、このドメインがないとWebサイトを公開することができないんです。

つまり、URLの中でもこの部分が住所という役割を担っているのです。

同じ名前のドメインは存在できないのでちゃんとそのWebサイトを見つけることができます。

では、そのドメインはどのようにして取得すればいいのでしょう?

ドメインの取得方法

ドメインを取得する方法は、「お名前ドットコム」などのサイトで借りるという方法が一般的です。

よく見るドメインというと「~.com」や「~.net」だと思います。
そのほかにも「~.inc」や「~.work」などもあります。

ですが、そのドメインの後ろ部分で取得する値段が変わってくるのです。

例えば、「.com」は取得で約800円、一年更新で1500円くらいです。

「.work」などは取得で約1円、一年更新で800円くらいでだいぶ安くなっています。

実は、安すぎるドメインはスパムとして使われることがあるので、ある程度の値段があるものを選ぶべきです。

スパムとは

  • たくさん送られてくる迷惑メールなどのことです

Webサイトの表示されている仕組みとは

いろいろ説明してきましたが、ようやく本題に入ります。

こちらも簡単に説明すると「WebサーバーとWebクライアントとのやり取り」といった感じです。

少しわかりにくいので図で説明します。

WebクライアントというものからWebサイトが見たいという要求(レスポンス)がWebサーバーに送られ、WebサーバーからはWebクライアントが見たいWebサイトの情報が送られてきます。

Webクライアントとは

  • 私たちユーザーが利用しているコンピューターのことです。
    今あなたが見ているデバイスもWebクライアントということになります。

つまり、WebサーバーにはWebサイトの情報がアップロードされているから、情報を引っ張り出してこれるということです。

逆に言えば、Webサイト作成しインターネットに公開するにはWebサーバーは必須だということです。

Webサーバーの取得方法

Webサーバーは一般的にレンタルサーバーを借りて使用される場合が多いです。

レンタルサーバーにはいろいろなものがありますが、今回は私も使用している「ConoHaWING」というレンタルサーバーを紹介します。

ConoHaWINGの特徴とは

僕の良いと思う特徴は3つほどあります。

ConoHaWINGの特徴

  • 国内最速のサーバー処理速度
  • 初期費用が掛からない
  • 永久無料のドメインがついてくる
  • 月額720円、年間で8640円で利用できる

HTTP/2というWeb表示を高速化できるものに完全対応しており、超高速といっても過言ではないでしょう。

さらに初期費用が全くかからず、更新費用だけで済むのです。

そしてConoHaWINGには通常プランと、Wingパックというものがあり、Wingパックの方に入るとドメインが無料でついてきます。

そんなWingパックですが通常では月額1200円なのに対して、一年契約で月額900円と約25%offになるのです。

さらに、1月29日までに契約すると1年契約で月額780円と約40%offになります。

ConoHaWINGの悪い点

そんな最高のサーバーだと思われますが、当然デメリットもあります。

こんな感じです。

ConoHaWINGの悪い点

  • WINGパックは一か月だけの契約ができない
  • WINGパックの契約はクレカとconohaカードのみ

Wingパックというのは様々なメリットがありますが、契約期間が「3か月、6か月、12か月、24か月、36か月」しかないのです。

もともとWingパックというものは長期的な使用を目的としたものですからそうなったのでしょうね。

次に、個人的に感じたことなのですがPaypalやバンドルカードが使えないのが残念でしたね。

通常契約なら使うことができたので少し残念でした。

今回のまとめ

それでは、今回話してきた内容のまとめをしていきます。

今回のまとめ

  • インターネットとは「世界中のデバイスをつなぐ道」のようなもの
  • Webはネットワークの道に存在する建物
  • URLはWebの住所のようなもの
  • Webサイトの表示されている仕組みは、WebサーバーとWebクライアントとのやり取り

このような感じでした。

こういう知識は正直なくても、Web制作をすることはできます。

ですが、やはり知っておいて損はない情報ですのである程度理解してから次回の内容に進みましょう。

次回の内容

  • コードを書くために準備すべき2つのもの

part.2はこちら↓

タイトルとURLをコピーしました