ユーザにあまり情報を入れさせることなく、ユーザ毎に見えるページを分けたい、ということがある。この場合の選択肢として URI の Query を利用する、という手が考えられる。 (使える場面は限定されるし、本来はログインさせてユーザページとして見せるべきなのかもしれないが)

URL は次のような構造になっている (http://tools.ietf.org/html/rfc3986 から引用)。

         foo://example.com:8042/over/there?name=ferret#nose
         \_/   \______________/\_________/ \_________/ \__/
          |           |            |            |        |
       scheme     authority       path        query   fragment
          |   _____________________|__
         / \ /                        \
         urn:example:animal:ferret:nose

この Query 部分にページに与える引数を与え、ページを開いた際に利用する、という使われ方がされる。例えば https://www.google.co.jp/search?q=ひよことすれば ひよこ で検索することができる。

今回はこの Query パートを JavaScript で取得することを考える。

どうやるのか

Query は一般に key と value を = でペアにしたものを & でつないだものである。例えば次のようになる。
?age=22&sex=m&name=koneko
この場合、次のような連想配列のように考えることができる。

{
  age: '22',
  sex: 'm',
  name:'koneko'
}

このような結果を得られるものを目指す。

var com = com || {};
com.hiyoko = com.hiyoko || {};

/**
 * URL の Query 部分を取得する関数 
 * @param {Object.<string, string>}  Query の連想配列
 */
com.hiyoko.getQueries = function() {
  var params = ((location.search).slice(1)).split('&');
  var paramLength = params.length;
  var result = {};
  for(var i = 0; i < paramLength; i++){
    var pair = params[i].split('=');
    result[pair[0]] = pair[1];
  }
  return result;
};

// Usage
var queries = com.hiyoko.getQueries();

// URL が ～?search_words=ひよこ&type=image ならば
// ひよこ が console に出力される
console.log('Search Word = ' + queries['search_words']);

Query の形式

利用可能な文字

Query パートは次のようなルールで書かれる。

• URL 中最初に出てくる ? で始まる
• Query の途中で出てきた # ないしは URL の終端で終了する
• 以下の文字が利用できる
  • アルファベット, 数字
  • 以下の記号。%-._~!$&'()*+,;=:@
• これ以外の文字で利用したいもの (例えば漢字等) はパーセントエンコーディングで利用できる

key=value だけではない

上ではさも Query は key=value の形式で記述され、複数個使うときは & でつなぐかのように書いたが、実際のところ Query は次のように言われている。as query components are often used to carry identifying information in the form of "key=value" pairs (RFC 3986 Section 3.4 Query)、日本語にすればしばしば Query は識別するための情報を扱うために key=value の形式をとる である (原文ではこの後、それを考慮した扱われ方をするとよい、というような話が続く)。しばしば、であり、常に、ではない点には注意しなければならないかもしれない。

key ないし value に & がきたらどうするの?

どうしようもない。例えば、 ～?b=d&c&e=f といった場合、判断のしようがない。もしも & を入れたければパーセントエンコーディング (RFC 3986 Section 2.1 Percent-Encoding)してくれることを期待する。

参考文献

T. Berners-Lee, R. Fielding, and L. Masinter. RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax. http://tools.ietf.org/html/rfc3986, 2005