【基礎知識】URLについて

URL(ユー・アール・エル: Uniform Resource Locator)はWebファイルまでの一意(重複しない)のアドレスです。
そのためURLが変わるとリクエスト先も変わります。
URIと記述されていることもありますが、特に違いについて意識することはありません。

ブラウザがインターネット上の公開されたWebファイル(リソース)を取得するためにURLを使用します。

多くの場合、URLから取得できるデータはHTMLやCSS、JavaScriptなどブラウザで扱うためのファイルや画像となりますが、サービス内部で情報を扱うためにJSON(ジェイソン)形式などのデータを返すこともあります。

重複したURLは定義できず、またファイルの場所を変更するとURLを変える必要もあり、Webサイトを運用する際はURLとそれに関連するリソースを慎重に管理する必要があります。

理解度チェック

  • URLはどんなときに使用しますか?
  • URLはどのようなアドレスですか?

URLを読み解いてみよう

URLは、それぞれ意味を持つ複数の文字列を組み立てて表現されています。

いくつかのURLの例を表示します。


https://prograbi.com
https://www.prograbi.com
https://prograbi.com/courses/lion/
https://prograbi.com/?s=vs+code
    

これらのURLをブラウザのアドレスバーに入力してWebに必要な情報を読み込み、表示することができます。

URLのそれぞれの意味

次のURLをもとに、それぞれの意味について説明します。


https://prograbi.com:443/course/lion?key1=spring&key2=summer#HavingFun
    
URLの意味と役割

プロトコル(規格)

先頭にあるhttpsはプロトコル(規格)もしくはスキーム(scheme)といいます。

https(Hyper Text Transfer Protocol Secure: エイチ・ティ・ティ・ピー・エス)を使用して通信します」という宣言で、通信手段を設定します。

Webサイトであればhttpもしくはhttpsのどちらかで通信します。
近年ではhttpより安全(Secure: セキュア)なhttpsが使用されることが推奨されており、特に利用者の個人情報やパスワードを通信する際はhttpsを使用して安全性を高める必要があります。

また、自分のパソコン内のファイルを開く場合などはfileとなったり、ファイルの通信ではftp(File Transfer Protocol: エフ・ティ・ピー)という他のプロトコルが使用されることもあります。

ドメイン名

prograbi.comはIPアドレスの代わりとなるドメイン名です。

このドメインをもとに前回学習したDNSで名前解決が行われ、公開サーバーのIPアドレスを取得します。

ドメインにはwww.prograbi.comblog.prograbi.comなどのwwwblogといったサブドメインを自由に作成することができ、それぞれに異なるIPアドレスを設定することができます。

通常www(World Wide Web: ワールド・ワイド・ウェブ)を用いた場合はprograbi.comのみの場合と同じIPアドレスに設定されます。昔からwwwは多くのWebサイトで使用されてきましたが、現在ではURLを省略するために表記しないケースも増えています。

また、https://prograbi.comもしくはhttps://www.prograbi.comとした場合、最初に取得するファイルはindex.htmlとなるのが慣習となっています。

ポート番号

443はポート番号です。プロトコルがhttpsであれば443httpであれば80であることを内部的に判断できるため省略することができます。

URLを記載する際は通常では省略されています。

ファイルパス

/course/lionは読み込むファイルが存在する場所を示します。

簡単に説明すると、course ディレクトリ(フォルダ)の中にあるlionディレクトリを参照するといった指定になります。
例えば、/course/lion/index.htmlと指定すると「courseディレクトリ内のlionディレクトリにあるindex.htmlをください」となります。

ただ、ファイル名を直接指定してアクセスするとURLが長くなるため「/course/lionへのアクセスはindex.htmlを返却する」といった設定をサーバー内で行うのが主流です。

パラメータ

サーバー内でPHPやPython、Javaなどを使用すれば、リクエストで受け取った情報をもとにWebファイルを作成して返却することができます。
このとき、ブラウザからサーバーに情報を渡す一つの手段としてURLのパラメータを使用します。

?key1=spring&key2=summerがパラメータの部分です。
ファイルパスとの区切りを示すクエッションマーク(?)から始まり、キー(key)と値(value)のペアをアンパサンド(&)で繋ぐことで複数のパラメータを設定できます。
この例では、key1というキーには「spring」という値が、key2というキーには「summer」という値が設定されていることになります。

サーバーでは、これらのパラメータを使用してDB(データベース)から情報を検索し、その結果をブラウザに返却するといったことができます。

また、JavaScriptを使用してパラメータをブラウザ上で受け取ることもできます。

アンカー

#HavingFunとなっている箇所がアンカーです。

このアンカーは「Webページ内の特定の箇所に移動する場合に利用」できます。ページ内の「しおり」のような役割を果たします。

アンカーにはHTML要素のid属性に設定した値を指定します。

次に簡単な例を掲載します。


<div id="anchor1">
    しおり
</div>
    
しおり

<a href="#anchor1">しおりに飛ぶ</a>
    

このリンクは画面上にアンカーが表示されている場合には何も動作しないため、この例では動作を確認できないかもしれません。

次は、新しいタブでページを開いてこの「しおり」の部分まで移動するリンクの例です。


<a href="https://prograbi.com/course/about-url#anchor1" target="_blank">しおりに飛ぶ</a>
    

このページ上部にある「もくじ」もアンカーを使用しています。

理解度チェック

  • プロトコルについて説明してください。
  • httphttpsの違いについて説明してください。
  • サブドメインについて説明してください。
  • animalディレクトリ内にあるcatディレクトリをパスに設定するにはどう表記しますか?
  • queryというキーにdogという値、sortというキーにascという値を指定するパラメータを設定するためにはどう表記しますか?
  • アンカーについて説明してください。

第四期生募集中

2021年2月スタートの第四期生を募集中です。
詳細は各コースをご覧ください。

分からないところは聞いてみよう

24時間いつでも質問できる

「分からない」ところを調べてもなかなか理解できないかもしれません。PROGRABIなら24時間いつでも質問できます。

モチベーションを継続する

「分からない」が続くと継続することは難しいです。PROGRABIなら毎週授業があるため継続して学習することができます。

複数人参加可能な授業

PROGRABIは複数人で授業に参加することができます。一人では気づけない疑問や問題、その解決方法など他の受講者から得られることが多くあります。

目標を達成する

コースの課題を制作することで自らの力でコーディングできる力を身に付けます。目標の達成に向けて徹底的にサポートします。