この記事の要点
Uncaught TypeError: location.href is not a function はlocation.href() のように関数として呼んだエラー location.href はプロパティであり関数ではない 正しい使い方: 取得 = location.href、設定 = location.href = url ページ遷移: location.href = "..." または location.assign(url)

 

エラーの状況

// ダメな例
location.href("https://example.com");
// → Uncaught TypeError: location.href is not a function

// または
window.location.href();
// → TypeError

location.href はプロパティ（文字列）であり、関数ではないので括弧 () を付けて呼べません。

正しい使い方

① 現在 URL を取得

// 文字列として取得
const url = location.href;
console.log(url);
// → "https://example.com/page?tab=info#section"

// または window. を付けても同じ
const url2 = window.location.href;

② ページ遷移（URL 設定）

// 代入で遷移
location.href = "https://example.com";

// 履歴に残らない遷移 (戻るで戻れない)
location.replace("https://example.com");

// 履歴に残る遷移 (戻るで戻れる)
location.assign("https://example.com");

// 関数として呼ぶなら assign / replace
location.assign("/login");
location.replace("/dashboard");

location オブジェクトの全プロパティ

すべてプロパティ（関数ではない）:

プロパティ	取得	設定（変更で遷移）
location.href	完全 URL	○ 全 URL 変更
location.origin	プロトコル+ホスト	×
location.protocol	http: / https:	○ プロトコル変更
location.host	ホスト+ポート	○
location.hostname	ホストのみ	○
location.port	ポート	○
location.pathname	パス	○ パス変更（同オリジン）
location.search	?以降のクエリ	○
location.hash	#以降のハッシュ	○ ハッシュ変更（リロードなし）

location の関数（メソッド）

関数	用途
location.assign(url)	URL 遷移（履歴に残る）
location.replace(url)	URL 遷移（履歴に残らない）
location.reload()	現在ページを再読み込み
location.reload(true)	キャッシュを使わず再読み込み（非推奨・廃止予定）

遷移パターン別の使い分け

// 通常の遷移（戻るボタンで戻れる）
location.href = "/page";
// または
location.assign("/page");

// ログイン後のリダイレクト（戻るで戻られたくない）
location.replace("/dashboard");

// 同ページの別アンカー（リロードなし）
location.hash = "#section2";

// クエリパラメータ更新
const params = new URLSearchParams(location.search);
params.set("page", "2");
location.search = "?" + params.toString();

// 強制リロード
location.reload();

// 別オリジン
location.href = "https://example.com";

関連: window.open / history.pushState

// 新しいタブ / ウィンドウで開く
window.open("https://example.com", "_blank");

// History API で URL 変更（ページリロードなし、SPA で多用）
history.pushState({}, "", "/new-path");
history.replaceState({}, "", "/new-path");  // 履歴を置き換え

// 戻る/進む
history.back();
history.forward();
history.go(-2);  // 2 つ戻る

よく似たタイポによるエラー

誤	正	原因
location.href()	location.href	プロパティを関数呼び出し
location.href = url()	location.href = url	url が関数なら呼び出し OK だが、文字列なら不要
location.assign = url	location.assign(url)	関数を代入で上書き
window.location()	window.location	location 自体は object
location.reload(url)	location.href = url	reload は引数を受け取らない

セキュリティ注意

外部入力をそのまま location.href に代入するのは XSS / Open Redirect の温床:

// 危険
const next = new URLSearchParams(location.search).get("next");
location.href = next;  // ← next が "javascript:..." だと XSS

// 安全策
function safeRedirect(url) {
    // 同オリジンのみ許可
    try {
        const u = new URL(url, location.origin);
        if (u.origin === location.origin) {
            location.href = u.pathname + u.search + u.hash;
        } else {
            location.href = "/";  // フォールバック
        }
    } catch (e) {
        location.href = "/";
    }
}

関連記事

• base url を取得する方法