locationオブジェクトとは？JavaScriptでURLを操作する基礎

みなさん、JavaScriptでWebページのURLを取得したり操作したりしたいと思ったことありませんか？

「現在のページのURLを取得したい」 「ページを別のURLに移動させたい」 「URLからパラメータを取得したい」

こんな場面に遭遇することがあるかもしれませんね。

JavaScriptのlocationオブジェクトは、現在のページのURL情報を取得・操作するための強力なツールです。 この記事では、locationオブジェクトについて基本的な概念から実践的な活用方法まで詳しく解説します。

URL操作、ページ遷移、クエリパラメータの取得・操作方法を、実際のコード例を交えて初心者向けに分かりやすく説明していきます。

locationオブジェクトって何だろう？

簡単に言うとどんなもの？

locationオブジェクトは、現在のページのURL情報を表すJavaScriptの組み込みオブジェクトです。

windowオブジェクトのプロパティとして提供されています。 簡単に言うと、今見ているページのアドレスに関する情報を全部教えてくれる便利な機能なんです。

// locationオブジェクトへのアクセス
console.log(window.location);
console.log(location); // windowは省略可能

このコードで、現在のページのURL情報をすべて確認できます。

URLの構造を理解しよう

まず、URLがどんな部分から構成されているか見てみましょう。

例えば、以下のようなURLがあるとします。

https://shop.example.com:8080/products/shoes?category=sneakers&color=red#reviews

このURLは、いくつかの部分に分かれています。

// URLの各部分を取得する
console.log("完全なURL:", location.href);
console.log("プロトコル:", location.protocol);
console.log("ホスト:", location.host);
console.log("ホスト名:", location.hostname);
console.log("ポート:", location.port);
console.log("パス:", location.pathname);
console.log("クエリ文字列:", location.search);
console.log("ハッシュ:", location.hash);
console.log("オリジン:", location.origin);

それぞれどんな情報が取得できるか確認してみましょう。

各プロパティの詳細

先ほどの例のURLを使って、各プロパティが何を返すか見てみます。

// URL例: https://shop.example.com:8080/products/shoes?category=sneakers&size=42#reviews

// 完全なURL
console.log(location.href);
// 出力: "https://shop.example.com:8080/products/shoes?category=sneakers&size=42#reviews"

// プロトコル（https:やhttp:）
console.log(location.protocol);
// 出力: "https:"

// ホスト（ホスト名 + ポート）
console.log(location.host);
// 出力: "shop.example.com:8080"

// ホスト名のみ
console.log(location.hostname);
// 出力: "shop.example.com"

このように、URLの各部分を簡単に取得できます。

続きも見てみましょう。

// ポート番号
console.log(location.port);
// 出力: "8080"

// パス部分（ドメインの後の部分）
console.log(location.pathname);
// 出力: "/products/shoes"

// クエリ文字列（?を含む）
console.log(location.search);
// 出力: "?category=sneakers&size=42"

// ハッシュ部分（#を含む）
console.log(location.hash);
// 出力: "#reviews"

// オリジン（プロトコル + ホスト + ポート）
console.log(location.origin);
// 出力: "https://shop.example.com:8080"

これらの情報を使って、様々な処理ができるようになります。

現在のページ情報を取得してみよう

ページ情報を整理して取得

現在のページの情報をまとめて取得する便利な関数を作ってみましょう。

// ページ情報を取得する関数
function getCurrentPageInfo() {
    return {
        fullUrl: location.href,
        pageName: location.pathname.split('/').pop() || 'index',
        domain: location.hostname,
        isSecure: location.protocol === 'https:',
        hasQuery: location.search.length > 0,
        hasHash: location.hash.length > 0
    };
}

この関数は、ページの情報を分かりやすくまとめてくれます。

使ってみましょう。

let pageInfo = getCurrentPageInfo();
console.log("現在のページ情報:", pageInfo);

// 条件に応じた処理
if (pageInfo.isSecure) {
    console.log("✅ セキュアな接続です");
} else {
    console.log("⚠️ 非セキュアな接続です");
}

if (pageInfo.hasQuery) {
    console.log("📝 クエリパラメータがあります");
}

if (pageInfo.hasHash) {
    console.log("🔗 ハッシュが設定されています");
}

ページの状態に応じて、適切な処理を実行できます。

ドメインの詳細を分析

ドメイン情報をより詳しく分析する機能も作ってみましょう。

// ドメイン関連の判定関数
function analyzeDomain() {
    let hostname = location.hostname;
    let parts = hostname.split('.');
    
    return {
        hostname: hostname,
        parts: parts,
        isSubdomain: parts.length > 2,
        subdomain: parts.length > 2 ? parts[0] : null,
        domain: parts.slice(-2).join('.'),
        tld: parts[parts.length - 1]
    };
}

この関数で、ドメインの構造を詳しく知ることができます。

実際に使ってみましょう。

let domainInfo = analyzeDomain();
console.log("ドメイン情報:", domainInfo);

// 環境の判定
if (domainInfo.hostname.includes('localhost')) {
    console.log("🔧 開発環境");
} else if (domainInfo.hostname.includes('test')) {
    console.log("🧪 テスト環境");
} else {
    console.log("🌐 本番環境");
}

これで環境に応じた処理を実装できます。

クエリパラメータを操作してみよう

URLSearchParamsを使った現代的な方法

クエリパラメータを扱う便利なクラスを作ってみましょう。

// クエリパラメータを管理するクラス
class QueryParamManager {
    constructor() {
        this.params = new URLSearchParams(location.search);
    }
    
    // パラメータを取得
    get(key) {
        return this.params.get(key);
    }
    
    // すべてのパラメータを取得
    getAll() {
        let result = {};
        for (let [key, value] of this.params) {
            result[key] = value;
        }
        return result;
    }
    
    // パラメータを設定
    set(key, value) {
        this.params.set(key, value);
        return this;
    }
    
    // パラメータを削除
    delete(key) {
        this.params.delete(key);
        return this;
    }
}

このクラスなら、クエリパラメータを簡単に操作できます。

URLを更新する機能

パラメータを変更した後、URLも更新できるようにしましょう。

// URLを更新する機能を追加
updateUrl() {
    let newUrl = location.pathname;
    let queryString = this.params.toString();
    
    if (queryString) {
        newUrl += '?' + queryString;
    }
    
    if (location.hash) {
        newUrl += location.hash;
    }
    
    history.replaceState(null, '', newUrl);
    return this;
}

この機能により、ページをリロードせずにURLを変更できます。

使用例を見てみましょう。

let queryManager = new QueryParamManager();

// パラメータを取得
console.log("category:", queryManager.get('category'));
console.log("すべてのパラメータ:", queryManager.getAll());

// パラメータを設定してURLを更新
queryManager.set('category', 'electronics')
           .set('sort', 'price')
           .delete('old_param')
           .updateUrl();

これでURLのクエリパラメータを自由に操作できます。

ページ遷移を制御してみよう

基本的なページ遷移

JavaScriptでページを移動する方法がいくつかあります。

// 方法1: location.href（最も一般的）
function navigateToPage(url) {
    location.href = url;
}

// 方法2: location.assign()（履歴に残る）
function redirectToPage(url) {
    location.assign(url);
}

// 方法3: location.replace()（履歴に残さない）
function replaceCurrentPage(url) {
    location.replace(url);
}

// 方法4: ページを再読み込み
function reloadPage() {
    location.reload();
}

それぞれ異なる特徴があります。

// 使用例
// navigateToPage('/products');     // 普通の移動
// redirectToPage('/dashboard');    // リダイレクト
// replaceCurrentPage('/login');    // 履歴を残さない移動
// reloadPage();                    // ページリロード

用途に応じて適切な方法を選びましょう。

条件付きページ遷移

条件に応じてページ遷移を制御する例です。

// ユーザーの認証状態をチェック
function conditionalNavigation() {
    let isLoggedIn = checkLoginStatus(); // 仮の関数
    
    if (!isLoggedIn) {
        // ログインページにリダイレクト
        location.href = '/login?redirect=' + encodeURIComponent(location.pathname);
        return;
    }
    
    // 権限チェック
    let hasPermission = checkUserPermission(); // 仮の関数
    
    if (!hasPermission) {
        // アクセス拒否ページにリダイレクト
        location.href = '/access-denied';
        return;
    }
    
    // 通常の処理を続行
    console.log("アクセス許可");
}

このように、ユーザーの状態に応じて適切なページに誘導できます。

実践的な活用例

SPAでのルーティング

シングルページアプリケーション（SPA）での簡単なルーター機能を作ってみましょう。

// 簡単なSPAルーター
class SimpleRouter {
    constructor() {
        this.routes = new Map();
        this.init();
    }
    
    // ルートを登録
    addRoute(path, handler) {
        this.routes.set(path, handler);
        return this;
    }
    
    // 現在のパスに対応するハンドラーを実行
    handleRoute() {
        let path = location.pathname;
        let handler = this.routes.get(path);
        
        if (handler) {
            handler();
        } else {
            this.handle404();
        }
    }
    
    // ページ遷移（履歴に追加）
    navigate(path) {
        history.pushState(null, '', path);
        this.handleRoute();
    }
    
    // 404ハンドリング
    handle404() {
        console.log("404: ページが見つかりません");
    }
    
    // 初期化
    init() {
        // ブラウザの戻る/進むボタンへの対応
        window.addEventListener('popstate', () => {
            this.handleRoute();
        });
        
        // 初回読み込み時のルーティング
        this.handleRoute();
    }
}

ルーターの使い方です。

let router = new SimpleRouter();

router.addRoute('/', () => {
    console.log("ホームページを表示");
})
.addRoute('/about', () => {
    console.log("会社概要を表示");
})
.addRoute('/contact', () => {
    console.log("お問い合わせを表示");
});

これで簡単なSPAルーティングが実装できます。

フィルター機能の実装

検索やフィルター機能をURLで管理する例です。

// フィルター・ソート機能付きのURL管理
class FilterManager {
    constructor() {
        this.queryManager = new QueryParamManager();
        this.filters = this.parseFilters();
    }
    
    // フィルターをパース
    parseFilters() {
        let filters = {};
        let filterParams = this.queryManager.get('filters');
        
        if (filterParams) {
            try {
                filters = JSON.parse(decodeURIComponent(filterParams));
            } catch (error) {
                console.warn("フィルターのパースに失敗:", error);
            }
        }
        
        return filters;
    }
    
    // フィルターを設定
    setFilter(key, value) {
        if (value === null || value === undefined || value === '') {
            delete this.filters[key];
        } else {
            this.filters[key] = value;
        }
        
        this.updateUrl();
        return this;
    }
    
    // URLを更新
    updateUrl() {
        if (Object.keys(this.filters).length > 0) {
            this.queryManager.set('filters', encodeURIComponent(JSON.stringify(this.filters)));
        } else {
            this.queryManager.delete('filters');
        }
        
        this.queryManager.updateUrl();
    }
}

使用例です。

let filterManager = new FilterManager();

// フィルターを設定
filterManager.setFilter('category', 'electronics')
            .setFilter('price_min', 1000)
            .setFilter('price_max', 50000);

これで検索条件をURLで管理できます。

セキュリティを考慮した実装

安全なリダイレクト

セキュリティを考慮したリダイレクト機能を実装しましょう。

// セキュアなリダイレクト機能
class SecureRedirect {
    constructor() {
        this.allowedDomains = [
            location.hostname,
            'example.com',
            'subdomain.example.com'
        ];
    }
    
    // ドメインの安全性をチェック
    isValidDomain(url) {
        try {
            let urlObj = new URL(url, location.origin);
            return this.allowedDomains.includes(urlObj.hostname);
        } catch (error) {
            return false;
        }
    }
    
    // 安全なリダイレクト
    redirectTo(url, fallbackUrl = '/') {
        if (this.isValidDomain(url)) {
            location.href = url;
        } else {
            console.warn('安全でないリダイレクトをブロックしました:', url);
            location.href = fallbackUrl;
        }
    }
}

この機能により、悪意のあるリダイレクトを防げます。

XSS対策

URLパラメータを安全に扱う方法です。

// 安全なURL操作
class SafeUrlManager {
    // HTMLエスケープ
    static escapeHtml(unsafe) {
        return unsafe
            .replace(/&/g, "&")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }
    
    // 安全なクエリパラメータの取得
    static getSafeParam(key) {
        let params = new URLSearchParams(location.search);
        let value = params.get(key);
        
        if (value) {
            // HTMLエスケープして返す
            return this.escapeHtml(value);
        }
        
        return null;
    }
}

これで、XSS攻撃を防ぎながらパラメータを取得できます。

まとめ

JavaScript の locationオブジェクトについて詳しく解説しました。

重要なポイント

• URL情報の取得: href、pathname、search、hash等で各部分を取得
• ページ遷移: assign()、replace()、reload()で移動を制御
• クエリパラメータ: URLSearchParamsを活用した現代的な操作
• セキュリティ: 安全なリダイレクトとXSS対策

実践的な活用

• SPAルーティング: history APIとの組み合わせ
• フォーム状態管理: URLによる状態保持
• フィルター・ソート: 検索条件のURL保存
• セキュアな実装: 適切なエスケープと検証

locationオブジェクトを適切に活用することで、より良いユーザーエクスペリエンスを提供できるWebアプリケーションが作れるようになります。

まずは基本的なURL操作から始めて、だんだんと高度な機能も取り入れてみましょう。 きっと、もっと便利で使いやすいWebアプリが作れるようになりますよ。

ぜひ今日から、これらの知識を活用してより良いURL管理機能を実装してみませんか？