URLのスペースは「%20」か「+」か？

Question

質問

URLに検索パラメータを付与する際に、

https://example.com/search?q=cat%20dog
https://example.com/search?q=cat+dog

という２パターンがあるようでして（他にもある？）、このユースケースを知りたいです。

参考までにTwitterは「%20」でした。
https://twitter.com/search?q=cat%20dog

そしてYahoo! は「+」でした。
https://search.yahoo.co.jp/search?p=cat+dog

どういうときに「%20」を使い、「+」を使うのでしょうか？

尚、今回特に知りたいのは、
➀JavaScriptでpushStateする際にはどちらがいいのか？
②ajaxでPHPへ送る際にはどちらがいいのか？
という点ですが、

もし汎用的にユースケースを整理されている方がいらっしゃればぜひお聞かせください。
宜しくお願い致します。

補足

こんな情報がありました。

クエリストリングには「+」か「%20」、それ以外は「%20」
https://www.suzukikenichi.com/blog/which-shold-you-use-space-20-or-plus-in-urls-containing-space/

ですが、ならばTwitterがなぜ「%20」なのか疑問が残りますので、やや納得感が低いです。

補足２

またはこんなご意見もあります。

ていうかもともとの形にそって、半角スペースは%20に置換してもいいと思う。
https://uragou.hatenablog.com/entry/2018/03/16/144355

私も今回、この 「+」だとデコードができない という問題に躓き質問しました。
（pushStateの件でいえば、pushStateした後にそこからパラメータ（q）の値を取得すると、「+」はデコードできないために正規表現で置換しなければならない）

なので、こちらのご意見に頷くところがございます。

補足３

こちらも「%20」派でした。

x-www-form-urlencodedの仕様的には+の方が正しいのかもしれないが、現実的には%20にした方が安全と思う。
https://qiita.com/aosho235/items/0581fc82f8ce2c5ac055

Answer 1

経緯

URI, URN, URL という用語があります。最近では WHATWG が URL を再定義してこれらを総称して URL と呼ぶことにしましたが、昔は別々の定義でした。

昔の URL は RFC 1630, 1738 で標準化され、URL とは別の URN が RFC 2141 で規定され、URL と URN を総称したものを RFC 2396, 3986 で URI と呼ぶことになりました。

+ がスペースとなるのは昔の URL において、Query 内に限定して規定されたものです。

• https://www.w3.org/Addressing/URL/uri-spec.html#z5

Within the query string, the plus sign is reserved as shorthand notation for a space.

HTML フォームにおいては、RFC 1738 に基づいてスペースを + と変換しています。

• https://www.w3.org/TR/html4/interact/forms.html#h-17.13.4.1

Control names and values are escaped. Space characters are replaced by `+', and then reserved characters are escaped as described in [RFC1738]

%20 がスペースとなるのは、RFC 3986 で定義されている Percent-Encoding による記法で、対応するASCIIコードが 20(H) であるためです。（こう書くと語弊がありますが、RFC 1738 でもクエリ文字列以外ではスペースを %20 で表現しています）

• https://datatracker.ietf.org/doc/html/rfc3986#section-2.1

For example, "%20" is the percent-encoding for the binary octet "00100000" (ABNF: %x20), which in US-ASCII corresponds to the space character (SP).

結論

多くの URL 処理機能を備えるプログラミング言語は RFC 3986 をサポートしています。しかし RFC 1738 に基づくURL処理をサポートしているのは一部です。

例えば PHP では、rawurlencode に対して urlencode が存在します（デコーダもそれぞれ存在します）。

JavaScript では、encodeURIComponent() の他に encodeURI() が、そしてかつて escape() が存在しました。（encodeURI() がスペースを + にするわけではありません。encodeURIComponent() とはエンコードの機能が異なります。）

URLのクエリ文字列をエンコードするにあたっては、RFC 3986 準拠の rawurlencode や encodeURIComponent() を使うのが良いでしょう。つまり、パーセントエンコーディング %20 を積極的に使っておけばよいということです。

フレームワーク等の都合で RFC 1738 に基づくエンコードをせざるを得ない限り、スペースのエンコードに + を積極的に使う理由はないでしょう。

pushStateした後にそこからパラメータ（q）の値を取得すると、「+」はデコードできないために正規表現で置換しなければならない

これは取得の仕方に問題があるのではないでしょうか。以下のようにすれば JavaScript でも + を含むクエリ文字列を適切に扱えます。

const url = new URL(location.href);
const value = url.searchParams.get('q');
console.log(value);

Comments

[nikuatsu]

いつも鬼のようにお詳しいですね…。
get('q') 感動しました。「+」でも「%20」でも対応してくれますね。実は今、自前で変換する関数の作成に取り組んでいたところ（しかも別途質問立ててしまいました）が、get('q') があれば万事解決です。これは大変助かりました。
誠にありがとうございます。

Answer 2

+が空白になるというのはクエリーストリングでしか使えませんが、それをわかっていれば今時はどっちでも良いでしょう。

違いとしては、CGIプログラムでクエリーストリングを受け取る場合、
1．http://example.com/foo.cgi?aaa+bbb
CGIプログラムは2引数で呼び出され、引数1はaaaで引数2はbbb
2．http://example.com/foo.cgi?aaa%20bbb
CGIプログラムは1引数で呼び出され、引数1はaaa bbb
3．クエリーストリングに生で=が1つでも含まれる場合
CGIプログラムは引数無しで呼び出される。

今時は、=無しのクエリーで、引数で参照するようなCGIプログラムを作る人は居なさそうなので、どっちでも良いかと思います。ライブラリを使うならそのライブラリの仕様に任せれば良いし、自力でエンコーディングするなら、あえて+を使う理由は無いですね。
もしそういうCGIプログラムとウェブページを作るなら、各引数の区切りは+で、1つの引数の中に空白を含める場合は%20という使い分けが必須です。

クエリーストリングで=や&が特別な意味を持ったのは、formタグ登場以降なので、それ以前のクエリーストリングを付けるにはisindexタグしか無かった時代には上記の3番のケースは無かったと思います。

Comments

[nikuatsu]

ありがとうございます。お詳しいですね。やはり「+」を使う理由はピンときませんよね。
でも次の関数で「使わざるを得ない状況」になっており、悩んでいます。

// パラメータをセット
function setParams( url, param ){

let result = url;
const obj = new URL(url);
const params = obj.searchParams;

Object.keys(param).forEach((k,i)=>{
const v = param[k].replace(/\s+/g, ' ');
params.set(k, v);
});

return obj.toString();
}

[otn]

「使わざるを得ない状況」と言うことなら使えば良いのでは？何の問題も無いと思いますが？

[nikuatsu]

たしかにですね。うまく使いこなせるよう引き続き調べていきます。ありがとうございました。

Answer 3

普通のget送信

<form>
<input name="a" value="1 2">
<input type="submit" value="send">
</form>

→ a=1+2

formdata処理

<script>
document.addEventListener('formdata',e=>{
  e.formData.append("b","3 4");
});
</script>
<form>
<input name="a" value="1 2">
<input type="submit" value="send">
</form>

→a=1+2&b=3+4

USPでの処理

var params=new URLSearchParams();
params.append('c','5 6');
console.log(params.toString());

c=5+6
どれをとっても普通に「+」ですね。
逆に手動で+にするか%20にするかを判断する必要はないということです

encodeURIComponent

ちなみに手動でURLを作る場合はencodeURIComponentを利用すると思うのでその場合は%20になります

console.log(encodeURIComponent('7 8'));

→7%208

Comments

[yambejp]

ちなみにUTF8におけるスペースは「%C2%A0」になりますのでまた違った認識が必要です

[nikuatsu]

ありがとうございます。「%20」に変換するようなメソッドはないのですね。「%20」ならdecodeURIできて便利なのに…と惜しんでいましたが、そういうことであれば諦めて「+」のみ使うように致します。

UTF8の言及についてもどうもありがとうございます。後学のため覚えておきます。

[yambejp]

> そういうことであれば諦めて「+」のみ使うように致します。

いえ、私の回答は「ご自身で+と%20を使い分ける必要はなくAPIに任せる」というものです。