location は「今開いているページの住所カード」
location は、
「このタブで今開いているページの URL 情報をまとめたオブジェクト」 です。
「今どの URL を見ているか知りたい」
「別のページに移動したい」
「クエリパラメータ（?以降）を読みたい」
こういうときは、window.location を触ることになります。
window.location と location は同じものなので、ふつうは短く location と書きます。
location.href で「今の URL 全体」を見る・書き換える
今の URL を文字列として取得する
一番よく使うのが location.href です。
console.log(location.href);
例えば、https://example.com/users?id=10#profile
というページを開いていれば、その文字列がそのまま出てきます。
「とりあえず今の URL が知りたい」ときは、
まず location.href を見る、で OK です。
location.href に代入すると「ページ遷移」になる
location.href は読み取りだけでなく、書き込みもできます。
location.href = "https://example.com/login";
こう書くと、
ブラウザはその URL に「移動」します。
ユーザーがリンクをクリックしたのと同じイメージです。
「ログインしていなかったらログインページへ飛ばす」
みたいな処理でよく使われます。
URL をバラバラに見る：protocol / host / pathname / search / hash
URL をパーツごとに分解してくれる
例えば、次の URL を考えます。
https://example.com/users/list?id=10#profile
このとき location は、だいたいこんな感じの情報を持っています。
console.log(location.protocol); // "https:"
console.log(location.host); // "example.com"
console.log(location.pathname); // "/users/list"
console.log(location.search); // "?id=10"
console.log(location.hash); // "#profile"
それぞれの意味をざっくり言うとこうです。
protocol
「http」か「https」か、などの通信方式
host
ドメイン名とポート番号（例: example.com, localhost:3000）
pathname
ドメインより後ろの「パス」の部分（例: /users/list）
search
「?」から始まるクエリ文字列（例: ?id=10）
hash
「#」から始まるフラグメント（例: #profile）
「URL のどの部分が欲しいのか」を意識して、
必要なプロパティだけを読む、という使い方をします。
クエリパラメータを読む簡単な例
例えば、https://example.com/search?q=javascript&page=2
という URL のとき、location.search は "?q=javascript&page=2" です。
これを手でパースしてもいいですが、
最近は URLSearchParams を使うのが楽です。
const params = new URLSearchParams(location.search);
console.log(params.get("q")); // "javascript"
console.log(params.get("page")); // "2"
「URL の ?以降から値を取りたい」
という場面では、この組み合わせが定番です。
ページ遷移の違い：assign / replace / reload
location.assign(url) は「普通の遷移」
location.assign("https://example.com/home");
これは location.href = ... とほぼ同じで、
「履歴に残る普通のページ遷移」です。
戻るボタンを押せば、元のページに戻れます。
location.replace(url) は「履歴を上書き」
location.replace("https://example.com/login");
replace は、
「今のページを履歴から消して、その URL に移動する」
という動きをします。
ユーザーが戻るボタンを押しても、
元のページには戻れません。
ログイン後のリダイレクトなど、
「このページには戻ってきてほしくない」
という場面で使われます。
location.reload() は「再読み込み」
location.reload(); // ふつうのリロード
location.reload(true); // （古い仕様）キャッシュ無視のリロードを要求
reload は、
「このページを再読み込みして」とブラウザに頼むメソッドです。
フォーム送信後の再読み込みなどには注意が必要ですが、
「状態をリセットしたい」ときに使われることがあります。
location を使った実用的な小さな例
ログインしていなければログインページへ飛ばす
function requireLogin(isLoggedIn) {
if (!isLoggedIn) {
location.href = "/login";
}
}
// 例: サーバーからログイン状態を取ってきた結果を使う
requireLogin(false);
ここでは、
「ログインしていなければ /login に遷移する」
というシンプルな制御を location.href で書いています。
クエリパラメータで表示内容を変える
URL: https://example.com/page?mode=dark
const params = new URLSearchParams(location.search);
const mode = params.get("mode");
if (mode === "dark") {
document.body.classList.add("dark");
}
このように、
「URL によってページの表示を変える」
というのは、実務でもよくあるパターンです。
SPA 時代の location の立ち位置（軽く触れておく）
最近のフロントエンド（React, Vue など）では、
ページ遷移を JavaScript 側で管理する「SPA（シングルページアプリ）」が多いです。
その場合でも、
今の URL を読む
クエリパラメータを読む
ハッシュ（#以降）を読む
といった用途で location は普通に使われます。
ただし、
履歴の操作や URL の書き換えは、history.pushState などと組み合わせて、
ルーターライブラリがまとめて面倒を見てくれることが多いです。
初心者のうちは、
「location は“今の URL の情報”と“シンプルな遷移”のためのもの」
と捉えておけば十分です。
初心者として location で本当に掴んでほしいこと
location は「今開いているページの URL 情報」を持つオブジェクト
location.href で「URL 全体」を文字列として取得・変更できる（変更するとページ遷移）
protocol / host / pathname / search / hash で URL をパーツごとに扱える
assign は普通の遷移、replace は履歴を上書き、reload は再読み込み
クエリパラメータを読むときは URLSearchParams と組み合わせると楽
まずはブラウザのコンソールで、
console.log(location);
console.log(location.href);
console.log(location.pathname);
console.log(location.search);
console.log(location.hash);
あたりを叩いてみてください。
「URL ってこう分解されてるのか」という感覚が一度掴めると、
ルーティングや状態管理のコードを読むときの理解度が一気に上がります。