フルスタックエンジニアのノウハウ
2020.02.07    2020.03.17

URLを理解しよう(初心者向けに分かりやすく解説)

URLを理解しよう(初心者向けに分かりやすく解説)

こんにちは、徳田 啓です。
Webプログラマー歴20年、【フルスタックエンジニア マスター講座】を運営しています。(生徒数1,800名突破)


今回は、URLについてご説明します。

Webプログラマーは、サービスをどのようなURLで公開するかを「設計」するために、URLの仕組みを理解しておく必要があります。

ここでしっかりURLの仕組みを理解しておきましょう。


この記事の動画版はこちら

チャンネル登録お願いします!



URLとは何か?

URLとは、Webページの場所を示す「アドレス(住所)」のことです。
すべてのページに固有のURLが付けられています。

URLをブラウザに打ち込むと、そのページが表示されます。

もし、URLが間違っていたり、Webページが削除されていて見つからない場合は、このようなエラーが表示されます。

【404 Not Foundエラー】

URLの形式


URLの正しい形式は以下のようになっています。


普段よく見るURLよりもなんだかごちゃごちゃしていますね。
これは、色々と省略出来る部分があるからなんです。

例えば、GoogleのトップページはこのようなURLになっています。
https://www.google.co.jp/

URLは、文字や数字の羅列のように見えますが、上記のようにそれぞれの区分に意味があります。

区分ごとに詳しく見ていきましょう。

【情報①】どこのサーバーにあるのか?



まずこの部分は、Webページが「どこのサーバーの中にあるのか」を示しています。

ドメインの配下には、以下のように複数のサーバーが属しています(サーバーのことを「ホスト」といいます)

ホスト名+ドメイン名でサーバーが特定出来るようになっています。

ちなみに、サーバー1台1台にはそれぞれ「IPアドレス」という番号が割り当てられています。
これはサーバーの住所のようなもので、同じ番号が割り当てられることはありません(世界中で唯一の番号です)

例えば、GoogleのサーバーのIPアドレスは、記事執筆現時点では「172.217.175.35」となっており、これをそのままブラウザに打ち込んでも同じようにGoogleのページが表示されます。

でも、ユーザーにURLを教える時にこのような数字形式だととても覚えづらいですよね?

そこでこのように「ホスト名+ドメイン名」を割り当てて、覚えやすい名前でアクセス出来る仕組みになっています。

なお、自分でWebサービスを作る際にも、ドメイン名は好きな名前を付けることが出来ます。
ただし、同じドメイン名は世界に1つしか存在出来ないため、すでに取られているドメイン名を付けることは出来ません。
これを管理しているのが「レジストラ」という会社で、「お名前.com」などが有名ですね。
自分のドメインを取りたい場合はこういったレジストラから購入します。

【情報②】サーバーとの通信手段


先頭の部分は、サーバーとの通信手段を指定します。

通信手段には、通信が暗号化されない「http」と、暗号化通信の「https」というものがあります。(実際は他にもありますが、とりあえずこれを覚えておけばOK)

httpsを使うには「SSL証明書」というものをサーバーに設置する必要があります。

以前は、通常のWebページは「http」、注文ページやクレジット決済ページなどを「https」とすることが一般的でしたが、最近では通信が暗号化されないhttpは推奨されない形になっており、ブラウザで表示エラーとなる場合もありますので、自分のWebサービスを作る際は、基本的にhttpsに対応させることを考えておきましょう。(SSL証明書については別の機会にご説明します)

末尾の数字は、サーバーと通信を行う際の「ポート番号」の指定です。

通常は「80番ポート(http通信の場合)」「443番ポート(https通信の場合)」を使う決まりになっており、それを使う場合はポート番号の指定を省略出来ます。

GoogleのURLにポート番号の指定が無いのは、443番ポートを使っているということですね。(https通信のため)
例)https://www.google.co.jp/

ポート番号は、開発用サーバーなどで特別なポート番号を使う場合のみ指定します。
例えば、パソコンにXAMPPをセットアップする場合は「8080番」という特別なポート番号を使います。

【情報③】サーバー中のどこにあるのか?


その次は、サーバーの中のどこにあるかを示しています。


Webサーバーには「ドキュメントルート」というフォルダがあり、そのフォルダが最上位の階層になります。

例えば、ドキュメントルートのフォルダの中に直接「test.html」というファイルを置いた場合、URLは以下のようになります。
https://www.example.com/test.html
ドキュメントルートの下にフォルダを作った場合は、URLにも「パス」として反映されます。

例えば、ドキュメントルートに「project1」というフォルダを作って、その中にsample1.htmlというファイルを置いた場合は、URLはこのようになります。
https://www.example.com/project1/sample1.html

このフォルダに「sample2.html」というファイルを追加したら、以下のURLでアクセス出来ます。
https://www.example.com/project1/sample2.html

なお、ファイル名が「index.html」または「index.php」の場合は、ファイル名の指定を省略出来ます。

例えば、ドキュメントルートに「index.html」というファイルを置いた場合は、

https://www.example.com/index.html

または

https://www.example.com/

のどちらでもアクセス出来ます。

以上が、URLの基本的な構造になります。
実際のHTMLが置かれている場所と、URLの関係性が分かりましたでしょうか?

作ったプログラムをどのフォルダに置くと、どういったURLでアクセス出来るのか?ということをしっかりイメージ出来るようにしておきましょう!

おすすめ記事
無料メルマガ配信中