過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li>ブラウザ JavaScript でプロトコル + ホスト + ポートを取りたいなら <code>window.location.origin</code></li><li>例: <code>http://127.0.0.1:8000</code> （末尾スラッシュなし）</li><li>SSR や Node.js では <code>window</code> が存在しない — Next.js なら<code>typeof window === "undefined"</code> でガード</li><li>IE11 は <code>origin</code> が未サポート — <code>protocol + "//" + host</code> でポリフィル</li><li><code>location</code> オブジェクトは複数の関連プロパティを持つ — 用途で使い分ける</li></ul></td></tr></table>
<h2>基本: window.location.origin</h2>

<p>ブラウザ JavaScript で「プロトコル + ホスト + ポート」のベース URL を取得するには <code>window.location.origin</code> を使います。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">// 例: 現在 http://127.0.0.1:8000/users/123 にいる場合
const baseUrl = window.location.origin;
console.log(baseUrl);
// → "http://127.0.0.1:8000"

// URL を結合する場合（末尾スラッシュなしなので / を付ける）
const apiUrl = baseUrl + &apos;/api/users&apos;;
console.log(apiUrl);
// → "http://127.0.0.1:8000/api/users"</code></pre>
<h2>location オブジェクトの全プロパティ</h2>

<p>用途に応じて使い分けます。例として <code>https://example.com:8080/users/123?tab=profile#info</code> にいる場合:</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#f3f4f6"><th>プロパティ</th><th>値</th><th>説明</th></tr></thead>
<tbody>
<tr><td><code>location.href</code></td><td>https://example.com:8080/users/123?tab=profile#info</td><td>URL 全体</td></tr>
<tr><td><code>location.origin</code></td><td>https://example.com:8080</td><td>プロトコル + ホスト + ポート</td></tr>
<tr><td><code>location.protocol</code></td><td>https:</td><td>末尾コロン込み</td></tr>
<tr><td><code>location.host</code></td><td>example.com:8080</td><td>ホスト + ポート</td></tr>
<tr><td><code>location.hostname</code></td><td>example.com</td><td>ホストのみ（ポートなし）</td></tr>
<tr><td><code>location.port</code></td><td>8080</td><td>ポート番号（デフォルトポートは空）</td></tr>
<tr><td><code>location.pathname</code></td><td>/users/123</td><td>パス</td></tr>
<tr><td><code>location.search</code></td><td>?tab=profile</td><td>クエリ文字列（? 込み）</td></tr>
<tr><td><code>location.hash</code></td><td>#info</td><td>フラグメント（# 込み）</td></tr>
</tbody>
</table>

<h2>SSR (Next.js / Nuxt) では window が undefined</h2>

<p>Next.js の getServerSideProps やコンポーネントの最上位、Nuxt の setup で <code>window.location.origin</code> を呼ぶと <strong>ReferenceError: window is not defined</strong> になります。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">// ❌ NG: SSR でエラー
const baseUrl = window.location.origin;

// ✅ OK: typeof でガード
const baseUrl = typeof window !== &apos;undefined&apos;
    ? window.location.origin
    : process.env.NEXT_PUBLIC_BASE_URL;

// ✅ OK: useEffect 内で取得（クライアントのみ実行される）
useEffect(() => {
    setBaseUrl(window.location.origin);
}, []);</code></pre>
<p>サーバ側で URL を組み立てたいときは、環境変数 <code>NEXT_PUBLIC_BASE_URL</code> / <code>NUXT_PUBLIC_BASE_URL</code> 等にベース URL を入れておくのが定石です。</p>

<h2>IE11 対応のポリフィル</h2>

<p><code>window.location.origin</code> は IE11 で未サポート。レガシー対応が必要なら以下のポリフィルを入れます:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">if (!window.location.origin) {
    window.location.origin = window.location.protocol + &apos;//&apos; +
        window.location.hostname +
        (window.location.port ? &apos;:&apos; + window.location.port : &apos;&apos;);
}</code></pre>
<h2>サブパス配下のアプリケーション</h2>

<p>例えば <code>https://example.com/myapp/</code> 配下にデプロイしたアプリで API パスを組み立てる場合、<code>origin</code> だけでは <code>/myapp</code> が抜けます。HTML の <code><base href="/myapp/"></code> や、ビルド時にベースパスを埋め込む方式で対応:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">// Vite: import.meta.env.BASE_URL を使う
const baseUrl = window.location.origin + import.meta.env.BASE_URL;
// → "https://example.com/myapp/"

// Vue Router / React Router でも同じ思想
// 環境変数からベースパスを取り、location.origin と結合する</code></pre>
<h2>新しい URL API</h2>

<p>URL の組み立てや解析には <code>URL</code> コンストラクタが便利です。手動の文字列結合より安全:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">const u = new URL(window.location.href);
console.log(u.origin);      // "https://example.com:8080"
console.log(u.searchParams.get(&apos;tab&apos;));  // "profile"

// API URL を組み立てる
const apiUrl = new URL(&apos;/api/users/123&apos;, window.location.origin);
apiUrl.searchParams.set(&apos;fields&apos;, &apos;id,name&apos;);
console.log(apiUrl.toString());
// → "https://example.com:8080/api/users/123?fields=id%2Cname"</code></pre>
<h2>よくあるハマりどころ</h2>

<ul>
<li><strong>末尾スラッシュ</strong>: <code>origin</code> は末尾なし、<code>href</code> はパス次第。結合時の重複に注意</li>
<li><strong>localhost と 127.0.0.1</strong>: ブラウザは別オリジン扱い。CORS 設定ではどちらも許可するか統一する</li>
<li><strong>http と https の混在</strong>: HTTPS ページから HTTP API を叩くと Mixed Content でブロック</li>
<li><strong>ポート省略時</strong>: デフォルトポート (80/443) なら <code>location.port</code> は空文字</li>
<li><strong>iframe の中</strong>: <code>window.location.origin</code> は親ではなく iframe 自身の origin を返す</li>
</ul>