---
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>

<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>