【基礎知識】Webの仕組みを理解しよう

コードを書いて作成するファイルがどこで活かされるのかを理解するためにWebの基本を学習しましょう。

開発は主にローカル環境(自分のパソコン)で行いますが、作成したファイルを公開するためにはインターネットに接続された公開サーバーにファイルを設置する必要があります。

Web配信と開発の流れ

このサーバーは「提供する者」という意味で、誰かがWebサイトを「見たい」とリクエスト(Request: 要求)すると、そのサイトのファイルをレスポンス(Response: 応答)として返します。

レスポンスを受け取った端末は、レスポンス内のファイルをブラウザで表示します。

理解度チェック

  • 作成したファイルを公開するためには、どこにファイルを設置する必要がありますか?
  • サーバーはどのような役割のものですか?

Webに必要なファイルを作成するコーディング

ブラウザで表示するために必要なHTMLやCSS、JavaScriptなどのファイルを作成します。ソースコードをファイルに記述していくことから、コーディングと言います。

ユーザーの情報を保存したりメールを送信する場合はデータベースやサーバー内で動作するファイルを作成する必要があります。

プログラミング

ファイルの作成は主に自分のパソコンで行います。このとき自分のパソコンには開発のために必要なツールやアプリケーションが必要になり、そのための特別な環境を整える必要があります。

HTMLやCSS、JavaScriptでは、Visual Studio CodeGoogle Chromeのダウンロードのみですが、他の言語で開発を行う場合はもう少し複雑な環境構築が必要になることもあります。

このような開発するための環境のことを開発環境と言います

理解度チェック

  • コーディングとは何をどうすることを言いますか?
  • 開発環境とはどのような環境のことですか?

公開サーバーを用意する

サーバーの実体はパソコンと変わりません。自分のパソコンをインターネットに公開すればサーバーのように扱うこともできます。

ただ、自分のパソコンの中に外部から自由にアクセスされるのは気持ち悪いですよね。高い負荷に対応できなかったり、セキュリティとしてもよくありません。

そのため、配信専用のサーバーを購入して運用(オンプレミス)します。ただ、オンプレミスには経費が多く必要でメンテナンスも欠かせないため、専門的な知識を持つ人員が必要です。

この様な場合は、サーバーをレンタル(間借り)できるサービスを利用できます。月額数百円からサーバーをレンタルすることができるため、運用に掛かる費用を削減できます。

理解度チェック

  • サーバーの実体はどのようなものですか?
  • サーバーを使用するためにはどのような方法がありますか?

公開サーバーの住所とその仕組み

IPアドレス

公開サーバーにリクエストするためには、公開サーバーの場所が分かる住所が必要です。
この住所の役割をするアドレスのことをIPアドレスといいます。

このIPアドレスはインターネットに接続するすべての端末に割り当てられます。
値は「150.95.219.148」のように最小「0.0.0.0」から最大「255.255.255.255」までの数字4組で表現されます。この形式のIPアドレスをIPv4といいます。

アドレスは有限で、IPv4では約43億個しか利用できず、現在ではより多くのアドレスを提供できるIPv6が徐々に使用されてきています。

このIPv6は「2001:0db8:bd05:01d2:288a:1fc0:0001:10ee」のような表現で「約340兆×1兆×1兆個」の数があります(Wikipediaより抜粋)。

ドメイン

IPアドレスは人間が使用するには少し不便です。特にIPv6は書き写すのも大変です。

このアドレスを人間に分かりやすいようにしたものがドメインです。
ドメインはドメイン販売業者から購入してIPアドレスと紐付けることで使用できるようになります。

このサイトでは「prograbi.com」というドメインを使用しています。

ドメインを使用することで、どのようなサイトなのかをサービス名で伝えたり、アドレスを覚えてもらいやすくすることができます。

DNS(Domain Name System: ドメインネームシステム)

ドメインはDNS(ディ・エヌ・エス)というシステム上で、IPアドレスと紐く形で管理します。
ドメインを取得後、対応するサーバーのIPアドレスを設定で紐付けます。

こうすることで、DNSからドメインに紐付くIPアドレスを取得し、IPアドレスを用いて公開サーバーにリクエストすることができます。

Webサイトのリクエスト手順

名前解決
  1. ブラウザはドメイン(prograbi.com)を元にDNSサーバーにIPアドレスをリクエストします。
  2. DNSサーバーからのレスポンスでドメインに紐づくIPアドレス(150.95.219.148)を取得します。
  3. ブラウザは取得したIPアドレス(150.95.219.148)を使用して、公開サーバーにリクエストします。
  4. 公開サーバーはファイルをレスポンスとして返します。

ポート番号について

インターネットに公開されているサーバーは多くのリクエストを受け付けます。

例えば、開発者がサーバーをメンテナンスする場合やファイルをアップロード(設置)する場合、そのファイルをブラウザで表示する場合など色々な用件のリクエストがあります。なかにはサーバーに攻撃を仕掛けてくる悪いリクエストもあります。

サーバーはこの用件ごとに番号を割り当てていて「不要な用件であればリクエストできないように制御」したり「特定の番号のリクエストであれば特定のアプリケーションにリクエストを渡す」といったことを行っています。

この用件ごとの番号をポート番号と言います。

ポート番号

ポート番号は決められているものも多く、ファイル転送(FTP)は20〜21番、メール送信(SMTP)は25番、メール受信(POP3)は110番、Web(HTTP)は80番、セキュアなWeb(HTTPS)は443番 などがあります。

アクセスする際、ポート番号は「150.95.219.148:443」のようにIPアドレスの末尾にコロン(:)区切りで設定されます。
この場合は、443番なので「セキュアなWebをリクエストする」という用件を公開サーバーに知らせています。

理解度チェック

  • IPアドレスについて説明してください。
  • ドメインについて説明してください。
  • DNSについて説明してください。
  • Webサイトのリクエスト手順について説明してください。
  • ポート番号について説明してください。

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。