AngularJSでクエリ文字列を取得する方法

Posted by Kousukei on 2025/08/04 23:42:46
AngularJSでクエリ文字列を取得する方法

はじめに (対象読者・この記事でわかること)

この記事は、AngularJSを使用しているWeb開発者、特にURLパラメータを扱う必要がある方を対象としています。AngularJSは古いフレームワークですが、まだ多くのプロジェクトで使用されているため、その知識は依然として重要です。

この記事を読むことで、AngularJSでクエリパラメータを取得する2つの主要な方法（$locationサービスと$routeParamsサービス）を理解し、実際のコード例を使って実装できるようになります。また、各方法の特徴や使い分け、よくある問題とその解決策についても学べます。Webアプリケーションでページ間で状態を保持したり、動的なコンテンツを表示したりする際に、これらのスキルは必須です。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - HTML/CSSの基本的な知識 - JavaScriptの基本的な知識 - AngularJSの基本的な理解（ディレクティブ、モジュール、コントローラーなど）

AngularJSでクエリパラメータを扱う背景と概要

Webアプリケーション開発において、URLに含まれるクエリパラメータ（例: ?id=123&category=news）は非常に重要な役割を果たします。これにより、検索結果のフィルタリング、ページネーション、ユーザー設定の保持、共有可能なリンクの生成などが可能になります。

AngularJSでは、クエリパラメータを取得する主な方法として2つのアプローチがあります。1つは$locationサービスを利用する方法、もう1つは$routeParamsサービス（ngRouteモジュール）を利用する方法です。$locationはより汎用的で、現在のURL全体を操作する際に便利です。一方、$routeParamsはルート定義と連携し、特定のルートパラメータに特化したアクセスを提供します。

これらの方法を選択する際の判断基準として、単純なパラメータ取得か、ルーティングとの連携が必要かを考慮すると良いでしょう。また、AngularJS 1.xシリーズではバージョンによってAPIが微妙に異なるため、使用しているバージョンを意識することも重要です。

AngularJSでクエリ文字列を取得する具体的な方法

$locationサービスを使ったクエリパラメータの取得方法

$locationサービスはAngularJSでURLを操作するための強力なツールです。クエリパラメータの取得にはsearch()メソッドを使用します。

基本的な使い方は以下の通りです：

// コントローラー内で
app.controller('MyController', ['$location', function($location) {
  // クエリパラメータを取得
  var params = $location.search();

  // 特定のパラメータにアクセス
  var id = $location.search().id;
  var category = $location.search().category;

  console.log(params); // {id: "123", category: "news"}
  console.log(id); // "123"
  console.log(category); // "news"
}]);

$location.search()はオブジェクトを返し、キーがパラメータ名、値がパラメータ値となります。パラメータがURLに存在しない場合は、そのプロパティはundefinedになります。

また、パラメータの値は常に文字列として取得される点に注意が必要です。数値として扱いたい場合は、明示的に変換する必要があります：

var id = parseInt($location.search().id, 10);

$routeParamsサービスを使ったクエリパラメータの取得方法

$routeParamsサービスはngRouteモジュールと連携して動作し、ルート定義に基づいたパラメータを取得するために使用されます。まず、ngRouteモジュールを依存関係に追加し、ルートを定義する必要があります。

ルートの定義

// モジュールの定義
var app = angular.module('myApp', ['ngRoute']);

// ルートの定義
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/items', {
      templateUrl: 'items.html',
      controller: 'ItemsController'
    })
    .when('/items/:id', {
      templateUrl: 'item-detail.html',
      controller: 'ItemDetailController'
    })
    .otherwise({
      redirectTo: '/items'
    });
}]);

コントローラーでのパラメータ取得

// アイテム一覧のコントローラー
app.controller('ItemsController', ['$scope', '$routeParams', function($scope, $routeParams) {
  // クエリパラメータにアクセス
  var page = $routeParams.page || 1; // デフォルト値の設定
  var category = $routeParams.category;

  console.log('Page:', page);
  console.log('Category:', category);

  // ページネーションやフィルタリングのロジック
}]);

// アイテム詳細のコントローラー
app.controller('ItemDetailController', ['$scope', '$routeParams', function($scope, $routeParams) {
  // パスパラメータにアクセス
  var id = $routeParams.id;

  console.log('Item ID:', id);

  // IDに基づいてアイテムを取得するロジック
}]);

$routeParamsは、URLの両方の部分（パスパラメータとクエリパラメータ）を含むオブジェクトを提供します。パスパラメータ（例: /items/:idのid）とクエリパラメータ（例: ?page=2のpage）を同じオブジェクトからアクセスできます。

実践的な応用例

ページネーションでの利用

app.controller('PaginationController', ['$scope', '$location', function($scope, $location) {
  // 現在のページ番号を取得
  $scope.currentPage = parseInt($location.search().page) || 1;

  // ページ番号が変更されたとき
  $scope.changePage = function(page) {
    // クエリパラメータを更新
    $location.search('page', page);
    // データの再読み込みなど
    loadData();
  };

  function loadData() {
    // ページ番号に基づいてデータを取得
    var offset = ($scope.currentPage - 1) * 10;
    // データ取得のロジック...
  }
}]);

フィルタリング機能での利用

app.controller('FilterController', ['$scope', '$location', function($scope, $location) {
  // 初期フィルタ設定をクエリパラメータから取得
  $scope.filters = {
    category: $location.search().category || 'all',
    priceMin: $location.search().priceMin || '',
    priceMax: $location.search().priceMax || ''
  };

  // フィルタが変更されたとき
  $scope.applyFilters = function() {
    // フィルタを反映したクエリパラメータを生成
    var params = {};
    if ($scope.filters.category !== 'all') {
      params.category = $scope.filters.category;
    }
    if ($scope.filters.priceMin) {
      params.priceMin = $scope.filters.priceMin;
    }
    if ($scope.filters.priceMax) {
      params.priceMax = $scope.filters.priceMax;
    }

    // URLを更新
    $location.search(params);
    // データの再読み込みなど
    loadFilteredData();
  };

  function loadFilteredData() {
    // フィルタに基づいてデータを取得
    // ...
  }
}]);

ユーザー設定の保持

app.controller('SettingsController', ['$scope', '$location', '$cookieStore', 
  function($scope, $location, $cookieStore) {

  // クッキーから保存された設定を取得
  var savedSettings = $cookieStore.get('userSettings') || {};

  // クエリパラメータとクッキーから設定を初期化
  $scope.settings = {
    theme: $location.search().theme || savedSettings.theme || 'light',
    itemsPerPage: $location.search().itemsPerPage || savedSettings.itemsPerPage || 10,
    sortBy: $location.search().sortBy || savedSettings.sortBy || 'date'
  };

  // 設定が変更されたとき
  $scope.saveSettings = function() {
    // クエリパラメータを更新
    $location.search({
      theme: $scope.settings.theme,
      itemsPerPage: $scope.settings.itemsPerPage,
      sortBy: $scope.settings.sortBy
    });

    // 設定をクッキーに保存
    $cookieStore.put('userSettings', $scope.settings);

    // 設定を保存したことを通知
    $scope.showNotification('設定が保存されました');
  };
}]);

ハマった点やエラー解決

$locationと$routeParamsの使い分けで混乱するケース

問題: どのサービスを使うべきか迷うことがある。

解決策: - URL全体を操作する必要がある場合や、ルーティングに依存しないシンプルなパラメータ操作には$locationを使用する - ルート定義と連携してパラメータを扱う場合は$routeParamsを使用する - 大規模なアプリケーションでは、一貫性を持った方針（例: 原則として$locationを使用）を決めておくと良い

AngularJSのバージョンによる差異

問題: AngularJS 1.5以上では$location.search()の挙動が微妙に異なる場合がある。

解決策: - 使用しているAngularJSのバージョンを確認し、公式ドキュメントでAPIの違いを確認する - 必要に応じてバージョンに依存しないコードを書く（例: パラメータの存在チェックとデフォルト値の設定）

// バージョンに依存しない安全なパラメータ取得
function getQueryParam(param, defaultValue) {
  defaultValue = defaultValue || null;
  return $location.search()[param] || defaultValue;
}

パラメータが存在しない場合の処理

問題: パラメータが存在しない場合にエラーが発生する。

解決策: - オブジェクトのプロパティアクセス前に存在を確認する - 三項演算子や論理演算子を使用してデフォルト値を設定する

// 方法1: 存在確認
var id = $location.search().hasOwnProperty('id') ? $location.search().id : null;

// 方法2: 三項演算子
var id = $location.search().id ? $location.search().id : null;

// 方法3: 論理演算子
var id = $location.search().id || null;

URLのエンコード/デコードに関する問題

問題: パラメータに特殊文字が含まれている場合、正しく取得できない。

解決策: - AngularJSは自動的にURLのエンコード/デコードを処理するが、特殊なケースでは手動で処理が必要な場合がある - encodeURIComponentとdecodeURIComponentを使用して明示的に処理する

// エンコード
var encodedValue = encodeURIComponent('特殊文字 @#$%');

// デコード
var decodedValue = decodeURIComponent(encodedValue);

まとめ

本記事では、AngularJSでクエリ文字列を取得する2つの主要な方法（$locationサービスと$routeParamsサービス） を解説しました。

この記事を通して、AngularJSでURLパラメータを効果的に扱うスキルを身につけることができたはずです。これにより、ユーザー体験を向上させ、よりインタラクティブなWebアプリケーションを開発できるようになります。今後は、これらの技術を応用して、より高度なURL操作や状態管理の実装にも挑戦してみてください。

参考資料