--- title: Location slug: Web/API/Location tags: - API - HTML DOM - Interface - Location - Reference - インターフェイス translation_of: Web/API/Location --- <div>{{APIRef("HTML DOM")}}</div> <p><strong><code>Location</code></strong> インターフェイスは、関連付けられたオブジェクトの場所 (URL) を表します。 <code>Location</code> に対して変更が行われると、関連するオブジェクトに反映されます。 {{domxref("Document")}} インターフェイスおよび {{domxref("Window")}} インターフェイスにはこのような関連付けられた <code>Location</code> があり、それぞれ {{domxref("Document.location")}} および {{domxref("Window.location")}} でアクセスできます。</p> <h2 id="Properties" name="Properties">プロパティ</h2> <dl> <dt>{{domxref("Location.href")}}</dt> <dd>URL 全体を収めた {{domxref("USVString")}} を返す文字列化です。この値を変更すると、関連付けられた文書が新しいページへ移動します。この値は、関連付けられた文書のものとは異なるオリジンから設定できます。</dd> <dt>{{domxref("Location.protocol")}}</dt> <dd>末尾の <code>':'</code> を含む、URL のプロトコルスキームを収めた {{domxref("USVString")}} です。</dd> <dt>{{domxref("Location.host")}}</dt> <dd>URL のホスト (すなわち <em>hostname</em>、コロン (<code>':'</code>)、<em>port</em>) を収めた {{domxref("USVString")}} です。</dd> <dt>{{domxref("Location.hostname")}}</dt> <dd>URL のドメインを収めた {{domxref("USVString")}} です。</dd> <dt>{{domxref("Location.port")}}</dt> <dd>URL のポート番号を収めた {{domxref("USVString")}} です。</dd> <dt>{{domxref("Location.pathname")}}</dt> <dd>URL のパス部分を、先頭の <code>'/'</code> を含めて収めた {{domxref("USVString")}} です。</dd> <dt>{{domxref("Location.search")}}</dt> <dd>URL のうち、<code>'?'</code> とそれに続くパラメーターや "クエリー文字列" を収めた {{domxref("USVString")}} です。現代のブラウザーは、クエリー文字列からパラメーターを容易に解析するための <a href="/ja/docs/Web/API/URLSearchParams/get#Example">URLSearchParams</a> や <a href="/ja/docs/Web/API/URL/searchParams#Example">URL.searchParams</a> を提供しています。</dd> <dt>{{domxref("Location.hash")}}</dt> <dd>URL のうち、<code>'#'</code> とそれに続くフラグメント識別子を収めた {{domxref("USVString")}} です。</dd> <dt>{{domxref("Location.username")}}</dt> <dd>ドメイン名の前に指定されたユーザー名を収めた {{domxref("USVString")}} です。</dd> <dt>{{domxref("Location.password")}}</dt> <dd>ドメイン名の前に指定されたパスワードを収めた {{domxref("USVString")}} です。</dd> <dt>{{domxref("Location.origin")}} {{readOnlyInline}}</dt> <dd>特定の location のオリジンの標準形を収めた {{domxref("USVString")}} です。</dd> </dl> <h2 id="Methods" name="Methods">メソッド</h2> <dl> <dt>{{domxref("Location.assign()")}}</dt> <dd>引数で指定した URL のリソースを読み込みます。</dd> <dt>{{domxref("Location.reload()")}}</dt> <dd>現在の URL のリソースを再読み込みします。省略可能な唯一の引数は {{domxref("Boolean")}} 値で、<code>true</code> であれば常にサーバーからページを再読み込みします。<code>false</code> を指定するか値を指定しない場合は、ブラウザーがキャッシュからページを再読み込みする可能性があります。</dd> <dt>{{domxref("Location.replace()")}}</dt> <dd>現在のリソースを、指定した URL のリソースで置き換えます。<code>assign()</code> メソッドとの違いは、<code>replace()</code> を使用した後は現在のページがセッションの {{domxref("History")}} に保存されないことであり、ユーザーは <em>戻る</em> ボタンを使用して移動することができません。</dd> <dt>{{domxref("Location.toString()")}}</dt> <dd>URL 全体を収めた {{domxref("USVString")}} を返します。これは {{domxref("HTMLHyperlinkElementUtils.href")}} と同義ですが、こちらは値を変更するために使用できません。</dd> </dl> <h2 id="Examples" name="Examples">例</h2> <pre class="brush: js">// この例のためにアンカー要素を生成して、href プロパティを使用します。 // より適切な代替手段は、URL を見て document.location または window.location を使用することです。 var url = document.createElement('a'); url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container'; console.log(url.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container console.log(url.protocol); // https: console.log(url.host); // developer.mozilla.org:8080 console.log(url.hostname); // developer.mozilla.org console.log(url.port); // 8080 console.log(url.pathname); // /en-US/search console.log(url.search); // ?q=URL console.log(url.hash); // #search-results-close-container console.log(url.origin); // https://developer.mozilla.org:8080 </pre> <h2 id="Specifications" name="Specifications">仕様書</h2> <table class="standard-table"> <thead> <tr> <th scope="col">仕様書</th> <th scope="col">状態</th> <th scope="col">備考</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('HTML WHATWG', "browsers.html#the-location-interface", "Location")}}</td> <td>{{Spec2('HTML WHATWG')}}</td> <td>{{SpecName("HTML5 W3C")}} から変更なし。</td> </tr> <tr> <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}</td> <td>{{Spec2('HTML5 W3C')}}</td> <td>初回定義</td> </tr> </tbody> </table> <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> <div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> <p>{{Compat("api.Location")}}</p> <h2 id="See_also" name="See_also">関連情報</h2> <ul> <li>このようなオブジェクトを生成する 2 つの手段: {{domxref("Window.location")}} および {{domxref("Document.location")}}</li> <li>URL 関連のインターフェイス: {{domxref("URL")}}, {{domxref("URLSearchParams")}}, {{domxref("HTMLHyperlinkElementUtils")}}</li> </ul>