ROOTFUL

CORSとは？設定方法やプリフライトについてわかりやすく解説！

Wed, 13 Nov 2024 00:00:00 GMT

この記事で解決できるお悩み

CORSエラーが出たけど意味がわからない...
CORSの設定方法は？
プリフライトリクエストって何？

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

この記事ではCORSとは何か、CORSの設定方法などを初心者にもわかりやすく解説します。

この記事を読み終えれば、CORSエラーが出ても慌てることはなくなりますよ！

CORS（オリジン間リソース共有）とは？

CORSとはCross-Origin Resource Sharingの略で、日本語ではオリジン間リソース共有と呼ばれます。

一言で表すと、異なるオリジンとのリソースのやり取りを可能にする仕組みです。

といってもよくわからないと思うので、順を追って説明していきます。

オリジンとは

まずはオリジンとは何か説明します。

オリジンとはURL内のスキーム+ホスト+ドメイン+ポート番号のことです。

ただしポート番号は一般的に省略されるので、下の例だとhttps//www.hogehoge.comがオリジンになります。

同一オリジンポリシー（SOP）とは

CORSを理解する上で欠かせない知識として、同一オリジンポリシーがあります。

同一オリジンポリシーは、英語ではSame-Origin Policyの略でSOPと呼ばれます。

一言で言うと、あるオリジンから取得したリソースから別のオリジンのリソースの取得を禁止するブラウザの仕組みです。

リソース = ファイルやデータのことです。

例えばhttps://aaaaa.comのページにアクセスしたとしましょう。

その状態で同一オリジンであるhttps://aaaaa.com/image.pngから画像ファイルを取得して表示することは問題ありません。

しかしオリジンが違うhttps://bbbbb.com/image.pngから画像ファイルを取得しようとすると、エラーが発生し画像を表示することができません。

これが同一オリジンポリシーです。

同一オリジンポリシーによって不正な処理が行われたりなどの被害を防ぐことができます。

CORSとは

では改めてCORS（オリジン間リソース共有）とは何かを説明します。

同一オリジンポリシーによってセキュリティが高まるのは良いことですが、自分のブログ記事にYouTubeの動画を埋め込みたい時など、別オリジンのリソースを読み込みたい時はよくあります。

そんな時、YouTubeが「このオリジンならリソース使わせてやってもいいよ」とCORSの設定を行うことで異なるオリジンでもYouTubeのリソースを使用することが可能になります。

つまり、標準では異なるオリジン間でのリソースのやり取りは禁止されているため、例外的に特定のオリジンとのリソースのやり取りを可能にするための仕組みがCORSということです。

CORSの設定方法

ここからは具体的にCORSをどう設定するかを説明します。

特定のオリジンとのリソースのやり取りを許可するにはレスポンスにAccess-Control-Allow-Originヘッダを指定する必要があります。

レスポンス？ヘッダ？となる方は先にこちらの記事を読むことをおすすめします。

[st-postgroup html_class="" id="832" rank="0"]

https://aaaaa.comからのリソースの読み込みを許可したい時はこのようにレスポンスヘッダを指定します。

Access-Control-Allow-Origin: https://aaaaa.com

全てのオリジンからのアクセスを許可する場合には*を設定できます。

Access-Control-Allow-Origin: *

CORSを使用したリクエストの種類

CORSを用いたリクエストには主に2種類あります。

シンプルリクエスト（単純リクエスト）
プリフライトリクエスト

それぞれ詳しく説明します。

シンプルリクエスト

リクエストがサーバーの情報に影響を与えないと考えられる場合、直接そのリクエストを送信します。

これをシンプルリクエストと呼びます。

条件

シンプルリクエストを送信するには以下のような条件を満たす必要があります。

メソッドが以下のいずれか
GET, HEAD, POST
ヘッダーは以下のみ
Accept, Accept-Language, Content-Language, Content-Type, Range
Content-Typeヘッダーで指定されるTypeは以下のみ
application/x-www-form-urlencoded, multipart/form-data, text/plain

その他の条件に関してはオリジン間リソース共有 (CORS) - HTTP | MDNを参照してください。

確認方法

CORS のプリフライト・リクエストを観察するを参考に、シンプルリクエストを確認する方法を説明します。

シンプルリクエストを送信し、デベロッパーツールで確認してみます。

デベロッパーツールの開き方
F12orCtrl + Shift + i（Windowsの場合）orCmd + Option + I（Macの場合）

すると以下のように、送信しているリクエストは1つだけであることがわかります。

プリフライトリクエスト

リクエストがサーバーの情報に影響を与える可能性がある場合、本命のリクエストを送る前にそのリクエストを送って問題ないか確認する用のリクエストを送信します。

これをプリフライトリクエストと呼びます。

プリフライトリクエストはOPTIONSメソッドで送信されます。

プリフライトリクエストの例は以下のようになります。

OPTIONS /doc HTTP/1.1
...
Origin: https://aaaaa.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type,original-header

上の例のように、プリフライトリクエストには送信したいリクエストの情報としてOriginとAccess-Control-Request-Method、Access-Control-Request-Headersをヘッダーに含める必要があります。

これらのヘッダーで、送信したいリクエストがどのメソッドで何のヘッダーを持っているかをサーバーに伝えます。

このリクエストに対して、このようなレスポンスが返ってきます。

HTTP/1.1 204 No Content
...
Access-Control-Allow-Origin: https://aaaaa.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Original-Header, Content-Type

Access-Control-Allow-Originでアクセス可能なオリジンを、Access-Control-Allow-Methodsで送信可能なメソッドを、Access-Control-Allow-Headersで指定可能なヘッダーを設定しています。

今回の例では全て問題ないので続けて実際のリクエストを送信できますが、このチェックに引っかかってしまった場合は不正なリクエストとみなされ本命のリクエストを送信することはできません。

確認方法

シンプルリクエストと同じく、プリフライトリクエストを確認してみましょう。

プリフライトを発生させるリクエストを送信し、デベロッパーツールで確認してみます。

すると以下のように2つのリクエストを送信していることがわかります。

それぞれのリクエストを詳しくみてみると以下のようにOPTIONSメソッドリクエストが送信された後、GETメソッドリクエストが送信されていることがわかります。

このようにプリフライトリクエストでは、先にOPTIONSメソッドで本命のリクエストを送信して問題ないか確認し、問題なければ本命のリクエストを送信するという流れをとります。

まとめ

この記事ではCORSとは何か、CORSの設定方法、CORSを使ったリクエストの種類を説明しました。

最後にもう一度ポイントをまとめておきます。

CORSとは異なるオリジンとのリソースのやり取りを可能にする仕組み
Access-Control-Allow-Originヘッダーを指定することでCORSを設定できる
CORSを使ったリクエストにはシンプルリクエストとプリフライトリクエストの2種類がある

HTTPについてより詳しく勉強したい！という方向けに、おすすめの教材を紹介します。

Webを支える技術 -HTTP、URI、HTML、そしてREST

こちらの本は正直初心者にとってはやや難しい内容もあります。

ですがHTTPやステータスコードについて非常に詳しく書かれているため、当ブログなどで簡単に理解した後にさらに理解を深めるための教材として活用してみてください！

参考
オリジン間リソース共有 (CORS) - HTTP | MDN
同一オリジンポリシー - ウェブセキュリティ | MDN
オリジン間リソース共有 (CORS)とは
 CORS のプリフライト・リクエストを観察する

HTTPとは？仕組み、HTTPSとの違いについてわかりやすく解説

Thu, 07 Nov 2024 00:00:00 GMT

この記事で解決できるお悩み

HTTPって何...？
HTTPを理解するには何を勉強すればいいの？
HTTPとHTTPSの違いは？

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

この記事ではHTTPとは何か、HTTPの仕組みなどを初心者にもわかりやすく解説します！

この記事を読めばHTTPについての理解を深めることができますよ！

HTTP（HyperText Transfer Protocol）とは

一言で言うと、インターネット通信のルールです。

私が英語で、あなたが日本語で会話しても意味が通じませんよね？

それと同じで、インターネット通信も共通のルールに基づいて行う必要があります。

その「インターネット通信のルール」として定められているのがHTTPです。

ただし、インターネット通信のルールにはHTTP以外にもDNSやFTPなどがあるため、HTTPはそのうちの1つです。

HTTPはホームページを見るために必要なファイルの受け渡しについてのルールを定めています。

HTTP（HyperText Transfer Protocol）をざっくり日本語に訳すと
HyperText = ホームページ用のファイルを
Transfer = 送受信する
Protocol = ルール
となります。

HTTPの全体像

HTTPについて詳しく解説する前に、HTTPの全体像を説明します。

詳しくは後ほど説明するので、まずはなんとなく眺めてみてください。

この記事ではHTTPを理解する上で欠かせない以下5つについて解説します。

クライアント・サーバー
リクエスト・レスポンス
HTTPメソッド
ステータスコード
Cookie

クライアント・サーバー

HTTPを使用したインターネット通信は、クライアントとサーバーと呼ばれる機器の間で行われます。

我々がブラウザや動画を見るときに使うスマホやPCのように、サービスや機能を利用する側の機器のことをクライアントと呼びます。

一方で、Webページやアプリケーションなどのソースコードやデータを持ち、クライアントにサービスや機能を提供する側の機器のことをサーバーと呼びます。

今あなたはインターネットを利用してこのページを見ていますが、今このページを見ているあなたのスマホやPCはクライアントになります。

そしてこのページのHTMLファイルや画像ファイルなどを提供している機器がサーバーになります。

このように、インターネットを利用する際はクライアントとサーバーの2者間で通信が行われます。

リクエスト・レスポンス

HTTP通信はクライアントとサーバーの間で行われることは説明しました。

その時、クライアントからサーバーへ送られる「◯◯のページが見たいです」「◯◯の機能を利用したいです」などのお願いのことをリクエストと呼びます。

それに対し、「お求めのページ/機能はこちらですよ」のようにリクエストに対しての応答をレスポンスと呼びます。

リクエスト・レスポンスは以下のように、それぞれ決まった形式に沿ってメッセージをやり取りすることで行われます。

下記の例で使われているHTTP/1.1は比較的古いバージョンで、現在の主流はHTTP/2、HTTP/3です。
リクエスト・レスポンスの形式は違いますが基本的な部分は同じなため、この記事ではHTTP/1.1を参考にしています。

リクエスト

POST /test HTTP/1.1
Host: example.com
Content-Length: 12
Content-Type: application/x-www-form-urlencoded
<div></div>
testtesttest

POST /test HTTP/1.1
Host: example.com
Content-Length: 12
Content-Type: application/x-www-form-urlencoded

testtesttest

上2行で「どんなリクエストをどのサーバーに送るか」を指定しています。

2~4行目はヘッダと呼ばれ、リクエストの送信元や送信するデータのサイズなどの追加情報を付与することができます。

クライアントからサーバーに向けて何かデータを送信する場合は、ヘッダから1行あけてリクエストボディが追加されます。

レスポンス

HTTP/1.1 200 OK
Date: Thu, 26 Sep 2024 09:16:25 GMT
Vary: Accept-Encoding
Content-Type: text/html; charset=UTF-8
<div></div>
<!DOCTYPE html>
<html lang="ja" class="s-navi-right s-navi-search-overlay ">
...
</body></html>

HTTP/1.1 200 OK
Date: Thu, 26 Sep 2024 09:16:25 GMT
Vary: Accept-Encoding
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html lang="ja" class="s-navi-right s-navi-search-overlay ">
...
</body></html>

先頭の行には「リクエストが成功したかどうか」が書かれています。

2~4行目はリクエストと同じくヘッダです。

そしてレスポンスの値として返したいデータがレスポンスボディとして設定されます。

リクエスト・レスポンスについての詳しい解説はこちらの記事でしています。

[st-postgroup html_class="" id="832" rank="0"]

HTTPメソッド

HTTPメソッドとはリクエストの種類を表します。

リクエストの例だとPOSTの部分がHTTPメソッドになります。

ここまでで説明したように、HTTP通信ではクライアントからサーバーに向けてリクエストを送ることでWebページを閲覧するなどのサービスや機能を利用することができます。

ですが実際にはWebページ閲覧だけでなく、ファイルを更新したりフォーム送信したりと、リクエストにはいくつか種類があります。

「◯◯のページが見たいです」「◯◯のデータを送ります」「◯◯のファイルを削除してください」などのリクエストに名前をつけたものがHTTPメソッドです。

主に使われるメソッドはGETとPOSTの2種類ですが、全て含めると9種類あり、それぞれの詳しい内容を知りたい方はこちらの記事がおすすめです。

[st-postgroup html_class="" id="779" rank="0"]

ステータスコード

ステータスコードとはリクエストが成功したか、失敗したかどうかを表す3桁の数字です。

ステータスコードは100番台~500番台の大きく5つに分けられており、それぞれ大まかな内容が決まっています。

そのため、先頭の数字を見れば通信が成功したか失敗したかを判断することができます。

1xx : 処理中
2xx : 成功
3xx : リダイレクト
4xx : クライアントエラー
5xx : サーバーエラー

ステータスコードは送信されたリクエストの結果として、レスポンスとして返却されます。

レスポンスの例で言うと赤枠の部分です。

それぞれのステータスコードの詳しい解説はこちらの記事でしています。

[st-postgroup html_class="" id="740" rank="0"]

Cookie

Cookieはユーザーの状態を維持したり管理するための仕組みです。

HTTPではリクエストとレスポンスの1往復で通信が完結し、前回のリクエスト・レスポンスの内容を記録することはしません。

そのため、「5分前に〇〇のサイトにログインした」「ショッピングカートに商品を追加した」などの状態を維持することができません。

するとアクセスの度に毎回ログインしなくてはいけない、商品をカートに入れたはずなのに消えてしまうなどなど、大変面倒なことになってしまいます。

そんな面倒をなくすため使われるのがCookieという仕組みです。

Cookieを使うとサーバーから受け取った情報をブラウザに保存することができ、その情報をリクエストと一緒に送ることで以前ログインしたことのあるユーザーであることの証明などを行うことができます。

下記はログインが必要なサイトにアクセスする場合のCookieの流れです。

ログインをするとサーバーからCookie情報としてユーザーIDのようなものが渡され、それをブラウザに保存します。

2回目以降のアクセスではそのCookieを付与してリクエストを送ることで再度ログインすることなくサービスを利用することができます。

Cookieについての詳しい説明はこちらの記事でしています。

[st-postgroup html_class="" id="872" rank="0"]

HTTPとHTTPS（HyperTest Transfer Protocol Secure）

インターネットでサイトを見るとき、URLの先頭に「http://」や「https://」がついているのを見たことがあると思います。

これらはそれぞれ「HTTPプロトコルで通信するよ」「HTTPSプロトコルで通信するよ」ということを意味します。

これらの違いは通信が暗号化されているかどうかです。

HTTPプロトコルでは通信内容が暗号化されないため、パスワードやクレジットカード情報などが簡単に盗まれてしまいます。

一方でHTTPSは通信内容を暗号化してくれるため、通信を盗み見たとしても簡単に情報を盗むことはできません。

そのため現在ではHTTPSが主流となっており、HTTPを使用しているサイトは危険なためできる限り利用しない方が良いでしょう。

まとめ

この記事ではHTTPとは何か、HTTPを理解するために必要な知識について解説しました。

全体を理解してもらうため細かい説明は省いたので、詳細はそれぞれの記事を読んでもらうか他のサイトや参考書で調べてみてください！

最後にポイントをまとめます。

HTTPとはインターネット通信のルールである
HTTP通信はクライアントとサーバーの2者間でやり取りが行われる
クライアントからサーバーへの通信をリクエスト、サーバーからクライアントへの通信をレスポンスと呼ぶ
HTTPメソッドはリクエストの種類を表す
ステータスコードはリクエストが成功か失敗かを表す数字である
Cookieはユーザーの状態を維持・管理するための仕組み
HTTPSは通信内容が暗号化されるため安全に通信ができる

最後に「HTTPについてもっと知りたい！」という方向けにおすすめの教材を紹介します。

Webを支える技術 -HTTP、URI、HTML、そしてREST

こちらの本は正直初心者にとってはやや難しい内容もあります。

HTTPセッションとは？関連知識から初心者にもわかりやすく解説！

Thu, 24 Oct 2024 00:00:00 GMT

この記事で解決できるお悩み

セッションって何...？
セッションの仕組みは？
セッションとCookieってどういう関係？

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

この記事ではセッションとは何か、その仕組みなどについて初心者向けにわかりやすく解説します！

この記事を読み終えれば、セッションについての理解を深めることができますよ！

セッションとは？

一言で言うと、ユーザーの状態を維持して行う一連の処理のことです。

例えばあなたがショッピングサイトにログインして以下の操作を行ったとします。

商品検索
カートに入れる
購入
カード情報変更

これらの処理をまとめてセッションと呼びます。

つまり、あなたがログインして行う全てのアクションを1つのまとまりとして管理するものです。

セッションの仕組みを使うことで、商品の閲覧履歴やカートの中身を維持したりすることが可能になります。

セッションに関わる知識

といってもよくわからないと思うので、順を追って説明します。

HTTP

英語と日本語の会話では意味が通じないように、インターネット通信も共通のルールに基づいて行う必要があります。

その「インターネット通信のルール」として定められているのがHTTPです。

セッションもHTTPの上に成り立っています。

クライアント・サーバー

HTTP通信における重要な要素として、クライアントとサーバーがあります。

HTTPでは、スマホやPCなどのインターネットを利用する側であるクライアントと、Webページやアプリケーションなどのソースコードやデータを持ち、クライアントに提供するサーバーの2者間で通信が行われます。

クライアントは「◯◯のページが見たいです」などのお願いをサーバーに送り、サーバーはそれを受けて「これが◯◯のページです」と応答することで、クライアント、つまり我々ユーザーはWebページを閲覧することができます。

この時のクライアントからサーバーに対するお願いをリクエスト、サーバーからクライアントへの応答をレスポンスと呼びます。

ステートレスな通信

HTTPではリクエストとレスポンスの1往復で通信が完結します。

つまり「5分前に〇〇のサイトにログインした」「ショッピングカートに商品を追加した」などの状態を維持することができません。

このようにクライアントの状態を維持できないことをステートレスと呼びます。

ステートレスな通信では、アクセスの度に毎回ログインしなくてはいけない、カートに入れたはずなのに消えてしまうなどなど、大変面倒なことになってしまいます。

そこで、クライアントの状態を維持した状態で通信を行うために使われるのがセッションの仕組みです。

Cookie

セッションを実現する上で欠かせないのがCookieです。

一言で言うと、Cookieとはユーザーの状態を維持したり管理するための仕組みです。

Cookieはログインした時などにサーバーからクライアントに送信され、クライアント側（ブラウザ）で保存されます。

そして再度同じサーバーにアクセスした時に保存していたCookieをサーバーへ送ることで、以前ログインしたことのあるユーザーであることを証明できます。

Cookieについてより詳しく知りたい方はこちらの記事がおすすめです。

[st-postgroup html_class="" id="872" rank="0"]

セッションの仕組み

それでは実際にセッションがどのようにして実現されているか説明していきます。

ここではログインが必要なサイトにアクセスする場合を例に挙げて説明します。

初回アクセス

まずクライアントがログインすると、サーバーへリクエストが送信されます。

するとリクエストを受け取ったサーバーはセッションファイルと呼ばれるものを作成します。

その際、セッションファイルにセッションIDと呼ばれるユーザー番号のようなものと、ユーザーの情報を記録します。

そしてSet-CookieヘッダにセッションIDを付与してレスポンスを返却します。

それを受け取ったクライアントはブラウザにセッションIDをCookieとして保存します。

ヘッダとはリクエスト・レスポンスに付与できる追加情報のようなものです。
詳しくは以下の記事で解説しています。

[st-postgroup html_class="" id="832" rank="0"]

2回目アクセス

再度同じサイトにアクセスすると、クライアントは保存してあるCookieをCookieヘッダに付与してサーバーに送信します。

Cookieの中のセッションIDを取得したサーバーはそれをセッションファイルと照合し、対象のユーザー情報があればログイン済みと判断します。

そうすることで、サーバーはユーザーがログイン済みか判断することができます。

ログイン判定後はそのユーザーに適したコンテンツをクライアントに返却します。

まとめ

この記事ではセッションとは何か、セッションに関わる知識と仕組みについて解説しました。

この記事でセッションについての理解が少しでも深まってくれたら嬉しいです！

最後にもう一度ポイントをまとめておきます。

セッションとはユーザーの状態を維持して行う一連の処理のこと
セッションはCookieを使うことで実現できる
セッションファイルでユーザー情報を管理し、セッションIDをやり取りすることで認証ができる

最後に「HTTPについてもっと知りたい！」という方向けにおすすめの教材を紹介します。

Webを支える技術 -HTTP、URI、HTML、そしてREST

こちらの本は正直初心者にとってはやや難しい内容もあります。

参考
【初学者向け】セッションの概念と仕組みをCookie抜きで説明する #HTTP - Qiita
セッション管理 #HTTP - Qiita

HTTP Cookieとは？用途や確認方法含めわかりやすく解説！

Sat, 12 Oct 2024 00:00:00 GMT

この記事で解決できるお悩み

Cookieってよく聞くけど何かよくわからない...
Cookieって何に使われるの？
Cookieの確認方法が知りたい

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

この記事ではCookieとは何かの説明から始まり、用途や確認方法まで初心者にもわかりやすく解説します。

この記事を読み終える頃にはCookieについての理解が深まっているはずです！

Cookieとは？

一言で言うと、Cookieとはユーザーの状態を維持したり管理するための仕組みです。

と言ってもよくわからないと思うので順を追って説明します。

まずはCookieの土台となるHTTPについてです。

HTTP（HyperText Transfer Protocol）とは

英語と日本語の会話では意味が通じないように、インターネット通信も共通のルールに基づいて行う必要があります。

その「インターネット通信のルール」として定められているのがHTTPです。

CookieもHTTPの中で定められているルールの1つです。

HTTP通信の流れ

HTTP通信における重要な要素として、クライアントとサーバーがあります。

HTTPでは、スマホやPCなどのインターネットを利用する側であるクライアントと、Webページやアプリケーションなどのソースコードやデータを持ち、クライアントに提供するサーバーの2者間で通信が行われます。

しかしHTTPはステートレスな通信、つまり「5分前に〇〇のサイトにログインした」などの状態を維持せずに通信を行います。

そうなると、同じサイトにアクセスしてもサーバーからはクライアントがログイン済みかどうか判断できず、アクセスの度に毎回ログインしなくてはいけなくなり大変面倒です。

そんな面倒をなくすため使われるのがCookieという仕組みです。

Cookie = ユーザーの情報を維持・管理するための仕組み

Cookieを使うことで「サイトにログインした」「〇〇のサイトにアクセスした」などのユーザーの状態を維持することができます。

そうすることで、一度ログインしたサイトに再びアクセスした時にまたログインする必要がなくなったり、今まで閲覧したサイトの情報から自分に合った広告を表示してくれたりといったことが可能になります。

ここまでの説明でCookieとはユーザーの状態を維持したり管理するための仕組みという意味がわかったでしょうか。

Cookieを使った通信の流れ

ここからは具体的にCookieがHTTP通信の中でどのように使われるのかを説明します。

クライアントがログインすると、サーバーはログインした証明としてCookie情報をクライアントに送信します。

それを受け取ったクライアントはCookie情報をブラウザに保存し、再度アクセスした時にそのCookie情報をサーバーに送信します。

するとサーバーは「この前ログインした奴だな」と判断して、ログイン済みユーザー向けのページを表示する、といった流れになります。

上の図ではこの記事では説明していないワードがいくつかあるので簡単に説明します。

①ヘッダ ... クライアントからサーバーへのリクエスト、サーバーからクライアントへのレスポンスに付加できる追加情報
②リソース ... サーバーからクライアントに渡されるファイルやデータのこと

リクエスト・レスポンス、ヘッダなどについて詳しく知りたい方はこちらの記事がおすすめです。

[st-postgroup html_class="" id="832" rank="0"]

Cookieの中身

それでは次にCookieにはどんな情報が入っているか説明します。

サーバーからクライアントへ送られるSet-Cookieヘッダは以下のような形式で送られます。

Set-Cookie: id=1234abcd; Path=/; Domain=example.com

この例のid、Path、Domainなどを属性と呼び、各属性にはCookieの情報を付与することができます。

Set-Cookieヘッダに定義できる主な属性はこちらです。

属性	説明
Name	Cookieの名前と値（ヘッダの先頭に置かれ、属性名はNameでなくても可）
Expires	Cookieの有効期限を日時で指定
Max-Age	Cookieの有効時間を秒数で指定
Domain	Cookieが有効なドメイン範囲の指定これに `sosotech.info` が指定されている場合、それ以外のドメインでは有効なCookieとして扱われない
Path	Cookieが有効なパスの範囲を指定これに `/http/cookie（この記事のパス）` が指定されている場合、それ以外のページでは有効なCookieとして扱われない
Secure	HTTPS通信時にのみCookieを送信
HttpOnly	CookieをJavaScriptからアクセスできないよう制限

Cookieの用途

ではCookieは実際にどんなことに使われるのでしょうか？

ここではCookieの主な用途を3つ紹介します。

セッション管理（Session Management）
パーソナライゼーション（Personalization）
トラッキング（Tracking）

セッション管理（Session Management）

Cookieを使ってログイン状態を維持することができます。

あなたがログインすると、サーバーからクライアントへSet-Cookieヘッダが送信され、クライアントはそれをブラウザに保存します。

そしてまた同じサイトにアクセスした時に、先ほど保存したCookieをサーバーへ送信することでCookieの有効期限中であればログインなしでアクセスすることができます。

パーソナライゼーション（Personalization）

Cookieを使用することでユーザーの利便性を高めることができます。

あなたがログインフォームを送信した時に、ユーザー名がCookieに保存されます。

すると再度ログインしようとした時にユーザー名の欄に自動的に前回入力した内容を表示するといったことができます。

トラッキング（Tracking）

Cookieを使用することでユーザーごとに特化した広告表示ができます。

もしあなたがプログラミングスクールのサイトにアクセスした場合、そのサイトにアクセスしたという履歴がCookieに保存されます。

その後トラッキングを行う別のサイトにアクセスすると、あなたが興味のあるプログラミングスクールの広告を表示するといったことができます。

トラッキングは全てのサイトで行われるわけではありません。
また、ブラウザの設定でトラッキングを許可しないよう設定することもできます。

Cookieの種類

Cookieには大きく分けて2種類あります。

ファーストパーティクッキー（1st Party Cookie）
サードパーティクッキー（3rd Party Cookie）

ファーストパーティCookie（1st Party Cookie）

アクセスしたドメインから発行されたCookieのことです。

例えばこのブログのドメインはsosotech.infoですが、このブログにアクセスした時に発行されたDomain=sosotech.infoのような属性を持つCookieはファーストパーティCookieに分類されます。

サードパーティCookie（3rd Party Cookie）

アクセスしたドメインとは別のドメインから発行されたCookieのことです。

例えばブログに広告が表示されることがありますが、あれは広告用のサーバーが提供しているものです。

そのためCookieを発行するドメインも別となり、サードパーティCookieに分類されます。

サードパーティCookieを使うことで前述したトラッキングをすることができます。

このブログにアクセスしてhogehogead.comからCookieが発行された後に別のサイトにアクセスしたとします。

その時にまたhogehogead.comが提供する広告が表示されていた場合、ブラウザに保存されていたCookieが広告Webサーバーに送信され、このブログにアクセスした履歴があることがわかります。

そうしてユーザーに特化した広告を表示するといった流れです。

別のサイトを見ているのに同じような広告が表示されるのはこういった仕組みの元に成り立っています。

ドメインについて詳しく知りたい方はこちらの記事がおすすめです。

[st-postgroup html_class="" id="617" rank="0"]

Cookieの確認方法

それでは、実際にブラウザに保存されているCookieの確認方法を説明します。

ここではChromeを使った確認方法を説明します。

F12orCtrl + Shift + i（Windowsの場合）orCmd + Option + I（Macの場合）を押してデベロッパーツールを開く
「Application」を選択
「Storage」欄にある「Cookie」を開き、閲覧したいドメインをクリック
すると、右側にそのドメインから発行されたCookie情報を一覧で見ることができます。

まとめ

この記事ではCookieとは何か、Cookieの用途、Cookieの確認方法などについて解説しました。

Cookieについての理解が少しでも深まってくれれば嬉しいです。

最後にもう一度ポイントをまとめておきます。

Cookieとはユーザーの状態を維持したり管理するための仕組み
Cookieの主な用途はセッション管理、パーソナライゼーション、トラッキングの3つ
CookieはファーストパーティCookieとサードパーティCookieに分類できる

最後に「HTTPについてもっと知りたい！」という方向けにおすすめの教材を紹介します。

Webを支える技術 -HTTP、URI、HTML、そしてREST

こちらの本は正直初心者にとってはやや難しい内容もあります。

参考
HTTP Cookie（クッキー）とは
 HTTP Cookie の使用 - HTTP | MDN

HTTPリクエスト・レスポンスとは？仕組みをわかりやすく解説

Sat, 28 Sep 2024 00:00:00 GMT

この記事で解決できるお悩み

HTTPのリクエスト、レスポンスって何...?
リクエストとレスポンスをどうやって確認したら良いかわからない
リクエストとレスポンスの内容を理解できるようにしたい

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

この記事ではリクエスト・レスポンスとは何か？それぞれの内容について初心者向けにわかりやすく解説します。

この記事を読み終えれば、リクエスト・レスポンスを見てどんなデータが受け渡しされているか理解できるようになりますよ！

リクエスト・レスポンスとは？

リクエストとは、クライアントからサーバーに送られるお願いのことです。

レスポンスはそのお願いを受けて、サーバーからクライアントに送られる応答のことです。

クライアント？サーバー？となる方向けに順を追って説明しますね。

HTTP（HyperText Transfer Protocol）とは？

英語と日本語の会話では意味が通じないように、インターネット通信も共通のルールに基づいて行う必要があります。

その「インターネット通信のルール」として定められているのがHTTPです。

リクエスト・レスポンスもHTTPの中で定められているルールの1つです。

HTTP通信の流れ

HTTP通信における重要な要素として、クライアントとサーバーがあります。

クライアントは「◯◯のページが見たいです」などのお願いをサーバーに送ります。

これがリクエストです。

サーバーはそれを受けて「これが◯◯のページです」と応答することで、クライアントはWebページを閲覧することができます。

これがレスポンスです。

リクエスト

それでは実際にクライアントからサーバーへ送られるリクエストの中身を見てみましょう。

POST /test HTTP/1.1
Host: example.com
Content-Length: 23
Content-Type: application/x-www-form-urlencoded

key1=value1&key2=value2

このリクエストには下記の要素が含まれています。

メソッド
リクエストURI
プロトコルバージョン
ヘッダ
ボディ

上記の例で使われているHTTP/1.1は比較的古いバージョンで、現在の主流はHTTP/2、HTTP/3です。
リクエスト・レスポンスの形式は違いますが基本的な部分は同じなため、この記事ではHTTP/1.1を参考にしています。

それぞれ詳しく解説していきます。

①メソッド

メソッドはリクエストの種類を表します。

クライアントからサーバーに送られるリクエストは「◯◯のページを見たいです」「フォーム内容を送信します」など、いくつか種類があります。

それらの種類に名前をつけたものがメソッドです。

主に見ることになるのはGETとPOSTの2種類です。

GETは指定したURIのリソース（HTMLや画像ファイル）を取得し、POSTは指定したURIに対して何らかのデータを送信します。

メソッドについてより詳しく知りたい方はこちらの記事がおすすめです。

[st-postgroup html_class="" id="779" rank="0"]

②リクエストURI

リクエストURIは、サーバーとそのサーバー内にあるファイルの場所を表します。

インターネット上の住所のようなものになります。

URIは大きく3ブロックに分かれており、それぞれ使用するプロトコル、リクエスト送信先のサーバー、リクエスト送信先のファイルを指定します。

上記の例の/testのような相対パスと、https://example.co.jp/testのような絶対パスを指定することができます。

似たような言葉でURLがありますが、ほぼ同じものだと思ってもらって差し支えありません。

③プロトコルバージョン

どのプロトコルのどのバージョンを使用するかを表します。

上記の例では「HTTPのバージョン1.1を使って通信します」ということを宣言しています。

ちなみにプロトコルという言葉で何だか難しそうなものに聞こえますが、プロトコル = ルールと考えてもらうと理解しやすいと思います。

HTTPもインターネット通信を行う際のルールを定めたものです。

④ヘッダ

ヘッダとは送信日時、ファイルサイズなどのリクエスト情報のことです。

ヘッダ名:値の形で記述し、複数設定することができます。

以下に主なリクエストヘッダをまとめました。

ヘッダ名	説明	例
Host	リクエストを送信するホスト（ドメイン）とポート番号	example.com
Date	メッセージを生成した日時	Fri, 27 Sep 2024 08:02:46 GMT
User-Agent	クライアントブラウザのタイプ	Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept	クライアントが受付可能なMIMEタイプ	text/html,application/xhtml+xml
Accept-Charset	クライアントが受付可能な文字エンコーディング	utf-8
Accept-Language	クライアントが受付可能な言語	en-US,ja-JP
Accept-Encoding	クライアントが受付可能なコンテンツのエンコーディング	gzip
Content-Length	ボディの長さ	23
Referer	現在のページのリンク元	https://rootful.net/
Cache-Control	キャッシュ制御するための情報	max-age=0

⑤ボディ

ボディはクライアントからサーバーに送られるデータです。

具体的にはフォーム入力されたID・パスワードや、SNSの投稿内容などがボディに格納されます。

GETメソッドのようにサーバーからデータを取得するだけの場合、ボディには何も入りません。

レスポンス

次にレスポンスについても見ていきましょう。

HTTP/1.1 200 OK
Date: Thu, 26 Sep 2024 09:16:25 GMT
Vary: Accept-Encoding
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html lang="ja" class="s-navi-right s-navi-search-overlay ">
...
</body></html>

このレスポンスに含まれる要素は下記になります。

プロトコルバージョン
ステータスコード
ヘッダ
ボディ

①プロトコルバージョン

こちらはリクエストと同じです。

どのプロトコルのどのバージョンを使用するかを表します。

②ステータスコード

ステータスコードはリクエストが成功か失敗かを示す3桁の数字です。

上記の例で返ってきている200番台はリクエスト成功を意味します。

それ以外にも400番台はクライアントが原因のエラー、といったように先頭の数字によって大きく分類されています。

ステータスコードについて、詳しくはこちらの記事で解説しています。

[st-postgroup html_class="" id="740" rank="0"]

③ヘッダ

こちらもリクエストと同じく、レスポンス情報を表します。

主なレスポンスヘッダは下記になります。（リクエストヘッダで記載したものは省略）

ヘッダ名	説明	例
Access-Control-Allow-Origin	リソースを共有できるオリジンを指定	*, https://rootful.net
Content-Encoding	リソースのエンコード方式	gzip
Etag	リソースのバージョン情報前回の応答からリソースに変更がない場合は再送しないなど、前回の応答との連携に使われる	W/"0815"
Last-Modified	リソースの最終更新日時	Fri, 27 Sep 2024 08:02:46 GMT
Server	サーバー側で使用したソフトウェア情報	Apache/2.4.1 (Unix)
Set-Cookie	サーバーからクライアントへクッキーを送信する	sessionId=38afes7a8
Transfer-Encoding	ボディのエンコード方式	chunked
Vary	リソースの表現にどのヘッダーを使用したか	User-Agent

④ボディ

こちらはリクエストとは逆で、サーバーからクライアントへ送られるデータです。

具体的には見たいページのHTML・CSS・JSファイルや画像ファイルなどなどが入ります。

リクエスト・レスポンスの確認方法

「リクエスト・レスポンスについてはわかったけどどうやって確認するの？」という方向けに、リクエスト・レスポンスの確認方法をいくつか紹介します。

デベロッパーツール

最もお手軽な方法がChromeのデベロッパーツールを使用する方法です。

F12orCtrl + Shift + i（Windowsの場合）orCmd + Option + I（Macの場合）を押してデベロッパーツールを開く
「Network」を選択
リクエスト・レスポンスを確認したいURIをクリック
「Headers」タブでヘッダ情報、「Response」タブでボディ情報が確認できます
※何も表示されていない場合はページを更新してみてください

curlコマンド

curlは様々なプロトコルで通信データの送受信を行うことができるコマンドです。

もちろんHTTPにも対応しているのでリクエスト・レスポンスの確認に便利です。

コマンドラインを開きcurl リクエストURIを実行すると、リクエストURIに対しGETを実行してくれます。

Screenshot

</figcaption>

</figure>

インストール作業が必要になる場合があります。

オブションなしだとレスポンスボディのみが出力されますが-iオプションをつけるとヘッダー部分も出力してくれます。

他にも様々なオプションがあるので詳しくは調べてみてください！

まとめ

この記事ではHTTPリクエスト・レスポンスの説明とその確認方法を解説しました。

最後にもう一度ポイントをまとめておきます。

リクエストとは、クライアントからサーバーに送られるお願い
レスポンスはそのお願いを受けて、サーバーからクライアントに送られる応答
リクエスト・レスポンスはそれぞれプロトコルバージョン、ヘッダ、ボディなどの情報を含んでいる
デベロッパーツールやcurlコマンドを使用することでリクエスト・レスポンスの中身を確認することができる

HTTPについてより詳しく勉強したい！という方向けに、おすすめの教材を紹介します。

Webを支える技術 -HTTP、URI、HTML、そしてREST

こちらの本は正直初心者にとってはやや難しい内容もあります。

参考
・第1章進化するHTTPの歩み～ HTTP/1.1とHTTP/2をおさらいし、HTTP/3の基本を知る | gihyo.jp
・Request header (リクエストヘッダー) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

HTTPメソッドとは？各メソッドについて図解付きでわかりやすく解説

Sat, 21 Sep 2024 00:00:00 GMT

この記事で解決できるお悩み

HTTPメソッドって何？
各メソッドの使い道がわからない...

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

この記事ではHTTPメソッドとは何か、各メソッドの使われ方を初心者にもわかりやすく解説します。

この記事を読み終えればHTTPメソッドについて理解でき、業務や個人開発に役立てることができますよ！

HTTPメソッドとは

HTTPメソッドとは、クライアントからサーバーに発行されるリクエストの種類です。

といってもよくわからないと思うので順を追って説明します。

まずはHTTPメソッドのルールを定めているHTTPプロトコルについてです。

HTTP（HyperText Transfer Protocol）

英語と日本語の会話では意味が通じないように、インターネット通信も共通のルールに基づいて行う必要があります。

その「インターネット通信のルール」として定められているのがHTTPです。

HTTPメソッドもHTTPの中で定められているルールの1つです。

HTTP通信の流れ

HTTP通信における重要な要素として、クライアントとサーバーがあります。

クライアントは「◯◯のページが見たいです」などのリクエスト（要求）をサーバーに送ります。

サーバーはそれを受けて「これが◯◯のページです」というレスポンス（応答）を返すことで、クライアントはWebページを閲覧することができます。

改めてHTTPメソッドとは

ここまでで説明したように、HTTP通信ではクライアントからサーバーに向けてリクエストを送ることでWebページを閲覧することが可能になります。

ですが実際にはWebページ閲覧だけでなく、ページを更新したりフォーム送信したりと、リクエストにはいくつか種類があります。

ここまでの説明で、冒頭に言った「HTTPメソッドとは、クライアントからサーバーに発行されるリクエストの種類」という意味が理解できたでしょうか。

URI（Uniform Resource Identifier）とは

リクエストを送信する際に必要なものとしてURIがあります。

URIはリクエストの送信先情報です。

郵便で言うところの配達先住所ですね。

例えばこの記事のURIはhttps://rootful.net/http-methodですが、下記3つの情報が含まれています。

使用するプロトコル
リクエストを送信するサーバー
ファイルの場所

このページを見ている皆さんは、この記事のリンクをクリックした時にsosotech.infoのサーバーに対して「/http-methodのページが見たいです」というリクエストを送っています。

またURIにはクエリパラメータと呼ばれる機能があります。

https://rootful.net/http-method?page=2のようにURIの末尾に?パラメータ名=値を付けることで、サーバーに「2ページ目が見たいです」などの追加情報を送ることができます。

URIはHTTPメソッドを説明する上でよく出てくる言葉なので理解しておいてください。

よく聞く言葉で「URL」がありますが、「URI」とほぼ同じものだという認識で問題ありません。

HTTPメソッド一覧

HTTPメソッドの一覧が下記になります。

9種類ありますが、実際にユーザーや開発者が使用するのはGETとPOSTがほとんどだと思います。

このうちTRACEとCONNECTはほとんど使われていないため詳細な説明は割愛します。

メソッド名	説明
GET	リソースの取得
POST	リソースにデータを送信
PUT	リソースの更新
DELETE	リソースの削除
HEAD	リソースのヘッダ（メタデータ）の取得
OPTIONS	リソースがサポートしているメソッドの取得
PATCH	リソースの部分的な更新
TRACE	自分宛にリクエストメッセージを返す試験
CONNECT	プロキシ動作のトンネル接続への変更

リソースとは、サーバーからのレスポンスに含まれるHTMLファイルや画像ファイルなどのことです。

各メソッドの説明

GET

GETメソッドは指定したURIの情報を取得します。

Webページや画像、動画の取得など、私たちがインターネットを使用する上で欠かせないメソッドです。

あなたが今このページを見れているのも、ブラウザがhttps://rootful.net/http-methodというURIに対してGETリクエストを送信しているからです。

POST

POSTメソッドは指定したURIに対しデータを送信します。

POSTの主な使われ方は以下の3つです。

フォーム情報の送信
リソースの作成
リソースの更新

それぞれ解説します。

フォーム情報の送信

会員登録やネットショッピングなど、インターネットを利用していてフォームを入力する機会は多いです。

フォームで入力した氏名、住所、カード情報などのデータはPOSTリクエストによって指定のURIに送信されます。

そして送られた先ではデータベースに格納したりまた次の処理を行ったりといったことが可能です。

フォームで入力した情報はクエリパラメータでも送信することは可能ですが、URIにくっついているため住所やパスワードなどの情報が外部に筒抜けになってしまうリスクがあります。

一方でPOSTメソッドで送信した場合は、大切な情報が外部から見られることはありません。

そのため個人データなどを扱う場合は基本的にPOSTメソッドを使用します。

リソースの作成

指定したURIに対して新しいリソースを作成します。

例えばこのブログでは記事を作成するときはhttps://rootful.net/wp-admin/post_new.phpというファイルを使います。

このURIに対して、POSTメソッドで新しい記事のデータを送信することでhttps://rootful.net/配下に記事リソースを作成してくれます。

リソースの更新

指定したURIのリソースを更新します。

このブログでは記事を編集する場合、下記のようにpost.phpに対して記事IDとアクション名をクエリパラメータで渡しています。

https://rootful.net/wp-admin/post.php?post=779&action=edit

このURIに対してPOSTメソッドで更新したい内容を送信すると記事データを更新してくれます。

PUT

PUTメソッドの機能は2つです。

リソースの作成
リソースの更新

リソースの作成

指定したURIに対して新しいリソースを作成します。

できることとしてはPOSTメソッドと同じですが、細かな違いがあります。

それはPOSTメソッドではリソースのURIを指定できないが、PUTメソッドはリソースのURIを指定できる、という点です。

例えばhttps://rootful.net/wp-admin/post_new.phpに対してPOSTメソッドとPUTメソッドそれぞれで記事データを送信したとします。

POSTメソッドではサーバー側が「じゃあhttps://rootful.net/http-methodにリソース作成するわ！」と自由に決めることができますが、PUTメソッドでは強制的にhttps://rootful.net/wp-admin/post_new.phpにリソース作成されてしまいます。

そのため意図しない動作を引き起こす可能性があり、基本的にはPOSTメソッドを使うことを推奨します。

リソースの更新

指定したURIのリソースを更新します。

こちらも上と同じ理由でPOSTメソッド推奨です。

DELETE

DELETEメソッドは指定したURIのリソースを削除します。

HEAD

HEADメソッドは指定したURIのヘッダ（メタデータ）のみを取得します。

GETメソッドでhttps://rootful.net/http-methodというURIにリクエストすると記事データと一緒に記事データの拡張子、文字コード、更新日時などのメタデータが取得できますが、HEADはメタデータのみを取得し、記事データは取得しません。

何らかの処理を行う前にリソース情報を調べたい場合に使われます。

OPTIONS

OPTIONSメソッドはリソースが対応しているメソッドを取得することができます。

例えば新規投稿作成用のURIであるhttps://rootful.net/wp-admin/post_new.phpはPOSTメソッドしか受け付けないよう設定されているとすると、このURIにOPTIONSメソッドでリクエストを送信するとPOSTのみ返却されます。

そのためOPTONSメソッドは、これから送信するリクエストのメソッドが対応しているかなどを打診するために使われることがあります。

これをプリフライトリクエストと呼び、詳しくはこちらの記事で解説しています。

[st-postgroup html_class="" id="948" rank="0"]

PATCH

PATCHメソッドは指定したURIのリソースを一部分更新します。

POSTやPUTメソッドがリソースを丸ごと送信するのに対して、PATCHメソッドは更新したい箇所だけ送信すれば良いのでパフォーマンス向上の効果があります。

まとめ

この記事ではHTTPメソッドとは何か、HTTPメソッドの種類を解説しました。

最後にもう一度ポイントをまとめておきます。

HTTPメソッドとはクライアントからサーバーに発行されるリクエストの種類
HTTPメソッドは9種類あるが、よく使われるのはGETとPOSTの2種類

HTTPについてより詳しく勉強したい！という方向けに、おすすめの教材を紹介します。

Webを支える技術 -HTTP、URI、HTML、そしてREST

こちらの本は正直初心者にとってはやや難しい内容もあります。

参考
・HTTP リクエストメソッド - HTTP | MDN
・Webを支える技術 -HTTP、URI、HTML、そしてREST

HTTPステータスコードとは？意味と確認方法をわかりやすく解説

Sat, 14 Sep 2024 00:00:00 GMT

この記事で解決できるお悩み

ステータスコードって何？
たまに見る404とか500って数字は何の意味があるの？
ステータスコードはどうやって確認するの？

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

この記事ではステータスコードとは何か、ステータスコードの意味をわかりやすく解説します。

この記事を読めば、ステータスコードを見るだけでインターネット通信の状況を読み取ることができるようになります！

ステータスコードとは？

一言で言うと、ステータスコードとはインターネット通信が成功したか、失敗したかどうかを表す3桁の数字です。

ステータスコードの説明をする前に、その大元であるHTTPについて簡単に説明します。

HTTP（HyperText Transfer Protocol）

ステータスコードはHTTPの一要素です。

英語と日本語の会話では意味が通じないように、インターネット通信も共通のルールに基づいて行う必要があります。

そのため「インターネット通信のルール」としてHTTPが定められています。

ステータスコードもHTTPの中で定められているルールの1つです。

今現在、HTTPはWebサイトの閲覧やWebアプリケーションの利用には必ずと言っていいほど使われています。

URLの先頭につく「http://」や「https://」は「HTTPを使って通信を行いますよ」という宣言です。

クライアントとサーバー

ステータスコードを理解する上で重要な要素としてクライアントとサーバーがあります。

クライアントは「◯◯のページが見たいです」などのリクエスト（要求）をサーバーに送ります。

サーバーからのレスポンスに含まれるHTMLファイルや画像ファイルなどのことをリソースと呼びます。

ですが、何かしらの異常が発生して通信がうまくいかないことは往々にしてあります。

そんな時にサーバーから何も返事が返ってこないとクライアント側は困ってしまいますよね？

そのため、通信が成功か失敗かをクライアント側に伝えるための情報が必要です。

この、クライアントに通信結果を伝えるための情報 = ステータスコードです。

HTTPについて詳しく知りたい方はこちらの記事をおすすめします。

こちらの記事は現在準備中です。

ステータスコードの確認方法

ステータスコードは誰でも確認することができます。

この記事ではChromeのデベロッパーツールを使った方法を紹介します。

F12orCtrl + Shift + i（Windowsの場合）orCmd + Option + I（Macの場合）を押してデベロッパーツールを開く
「Network」を選択
対象URLの「Status」欄を確認
赤枠で囲まれている「200」やその下の「204」といった数字がステータスコードになります。
この例ではページが問題なく表示されているので通信成功を表す「200」が表示されています。
※何も表示されていない場合はページを更新してみてください

ステータスコードの意味

ステータスコードは3桁の数字で、先頭の数字によって以下の5つに分類されています。

そのため先頭の数字を見れば通信が成功したか失敗したかを判断することができます。

1xx : 処理中
2xx : 成功
3xx : リダイレクト
4xx : クライアントエラー
5xx : サーバーエラー

この後各ステータスコードの意味を説明していきます。

1つ1つのステータスコードの意味を覚える必要はありません。
知らないステータスコードが出てきたらその都度調べるぐらいの気持ちで大丈夫です。

100番台 - 処理中

100番台は処理が継続していることを表します。

クライアントはそのまま処理を継続する、また追加の情報を付け加えてサーバーに再送信するといったアクションを行います。

我々が見かけることはあまりありません。

HTTPステータスコード	説明
100 Continue	リクエスト継続可能
101 Switching Protocols	プロトコル切り替え
102 Processing	処理中
103 Early Hints	ヘッダの事前送信

200番台 - 成功

200番台はリクエストが成功したことを表します。

HTTPステータスコード	説明
200 OK	リクエスト成功
201 Created	リクエスト成功後に新たなリソースを作成
202 Accepted	リクエストは受理されたがまだ実行されていない
203 Non-Authoritative Information	リクエストは成功したが信用が低いリソースが返却された
204 No Content	リクエストは成功したが返却するリソースが無い
205 Reset Content	クライアントに対しリクエストを送信したドキュメントをリセットするよう指示
206 Partial Content	クライアントが`Range`ヘッダーを送信した時のみ

300番台 - リダイレクト

300番台は他のリソースへのリダイレクトを表します。

具体的には、アクセスしたURLに目当てのページがもう存在せず、別のURLに飛ばされる時などに返却されます。

HTTPステータスコード	説明
300 Multiple Choices	リクエストに対して複数のレスポンスがあることを示す
301 Moved Permanently	リソースのURIが永遠に変更されたことを示す
302 Found	リソースの URI が一時的に変更されたことを示す
303 See Other	別のURIをGETメソッドで参照するようクライアントに指示
304 Not Modified	リソースが更新されていないことを示す
307 Temporary Redirect	別のURIを始めのリクエストと同じメソッドで参照するようクライアントに指示
308 Permanent Redirect	リソースのURIが永遠に変更されたことを示し、変更先のURIにリクエストを送る場合は始めのリクエストと同じメソッドで参照するようクライアントに指示

400番台 - クライアントエラー

400番台はクライアントエラーを表します。

通信エラーが起こったけど悪いのはクライアント側だよ、ということを意味します。

具体的には存在しないページにアクセスしようとする、不正な値を送信する、認証が必要なリソースを認証なしで取得しようとした時などに発生します。

HTTPステータスコード	説明
400 Bad Request	クライアントエラーのせいでサーバーがリクエストを処理できない、もしくは処理しない
401 Unauthorized	認証を必要としているが未認証
403 Forbidden	クライアントにコンテンツのアクセス権がない
404 Not Found	サーバーがリクエストされたリソースを発見できない
405 Method Not Allowed	サーバーが禁止しているメソッドである
406 Not Acceptable	クライアントから与えられた条件に合うコンテンツが見つからない
407 Proxy Authentication Required	プロキシサーバーが認証を必要としているが未認証
408 Request Timeout	リクエスト処理時間切れ
409 Conflict	リクエストがサーバーの現在の状態と矛盾する
410 Gone	リクエストされたコンテンツがサーバーから永久に削除された
411 Length Required	サーバーが`Content-Length`ヘッダーフィールドを要求しているが、リクエストに付与されていない
412 Precondition Failed	サーバー側で適合しない前提条件がクライアント側のヘッダーに含まれている
413 Payload Too Large	リクエストの本体がサーバーで定めている上限を超えている
414 URI Too Long	リクエストした URI がサーバーで扱える長さを超えている
415 Unsupported Media Type	リクエストされたデータのメディア形式をサーバーが対応していない
416 Range Not Satisfiable	リクエスト内の `Range` ヘッダーフィールドで指定された範囲を満たすことができない
417 Expectation Failed	`Expect` リクエストヘッダーで指定された内容がサーバー側と適合しない
418 I'm a teapot	コーヒーポットではなくやかんにリクエストを送った ※このステータスコードはおふざけで作られました
421 Misdirected Request	リクエストがレスポンスを生成できないサーバーに送られた
425 Too Early	繰り返される可能性のあるリクエストを処理するリスクを拒否
426 Upgrade Required	リクエスト処理するためにアップグレードが必要
428 Precondition Required	リクエストが条件付きになることが必要
429 Too Many Requests	一定の時間内に大量のリクエストを送信した
431 Request Header Fields Too Large	ヘッダーフィールドが大きすぎる
451 Unavailable For Legal Reasons	政府によって検閲されたウェブページなどの違法なリソースをリクエスト

500番台 - サーバーエラー

500番台はサーバーエラーを表します。

400番台の場合はクライアント側に原因がありますが、500番台の場合はサーバー側に原因があります。

そのためWebサイト閲覧時に500番台のエラーが出た場合は、クライアント側からどうにかしてページを見れるようにするといったことは基本的に不可能です。

HTTPステータスコード	説明
500 Internal Server Error	サーバー側で処理方法がわからない事態が発生
501 Not Implemented	リクエストメソッドをサーバーが対応しておらず扱えない
502 Bad Gateway	ゲートウェイとして動作するサーバーが無効なレスポンスを受け取った
503 Service Unavailable	リクエストを処理する準備ができていない
504 Gateway Timeout	ゲートウェイとして動作するサーバーが時間内にレスポンスを得られない
505 HTTP Version Not Supported	リクエストで使用した HTTP のバージョンにサーバーが対応していない
506 Variant Also Negotiates	サーバーに内部構成エラーがある
510 Not Extended	リクエスト拡張が必要
511 Network Authentication Required	クライアントがネットワークでアクセスするために認証が必要

【参考】https://developer.mozilla.org/ja/docs/Web/HTTP/Status

まとめ

この記事でステータスコードとは何か、ステータスコードが表す意味が理解できれば嬉しいです。

最後にもう一度ポイントをまとめておきます。

ステータスコードとはインターネット通信の結果を表す3桁の数字
ステータスコードはHTTPの中で定められている
ステータスコードの先頭の数字で大まかな結果がわかる

ステータスコードについてもっと詳しく知りたい、HTTPを勉強したいという方向けにおすすめの教材を紹介します。

Webを支える技術 -HTTP、URI、HTML、そしてREST

こちらの本は正直初心者にとってはやや難しい内容もあります。

MACアドレスとは？仕組み・構造・用途をわかりやすく解説！

Sat, 13 Jul 2024 00:00:00 GMT

この記事で解決できるお悩み

ネットワークの基礎として重要な『MACアドレス』。

この記事ではその仕組みや実際の用途、調べ方までを初心者向けに詳しく解説します。

MACアドレスとは？

MAC（Media Access Control）アドレスとはパソコンやスマホ、ルーターなどのネットワーク機器に割り当てられている識別番号です。

MACアドレスとAppleが提供するMacシリーズは全く関係ありません。

人間で言うところのマイナンバーに近いものと考えてもらうと理解しやすいです。

MACアドレスは

00-00-5E-00-53-FF

のように6バイトの16進数をハイフンまたはコロンで区切った形で表します。

MACアドレスは基本的には世界で一意であり、同じMACアドレスは1つとして存在しません。

ただし、特定のソフトウェアを使用して変更できる場合もあり、その場合重複の可能性があります。

MACアドレスの構造

MACアドレスの構成要素は大きく分けて2つです。

ベンダーID
製造番号

MACアドレスの前半6桁はベンダーIDと呼ばれ、機器メーカーを特定するための識別番号です（例：Apple=00-1A-2Bなど）。

後半6桁は機器ごとに割り当てられる製造番号で、同一メーカー内で重複しないように割り当てられます。

メーカーごとのユニークなID、メーカー内の機器ごとのユニークなIDを合わせることでMACアドレスは一意性を実現しています。

MACアドレスの用途

MACアドレスはネットワーク内の通信において、データの送信元と宛先の特定に使われます。

ネットワーク内にある機器のMACアドレスはスイッチと呼ばれる機器、もしくはスイッチ機能を搭載したルーターで管理することができます。

スイッチはどのポート（LANケーブルの接続口）にどの機器が接続しているかをMACアドレスで管理しています。

そのため受信したデータの宛先MACアドレスを確認して、該当ポートにのみデータを転送することができます。

MACアドレスとIPアドレスの関係

MACアドレスと似たものにIPアドレスがあります。

IPアドレスは

192.0.2.0

のような形で表され、インターネット上におけるネットワーク機器の住所を表します。

IPアドレスについて詳しく知りたい方はこちらの記事がおすすめです。

[st-postgroup html_class="" id="601" rank="0"]

IPアドレスもMACアドレスと同じく、データをやり取りする相手を特定するために使われます。

ではMACアドレスとIPアドレスの違いは何かというと、MACアドレスは『次の目的地』を表し、IPアドレスは『最終目的地』を表します。

MACアドレスは郵便における受取人名、IPアドレスは住所に例えられます。

例えばインターネット上で動画を再生しようとした時、最終目的地は『動画を保存しているサーバー』です。

ですがそこに辿り着くまでには、

自分のPC → 自宅のルーター
自宅のルーター → 別のネットワークのルーター
別のネットワークのルーター → 目的のネットワークのルーター
目的のネットワークのルーター → 目的のサーバー

というように最終目的地に行くためにいくつかの機器を経由します。

上の手順①の『自分のPC』から見た『自宅のルーター』、②の『自宅のルーター』から見た『別のネットワークのルーター』が次の目的地にあたり、これらはMACアドレスで表されます。

このようにIPアドレスは最終目的地を表すので変わることはなく、MACアドレスは次の目的地を表すので毎回変わることになります。

MACアドレスの確認方法

Windows、MacそれぞれでのMACアドレスの確認方法を説明します。

Windows11

Windows11での確認方法は以下の手順です。

「設定」を開く
「ネットワークとインターネット」を選択し、「ネットワークの詳細設定」をクリック
「ハードウェアと接続のプロパティを表示」をクリック
「物理アドレス(MAC)」を確認

「Wifi」と「イーサネット」それぞれに「物理アドレス(MAC)」が記載されていると思います。

インターネットに無線で繋いでいる場合は「Wifi」、有線で繋いでいる場合は「イーサネット」が今使っている機器のMACアドレスになります。

Mac

Macでの確認方法は以下の手順です。

「システム環境設定」を開く
「ネットワーク」をクリック
「Ethernet」を選択し、「詳細」をクリック
「ハードウェア」を選択し、「MACアドレス」を確認

まとめ

最後にもう一度ポイントをまとめておきます。

MACアドレスとはネットワーク機器に割り当てられている識別番号
MACアドレスはデータをやり取りする機器を特定するために使われる
MACアドレスは『次の目的地』、IPアドレスは『最終目的地』として使われる

MACアドレスはネットワークの基礎知識として非常に重要です。

仕組みを理解することで、効率的なネットワーク設計やトラブルシューティングが可能になります。

ぜひ自分のデバイスのMACアドレスを確認し、実践に活用してみてください。

ネットワークについて基礎から勉強したい方向けにおすすめの教材を紹介します。

イラスト図解式　この一冊で全部わかるネットワークの基本第2版

インターネットはルールや要素が多くて混乱しがちですが、こちらの本では順を追ってわかりやすく説明してくれているので初めてインターネット関連の本を読む方におすすめです！

ポート番号とは？図解付きで初心者にもわかりやすく解説！

Mon, 08 Jul 2024 00:00:00 GMT

この記事で解決できるお悩み

インターネットを使う上で欠かせない要素のひとつが『ポート番号』です。

しかし、その仕組みや役割を詳しく知っている方は少ないかもしれません。

本記事では、初心者の方でも理解しやすいように、図解を交えながらポート番号の基本を解説します！

ポート番号とは？

ポート番号とはアプリケーションの識別番号です。

ポート番号は 0~65535 の間の数字で表されます。

インターネット通信ではIPアドレスというものを使い通信相手を特定します。

しかし通信相手のコンピュータ内ではブラウザアプリやメールアプリなど複数のアプリケーションが動いており、どのアプリケーションと通信を行うかを指定する必要があります。

そのために必要なのがポート番号です。

ポート番号を指定することで、相手のコンピュータは受信したデータがどのアプリケーション向けのものか判断することができます。

IPアドレスについて詳しく知りたい方はこちらの記事がおすすめです。

[st-postgroup html_class="" id="601" rank="0"]

ポート番号の種類

ポート番号は3種類に分けられています。

ウェルノウンポート番号
登録済みポート番号
ダイナミック/プライベートポート番号

ウェルノウンポート番号

ポート番号のうち0~1023はウェルノウンポート番号と呼ばれ、主要なアプリケーションごとに番号が割り振られています。

これらの番号はIANA（Internet Assigned Numbers Authority : アイアナ）という機関で管理されています。

例えば、Webサイトを閲覧にはポート番号80、メールの読み出しにはポート番号110が割り当てられています。

以下に代表的なウェルノウンポート番号をまとめました。

ポート番号	プロトコル	主な用途
80	HTTP	Webへのアクセス
443	HTTPS	暗号化されたWebへのアクセス
110	POP3	メールボックスの読み出し
143	IMAP4	メールボックスへのアクセス
25	SMTP	サーバー間のメール送信
587	SMTP submission	コンピュータからメールサーバーへのメール送信
20	FTP data	ファイル転送（データ転送用）
21	FTP control	ファイル転送（制御用）

登録済みポート番号

ポート番号のうち1024~49151は登録済みポート番号と呼ばれ、「ウェルノウンポート番号のように主要なものではないが比較的よく使われる」アプリケーションに割り振られています。

こちらも IANAで管理されています。

代表的なポート番号としては、データベース管理システムであるMySQLの3306やPostgreSQLの5432などがあります。

ダイナミック/プライベートポート番号

ポート番号のうち49152~65535はダイナミック/プライベートポート番号と呼ばれる、用途が特定されていないポート番号です。

インターネット上で通信を行う際には相手コンピュータのポート番号を指定しますが、同様に自分側のポート番号も指定する必要があります。

その際、ダイナミック/プライベートポート番号から自動的に割り当てられます。

自分側のポート番号は相手からデータを送り返してもらう時などに使用されます。

ポート番号を使った通信の流れ

ここまでポート番号について説明してきましたが、ここから具体的な通信の流れについて説明します。

ここではインターネット通信をするために必要な要素として以下の4つを取り上げます。

自身のIPアドレス
自身のポート番号
相手のIPアドレス
相手のポート番号

これらを使った通信の流れを図示したものが以下になります。

まずデータをやり取りしたいコンピュータをIPアドレスで指定し、対象のサービスをポート番号で指定します。

そうして指定した相手に自分のIPアドレスとポート番号、「Webページのデータが欲しい」などのリクエストを飛ばします。

リクエストを受け取った相手は送信元のIPアドレス、ポート番号に対してリクエストされたデータを送信します。

といった流れで通信が行われます。

またポート番号には、下図のように相手の同じポート番号に複数のアクセスが発生した場合に、どちらにどのデータを送るかを区別する役割もあります。

まとめ

最後にもう一度ポイントをまとめておきます。

ポート番号とはアプリケーションの識別番号である
IPアドレスで相手のコンピュータを特定し、ポート番号でデータをやり取りするアプリケーションを特定する
ポート番号はウェルノウンポート番号、登録済みポート番号、ダイナミック/プライベートポート番号の3種類に分けられている

ネットワークについて基礎から勉強したい方向けにおすすめの教材を紹介します。

イラスト図解式　この一冊で全部わかるネットワークの基本第2版

インターネットは多くのルールと要素があり混乱しがちですが、こちらの本では順を追ってわかりやすく説明してくれているので初めてインターネット関連の本を読む方におすすめです！

ドメイン名とは？構造やDNSについて初心者にもわかりやすく解説！

Thu, 04 Jul 2024 00:00:00 GMT

この記事で解決できるお悩み

ドメイン名って何...?
ドメイン名の構造を知りたい
ドメイン名とIPアドレスを紐付ける仕組みについて知りたい

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

ドメイン名とは？

ドメイン名とはインターネットにおけるコンピュータの住所です。

インターネット上に存在する無数のコンピュータの中から目当てのものを特定するために使われます。

ドメイン名は

example.com

のように文字列をドットで区切った形で扱われます。

ドメイン名はURLやメールアドレスの一部として使われています。

URLやメールアドレスにドメイン名を使うことで、コンピュータ側が『どのコンピュータとデータをやり取りするか』を判断できるようになります。

IPアドレスとの関係

ドメイン名はIPアドレスを人間が読みやすい形に変換したものです。

IPアドレスはドメイン名と同じくインターネットにおけるコンピュータの住所を表しますが、コンピュータ内部で使われる値です。

コンピュータ内部では11000000.00000000.00000010.00000000のように2進数で扱われますが、人間にとっては非常に読みづらいので通常以下のように10進数表記で扱われます。

192.0.2.0

ですが、人間にとってはこのままでも非常に覚えづらいです。

そのため、この数字の羅列を人間が覚えやすい形に変換したものがドメイン名になります。

IPアドレスについて詳しく知りたい方はこちらの記事がおすすめです。

[st-postgroup html_class="" id="601" rank="0"]

ドメイン名の構成

ドメイン名は文字列をドットで繋げた形で構成されます。

ドメイン名を構成する要素は右から順番に、

TLD（Top Level Domain : トップレベルドメイン）
2LD（2nd Level Domain : セカンドレベルドメイン）
3LD（3rd Level Domain : サードレベルドメイン）

と呼ばれます。

「.jp」や「.com」は代表的なTLDです。

TLDの種類

ドメイン名のうち、TLD（Top Level Domain）には大きく分けて2種類あります。

ccTLD（Country Code Top Level Domain）
gTLD（Generic Top Level Domain）

ccTLDは国や地域ごとに割り当てられるTLDです。

Japan => .jp China => .cn United Kingdom => .uk など、国名を2文字で表したものになります。

gTLDは国や地域によらないTLDです。

.com や.net など、個人が簡単に取得できるものが多いです。

ただ一部米国の教育機関限定の .edu や、同じく米国の政府機関限定の .gov など、特定の制限が設けられているgTLDも存在します。

ドメイン名とIPアドレスを紐付ける仕組み

私たちがWebサイトを閲覧する時はURLとしてドメイン名を指定しますが、コンピュータ側が欲しいのはIPアドレスです。

そのため、ドメイン名をIPアドレスに変換してあげる仕組みが必要です。

この「ドメイン名に紐づけられたIPアドレスを取得する」仕組みのことを『名前解決』と言います。

名前解決を行うための仕組みは以下の2つです。

HOSTSファイル
DNS（Domain Name System）

HOSTSファイル

HOSTSファイルとは、IPアドレスとそれに紐づくドメイン名をまとめたテキストファイルです。

以下のようにIPアドレスとそれに対応する名前をつけることで、名前解決を行ってくれます。

# IPアドレス ホスト名 別名
192.0.2.0 example example.co.jp

この例だと https://example.co.jp/ にアクセスすると 192.0.2.0 のコンピュータに接続できるようになります。

まだ開発中でインターネット上に公開されていないサイトにドメイン名を使ってアクセスしたい時などに使われます。

昔はHOSTSファイルを使ってインターネット全体の名前解決を行っていたのですが、インターネットの普及に伴ってコンピュータの数が激増し、管理に限界が来てしまいました。

その結果、現在は後述のDNS（Domain Name System）がメインで扱われています。

HOSTSファイルはほとんどのOSに存在します。
Windowsでは C:\Windows\System32\drivers\etc\hosts
Macでは /private/etc/hosts
にあります。

DNS（Domain Name System）

DNS（Domain Name System）とは、「ドメイン名に紐づけられたIPアドレスを取得する」処理を行うシステムです。

以下の図は example.co.jp というドメイン名を名前解決する時の流れになります。

まずは全体像をざっと把握してみてください。

DNSでは大きく分けて3つの登場人物がいます。

スタブリゾルバー
フルリゾルバー
権威サーバー

スタブリゾルバー

『名前解決の窓口』です。

私たちが使うPCやスマートフォン上で動作します。

この後説明するフルリゾルバーに「名前解決お願いします」と依頼をして、名前解決の結果得た情報を受け取ります。

フルリゾルバー

『名前解決の請負人』です。

スタブリゾルバーから名前解決を依頼されると、権威サーバーにIPアドレスを問い合わせます。

また同じサイトに何度もアクセスするのに毎回問い合わせを行うのは非効率なため、一度名前解決を行なって得た情報をフルリゾルバー内に保存しておくことができます。

保存された情報は『キャッシュ』と呼ばれるため、フルリゾルバーは別名『キャッシュDNSサーバー』とも呼ばれます。

権威サーバー

『ドメイン名とIPアドレスの管理者』です。

権威サーバーは複数存在し、階層構造でドメイン名を管理しています。

最上位管理者であるルートは直下のTLD（下図で言うところの「jp」「com」「net」）を管理します。

そして各TLDの管理者は各々の直下にある2LD（「jp」であれば「example」「co」「tokyo」）を管理します。

そして各2LDの管理者は各々の直下にある3LDを...といった形で管理が行われています。

それぞれのサーバーは

自分で管理するドメイン情報
子サーバーが管理しているドメイン名

の2つを持っています。

名前解決の流れ

登場人物の概要がわかったところで、名前解決の流れを説明します。

スタブリゾルバーからフルリゾルバーに対して「名前解決お願いします」という依頼がされる
フルリゾルバーは最初にルートサーバーに対して問い合わせをする
ルートサーバーはドメイン名の情報は持っていないが、どの子サーバーが該当のドメイン名を管理しているのか知っているので、その子サーバーの情報を教える
フルリゾルバーは教えてもらったサーバーに対して問い合わせをする
問い合わせを受けたサーバーがドメイン名の情報を持っていればフルリゾルバーへ渡す、持っていなければそのドメイン名を管理している子サーバーの情報を渡す
ドメイン名の情報を受け取ったフルリゾルバーは、スタブリゾルバーへ情報を渡す

上記の流れを知った上で改めて以下の図を見てもらうと、DNSの処理の流れが理解しやすいと思います。

まとめ

最後にもう一度ポイントをまとめておきます。

ドメイン名とはインターネットにおけるコンピュータの住所
ドメイン名はIPアドレスを人間が覚えやすい形に変換したもの
ドメインに紐づいたIPアドレスを取得する仕組みとして、HOSTSファイルとDNSがある

この記事で、まずはドメイン名の全体像を把握できるよう努めました。

特にDNSは奥が深いので、気になった方は調べてみることをお勧めします。

DNSについてわかりやすく解説しているおすすめの教材は紹介こちらです。

DNSがよくわかる教科書

IPアドレスとは？IPv4・IPv6の仕組みをわかりやすく解説！

Wed, 03 Jul 2024 00:00:00 GMT

この記事で解決できるお悩み

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

IPアドレスとは？

IPアドレスとは、インターネットにおけるコンピュータの住所です。

例えばYouTubeで動画を見たい時には、インターネット上の無数のコンピュータの中からYouTubeのコンピュータ（サーバー）を見つける必要があります。

そんな時に使われるのがIPアドレスです。

IPアドレスを使うことでデータをやり取りしたい相手の場所を特定することができます。

そのため、基本的には同じIPアドレスはこの世に1つとして存在しません。

現在主に使われているIPアドレスはIPv4（Internet Protocol version 4）です。

この記事ではIPv4をメインに解説しつつ、IPアドレスの新バージョンであるIPv6についても解説していきます。

IPアドレスの構造

IPアドレス（IPv4）は

192.0.2.0

のように10進数で表された4つの数字をドットで区切った形で使われます。

ただこれは人間が読みやすいようにした形で、コンピュータ内部では2進数で扱われています。

上のIPアドレスを2進数に直すと

11000000.00000000.00000010.00000000

になります。

このように、IPアドレスはコンピュータ内部では8ビットの数値をドット区切りで4つ並べた合計32ビットの形で扱われます。

ネットワーク部とホスト部

IPアドレスには『ネットワーク部』と『ホスト部』が存在します。

ネットワーク部とは、そのコンピュータがどのネットワーク（LAN）にあるかを示す値です。

住所で言うところの都道府県からマンション名までにあたります。

一方でホスト部とは、そのネットワーク（LAN）内のどのコンピュータかを示す値です。

住所で言うところのマンションの部屋番号にあたります。

『LAN』とは、自宅やオフィスなどの1拠点内にあるネットワークのことです。

ネットワーク部とホスト部は、IPアドレスの左から何ビット分がネットワーク部、残りはホスト部というように分けられます。

ネットワーク部とホスト部の分け方は大きく分けて2種類あります。

クラス
CIDR（Classless Inter-Domain Routing : サイダー）

クラス

クラスではネットワーク部の長さが固定されています。

例えばクラスAでは左から8ビットがネットワーク部、残り24ビットはホスト部、というようにネットワーク部の長さが決まっています。

クラスはA~Eまでありますが、ここではよく使われるクラスA~Cについて紹介します。

クラスではクラスAなら先頭は0、クラスBなら先頭は10、のようにそれぞれの先頭数ビットの値は決まっています。

そのため、IPアドレスの先頭を見ればどのクラスが使われているか推測することができます。

また、ネットワーク部が長くなればなるほどホストとして割り当てられるコンピュータの数も少なくなるので、ネットワークの規模に応じてどのクラスにするか決めることになります。

CIDR（Classless Inter-Domain Routing : サイダー）

クラスの場合はネットワーク部の長さは固定です。

一方でCIDRという表記方法を使えばネットワーク部の長さをより柔軟に設定することができます。

CIDRを使用する場合はネットワーク部の長さが固定ではないため、以下のように「左から何ビット目までがネットワーク部か」を表す数字をIPアドレスの末尾に付けます。

192.0.2.0/24

この場合は192.0.2.0 を2進数に変換した数値の左から24ビットまでがネットワーク部ということになります。

ここまでネットワーク部とホスト部について話してきましたが、普段のインターネット利用で意識することはないと思います。
IPアドレスを見てネットワーク部・ホスト部を判断し、相手のコンピュータを特定するのはルーターの役割です。

IPアドレスの枯渇対策

ここまでIPv4（Internet Protocol version 4）について解説しました。

現状はIPv4が主流であると言いましたが、IPv4で表せるIPアドレスの数は約43億通りなのに対し、現在の地球の人口が約80億人なので全く足りていないというIPアドレス枯渇問題が発生しています。

その問題を解消するため、主に2つの対策が行われています。

グローバルIPとプライベートIP
IPv6

グローバルIPアドレスとプライベートIPアドレス

1つ目の対策は、IPアドレスを使い回すことができるようにする、です。

具体的にはIPアドレスの種類を以下の2つに分けました。

プライベートIPアドレス ... LAN内だけで使用できる【使い回し可能】
グローバルIPアドレス ... インターネット上での通信に使用できる【使い回し不可能】

こうすることで、LANが異なれば同じプライベートIPアドレスを使い回して割り当てられるというルールにしました。

ただしプライベートIPアドレスを使ったインターネット通信はできないため、LAN内の機器のうち1つにはグローバルIPアドレスを割り当てる必要があります。

グローバルIPアドレスは基本的にルーターに割り当てられ、スマホ・PCとインターネットとの中継役を担います。

そうすることで各機器がルーターを経由してインターネットと通信することが可能になります。

IPv6（Internet Protocol version 6）

2つ目の対策は、新しいIPアドレスを使う、です。

IPv4では32ビットで表していたところを、その4倍の128ビットで表すIPv6（Internet Protocol version 6）が登場しました。

IPv6では340澗個（340兆の1兆倍の1兆倍）のIPアドレスを扱うことができるので全世界のコンピュータに不足なく割り当てられると考えられています。

また十分な数のIPアドレスを扱えるため、全ての機器にグローバルIPアドレスを割り当てることができます。

構造

IPv6は

2001:0db8:0000:0000:0000:0000:0000:0000

のように16進数をコロンで8分割した形で扱われます。

またIPv6では省略形で記述することが推奨されており、

先頭の0は省略する
0db8 => db8
0000が連続する場合は::の形で省略する

などのルールに従って下記のように表記されることがほとんどです。

2001:db8::

ちなみに2進数に変換すると上記のIPアドレスは
0010000000000001:0000110110111000:0000000000000000:0000000000000000:
0000000000000000:0000000000000000:0000000000000000:0000000000000000
となり、128ビットの値をコロンで16ビット×8個に分割した形になります。

ネットワーク部とホスト部

IPv4におけるネットワーク部とホスト部は、IPv6だと呼び名が変わり、それぞれ『プレフィックス』と『インターフェースID』と呼ばれます。

プレフィックスの長さはIPv4と同じく、

2001:db8::/32

のように記載され、上記の場合「2進数表記の左から32ビットがプレフィックス（ネットワーク部）」と判断することができます。

動的IPアドレス、固定IPアドレス

IPアドレスは自宅の機器にどのように設定されるのでしょうか？

IPアドレスはISP（Internet Service Provider）と呼ばれるインターネット接続窓口がルーターを経由して各機器に割り当てます。

『ISP』とはいわゆる『プロバイダ』と呼ばれる業者のことです。

IPアドレスの割り当てには以下の2種類があります。

動的IPアドレス
固定IPアドレス

動的IPアドレスは、インターネットに接続するたびに機器のIPアドレスが変わります。

家庭用Wi-fiや公衆Wi-fiなどはこちらのタイプがほとんどです。

一方で固定IPアドレスはその名の通り変わることがありません。

固定IPアドレスは基本的にオプションなので、ISPへの追加料金が発生することが多いです。

ISPの役割について詳しく知りたい方は下記の記事をおすすめします。

[st-postgroup html_class="" id="578" rank="0"]

IPアドレスの調べ方

では最後に、自分の機器のIPアドレスの調べ方を解説します。

グローバルIPアドレス

こちらはルーターなどのIPアドレスになります。

CMANにアクセスすると現在インターネットに接続している機器のIPアドレスを表示してくれます。

プライベートIPアドレス

こちらは自宅や社内で扱っているスマートフォンやPCなどのIPアドレスになります。

確認方法は機器によって違いますが、ここではiPhoneでの確認方法を説明します。

「設定」を開く
「Wi-Fi」をタップ
現在接続しているWi-Fiのℹ️マークをタップ
「IPアドレス」欄を確認

IPアドレスから個人情報がバレる？

バレません。

IPアドレスからは国や地域などの大まかな情報しか取得することができません。

ただし、インターネット契約のために登録しているプロバイダには個人情報が保管されているため、開示請求によって公開されることはあり得ます。

まとめ

最後にもう一度ポイントをまとめておきます。

IPアドレスとはインターネットにおけるコンピュータの住所
IPv4は枯渇しており、プライベートIPアドレスやIPv6などの対策が講じられている
IPアドレスの割り当てには、定期的にIPアドレスが変わる動的IPアドレスと、変わることがない固定IPアドレスがある

IPアドレスとは切っても切り離せない要素として、ドメイン名があります。

ドメイン名についても知りたいという方はこちらの記事を読んでみてください。

[st-postgroup html_class="" id="617" rank="0"]

また、ネットワークについて基礎から勉強したい方向けにおすすめの教材を紹介します。

イラスト図解式　この一冊で全部わかるネットワークの基本第2版

インターネットはルールや関わる要素が多くて混乱しがちですが、こちらの本では順を追ってわかりやすく説明してくれているので初めてインターネット関連の本を読む方におすすめです！

インターネットとは何か？仕組みや技術についてわかりやすく解説！

Fri, 28 Jun 2024 00:00:00 GMT

この記事で解決できるお悩み

インターネットって何？
インターネットの仕組みが全然わからない...
インターネットについて勉強したいんだけど何から始めたら良いかわからない...

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

この記事ではインターネットについて、言葉の意味、仕組み、使われている技術などについてできるだけわかりやすく解説します！

この記事を読み終えた時にはインターネットとは何か理解できているはずです！！

インターネットとは？

インターネットとは一言で言うと、全世界のコンピュータ間でデータのやり取りをできるようにする仕組みです。

私たちがYouTubeで全世界の動画を見ることができるのも、クリエイターがYouTubeに動画をアップできるのもインターネットがあることで可能になっています。

インターネットの構造

次にインターネットがどのように作られているか説明していきます。

ざっくりと説明すると、インターネットは世界中に無数にある小さなネットワークを1つに繋げることで作られています。

まず全体像を掴んでもらうため、下のネットワークのイメージ図を眺めてみてください。

以下のイメージでは3つの要素が存在しています。

それぞれについて、細かく解説していきます。

実際にはもっと色々な要素が組み合わさってできているのですが、わかりやすくするために簡略化しています。

LAN（Local Area Network）

LAN（Local Area Network）とはオフィスや家庭など、同じ建物や敷地内にあるコンピュータ同士が繋がってできるネットワークのことを指します。

つまりあなたの家には1つのLANが存在し、隣の家にはまた別のLANが存在しています。

ケーブルなどを使ってコンピュータ同士を直接繋げて作る有線LANと、Wifiルーターなどを使って電波でデータをやり取りする無線LANが存在します。

LANの特徴として、外部のコンピュータが無断でデータをやり取りすることはできません。

それができてしまうと個人情報が漏洩したりデータが改竄されたりとプライバシーもくそもなくなってしまうので当然ですね。

WAN（Wide Area Network）

WAN（Wide Area Network）はLAN同士を結んだネットワークのことを指します。

自宅の機器を繋げてLANを作っても、インターネットに繋がなければGoogle検索や動画再生などはすることができません。

そのため自宅のLANと、どこかに存在するGooleやYoutubeのLANを繋げる必要があります。

実際にはLAN同士を直接繋ぐわけではなく、後述するISPと呼ばれる窓口を経由してそれぞれのLANが繋がり、WANが作られます。

WANで使われる回線は基本的に回線業者が管理しているため回線利用料を支払う必要があります。また、インターネットへアクセスするためにはISPを経由する必要があるのでそちらにもプロバイダ利用料を支払う必要があります。
つまり一般的に言われる『インターネット料金』とは回線使用料とプロバイダ利用料を合わせたもの、ということですね。

ISP（Internet Service Provider）

ISP（Internet Service Provider）はインターネットへの接続窓口です。

自宅のネット環境を整備する時によく出てくる『プロバイダ』というのがこれにあたります。

ISPは各国に複数存在しており、ISP同士がネットワークを形成しています。

そのため自宅のLANがISPに繋がると別の地域や別の国にあるISPを経由して、遠くにあるLANとデータをやり取りすることができるようになります。

具体的には、日本における J:COM、ドコモ光、NURO光などの業者のことを指します。

インターネットは世界中のコンピュータを1つに繋げたもの

ここまでの話をまとめると、

小さなネットワークである『LAN』を『ISP』を経由して繋げることで、大きなネットワーク『WAN』が作られます。

そうして世界中にある無数のコンピュータを1つに繋げたもの = インターネットです。

インターネット通信のルール

インターネットが構築されて世界中のコンピュータと繋がっても、『どうやってデータの送受信先を特定するか』『データをどうやって送るか』などのルールが決まっていないとどうすればデータのやり取りができるかわかりません。

そのためインターネットを使用する際の取り決めとして、さまざまなルールが定められています。

ここでは特に重要な以下3つについて説明します。

TCP/IPプロトコル
IPアドレス
ドメイン

TCP/IPプロトコル

TCP/IPプロトコルとは「インターネットを使うときはこの手順に従ってデータをやり取りしてくださいね」という、インターネット通信全体について定められているルールです。

TCP/IPプロトコルではインターネット通信のやり取りを大きく4つに分けています。

ネットワークインターフェース層 ... 直接接続された機器同士のデータのやり取りをする（LAN内でのデータのやり取り）
インターネット層 ... 他のネットワークとのデータのやり取りをする（WANを使ったデータのやり取り）
トランスポート層 ... 品質重視のデータ送信、速度重視のデータ送信など、目的に合ったデータ送信を行う
アプリケーション層 ... メールやWebなどのサービスを行う

それぞれの層で細かいルールが定められています。

一旦はネットワークの諸々のルールをまとめている『TCP/IPプロトコル』というものがあるんだな、と理解してもらえると良いと思います。

ちなみにトランスポート層で定められている『TCPプロトコル』と、インターネット層で定められている『IPプロトコル』から名前を取り『TCP/IPプロトコル』と呼ばれています。

詳細は別記事にまとめる予定です。

IPアドレス

IPアドレスとはコンピュータの住所を表す数値です。

インターネットの中では無数にコンピュータが存在しているため、データをやり取りしたいコンピュータを特定するための情報が必要になります。

それがIPアドレスで、

192.0.2.0

のように10進数で表した数値をドットで4つの塊に区切った形で扱われます。

上記のものは『IPv4』と呼ばれる形式のIPアドレスで、新しいIPアドレスとして『IPv6』が導入されつつあります。

『IPv6』は

2001:0db8:1234:5678:90ab:cdef:0000:0000

のように16進数で表した数値をコロンで8つの塊に区切った形で扱われます。

これらは基本的に世界に1つしかない数値であり、各コンピュータにユニークなIPアドレスが割り当てられています。

コンピュータへのIPアドレスの割り当てや、IPアドレスを見て送り先を特定するなどの処理は『TCP/IPプロトコル』のインターネット層にあたります。

[st-postgroup html_class="" id="601" rank="0"]

ドメイン名

ドメイン名とはIPアドレスを人間が読みやすい形に変換したものです。

IPアドレスを使うことで相手のコンピュータを特定できると言いましたが、192.0.2.0のような数字の羅列は人間にとっては非常に覚えづらいです。

そのため「それぞれのIPアドレスに人間が覚えやすいような名前を付けよう！」ということでドメイン名が生まれました。

ドメイン名は

example.com

のように英数字で表されます。

ドメイン名はIPアドレスと1対1で紐づいており、同じドメイン名は世界に1つとして存在しません。

例えばブラウザで https://example.com/index.htmlにアクセスすると、ルーターなどの機器が「example.comに対応するIPアドレスは...これだ！」といった感じで相手のコンピュータの住所を特定してくれます。

[st-postgroup html_class="" id="617" rank="0"]

まとめ

この記事ではインターネットとは何か、インターネットの仕組みなどについて解説しました。

この記事で少しでもインターネットに対する理解が深まってくれると嬉しいです。

最後にもう一度ポイントをまとめておきます。

インターネットとは全世界のコンピュータ間でデータのやり取りをできるようにする仕組みのこと
インターネットは世界中のコンピュータを繋げることで作られている
インターネット通信のルールとしてTCP/IPプロトコルなどが定められている

「これからインターネットについてじっくり学んでいきたい！」という方向けに、おすすめの本を1冊紹介します。

イラスト図解式　この一冊で全部わかるネットワークの基本第2版

正規表現の繰り返し回数指定と最長一致・最短一致について徹底解説！

Fri, 10 May 2024 00:00:00 GMT

この記事で解決できるお悩み

正規表現で繰り返し回数を指定するにはどうしたらいい？
それぞれの量指定子の意味と使い方を知りたい

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

この記事では正規表現で繰り返し回数を指定するための方法を解説していきます。

この記事を読み終えれば正規表現の繰り返し回数の指定方法を理解し、実践に活かすことができますよ！

正規表現で繰り返し回数を指定するには？

正規表現での文字列の繰り返し回数の指定は『量指定子』と呼ばれるメタ文字を使うことで可能です。

メタ文字とは、正規表現内で特殊な効果を発揮する記号のことです。

そのメタ文字の中でも、文字列の繰り返し回数を指定することができるものを『量指定子』と呼びます。

「そもそも正規表現ってなんなのかよくわからないよ！」という方は先に以下の記事を読んでみてください。

[st-postgroup html_class="" id="450" rank="0"]

量指定子の一覧

まずは全体像を把握するため、一覧をざっと眺めてみてください。

最長一致・最短一致とありますが、記事の後半で解説しているので今は気にしなくて大丈夫です。

メタ文字（最長一致）	メタ文字（最短一致）	名前	意味	詳細
?	??	疑問符	直前の文字が0個または1つ	>>
*	*?	スター（アスタリスク）	直前の文字が0個以上	>>
+	+?	プラス	直前の文字が1個以上	>>
{N}	-	範囲指定	直前の文字がN個	>>
{min,}	{min,}?	範囲指定	直前の文字が min 個以上	>>
{,max}	{,max}?	範囲指定	直前の文字が max 個以下	>>
{min,max}	{min,max}?	範囲指定	直前の文字が min 個以上 max 個以下	>>

使用するツールによっては若干記述方法が異なる可能性があります。

量指定子の説明

それではそれぞれの量指定子について詳しい使い方を説明します。

「自分でも試してみたい！」という方はregex101という正規表現チェッカーを使うことをおすすめします。

詳しい使い方やその他の正規表現チェッカーについては以下の記事で解説しています。

[st-postgroup html_class="" id="301" rank="0"]

?

?は直前の文字が0個または1個ある場合にマッチします。

つまり『なくてもいいし、あってもいい』という意味です。

例えば"こんにちは"という文字列に加えて、"こんにちは！"のようにびっくりマークが付いてる場合もマッチさせたい場合はこのように書きます。

こんにちは！?

この正規表現を使ったマッチ結果は以下のようになります。

水色にマーキングされている箇所がマッチ箇所です。

びっくりマークがあってもなくてもマッチしていることがわかります。

このように?は直前の文字がない、もしくは1個ある場合にマッチします。

*

*は直前の文字が0個以上ある場合にマッチします。

つまり『なくてもいいし、ある場合はいくつあってもいい』という意味です。

例えば"うわ！"という文字列に加えて"うわー！"や"うわーー！"のように伸ばし棒があるときもマッチさせたい場合はこのように書きます。

うわー*！

この正規表現を使ったマッチ結果は以下のようになります。

伸ばし棒が何個あろうとなかろうと、全ての"うわ！"にマッチします。

このように*は直前の文字がない、もしくは1個以上ある場合にマッチします。

+

+は直前の文字が1個以上ある場合にマッチします。

つまり『少なくとも一つはあって欲しい』という意味です。

こちらは上のスターの例で使った正規表現です。

うわー*！

この正規表現の*を+に変えて試してみましょう。

うわー+！

この正規表現を使ったマッチ結果は以下のようになります。

*を使った場合は"うわ！"にもマッチしましたが、+を使った場合は伸ばし棒が少なくとも1つはないといけないのでマッチしません。

このように+は直前の文字が1個以上ある場合にのみマッチします。

{...}

{...}を使えば『直前の文字列が最低何個、最大何個ある場合にマッチする』といった指定が可能になります。

範囲指定にはいくつかバリエーションがあるのでそれぞれ説明します。

{N}

「直前の文字がぴったりN個ある時だけマッチさせたい！」という時にはこちらを使います。

"うわー！"という文字列の伸ばし棒が6個ある時だけマッチさせる場合はこのように書きます。

うわー{6}！

この正規表現を使ったマッチ結果は以下のようになります。

このように伸ばし棒が6個ちょうどある文字列にのみマッチします。

{min,}

「直前の文字が最低~個ある時はマッチさせたい！」という時はこちらを使います。

"うわー！"の伸ばし棒が3個以上ある時だけマッチさせる場合はこのように書きます。

うわー{3,}！

この正規表現を使ったマッチ結果は以下のようになります。

このように伸ばし棒が3個以上ある文字列にのみマッチします。

{,max}

「直前の文字が最大~個ある時はマッチさせたい！」という時はこちらを使います。

"うわー！"の伸ばし棒が3個以下ある時だけマッチさせる場合はこのように書きます。

うわー{,3}！

この正規表現を使ったマッチ結果は以下のようになります。

このように伸ばし棒が3個以下ある文字列にのみマッチします。

{min, max}

「直前の文字が最低~個、最大~個ある時はマッチさせたい！」という時はこちらを使います。

"うわー！"の伸ばし棒が2個以上、6個以下ある時だけマッチさせる場合はこのように書きます。

うわー{2,6}！

この正規表現で検索した結果はこちらです。

このように伸ばし棒が2~6個ある文字列にのみマッチします。

量指定子の適用範囲を広げる方法

ここまで量指定子について説明してきましたが、どれも『直前の』文字列に対して繰り返し回数を指定するものです。

つまり直前の1文字にしか効果が適用されません。

では例えば"うわー！"や"うわー！うわー"のように、"うわー！"という文字列が繰り返されている文字列全てにマッチさせたい、という時はどうすれば良いでしょうか？

このような場合は括弧を使って以下のように書けます。

(うわー！)+

この正規表現で検索した結果はこちらです。

このように括弧を使って文字列を囲んであげることで、文字列のかたまりに対して量指定子の効果を適用できます。

正規表現における括弧の使い方について詳しく知りたい方はこちらの記事も読んでみてください。

[st-postgroup html_class="" id="481" rank="0"]

最長一致・最短一致とは

量指定子には『最長一致・最短一致』というものがあります。

簡単にいうと最長一致はできるだけ多くの文字列をマッチさせるやり方で、最短一致はできるだけ少ない文字列をマッチさせるやり方です。

例として、以下の文字列の中から"私は~。"のように"私は"から始まり、"。"で終わる文字列をマッチさせたいとします。

私は起きました。私は顔を洗いました。私はパンをかじりました。

この時に以下のような正規表現を書いてみました。

私は.+。

.（ドット）は『なんでもいい任意の1文字』を表すメタ文字です。
つまり"私は"と"。"の間に何かしらの文字があるものをマッチさせようとしています。

この正規表現で検索した結果はこちらです。

"私は"から始まり、"。"で終わる文字列が3つあるのにも関わらず、マッチ結果は1つになっています。

これは量指定子がデフォルトで最長一致、つまりできるだけ多くの文字列をマッチさせようとしてしまうため起こります。

ですが量指定子の後ろに?をつけることで最短一致、つまりできるだけ少ない文字列にマッチさせることができます。

先ほどの正規表現に?を追加したものを実行してみましょう。

私は.+?。

この正規表現で検索した結果はこちらです。

先ほどとは違い、"私は起きました。" "私は顔を洗いました。" "私はパンをかじりました。"がそれぞれ独立した文字列として、3つの文字列にマッチしていることがわかります。

このように最長一致・最短一致の違いによってマッチ結果が大きく変わるので量指定子を使う時は注意が必要です。

まとめ

正規表現での繰り返し回数の指定について解説しました。

ここで学んだ知識をベースに個人開発や業務に役立てていってください！

最後にもう一度ポイントをまとめておきます。

正規表現で繰り返し回数を指定するためには『量指定子』を使う
量指定子は基本的に直前の1文字にしか効果がないが、括弧を使うことで効果範囲を広げることができる
量指定子は最長一致・最短一致という2つのマッチ方法がある

「より深く量指定子や正規表現について理解したい！」という方にはこちらの書籍がおすすめです。

詳説正規表現第3版

なんとなくとっつきにくいイメージがあるオライリー本ですが、こちらは正規表現に馴染みのない方でも読みやすく初心者にもおすすめです！

正規表現の括弧を使ったグループ化・キャプチャについて徹底解説

Wed, 01 May 2024 00:00:00 GMT

この記事で解決できるお悩み

正規表現で使われている括弧ってどういう意味？
グループ化って聞いたことあるけど具体的にどういうこと？
キャプチャって何？

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

この記事では正規表現における括弧の意味と詳しい使い方について解説します。

この記事を読み終えれば括弧の使い方を理解し、正規表現のレベルを一段階レベルアップさせることができますよ！

正規表現における括弧の意味は？

正規表現における括弧の使い道は大きく分けると2つです。

グループ化
キャプチャグループ

それぞれについて詳しく説明していきます！

自分でも試してみたい！という方はregex101という正規表現チェッカーをおすすめします。

詳しい使い方やその他の正規表現チェッカーについてはこちらの記事で解説しています。

[st-postgroup html_class="" id="301" rank="0"]

グループ化

グループ化とは複数の文字を1つのかたまりとして扱うことです。

グループ化は主に2通りの使い方をされます。

選択（or）の範囲を指定する

グループ化をするとパイプを使った選択（or）の範囲を指定することができます。

例えば"彼は「初めまして」と言いました。"と"彼は「さようなら」と言いました。"という2つの文字列に正規表現をマッチさせたい場合はどうすれば良いでしょうか？

もちろん以下のように2つの文字列をパイプで区切ればどちらにもマッチさせることができます。

彼は「初めまして」と言いました。|彼は「さようなら」と言いました。

しかし"初めまして"と"さようなら"以外は全く同じ文字列なのにこれはあまりに非効率的です。

そこで、括弧を使うと必要な部分だけを選択（or）の対象にすることができます。

彼は「(初めまして|さようなら)」と言いました。

ここでは混乱を防ぐためただの括弧を使用していますが、基本的にはこの後紹介する『名前付きキャプチャグループ』か『非キャプチャグループ』を使うことをおすすめします。

この正規表現を実行した結果はこちらです。

この記事ではregex101という正規表現チェッカーを使用しています。
「REGULAR EXPRESSION」欄には正規表現を、「TEST STRING」には検索対象の文字列を入力することで正規表現にマッチする文字列がマーキングされます。

期待通り"彼は「初めまして」と言いました。"と"彼は「さようなら」と言いました。"の2つにマッチしていることがわかります。

このようにグループ化を使えば選択（or）の範囲を指定することができます。

量指定子の適用範囲を指定する

疑問符やスター（アスタリスク）、プラスなどの量指定子の効果は直前の1文字に適用されます。

ですが括弧を使えば複数の文字のまとまりに対して繰り返し回数の指定をすることができます。

例えば"彼は「ありがとう」と言いました。""彼は「ありがとうありがとう」と言いました。"といったように"ありがとう"は何個あってもマッチさせたいとします。

まずは括弧を使わずに以下のような正規表現を書いてみます。

彼は「ありがとう+」と言いました。

これでは+は直前の文字列うにだけ影響するので、"彼は「ありがとうう」と言いました。"や"彼は「ありがとうううう」と言いました。"にはマッチしますが"彼は「ありがとうありがとう」と言いました。" にはマッチしません。

そこで括弧を使ってグループ化することによって"ありがとう"という文字列のかたまりに対して量指定子の効果を適用させることができます。

彼は「(ありがとう)+」と言いました。

この正規表現を実行した結果はこちらです。

このようにグループ化することによって量指定子の適用範囲を指定することができます。

キャプチャグループ

括弧によるキャプチャグループの機能を使えば一部の正規表現にマッチした文字列だけ取得することができます。

キャプチャグループには3種類あるのでそれぞれ詳しく解説していきます。

通常キャプチャグループ

キャプチャグループの基本形です。

括弧で囲んだ部分にマッチした文字列を取得することができます。

例えば"2024-04-01" など年月日を表す文字列にマッチさせたい場合に以下のような正規表現を書いたとします。

/*
  \d = 半角数字1文字
  {n} = 直前の文字をn回繰り返す
*/
\d{4}-\d{2}-\d{2}

このうち年・月・日を別々に取得したい場合には、括弧を使いこのように書くことができます。

(\d{4})-(\d{2})-(\d{2})

このように個別で取得したい箇所を括弧で囲むことでキャプチャを行うことができます。

キャプチャした文字列の使い道は主に2つです。

1. 後方参照

後方参照とはキャプチャした文字列を同じ正規表現内で参照することができる機能です。

後方参照は\1 \2 \3のようにバックスラッシュとキャプチャ番号を組み合わせて使います。

1つ目の括弧でキャプチャした値は\1で呼び出し、2つ目の括弧でキャプチャした値は\2で呼び出すといった感じで、キャプチャ番号は何個目の括弧でキャプチャした値かを表します。

具体的な使い方として、同じ単語を連続で使用していないかのチェックを行うことができます。

例えば以下の英文では"programming"と"salesperson"が誤って2回続けて書かれています。

I'm 勉強結構好きマン. I've been studying programming programming.
I used to be a salesperson salesperson, but I quit my job and became web engineer.

このように、2回連続で同じ単語を使っている箇所にマッチングする正規表現を書いてみましょう。

/*
  [a-zA-Z] = 小文字もしくは大文字のアルファベット1文字
*/
([a-zA-Z]+) \1

この正規表現を日本語で表すと『1文字以上の英単語があり、スペースを挟んで同じ英単語がある文字列』という意味になります

この正規表現を実行した結果がこちらです。

このように単語が重複して使われているかどうかをチェックすることができます。

2. プログラム内で変数として扱う

キャプチャグループで取得した文字列をプログラム内で扱うこともできます。

先ほどの年月日を取得する例で使ったこちらの正規表現を使って説明します。

(\d{4})-(\d{2})-(\d{2})

この正規表現をJavaScriptで文字列"2024-04-01"に対して実行した結果がこちらです。

JavaScript

const regex = /(\d{4})-(\d{2})-(\d{2})/gm;

const str = "2024-04-01";

let match = regex.exec(str);
console.log(match);
/** 出力 :
    [
      '2024-04-01',
      '2024',
      '04',
      '01',
      index: 0,
      input: '2024-04-01',
      groups: undefined
    ]
*/

このように正規表現の実行結果として配列が返ってきます。（8~16行目）

0番目には通常のマッチ結果が入り、1~3番目にはそれぞれキャプチャ順に年月日の文字列が入っていることがわかります。

この値を使い"2024年04月01日"の形式にフォーマットを書き換えるコードを書いてみます。

JavaScript

const newStr = `${match[1]}年${match[2]}月${match[3]}日`;
console.log(newStr); // 出力 : 2024年04月01日

このように、正規表現でキャプチャされた文字列はプログラム内で変数として扱うことができます。

キャプチャした文字列の扱い方は言語ごとに違うので詳細は使用する言語の公式ドキュメントを参照することをおすすめします。

名前付きキャプチャグループ

名前付きキャプチャグループとは、その名の通りキャプチャした文字列に対して名前をつけることができる機能です。

通常キャプチャグループでキャプチャされた文字列は\1の形で後方参照ができると説明しました。

しかし\1と書かれているだけではぱっと見て何の値を意味しているのかがわかりません。

さらに、後からキャプチャグループを増やすとなった場合は番号を変える必要も出てきます。

ですが名前付きキャプチャグループを使えばそういったデメリットを一掃することができます。

名前付きキャプチャグループは(?<name>...)、名前付きキャプチャグループの後方参照は\k<name>と記述します。

これを使い、先ほどの同じ英単語が重複しているかをチェックする正規表現を書き直してみましょう。

// 通常キャプチャグループを使用した場合
(\w+)\s\1

// 名前付きキャプチャグループを使用した場合
(?<word>\w+)\s\k<word>

マッチ結果としては通常キャプチャグループを使った場合と変化はありませんが、参照している値が何を意味しているかわかりやすくなります。

プログラム内でも名前付きキャプチャグループは便利です。
例えばJavaScriptではmatch.groups.wordのような形でキャプチャ文字列を扱うことができます。

このように名前付きキャプチャグループは通常キャプチャグループの欠点をカバーしてくれるものなので積極的に使っていくことをおすすめします。

言語やツールによっては名前付きキャプチャグループに対応していないものもあるようです。

非キャプチャグループ

非キャプチャグループは括弧がキャプチャを行わないようにする機能です。

括弧の使い道として、以下のように文字列のグループ化ができると説明しました。

彼は「(初めまして|さようなら)」と言いました。

この場合は"初めまして""さようなら"の文字列をキャプチャする必要はありませんが、(...)は通常キャプチャグループ扱いなので無駄なキャプチャが行われてしまいます。

このようにキャプチャとしての機能が不要な場合には非キャプチャグループが便利です。

非キャプチャグループは(?: ...)と記述します。

これを使い上の正規表現を書き換えたものがこちらです。

彼は「(?:初めまして|さようなら)」と言いました。

マッチ結果としては変化はありませんが、無駄なキャプチャをしないことで正規表現のパフォーマンス向上につながります。

まとめ

この記事を読み終えていただいた皆さんは、正規表現における括弧の意味とその使い方を理解できたかと思います。

括弧は色々な意味や書き方があって混乱しやすいですが、1つ1つの機能を理解すれば必ず使いこなせるようになります。

最後にもう一度ポイントをまとめておきます。

正規表現の括弧のポイントまとめ

正規表現における括弧の使い道はグループ化とキャプチャグループの2種類
グループ化は主にパイプの選択範囲指定と量指定子の適用範囲の指定に使われる
キャプチャグループとは一部の正規表現にマッチした文字列を取得する機能
キャプチャグループには通常キャプチャグループ、名前付きキャプチャグループ、非キャプチャグループの3種類がある

正規表現を1から勉強したい！という方はこちらの書籍がおすすめです。

詳説正規表現第3版

なんとなく初心者にとっつきにくいイメージがあるオライリー本ですが、こちらは正規表現に馴染みのない方でも読みやすく初心者にもおすすめです！

正規表現とは何か？正規表現の使い方・書き方をわかりやすく解説

Tue, 30 Apr 2024 00:00:00 GMT

この記事で解決できるお悩み

正規表現って何なの？
何を勉強すればいいの...？
記号が何を意味するのかわからない...

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

この記事では正規表現とは何か、正規表現の基礎的な使い方を解説します。

この記事を読み終えた時には正規表現とは何かがわかり、簡単な正規表現なら理解できるようになっているはずです！

正規表現とは？

正規表現とは^や$などの特殊な記号を使うことで、複数の文字列をたった一つの文字列で表す方法です。

正規表現は英語で「regular expression」と呼ばれ、略して「regex」とされることが多いです。

例えば、以下の文字列が電話番号かどうか判別してくださいと言われたらどうでしょう？

090-XXXX-XXXX /* X = 数字 */

人間からすれば一目見て電話番号だとわかりますが、コンピュータだとそうはいきません。

コンピュータに「090-0000-0000は電話番号だよ、090-0000-0001は電話番号だよ、090-0000-0002は...」と1つずつ教えれば判別してくれますが、無駄が多すぎます。

そこで「先頭に0~9までの数字が3つ、その後にハイフン、その後ろに...」のように電話番号とはどんなパターンの文字列なのかを説明してあげればよいではないか。と昔の偉い人は考えました。

その説明をするために必要なのが正規表現です。

電話番号を正規表現で書くと以下のようになります。

[0-9]{3}-[0-9]{4}-[0-9]{4} 
/* = 左から、0~9の数字が3つ、ハイフン1つ、0~9の数字が4つ、ハイフン1つ、0~9の数字が4つある文字列 */

電話番号をどこまで厳密にチェックしたいかによってこの正規表現は変わります。

この正規表現を使えばコンピュータ側が電話番号というものを理解し、大量の文章の中から電話番号だけを取得するといったことが可能になります。

このように欲しい文字列のパターンを指定することで、1つの文字列で複数の文字列を表すことができるのが正規表現です。

正規表現の活用方法

「正規表現がどんなものか何となくわかってきたけど具体的な使い方のイメージが湧かないな...」という方向けに正規表現を活用できる具体例を2つ紹介します。

文字列検索・置換

正規表現は『大量の文字列の中から特定のパターンを持つものだけ検索・置換したい』という時に非常に便利です。（そのために使われるのがほとんどです）

例えば「HTMLファイルの中からh2タグに囲まれた文字列だけ取得したい！」という時はどうするのが良いでしょうか？

<h2>で検索して中の文字列をコピペして、また検索してコピペしてを繰り返せば可能ではありますが、チェックしなくてはいけないファイルが大量にあった場合はかなり時間がかかってしまいます。

そこで、以下のような正規表現を使えばh2タグの中身のみを検索することが可能です。

(?<=<h2>)[^<>]+(?=<\/h2>)

日本語で言うと『左側に<h2>と言う文字列があり、<と>以外の文字列が1文字以上あり、右側に</h2>という文字列がある文字列』という意味です。
つまりは『h2タグに囲まれていて、かつ中に別のタグが存在していない文字列』を指定しています。

これをVSCode上で実行してみましょう。

VSCodeで正規表現を使った検索を行う場合は検索窓の右側にある「.*」のボタンを押す必要があります。

するとこのようにh2タグの中身にのみマッチしていることがわかります。

検索ができるということは、これを別の文字列に置換したり、まとめて削除することもできるということです。

このように大量の文字列の中から欲しい文字列だけをピンポイントで検索・置換ができるのが正規表現の大きな強みです。

フォーム送信内容チェック

フォームから送信されたメールアドレス、電話番号、パスワードなどが正常な値かどうか確認する、いわゆるバリデーションも正規表現を使えば可能です。

例えばパスワードは「半角英数字のみを使い8文字以上で指定してください」などの条件が指定されることがよくありますが、この条件を正規表現で表すと以下のようになります。

[a-zA-Z0-9]{8,}

この正規表現を使い、パスワードが条件を満たしているかJavaScriptで確認してみましょう。

JavaScript

const regex = /[a-zA-Z0-9]{8,}/gm;

/* 条件を満たしているパスワード */
const validPassword = 'Password1';
console.log(regex.test(password1)); // true

/* 条件を満たしていないパスワード */
const invalidPassword = 'Pass2';
console.log(regex.test(password1)); // false

条件を満たしている場合はtrueを、そうでない場合はfalseを返していることがわかります。

このように正規表現で文字列の条件を指定し、それにマッチするかどうかでバリデーションを行うことができます。

どの言語で使えるのか？

基本的にはどの言語でも使えます。

またコマンドライン上でのgrepコマンドや、VSCodeやAtomなどのコードエディタ上でも使えるので一度覚えてしまえば一生役に立つといっても過言ではありません。

言語ごとに使えるメタ文字やオプションに若干の違いがあるので、「コピペしたのに動作しない！」という時は言語やツールが正規表現内で使われているメタ文字に対応しているか確認してみてください。

正規表現を理解するために必要な知識

では正規表現を理解して使いこなすためには何を勉強すれば良いのでしょうか？

答えは以下の3つです。

メタ文字
特殊シーケンス
修飾子（オプション）

メタ文字と特殊シーケンスは正規表現を構成する要素です。

正規表現はこの2つと通常の文字列を組み合わせて作ります。

修飾子（オプション）は正規表現を実行する際の追加ルールのようなものです。

例えば「大文字/小文字を無視して検索する」「複数行の文字列に対して検索を行う」などがあります。

それぞれの要素について詳しく解説していきます。

メタ文字

正規表現上で特別な効果を発揮する記号のことを「メタ文字」と言います。

電話番号の例で使った[0-9]や{3}もメタ文字の1つです。

これらはただの文字列としてではなく、それぞれ「0~9までの数字1文字」「直前の文字を3回繰り返す」という特別な意味を表しています。

メタ文字一覧

まずは全体像を掴むため、メタ文字一覧をざっと眺めてみてください。

メタ文字	名前	意味	リンク
.	ドット	任意の1文字	詳細
[...]	文字クラス	リストの中の任意の1文字	詳細
[^...]	否定文字クラス	リストに含まれていない任意の1文字	詳細
\char	エスケープ文字	charがメタ文字の場合はただの文字列として扱う	詳細
?	疑問符	直前の文字が0個または1つ	詳細
*	スター	直前の文字が0個以上	詳細
+	プラス	直前の文字が1個以上	詳細
{min, max}	範囲指定	直前の文字が min 個以上 max 個以下	詳細
^	キャレット	行の先頭の位置	詳細
$	ドル	行の末尾の位置	詳細
(?=...)	先読み	右側に指定の文字列がある位置	詳細
(?<=...)	後読み	左側に指定の文字列がある位置	詳細
(?!...)	否定先読み	右側に指定の文字列がない位置	詳細
(?<!...)	否定後読み	左側に指定の文字列がない位置	詳細
\|	選択	区切っている正規表現のどれか	詳細
(...)	括弧	1. 選択の範囲を限定する 2. 量指定子の対象範囲を指定する 3. 後方参照のためにキャプチャする	詳細

ここから各メタ文字の詳しい説明をしていきます。

実際に自分で試してみたい！という方にはregex101という正規表現チェッカーをおすすめします。

具体的な使い方やその他の正規表現チェッカーについてはこちらの記事で詳しく説明しています。

[st-postgroup html_class="" id="301" rank="0"]

文字を表すメタ文字

.

.（ドット）は任意の1文字にマッチします。

つまりそれが文字でも数字でも記号でも何でもいいので1文字あればOK、ということです。

例えば"おつかれさま"と"おつかれさん"のどちらも検索したい場合は

おつかれさ.

のように、最後の文字をドットに変えるとどちらにもマッチさせることができます。

実際にマッチ結果をregex101の画面で確認してみましょう。

水色にマーキングされている箇所がマッチした文字列です。

"おつかれさま"と"おつかれさん"どちらにもマッチしていますね。

ただ見てわかる通り、ドットは何にでもマッチしてしまうので"**おつかれさい**" "**おつかれさ1**" "**おつかれさ（スペース）"**などにもマッチします。

このようにドットは何でもいい任意の1文字にマッチします。

[...]

このメタ文字は『文字クラス』と呼びます。

ドットはどんな文字にもマッチしてしまいますが、文字クラスを使えば『指定された文字の中でどれか1文字』にマッチさせることができます。

先ほどの例の"おつかれさま"と"おつかれさん"を検索したい場合、ドットを使うといらない文字列も検索に引っかかってしまいますが、文字クラスを使えば欲しい文字列にだけマッチさせることができます。

文字クラスを使って正規表現を書くとこのようになります。

おつかれさ[まん]

この正規表現を使った場合の結果も見てみましょう。

ドットを使った場合は全てにマッチしていたのが、"おつかれさま"と"おつかれさん"にだけマッチしていることがわかります。

このように、文字クラスは指定された文字の中のどれか1文字にマッチします。

文字クラスを使えば、 [0-9] [a-z] [ぁ-ん] などのように指定したい文字列の範囲をハイフンを使って繋げることで『数字1文字』『アルファベット1文字』『ひらがな1文字』などを指定することもできます。

[^...]

これは文字クラスの否定形なので、否定文字クラスと呼ばれます。

意味も文字クラスの逆で、『指定された文字以外のどれか1文字』を表します。

文字クラスの例とは逆に"おつかれさま"と"おつかれさん"だけはマッチさせたくない！という場合は以下のように書きます。

おつかれさ[^まん]

この正規表現を使った結果がこちらです。

"おつかれさい"や"おつかれさ1"にはマッチしていますが、"おつかれさま"と"おつかれさん"にはマッチしていないことがわかります。

このように、否定文字クラスは指定された文字以外のどれか1文字にマッチします。

\char

正規表現においてメタ文字は特別な意味を持つと説明しましたが、ではメタ文字として使われているドットやブラケットなどの記号にマッチさせたい時はどうしたら良いでしょう？

そんな時に使うのが \（バックスラッシュ）です。

メタ文字の前にバックスラッシュをつけることで『これはメタ文字扱いして欲しくない』ということを正規表現に伝えることができます。

このように特別な意味を持つ文字や記号を通常の文字列として扱うことを『エスケープ』と呼びます

エスケープして**"[...]**"という文字列を検索した例がこちらです。

このようにメタ文字であるドットとブラケットの前にバックスラッシュをつけることで**"[...]**"という文字列にマッチさせることができます。

正規表現には逆にバックスラッシュをつけることで特別な意味を持つ特殊シーケンスというものがあります。
詳しくは「特殊シーケンス」の項目で説明します。

繰り返し回数を表すメタ文字

繰り返し回数を表すメタ文字を『量指定子』と呼びます。

また中級者向けの内容ではありますが、量指定子には『最長一致』『最短一致』という考え方があり、これを理解することで正規表現のパフォーマンスを最大化することもできます。

詳しく知りたい方はこちらの記事を読んでみてください。

[st-postgroup html_class="" id="536" rank="0"]

?

疑問符は直前の文字が0個または1個ある場合にマッチします。

つまり『なくてもいいし、あってもいい』という意味です。

例えば "こんにちは"と検索する時に、"こんにちは！" とびっくりマークが付いてる場合もマッチさせたい場合はこのように書きます。

こんにちは！?

この正規表現を使ったマッチ結果は以下のようになります。

このようにびっくりマークがあってもなくてもマッチしていることがわかります。

"こんにちは。"などにもマッチさせたい場合は文字クラスと組み合わせて
こんにちは[！。]?
とすればOKです。

*

スター（またはアスタリスク）は直前の文字が0個以上ある場合にマッチします。

つまり『なくてもいいし、いくつあってもいい』という意味です。

例えば"**うわ！**"という文字列を検索する時に、"**うわー！**"や**"うわーー！**"のように伸ばし棒ある場合もマッチさせたい場合はこのように書きます。

うわー*！

この正規表現を使ったマッチ結果は以下のようになります。

このように伸ばし棒の数に関わらず、全ての"**うわ**！"にマッチします。

+

プラスは直前の文字が1個以上ある場合にマッチします。

つまり『少なくとも一つはあって欲しいが、いくつあってもいい』という意味です。

上のスターの例で使った正規表現をプラスを使うように変えてみましょう。

うわー+！

この正規表現を先ほどの例と同じ文字列に使用した結果はこのようになります。

スターを使った場合は"**うわ！**"にもマッチしましたが、プラスを使った場合は伸ばし棒が少なくとも1つはないといけないのでマッチしません。

このようにプラスは直前の文字が1個以上ある場合にのみマッチします。

{min, max}

ここまでで説明した疑問符やスター、プラスでは直前の文字が最低何個か、最大何個かを指定することはできません。

しかし {} （ブレスと呼びます）を使えば範囲指定が可能になります。

先ほどと同じ例を使って、『伸ばし棒が最低2個、最大5個ある』という指定をしてみましょう。

うわー{2,5}！

この正規表現で検索した結果はこちらです。

このように伸ばし棒が2~5個ある場合はマッチしますがそれ以外の場合はマッチしません。

範囲指定では直前の文字を最低何回、最大何回繰り返すかを指定することができます。

範囲指定では、{2} で直前の文字が2個ある時のみマッチさせたり、{2,} で2個以上ある時のみマッチさせたりといった使い方もできます。

位置を表すメタ文字

メタ文字について説明する前に、前提知識として正規表現の「位置へのマッチ」について説明します。

正規表現のマッチには『文字列へのマッチ』と『位置へのマッチ』の2種類があります。

例えば"**REGEX**"という文字列に対して、

REG

という正規表現を実行すると

このように文字列"**REG**"にマッチします。

関数などで実行した場合は文字列**"REG**"が返り値として取得できると思います。

これが『文字列へのマッチ』です。

一方で、文字列**"REGEX**"に対して

という『行の先頭』を意味する正規表現を実行すると、

このように文字列にはマッチせず、『行の先頭』つまり位置にマッチします。

この場合は文字列にはマッチしていないので関数を実行しても空の値が返ってきます。

これが「位置へのマッチ」です。

このセクションで説明するのは全て『位置へのマッチ』であり文字列にはマッチしないということに注意してください。

^

キャレット（ハットとも呼びます）は行の先頭にマッチします。

例えば箇条書きリストの"**・**"にマッチさせたい場合は以下のように書きます。

^・

この記事の見出しの一部分を箇条書きにしたものにこの正規表現を実行してみた結果がこちらです。

箇条書きリストの中で「文字列検索・置換」という箇所に"**・**"が含まれているのにも関わらずマッチしていません。

それはキャレットで『行の先頭にある"**・**"』を指定しているからです。

このように、キャレットは行の先頭にマッチします。

$

ドルは行の末尾にマッチします。

例えば行末の"**。**"にマッチさせたい場合は以下のように書きます。

。$

この正規表現を実行した結果がこちらです。

"**初めまして。**" "**よろしくお願いします。**"など文中にも"**。**"がありますが、ドルで行の末尾を指定しているので行末の"。"にのみマッチします。

このように、ドルは行の末尾にマッチします。

(?=...) / (?<=...) / (?!...) / (?<!....)

これらは先読み・後読みと呼ばれるメタ文字です。

それぞれ『右側に指定の文字列がある位置』『左側に指定の文字列がある位置』にマッチします。

先読み・後読みについては説明が長くなってしまうので別記事で詳しく解説しています。

しっかり理解したい方はこちらを読んでみてください。

[st-postgroup html_class="" id="368" rank="0"]

その他のメタ文字

|

パイプは『パイプで区切られた正規表現のどれか』にマッチします。

つまり『or』です。

例として"初めまして"と"さようなら"のどちらにもマッチさせたい場合、正規表現はこのようになります。

初めまして|さようなら

この正規表現の実行結果は以下のようになります。

このように"初めまして"と"さようなら"だけにマッチしていることがわかります。

初めまして|よろしくお願いします|さようなら
のように何個でもパイプを繋げることができます。

(...)

括弧には主に3つの使い方があります。

選択の範囲を限定する
量指定子の対象範囲を指定する
後方参照のためにキャプチャする

説明すると長くなるので詳しくはこちらの記事でまとめています。

[st-postgroup html_class="" id="481" rank="0"]

エスケープシーケンス

エスケープシーケンスとは、アルファベット1文字の前にバックスラッシュを付けることで特殊な効果を発揮するものです。

ここでは一般的な特殊シーケンスのみ紹介します。

特殊シーケンスは言語やツールによって差があるので詳しくはそれぞれの公式ドキュメントを参照することをおすすめします。

エスケープシーケンス	意味	対応する正規表現
\d	1つの数字にマッチ	[0-9]
\D	数字以外の1つの文字にマッチ	[^0-9]
\w	単語文字 (アルファベット、数字、アンダースコア) のいずれかにマッチ	[a-zA-Z0-9_]
\W	単語文字以外の1つの文字にマッチ	[^a-zA-Z0-9_]
\n	改行	-
\t	タブ	-
\s	空白文字 (スペース、タブ、改行など) のいずれかにマッチ	[ \n\t]
\S	空白文字以外の1つの文字にマッチ	[^ \n\t]
\b	単語の境界にマッチ	-
\B	単語の境界以外の位置にマッチ	[^\b]

修飾子（オプション）

修飾子（オプション）とは、正規表現を実行する際の追加ルールです。

オプションの指定方法としては下記のような形で記述したり、関数の第一引数に正規表現を渡し第二引数にオプションを渡すといったものがあります。

/正規表現/オプション

こちらもエスケープシーケンスと同じく言語やツールによって差異があるため、一般的なもののみ紹介します。

修飾子	意味
i	大文字・小文字を区別せずマッチする
m	複数行に渡ってマッチする
s	`.`が改行文字にマッチする
x	正規表現を見やすくするため、スペースや改行を挟んで記述することができるようにする

まとめ

この記事を最後まで読んでもらえた方は『正規表現とは何か』をざっくり理解できたかと思います。

正規表現を使えば業務効率化やシステム開発など様々なことに活用できるのでぜひ自分でも色々試してみることをおすすめします！

最後にもう一度ポイントをまとめておきます。

正規表現とは複数の文字列をたった一つの文字列で表す方法である
正規表現を使えば検索・置換・バリデーションなどを様々な言語やツールで使うことができる
正規表現を構成する要素は「メタ文字」「エスケープシーケンス」「修飾子」の3つである

正規表現を1から勉強したい！という方はこちらの書籍がおすすめです。

詳説正規表現第3版

正規表現の（否定）先読み・後読みについてイメージ付きで解説！

Fri, 26 Apr 2024 00:00:00 GMT

この記事で解決できるお悩み

正規表現の先読み・後読みについてしっかり理解したい！
先読み・後読みの具体的な使い方を知りたい

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

この記事では正規表現の先読み・後読みについて、図を使ってそれぞれのイメージを説明しつつ、具体的な活用方法を解説します。

この記事を読み終えれば、正規表現の先読み・後読みを理解してプロダクト開発に役立てることができますよ。

先読み・後読みは『位置へのマッチ』である

先読み・後読みについて説明する前に、前提知識として正規表現の「位置へのマッチ」について説明します。

正規表現のマッチには『文字列へのマッチ』と『位置へのマッチ』の2種類あり、先読み・後読みは『位置へのマッチ』が行われます。

例えば"REGEX"という文字列に対して、REGという正規表現を実行すると

このように文字列"REG"にマッチします。

関数などで実行した場合は文字列"REG"が返り値として取得できると思います。

これが『文字列へのマッチ』です。

一方で、"REGEX"に対して^という正規表現を実行すると、

このように文字列にはマッチせず、『文字列の先頭』つまり位置にマッチします。

この場合は文字列にはマッチしていないので関数を実行しても空の値が返ってきます。

これが「位置へのマッチ」です。

今回説明する先読み・後読みも『位置へのマッチ』なので文字列にはマッチしない、ということに注意してください。

先読みと後読み

ここから先読みと後読みについて説明します。

読みながら自分でも実際に試してみたい！という方は regex101 という正規表現チェッカーをおすすめします。

詳しい使い方やその他の正規表現チェッカーについてはこちらの記事で解説しています。

[st-postgroup html_class="" id="301" rank="0"]

先読み（lookahead）とは

先読みとは、今いる位置から右側に指定した文字列があるかチェックする機能です。

先読みは以下のように記述します。

(?=チェックしたい文字列)

例として"lookahead"の"look"、つまり右側に"ahead"がくっついている文字列"look"にマッチさせたい場合、正規表現はこのようになります。

look(?=ahead)

この正規表現を"lookahead"という文字列に適用した場合の動きは以下のようなイメージです。

正規表現エンジンはまず、look(?=ahead)のうちlookを実行します。

この時正規表現は左から右に向かって、1文字ずつマッチするかをチェックしていきます。

すると"lookahead"に含まれる文字列"look"がマッチします。

その後、先読み部分の(?=ahead)の処理を実行します。

先読みは『今いる位置から右側に指定の文字列が存在するか』をチェックするので、今回は"look"の直後の位置から右側に"ahead"が存在するかチェックします。

この時正規表現は"ahead"の方に進んでいくのではなく、あくまで"look"の直後の位置から"ahead"があるかどうか眺めているだけ、というイメージを持つと理解しやすいかと思います。

"ahead"が存在しない場合はマッチ不成立となりますが、今回は"ahead"が存在しているので"look"の直後の位置にマッチします。

結果、マッチ文字列として"look"が得られます。

先にも説明しましたが、先読み・後読みは『位置へのマッチ』が行われるのでマッチ結果として文字列は返ってきません。

先読みのポイントは2つです。

先読みは今いる位置から右側に文字列があるかチェックする
先読みは文字列ではなく位置にマッチする

後読み（lookbehind）とは

後読みとは、今いる位置から左側に指定した文字列があるかチェックする機能です。

後読みは以下のように記述します。

(?<=チェックしたい文字列)

"lookbehind"の"behind"、つまり左側に"look"がくっついている"behind"という文字列にマッチさせたい場合、正規表現はこのようになります。

(?<=look)behind

この正規表現を"lookbehind"という文字列に適用した場合の動きは以下のようなイメージです。

正規表現エンジンはまず、(?<=look)behindのうち(?<=look)を実行します。

文字列の先頭の位置から左を向いて"look"があるかチェック、1文字分進んで"l"の直後の位置に移動、そこから左を向いて"look"があるかチェック、さらに1文字分進んで...といった具合に、1歩進んで後ろを振り返るような動きを繰り返して"look"を探します。

"k"の直後の位置からみると"look"が存在していることが確認できたので、正規表現(?<=look)は"k"の直後の位置にマッチします。

あとは今の位置から右側に"behind"が存在するかを見ていくだけです。

結果"behind"が存在していたので、マッチ文字列として"behind"が得られます。

後読みのポイントは2つです。

後読みは今いる位置から左側に文字列があるかチェックする
後読みは文字列ではなく位置にマッチする

先読み・後読みの便利な使い方

「先読みと後読みが何なのかはわかったけど、具体的にどう使うの？」という方向けに、先読み・後読みの便利な使い方を3つ紹介します。

1. タグで囲まれた文字列を取得する

HTMLファイルの中で、pタグやh1~6タグに囲まれた文字列だけ取得したい！ということが可能です。

今回はh2タグに囲まれた文字列だけ取得したい場合の例を紹介します。

(?<=<h2>)[^<>]+(?=<\/h2>)

この正規表現を大きく3つに分けて説明すると、

(?<=<h2>)

は後読みを使っており、左側に"<h2>"が存在する位置にマッチします。

この正規表現だとh2タグにクラスが付与されて <h2 class="hoge"> となっている場合はマッチしません。

[^<>]+

こちらはh2タグの中身を指定しています。

h2タグで囲まれている中に"<"と">"があって欲しくないため、否定文字クラス（[^]）を使って除外しています。

結果『"<"でも">"でもない文字が1文字以上ある』という意味になります。

(?=<\/h2>)

最後に、こちらは先読みを使い右側に"</h2>"が存在するかチェックしています。

先読みと後読みの部分は文字列にはマッチしないため、h2タグに囲まれた文字列だけを取得することができます。

2. パスワードに英数字が使われているかチェック

以下の正規表現を使えば、『パスワードにアルファベットと数字がそれぞれ1文字以上使われているか』といったチェックが可能です。

^(?=.*[0-9])(?=.*[a-zA-Z])[a-zA-Z0-9]{8,}$

こちらも3ブロックに分けて説明します。

(?=.*[0-9])

では先読みを使っており、1文字でも数字が使われていればマッチします。

(?=.*[a-zA-Z])

こちらも同じく先読みを使い、小文字、大文字関係なくアルファベットが1文字あればマッチします。

[a-zA-Z0-9]{8,}

こちらは『アルファベットか数字のみを使い8文字以上』をパスワードの条件に設定しています。

つまりこの正規表現は『数字を1文字以上使っている』『アルファベットを一文字以上使っている』『アルファベットか数字のみを使い8文字以上』の3つの条件を全て満たす文字列にのみマッチするということになります。

3. 3桁ごとにカンマ区切りを入れる

この正規表現を使えば桁数が多い数値に対して、3桁ごとにカンマ区切りを入れることが可能です。

(?<=\d)(?=(\d\d\d)+$)

\d は**[0-9]** と同じ意味です。

こちらは大きく分けて2ブロックあり、

(?<=\d)

こちらは後読みを使って左側に数字があるかチェックしています。

これは",100,000"のように数字の先頭にカンマがつくのを防ぐためです。

(?=(\d\d\d)+$)

こちらは日本語で表すと「右側に3桁の数字が1組以上あり、行末がある位置」という意味になります。

ややこしいですが、要は3桁、6桁、9桁、12桁...と3の倍数桁の数字が右側にある位置にマッチします。

改めてこの正規表現でマッチする箇所を図示するとこのようになります。

これでマッチした位置を","で置換すれば3桁ごとにカンマ区切りを入れることができます。

否定先読みと否定後読み

ここまでで説明した先読み・後読みには否定の形が存在します。

そのため普通の『先読み・後読み』はそれぞれ『肯定先読み・肯定後読み』と呼ばれることもあります。

基本的な動きは肯定の形と同じなので、簡単に説明していきます。

否定先読みとは

先読みの否定形です。

今いる位置から右側に指定した文字列が"ない"ことをチェックする機能です。

否定先読みは以下のように記述します。

(?!チェックしたい文字列)

"lookahead"以外の"look"にマッチさせたい場合は以下のような正規表現になります。

look(?!ahead)

この場合、"look"単体や"lookbehind"などの"look"にはマッチしますが、"lookahead"の"**look**"にはマッチしません。

否定後読みとは

後読みの否定形です。

今いる位置から左側に指定した文字列が"ない"ことをチェックする機能です。

否定後読みは以下のように記述します。

(?<!チェックしたい文字列)

"lookbehind"以外の"behind"にマッチさせたい場合は以下のような正規表現になります。

(?<!look)behind

この場合、"behind"単体や"left behind"などの"behind"にはマッチしますが、"lookbehind"の"look"にはマッチしません。

まとめ

この記事を読んで、正規表現の先読み・後読みについて理解できた！という方がいれば嬉しいです。

具体的な使い方も紹介したので、ぜひ今後の開発に役立てていってください！

最後にもう一度今回のポイントをまとめておきます。

先読み・後読みは文字列ではなく今いる位置にマッチする
先読みは今いる位置から右側に指定の文字列があるかチェックする
後読みは今いる位置から左側に指定の文字列があるかチェックする
否定先読みは今いる位置から右側に指定の文字列がないことをチェックする
否定後読みは今いる位置から左側に指定の文字列がないことをチェックする

正規表現を一から勉強したい！という方はこちらの書籍がおすすめです。

詳説正規表現第3版

【厳選】Python用正規表現チェッカーおすすめ3選

Wed, 24 Apr 2024 00:00:00 GMT

この記事で解決できるお悩み

Python用の正規表現チェッカーを探しているけどどれがいいか分からない...
それぞれの正規表現チェッカーの特徴を比較したい
正規表現チェッカーの具体的な使い方を知りたい

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

この記事では「これを使っておけばOK！」という正規表現チェッカーの紹介と、その他のおすすめチェッカーとの比較や使い方をご紹介します。

この記事を読み終えれば、お気に入りの正規表現チェッカーが見つかっているはずですよ！

正規表現とは？

正規表現とは^や$などの特殊な記号を使うことで、複数の文字列をたった一つの文字列で表す方法です。

例えば以下の文字列が電話番号かどうか判別してくださいと言われたらどうするでしょうか？

090-XXXX-XXXX /* X = 数字 */

人間からすれば一目見て電話番号だとわかりますが、コンピュータはそうはいきません。

コンピュータに「090-0000-0000は電話番号だよ、090-0000-0001は電話番号だよ、090-0000-0002は、、」と1つずつ教えれば判別してくれますが、無駄が多すぎです。

その説明をするために必要なのが正規表現です。

電話番号を正規表現で書くと以下のようになります。

[0-9]{3}-[0-9]{4}-[0-9]{4} 
/* = 左から、0~9の数字が3つ、ハイフン1つ、0~9の数字が4つ、ハイフン1つ、0~9の数字が4つある文字列 */

この正規表現を使えば、コンピュータ側が電話番号というものを理解し、大量の文章の中から電話番号だけを取得するといったことが可能になります。

このように欲しい文字列のパターンを指定することで1つの文字列で複数の文字列を表すことができるのが正規表現です。

正規表現チェッカーはなぜ必要なのか？

上の例のように、正規表現は人間からするとややわかりづらいです。

なのでその正規表現が意図したものになっているかチェックする必要がありますが、Pythonコード上のチェックでは手間がかかり、出力結果もわかりづらくなりがちです。

しかし正規表現チェッカーではお手軽かつ視覚的にもわかりやすくチェック結果を出力してくれます！

正規表現チェッカーを使えば、チェックしたい正規表現とマッチ対象の文字列を入力するだけでマッチ確認、置換結果確認、マッチした文字列のリスト出力などなど...さまざまな機能を提供してくれます！

正規表現を扱う上でこんなに便利なものはないので、積極的に活用することをおすすめします！

結局どれを使えばいいの？

結論から言うと**regex101**が圧倒的におすすめです。

理由はダントツで高機能だからです。

正規表現チェックや置換機能はもちろん、正規表現解説やステップ数（≒ 正規表現のパフォーマンス）の確認機能まで搭載されています。

さらにPythonだけでなくJavaScriptやPHP、Javaなどさまざまな言語に対応しているので、正規表現に関しては**このツールを使っておけば間違いない！**と断言できます。

ただあまりにも多機能だったり、使い方が一目ではわかりづらかったりと、初心者の方には合わない可能性もあります。

そういった方はこの後紹介するその他の正規表現チェッカーも検討してみてください。

Python用の正規表現チェッカーおすすめ3選

ここからは、regex101も含めたおすすめ正規表現チェッカーを3つ紹介します。

1 : regex101

https://regex101.com/

</figcaption>

</figure>

自分が把握している正規表現チェッカーの中で最も高機能です。

このツールには正規表現チェッカーに必要なほぼ全ての機能が搭載されています。

特にデバッグ機能では正規表現がマッチするまでにかかったステップ数、つまり正規表現のパフォーマンスを計測することができます。

普段あまり気にすることはないかもしれませんが、上級者の方にはこれほど便利な機能はないと思います。

またPython以外の言語にも対応しており、迷ったらこちらを選んでおけば問題ないでしょう。

2 : Debuggex

https://www.debuggex.com/

</figcaption>

</figure>

機能的にはregex101に劣りますが、正規表現の視覚化機能が優れておりわかりやすいです。

またこちらのツールにもデバッグ機能が搭載されているので正規表現の処理順序を確認したい場合にも便利です。

3 : Pythex

https://pythex.org/

</figcaption>

</figure>

こちらがおすすめの理由はそのシンプルさです。

機能は正規表現マッチ結果の確認のみなので、細かい機能はいらないよ！という方にはこちらをおすすめします。

各チェッカーの機能早見表

ここまで紹介してきた正規表現チェッカー3つの機能を表にまとめました。

それぞれの項目の説明は以下の通りです。

マッチ ... 正規表現が対象の文字列にマッチするか確認できる機能
置換 ... マッチした文字列を置換する機能
リスト ... マッチした文字列をリストとしてまとめて確認できる機能
視覚化 ... 正規表現を視覚的に表示する機能
デバッグ ... 正規表現がマッチするまでの処理手順や試行回数を確認できる機能
コードジェネレーター ... 入力した正規表現と対象文字列を元にコードを生成する機能

	マッチ	置換	リスト	視覚化	デバッグ	コードジェネレーター
regex101	◯	◯	◯	◯	◯	◯
Debuggex	◯	×	×	◯	◯	×
Pythex	◯	×	×	×	×	×

各チェッカーの使い方

1 : regex101

最もおすすめのregex101から説明していきます。

ここでは4つの機能の使い方を説明します！

基本の使い方（正規表現マッチ）
置換機能
リスト出力機能
デバッグ機能

1 : 基本の使い方（正規表現マッチ）

① 『FLAVOR』欄で『Python』を選択

② 『REGULAR EXPRESSION』欄に正規表現を入力

③ 『TEST STRING』欄にチェック対象の文字列を入力

そうすると、『TEST STRING』に入力した文字列のうち、正規表現にマッチしたものだけマーキングされます。

ちなみに( )でグループ指定などしているとマーキング色を分けてくれるので視覚的にもどの正規表現がどことマッチしているかがわかりやすいです。

『REGULAR EXPRESSION』欄に正規表現を入力すると、自動的に『EXPLANATION』欄で正規表現の解説をしてくれます。

また、『MATCH INFORMATION』欄では正規表現にマッチした文字列（とグループ化していればその文字列）をリスト表示してくれます。

2 : 置換機能

① 画面左『FUNCTION』で『Substitution』を選択

② 画面中央の『SUBSTITUTION』欄に置換文字列を入力

すると下に置換結果を出力してくれます！

3 : リスト出力機能

① 画面左『FUNCTION』で『List』を選択

② 画面中央の『List』欄にリスト出力形式を入力

これでキャプチャした文字列などをリスト化して出力してくれます。

正規表現では、() で囲んだ部分にマッチした文字列は別枠で変数などに格納されます。
この機能をキャプチャと言います。

4 : デバッグ機能

① 『FLAVOR』で『PCRE2 (PHP >=7.3)』を選択
※ 2024年4月現在PCRE以外にはデバッグ機能は対応していません！

② 『Tool』欄で『Regex Debugger』をクリック

すると以下のような画面が出てきます。

① 左側の『MATCH』でチェックしたいマッチを選択

② 右側の『MATCH STEPS』で合計ステップ数やステップごとの処理内容を確認

ややわかりづらいですが、上記の例だと**「1つ目のマッチに合計5ステップかかった」**ということがわかります。
このステップ数が異常に多い場合は正規表現の見直しをした方が良いですね。

また『MATCH STEPS』の再生ボタンや、矢印ボタンを押すことで各ステップで対象文字列のどこをチェックしているのかが視覚的にわかり便利です。

2 : Debuggex

① 言語選択で『Python』を選択

② その下のテキストボックスに正規表現を入力

そうすると、画面上に入力した正規表現を視覚化して表示してくれます。

③ 正規表現を入力したボックスの下のテキストボックスに検索対象の文字列を入力

するとマッチした文字列がマーキングされます。

さらに、その下にある『POSITION』と書かれているポインタを動かすと正規表現の処理の流れを確認することができます。

3 : Pythex

① 『Your regular expression』欄にチェックしたい正規表現を入力

② 『Your test string』欄にチェック対象の文字列を入力

すると画面下左にマッチした文字列をマーキングして表示し、右にキャプチャした文字列をリスト化して表示してくれます。

まとめ

ここまでで紹介した正規表現チェッカーからお気に入りを見つければ、今後は正規表現チェックに手間取ることもなくなり、業務効率UP間違いなしです。

最後にもう一度おすすめの正規表現チェッカーをまとめておきます。

おすすめのPython用正規表現チェッカー3つ

regex101
→ 迷ったらこれ！トップレベルで多機能。
Debuggex
→ 優秀な視覚化機能。
Pythex
→ シンプルさを求める方におすすめ。

正規表現を1から勉強したい！という方はこちらの書籍がおすすめです。

詳説正規表現第3版

なんとなく初心者にとっつきにくいイメージがあるオライリー本ですが、こちらは正規表現に馴染みのない方でも読みやすく、初心者にもおすすめです！

【厳選】PHP用正規表現チェッカーおすすめ3選

Tue, 23 Apr 2024 00:00:00 GMT

この記事で解決できるお悩み

PHP用の正規表現チェッカーを探しているけどどれがいいか分からない...
それぞれの正規表現チェッカーの特徴を比較したい
正規表現チェッカーの具体的な使い方を知りたい

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

この記事では「これを使っておけばOK！」という正規表現チェッカーの紹介と、その他のおすすめチェッカーとの比較や使い方をご紹介します。

この記事を読み終えれば、お気に入りの正規表現チェッカーが見つかっているはずですよ！

正規表現とは？

正規表現とは^や$などの特殊な記号を使うことで、複数の文字列をたった一つの文字列で表す方法です。

例えば以下の文字列が電話番号かどうか判別してくださいと言われたらどうするでしょうか？

090-XXXX-XXXX /* X = 数字 */

人間からすれば一目見て電話番号だとわかりますが、コンピュータはそうはいきません。

コンピュータに「090-0000-0000 は電話番号だよ、090-0000-0001 は電話番号だよ、090-0000-0002 は、、」と1つずつ教えれば判別してくれますが、無駄が多すぎです。

その説明をするために必要なのが正規表現です。

電話番号を正規表現で書くと以下のようになります。

[0-9]{3}-[0-9]{4}-[0-9]{4} 
/* = 左から、0~9の数字が3つ、ハイフン1つ、0~9の数字が4つ、ハイフン1つ、0~9の数字が4つある文字列 */

このように欲しい文字列のパターンを指定することで1つの文字列で複数の文字列を表すことができるのが正規表現です。

正規表現チェッカーはなぜ必要なのか？

上の例のように、正規表現は人間からするとややわかりづらいです。

なのでその正規表現が意図したものになっているかチェックする必要がありますが、PHPコード上のチェックでは手間がかかり、出力結果もわかりづらくなりがちです。

しかし正規表現チェッカーではお手軽かつ視覚的にもわかりやすくチェック結果を出力してくれます！

正規表現を扱う上でこんなに便利なものはないので、積極的に活用することをおすすめします！

結局どれを使えばいいの？

結論から言うと**regex101**が圧倒的におすすめです。

理由はダントツで高機能だからです。

正規表現チェックや置換機能はもちろん、正規表現解説やステップ数（≒ 正規表現のパフォーマンス）の確認機能まで搭載されています。

さらに、PHPだけでなくJavaScriptやPython、Javaなどさまざまな言語に対応しているので、正規表現に関しては**このツールを使っておけば間違いない！**と断言できます。

ただあまりにも多機能だったり、使い方が一目ではわかりづらかったりと、初心者の方には合わない可能性もあります。

そういった方はこの後紹介するその他の正規表現チェッカーも検討してみてください。

PHP用の正規表現チェッカーおすすめ3選

ここからは、regex101も含めたおすすめ正規表現チェッカーを3つ紹介します。

1 : regex101

https://regex101.com/

</figcaption>

</figure>

自分が把握している正規表現チェッカーの中で最も高機能です。

このツールには正規表現チェッカーに必要なほぼ全ての機能が搭載されています。

特にデバッグ機能では正規表現がマッチするまでにかかったステップ数、つまり正規表現のパフォーマンスを計測することができます。
普段あまり気にすることはないかもしれませんが、上級者の方にはこれほど便利な機能はないと思います。

またPHP以外の言語にも対応しており、迷ったらこちらを選んでおけば問題ないでしょう。

2 : RegExr

https://regexr.com/

</figcaption>

</figure>

機能的にはregex101にやや劣りますが、デザインが洗練されており、使用方法も視覚的にわかりやすいです。

デバッグ機能なんて使わないし、regex101は見た目がちょっと無骨すぎるな...という方にはこちらをおすすめします。

3 : Live Regex

https://www.phpliveregex.com/

</figcaption>

</figure>

こちらはPHP特化型の正規表現チェッカーです。

PHPの正規表現処理に使われるpreg_matchやpreg_replaceなどの関数の実行結果を確認することができます。

各チェッカーの機能早見表

ここまで紹介してきた正規表現チェッカー3つの機能を表にまとめました。

それぞれの項目の説明は以下の通りです。

マッチ ... 正規表現が対象の文字列にマッチするか確認できる機能
置換 ... マッチした文字列を置換する機能
リスト ... マッチした文字列をリストとしてまとめて確認できる機能
デバッグ ... 正規表現がマッチするまでの処理手順や試行回数を確認できる機能
視覚化 ... 正規表現を視覚的に表示する機能
コードジェネレーター ... 入力した正規表現と対象文字列を元にコードを生成する機能

	マッチ	置換	リスト	視覚化	デバッグ	コードジェネレーター
regex101	◯	◯	◯	◯	◯	◯
RegExr	◯	◯	◯	◯	×	×
Live Regex	◯	◯	◯	×	×	×

各チェッカーの使い方

1 : regex101

最もおすすめのregex101から説明していきます。
ここでは4つの機能の使い方を説明します！

基本の使い方（正規表現マッチ）
置換機能
リスト出力機能
デバッグ機能

1 : 基本の使い方（正規表現マッチ）

① 『FLAVOR』欄で『PCRE2 (PHP >=7.3)』を選択

② 『REGULAR EXPRESSION』欄に正規表現を入力

③ 『TEST STRING』欄にチェック対象の文字列を入力

そうすると、『TEST STRING』に入力した文字列のうち、正規表現にマッチしたものだけマーキングされます。
ちなみに ( ) でグループ指定などしているとマーキング色を分けてくれるので、視覚的にどの正規表現がどことマッチしているかがわかりやすいです。

『REGULAR EXPRESSION』欄に正規表現を入力すると、自動的に『EXPLANATION』欄で正規表現の解説をしてくれます。

また、『MATCH INFORMATION』欄では正規表現にマッチした文字列（とグループ化していればその文字列）をリスト表示してくれます。

2 : 置換機能

① 画面左『FUNCTION』で『Substitution』を選択

② 画面中央の『SUBSTITUTION』欄に置換文字列を入力

すると下に置換結果を出力してくれます！

3 : リスト出力機能

① 画面左『FUNCTION』で『List』を選択

② 画面中央の『List』欄にリスト出力形式を入力

これでマッチ結果をリスト化して出力してくれます。

マッチした文字列を出力してほしい場合は「$0」と入力してください！

4 : デバッグ機能

画面中央の『Tool』欄で『Regex Debugger』をクリック

すると以下のような画面が出てきます。

① 左側の『MATCH』でチェックしたいマッチを選択

② 右側の『MATCH STEPS』で合計ステップ数やステップごとの処理内容を確認

また『MATCH STEPS』の再生ボタンや、矢印ボタンを押すことで各ステップで対象文字列のどこをチェックしているのかが視覚的にわかり便利です。

2024年4月現在デバッグ機能に対応しているのはPCREのみです。

2 : RegExr

ここでは3つの機能の使い方を説明します。

正規表現マッチ
置換機能
リスト出力機能

1 : 正規表現マッチ

① 右上の言語選択で『PCRE』を選択

②『Expression』欄に正規表現を入力

③ 『Text』欄にチェック対象の文字列を入力

そうすると、『Text』に入力した文字列のうち、正規表現にマッチしたものだけ青くマーキングされて表示されます。

また、画面下の『Tool』欄ではいくつかモードが選べるのですが、デフォルトでは『Explain』になっており、入力した正規表現の解説をしてくれます。

2 : 置換機能

『Tool』のモードを『Replace』にすると置換結果を確認することができます。
置換文字を赤枠のエリアに入力すると下に置換結果が表示されます。

3 : リスト出力機能

『Tool』のモードを『List』にするとキャプチャした文字列などの一覧を表示してくれます。

また、赤枠の部分で出力形式を変更することも可能です。

マッチした文字列を出力してほしい場合は「$0」と入力してください！

3 : Live Regex

PHPの関数ごとに全部で5つの機能がありますが、割愛して2つのみ紹介します。

正規表現マッチ
置換機能

1 : 正規表現マッチ

① 『Regex』欄にチェックしたい正規表現を入力

② 『Your search string(s)』欄にチェック対象の文字列を入力

するとこのように preg_match の実行結果を表示してくれます！

2 : 置換機能

① 『preg_replace』を選択

② 『Replacement』欄に置換文字列を入力

すると下に preg_replace の実行結果を表示してくれます。（折り返してくれないのが残念ですが、、）

まとめ

最後にもう一度おすすめの正規表現チェッカーをまとめておきます。

おすすめのPHP用正規表現チェッカー3つ

regex101
→ 迷ったらこれ！トップレベルで多機能。
RegExr
→ 洗練されたデザインかつ多機能を求める方におすすめ。
Live Regex
→ PHPに特化。

正規表現を1から勉強したい！という方はこちらの書籍がおすすめです。

詳説正規表現第3版

【厳選】JavaScript用正規表現チェッカーおすすめ4選

Thu, 11 Apr 2024 00:00:00 GMT

この記事で解決できるお悩み

JavaScript用の正規表現チェッカーを探しているけどどれがいいか分からない...
それぞれの正規表現チェッカーの特徴を比較したい
正規表現チェッカーの具体的な使い方を知りたい

[st-kaiwa2 html_class="wp-block-st-blocks-st-kaiwa"]

こんな悩みを解決できます！

営業職から会社員WEBエンジニア、
その後フリーランスWEBエンジニアに転向した自分が解説します。

[/st-kaiwa2]

この記事では「これを使っておけばOK！」という正規表現チェッカーの紹介と、その他のおすすめチェッカーとの比較や使い方をご紹介します。

この記事を読み終えれば、お気に入りの正規表現チェッカーが見つかっているはずですよ！

正規表現とは？

正規表現とは^や$などの特殊な記号を使うことで、複数の文字列をたった一つの文字列で表す方法です。

例えば以下の文字列が電話番号かどうか判別してくださいと言われたらどうするでしょうか？

090-XXXX-XXXX /* X = 数字 */

人間からすれば一目見て電話番号だとわかりますが、コンピュータはそうはいきません。

その説明をするために必要なのが正規表現です。

電話番号を正規表現で書くと以下のようになります。

[0-9]{3}-[0-9]{4}-[0-9]{4} 
/* = 左から、0~9の数字が3つ、ハイフン1つ、0~9の数字が4つ、ハイフン1つ、0~9の数字が4つある文字列 */

このように欲しい文字列のパターンを指定することで1つの文字列で複数の文字列を表すことができるのが正規表現です。

正規表現チェッカーはなぜ必要なのか？

上の例のように、正規表現は人間からするとややわかりづらいです。

しかし正規表現チェッカーではお手軽かつ視覚的にもわかりやすくチェック結果を出力してくれます！

正規表現を扱う上でこんなに便利なものはないので、積極的に活用することをおすすめします！

結局どれを使えばいいの？

結論から言うと**regex101**が圧倒的におすすめです。

理由はダントツで高機能だからです。
正規表現チェックや置換機能はもちろん、正規表現解説やステップ数（≒ 正規表現のパフォーマンス）の確認機能まで搭載されています。

さらに、JavaScriptだけでなくPHPやPython、Javaなどさまざまな言語に対応しているので、正規表現に関しては**このツールを使っておけば間違いない！**と断言できます。

ただ、あまりにも多機能だったり、使い方が一目ではわかりづらかったりと、初心者の方には合わない可能性もあります。

そういった方はこの後紹介するその他の正規表現チェッカーも検討してみてください。

JavaScript用の正規表現チェッカーおすすめ4選

ここからは、regex101も含めたおすすめ正規表現チェッカーを4つ紹介します。

1 : regex101

https://regex101.com/

</figcaption>

</figure>

自分が把握している正規表現チェッカーの中で最も高機能です。

今回紹介する中では唯一正規表現のデバッグ機能がついています。
デバッグ機能では正規表現がマッチするまでにかかったステップ数、つまり正規表現のパフォーマンスを計測することができます。
普段あまり気にすることはないかもしれませんが、上級者の方にはこれほど便利な機能はないと思います。

またJavaScript以外の言語にも対応しており、迷ったらこちらを選んでおけば問題ないでしょう。

2 : RegExr

https://regexr.com/

</figcaption>

</figure>

機能的にはregex101にやや劣りますが、デザインが洗練されており、使用方法も視覚的にわかりやすいです。

デバッグ機能なんて使わないし、regex101は見た目がちょっと無骨すぎるな...という方にはこちらをおすすめします。

3 : REGEXPER

https://regexper.com/

</figcaption>

</figure>

こちらは上2つとは違い機能は1つだけで、入力した正規表現の視覚化機能のみです。
しかしその視覚化機能が優秀で、入力した正規表現がどういった値を対象にするのかが大変わかりやすいです。

そのため「この正規表現どういう意味？」というときや、自分が作成した正規表現が意図したものになっているかの確認にはベストだと思います。

4 : 正規表現チェッカー JavaScript版

https://www.softel.co.jp/labs/tools/regex/

</figcaption>

</figure>

こちらがおすすめの理由はなんといってもそのシンプルさです。
細かい機能はいらないからとにかく置換結果だけ見せて欲しい！という方におすすめです。

また、今回紹介した正規表現チェッカーの中では唯一日本語に対応しているので馴染みやすさも十分だと思います。

各チェッカーの機能早見表

ここまで紹介してきた正規表現チェッカー4つの機能を表にまとめました。

それぞれの項目の説明は以下の通りです。

マッチ ... 正規表現が対象の文字列にマッチするか確認できる機能
置換 ... マッチした文字列を置換する機能
リスト ... マッチした文字列をリストとしてまとめて確認できる機能
デバッグ ... 正規表現がマッチするまでの処理手順や試行回数を確認できる機能
コードジェネレーター ... 入力した正規表現と対象文字列を元にコードを生成する機能
視覚化 ... 正規表現を視覚的に表示する機能
日本語対応 ... 日本語に対応しているか

	マッチ	置換	リスト	デバッグ	コードジェネレーター	視覚化	日本語対応
regex101	◯	◯	◯	◯	◯	◯	×
RegExr	◯	◯	◯	×	×	◯	×
Regexper	×	×	×	×	×	◎	×
正規表現チェッカー JavaScript版	◯	×	×	×	×	×	◯

各チェッカーの使い方

1 : regex101

最もおすすめのregex101から説明していきます。
ここでは4つの機能の使い方を説明します！

基本の使い方（正規表現マッチ）
置換機能
リスト出力機能
デバッグ機能

1 : 基本の使い方（正規表現マッチ）

① 『FLAVOR』欄で『ECMAScript(JavaScript)』を選択

② 『REGULAR EXPRESSION』欄に正規表現を入力

③ 『TEST STRING』欄にチェック対象の文字列を入力

そうすると、『TEST STRING』に入力した文字列のうち、正規表現にマッチしたものだけマーキングされます。
ちなみに( )でグループ指定などしているとマーキング色を分けてくれるので視覚的にもどの正規表現がどことマッチしているかがわかりやすいです。

『REGULAR EXPRESSION』欄に正規表現を入力すると、自動的に『EXPLANATION』欄で正規表現の解説をしてくれます。

また、『MATCH INFORMATION』欄では正規表現にマッチした文字列（とグループ化していればその文字列）をリスト表示してくれます。

2 : 置換機能

① 画面左『FUNCTION』で『Substitution』を選択

② 画面中央の『SUBSTITUTION』欄に置換文字列を入力

すると下に置換結果を出力してくれます！

3 : リスト出力機能

① 画面左『FUNCTION』で『List』を選択

② 画面中央の『List』欄にリスト出力形式を入力

これでマッチした文字列をリスト化して出力してくれます。

マッチした文字列を出力してほしい場合は$&と入力してください！

4 : デバッグ機能

① 画面左『FLAVOR』で『PCRE2 (PHP >=7.3)』もしくは『PCRE (PHP <7.3)』を選択
※ 2024年4月現在PCRE以外にはデバッグ機能は対応していません！

② 画面中央の『Tool』欄で『Regex Debugger』をクリック

すると以下のような画面が出てきます。

① 左側の『MATCH』でチェックしたいマッチを選択

② 右側の『MATCH STEPS』で合計ステップ数やステップごとの処理内容を確認

また『MATCH STEPS』の再生ボタンや、矢印ボタンを押すことで各ステップで対象文字列のどこをチェックしているのかが視覚的にわかり便利です。

2 : RegExr

ここでは3つの機能の使い方を説明します。

正規表現マッチ
置換機能
リスト出力機能

1 : 正規表現マッチ

① 右上の言語選択で『JavaScript』を選択

②『Expression』欄に正規表現を入力

③ 『Text』欄にチェック対象の文字列を入力

そうすると、『Text』に入力した文字列のうち、正規表現にマッチしたものだけ青くマーキングされて表示されます。

また、画面下の『Tool』欄ではいくつかモードが選べるのですが、デフォルトでは『Explain』になっており、入力した正規表現の解説をしてくれます。

2 : 置換機能

『Tool』のモードを『Replace』にすると置換結果を確認することができます。
置換文字を赤枠のエリアに入力すると下に置換結果が表示されます。

3 : リスト出力機能

『Tool』のモードを『List』にするとマッチ結果の一覧を表示してくれます。
また、赤枠の部分で出力形式を変更することも可能です。

マッチした文字列を出力してほしい場合は$&と入力してください！

3 : Regexper

テキストエリアに正規表現を入力して『Display』を押すだけです！

すると以下のように入力した正規表現を視覚的にわかりやすくくれます！

矢印などが何を意味しているのかわからない場合はDocumentationのページを見ると詳しい説明を見ることができます。

4 : 正規表現チェッカー JavaScript版

① チェックしたい正規表現を入力しましょう！

② 次にチェック対象の文字列を入力します！

③ 『正規表現をチェックする』をクリック！

ちなみにそれぞれのオプションの意味は以下のとおりです。
（『ヘルプ』ボタンを押すことでも確認できます。）

g ... 全行チェックするか（チェックなしだと1行目のみチェック対象となります。）

i ... 大文字、小文字の区別を無視するか

m ... 複数行に渡ってマッチさせるか

するとこのようにマッチの結果を表示してくれます！

まとめ

最後にもう一度おすすめの正規表現チェッカーをまとめておきます。

おすすめのJavsScript用正規表現チェッカー4つ

regex101
→ 迷ったらこれ！トップレベルで多機能。
RegExr
→ 洗練されたデザインかつ多機能を求める方におすすめ。
REGEXPER
→ 正規表現の視覚化に特化。
正規表現置換チェッカー JavaScript版
→ とにかくシンプルなものを求める方におすすめ。

正規表現を1から勉強したい！という方はこちらの書籍がおすすめです。

詳説正規表現第3版

ROOTFUL

CORSとは？設定方法やプリフライトについてわかりやすく解説！

CORS（オリジン間リソース共有）とは？

オリジンとは

同一オリジンポリシー（SOP）とは

CORSとは

CORSの設定方法

CORSを使用したリクエストの種類

シンプルリクエスト

条件

確認方法

プリフライトリクエスト

確認方法

まとめ

HTTPとは？仕組み、HTTPSとの違いについてわかりやすく解説

HTTP（HyperText Transfer Protocol）とは

HTTPの全体像

クライアント・サーバー

リクエスト・レスポンス

リクエスト

レスポンス

HTTPメソッド

ステータスコード

Cookie

HTTPとHTTPS（HyperTest Transfer Protocol Secure）

まとめ

HTTPセッションとは？関連知識から初心者にもわかりやすく解説！

セッションとは？

セッションに関わる知識

HTTP

クライアント・サーバー

ステートレスな通信

Cookie

セッションの仕組み

初回アクセス

2回目アクセス

まとめ

HTTP Cookieとは？用途や確認方法含めわかりやすく解説！

Cookieとは？

HTTP（HyperText Transfer Protocol）とは

HTTP通信の流れ

Cookie = ユーザーの情報を維持・管理するための仕組み

Cookieを使った通信の流れ

Cookieの中身

Cookieの用途

セッション管理（Session Management）

パーソナライゼーション（Personalization）

トラッキング（Tracking）

Cookieの種類

ファーストパーティCookie（1st Party Cookie）

サードパーティCookie（3rd Party Cookie）

Cookieの確認方法

まとめ

HTTPリクエスト・レスポンスとは？仕組みをわかりやすく解説

リクエスト・レスポンスとは？

HTTP**（HyperText Transfer Protocol）**とは？

HTTP通信の流れ

リクエスト

①メソッド

②リクエストURI

③プロトコルバージョン

④ヘッダ

⑤ボディ

レスポンス

①プロトコルバージョン

②ステータスコード

③ヘッダ

④ボディ

リクエスト・レスポンスの確認方法

デベロッパーツール

curlコマンド

まとめ

HTTPメソッドとは？各メソッドについて図解付きでわかりやすく解説

HTTPメソッドとは

HTTP（HyperText Transfer Protocol）

HTTP通信の流れ

改めてHTTPメソッドとは

URI（Uniform Resource Identifier）とは

HTTPメソッド一覧

各メソッドの説明

HTTP（HyperText Transfer Protocol）とは？