JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのlocation.protocolプロパティの使い方を解説！現在のURLプロトコルを取得する方法

location.protocolプロパティとは

JavaScriptのlocation.protocolプロパティは、現在表示しているページのURLに含まれるプロトコル（通信方式）を取得または設定するために使用されます。プロトコルとは、URLの先頭部分にある「http:」「https:」「file:」などのことで、ブラウザがどのような方式でリソースにアクセスしているかを示すものです。

このプロパティは読み取り専用として扱われることが多く、主に現在のページが安全な接続（HTTPS）かどうかを判定したい場合などに活用されます。

主な特徴

  • 現在のURLのプロトコルを文字列として返す（例：「https:」）
  • 末尾のコロン（:）を含んだ形で返される
  • window.locationオブジェクトの一部であり、グローバルにアクセス可能

location.protocolのサンプルコード

以下は、ボタンをクリックすると現在のURLのプロトコルを画面に表示するシンプルなデモです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Location protocol Property in JavaScript</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-weight: 500;
        font-size: 18px;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScriptのlocation.protocolプロパティ</h1>
<div class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、現在のURLのプロトコルが表示されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = "現在のURLのプロトコル = " + location.protocol;
    });
</script>
</body>
</html>

実行結果

ページを読み込んだ直後の初期表示は以下のようになります。

JavaScriptのlocation.protocolプロパティの使い方を解説！現在のURLプロトコルを取得する方法

「ここをクリック」ボタンを押すと、次のように現在のURLのプロトコルが表示されます。

JavaScriptのlocation.protocolプロパティの使い方を解説！現在のURLプロトコルを取得する方法

実務での活用ポイント

location.protocolは、以下のような場面でよく使われます。

  • HTTPS判定： location.protocol === 'https:'で安全な通信かどうかをチェックし、HTTPページからHTTPSへリダイレクトする処理などに応用できます。
  • 環境ごとの分岐： ローカル開発環境（file:）と本番環境（https:）で動作を切り替える際に便利です。
  • セキュリティ対策： 混在コンテンツ（Mixed Content）を防ぐために、APIリクエスト先のスキームを選択する際にも利用されます。

このように、location.protocolはURL操作の中でも特にシンプルながら実用的なプロパティなので、ぜひ覚えておきましょう。

  1. JavaScriptのsourceプロパティとは？正規表現パターンテキストを取得する方法を解説

    JavaScriptのsourceプロパティは、RegExp（正規表現）オブジェクトに設定されたパターン文字列そのものを返すプロパティです。g（グローバルマッチ）やi（大文字・小文字を区別しない）などのフラグは結果に含まれず、マッチング対象となる純粋な正規表現テキストのみを取得できます。 動的に正規表現を組み立てたい場合や、デバッグ時に実際に適用されているパターンを確認したい場合などに活用できる便利なプロパティです。 基本構文 const regex = /pattern/flags; console.log(regex.source); // パターン文字列のみが返される サンプルコード

  2. 【HTML DOM入門】Locationオブジェクトのprotocolプロパティの使い方を解説

    JavaScriptのLocationオブジェクトが持つprotocolプロパティは、現在のページのURLで使用されているプロトコル（スキーム）に対応する文字列を取得・設定できます。返される値にはコロン（:）が含まれ、「file:」「http:」「https:」などの形式になります。 例えば、「https://www.example.com/page.html」というURLの場合、location.protocolは「https:」という文字列を返します。 構文 protocolプロパティの基本的な構文は以下の通りです。 値を取得する場合 location.protocol 値を設定する場合