Skip to content

Webの基礎

What is a URL? - Learn web development | MDN
This article discusses Uniform Resource Locators (URLs), explaining what they are and how they're structured.
What is a URL? - Learn web development | MDN favicon developer.mozilla.org
What is a URL? - Learn web development | MDN

Webサイトは、私達がWebブラウザを使って、WebサーバーからHTMLやCSSなどのファイルを受け取って処理することで表示している。
HTTP は、 HTMLやCSSなどのWebサイトを表示するためのファイルを読み取るためのプロトコル(通信規則)。

URLの先頭に よく、http:// という文字列があるが、これがHTTPプロトコルを使用していることを示している。
https://はHTTPの暗号化バージョン。

サーバーにHTTPでリクエストを送り、ファイルをもらう側をクライアントという。
クライアントは、ChromeやSafariなどのブラウザーの他にcurlというCUI上のものなど様々なものがある。

サーバーは、ApacheやNginxのようなWebサーバーを使う、またはNode.jsのexpressなどのサーバーフレームワークと呼ばれるものを用いて作ることができる。

HTTP リクエスト

クライアントがサーバーに操作を要求する際に送信されるのがHTTP リクエスト
HTTP Request

メソッド (Method)

メソッドは、クライアントがサーバーに対して行いたい操作を示す。
以下のような種類があり大体以下のような意味である。

  • GET
    • HTMLファイルや画像などのファイルや、ユーザー情報などのデータを取得する。
    • 情報を取得するだけで、サーバーのデータを変更しない。
  • POST
    • ユーザーが入力した情報をサーバーに送信する。
    • 新しくデータを作成するなど、サーバーのデータを変更する。
  • DELETE
    • サーバーのデータを削除する。
  • 他にはPUT、PATCHなどがある。

パス (Path)

どこにアクセスするかを示す。
/ で始まり、サーバー上のファイルやディレクトリを示す。

ヘッダー (Header)

リクエストに関する情報を含む。
以下はヘッダーの例。

  • Host
    • リクエストを送信するサーバーのホスト名
    • 例: Host: developer.mozilla.org
    • ポートはデフォルトのポートであれば省略できる。
  • User-Agent (UA)
    • リクエストを送信したクライアントの情報を含む。
    • 例: User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3
    • この情報からWebサーバーは、リクエストを送信したクライアントがどのようなブラウザーを使用しているかを知ることができる。
  • Authorization
    • リクエストを送信するユーザーの認証情報を含む。
    • 例: Authorization: Bearar <認証情報>
    • Webサーバーは<認証情報>を調べユーザーが認証されているかを確認する。

ボディ (Body)

省略可能。
POSTで送信するデータの本体など。

HTTP レスポンス

サーバーがクライアントに対して返すデータがHTTP レスポンス
HTTP Response

ステータスコード (Status Code) / ステータスメッセージ (Status Message)

HTTP レスポンスには、リクエストが成功したかどうかを示すステータスコードとその意味のステータスメッセージが含まれる。
よく見るステータスコード/メッセージは 404 Not Foundなどがあると思う。
ステータスコード/メッセージは以下のような意味がある。

  • 1xx: 情報
    • リクエストを受け取り、処理中。
  • 2xx: 成功
    • リクエストが成功した。
    • 200: OK
  • 3xx: リダイレクト
    • リクエストを完了するために追加の処理が必要。
    • 301: Moved Permanently (永続的に移動)
    • 302: Found (一時的に移動)
  • 4xx: クライアントエラー
    • クライアントのリクエストに誤りがある。
    • 存在しないページにアクセスした場合やログインしていない場合など。
    • 400: Bad Request (リクエストが不正、またはサーバーが理解できない)
    • 401: Unauthorized (認証が必要)
    • 403: Forbidden (アクセス権がない)
    • 404: Not Found (ページが見つからない)
  • 5xx: サーバーエラー
    • サーバーがリクエストを処理できない。
    • サーバーがダウンしている場合など。
    • 500: Internal Server Error (サーバー内部エラー)

ボディ (Body)

省略可能。
レスポンスに含まれるデータ。
ファイルの中身など。

URL

https://naotiki.mehttps://google.com など私達が普段目にする「URL」。
実はURLは以下の図のように様々なパーツに分かれている。
URLを構成するもの
本節ではURLを各パーツごとに解説していく。

スキーム (Scheme)


通常、私達が目にするWebサイトは

  • HTTP
  • HTTPS (安全)

のどちらかの方法(プロトコル)を通して配信されている。
スキームでは、httphttpsのようにどの方法を使用して通信しているかを示している。
現代において、インターネット上に公開されているWebページのほとんどはHTTPよりも安全なHTTPSを介して配信されている。

オーソリティ (Authority)


スキームの次に続くのは ドメイン名 (Domain Name) ポート (Port)からなるオーソリティという部分。スキームとオーソリティは://で区切られている。

ホスト (Host) / ドメイン名 (Domain Name)

ホストは、HTTPサーバーがいるコンピューターを指す。
IPアドレスでもいいし、ドメイン名でもいい。
ドメインは naotiki.meexample.com のような文字列。
インターネット上で完全に一意な名前である。
レジストラから(クレジットカードやデビットカードがあれば)誰でも買える。
おすすめは Cloudflare。

開発時、自分のPC上でサーバーを立てる場合は 自身のコンピューターを指す、localhost127.0.0.1を使用する。

ポート (Port)

どのポートにHTTPリクエストを送信するかを示す。
HTTP(S)にはデフォルトのポートがあり、HTTPは80番、HTTPSは443番。
デフォルトのポートを使用する場合は省略することができる。

開発時には 8080 や 3000 などのポートを使用することが多い。

パス (Path)

初期のWebではサーバー上にある実際のファイルへのパスを示していたが、現在ではパスはWebサーバーによって処理される抽象的なものになっている。

「抽象的なもの」とは?

元々、HTTPはファイルをダウンロードするためのプロトコルだった。そのため、URLはファイルの場所をそのまま示すものだった。

例えば http://example.com/files/example.txt というURLは、example.comのサーバー上にあるfilesディレクトリのexample.txtというファイルをダウンロード(表示)することを表す。

しかし、Webサイトが複雑になり、データベースからデータを取得して処理してから表示するようになると、URLはファイルの場所を示すだけでなく、データベースからデータを取得するための情報を含むようになった。

例:
https://x.com /Naotiki13/status/1813753684838510978

実際のサーバーに/Naotiki13/status/1813753684838510978というファイルがあり、そこに

実績解除
YubiKey洗濯

と書かれているわけではない。
サーバーはリクエストにあるこのパスを見て、「Naotiki13」さんのポストID「1813753684838510978」を見たいんだなと解釈しデータベースからデータを取得し、処理をしてから返している。

クエリパラメーター (Query Parameter)


Webサーバーに提供される追加の引数のようなもの。なんの値かを表す「Key」とその値の中身を表す「Value」を=記号で結び、複数のパラメーターは&記号で区切られる。

例えば、https://example.com/search?q=hello&lang=ja というURLは、example.com というサイトの search というページに、q というキーに hello という値、lang というキーに ja という値を渡している。
サーバーはこれらの値を見て、hello というキーワードで ja という言語で検索結果を返すように処理する。

アンカー (Anchor)

アンカーは、ページ内の特定の場所を指すために使用される。
基本的にはHTML内のid属性で指定された要素を指す。
サーバーではなく、ブラウザーなどのクライアントが処理する。

例えば、https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#anchor というURLは、developer.mozilla.org というサイトの What_is_a_URL というページの anchor というアンカーを指している。
ブラウザーはWhat_is_a_URL内のanchorというidを持つ要素を探し、その要素が表示されるように自動でスクロールする。

2つの挙動の違いを実際のページで実感しよう。

#anchorあり

#anchorなし

#anchorあり の方は、自動でスクロールされているのがわかるだろう。

ちなみに、

  • 要素: ページを構成する一部分
  • ID: 要素に指定できる一意の名前

である。具体的な説明は次章のHTMLの基礎で行う。

参考文献

URL とは何か - ウェブ開発を学ぶ | MDN
この記事では URL (Uniform Resource Locator) について説明し、その内容と構造を説明します。
URL とは何か - ウェブ開発を学ぶ | MDN favicon developer.mozilla.org
URL とは何か - ウェブ開発を学ぶ | MDN
HTTP の概要 - HTTP | MDN
HTTP は、 HTML 文書などのリソースを読み取るためのプロトコルです。 これはウェブにおけるデータ交換の基礎をなし、クライアントサーバープロトコルであり、リクエストは受け取り者(一般にはウェブブラウザー)が生成します。 文書全体は、テキストコンテンツ、レイアウト指示、画像、動画、スクリプトなどのリソースから構成されます。
HTTP の概要 - HTTP | MDN favicon developer.mozilla.org
HTTP の概要 - HTTP | MDN