LoginSignup
14

More than 5 years have passed since last update.

URL の Query 文字列でスペースを「%20」とするか「+」とするか論争

Posted at

(個人的に)長年もにょっていた掲題の件について、まとまったのでメモ。

Query 文字列とは?

URL の ? 以降の部分。よく GET パラメータと言っているやつですね。

http://domain/path/to/document.html?foo=bar

という URL があったとしたら、 ? 以降の foo=bar の部分です。

Query 文字列内でのスペースの扱い

%20」でもいいし、「+」でもいける。
可能だったら後者が望ましい(という結論に至った)。

URL で利用可能な文字

URI の RFC で規定されてます。スペースは利用できないので %20 に URL エンコードする必要があります。なので Query 文字列内のスペースももちろん %20 とエスケープする必要あります。

あれ? 「+」の話は?

URI の RFC では Query 文字列で「+」をスペースとして扱うというくだりは見当たりません。
これは URI のサブセットである URL で規定されていました。

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

あくまで Query 文字列内だけってことなんですね。納得しました。

HTML の Form もこれにしたがって、スペースは「+」に置換されてリクエストが送信されます。
気になる人は以下 HTML で試してみましょう。

<form path="./">
<input name="foo bar" value="baz qux">
<input type="submit">
</form>

encodeURIComponent() ってスペースを「+」に置換してくれないよね?

はい。あれは URI のエンコード ってことで、サブセットである URL に関してはノータッチってことなんでしょう。

JavaScript で GET パラメータを構築する時ってどうすればいいの?

URI として valid なんだから、 encodeURIComponent() でも別にいいんじゃないかと思った。
言語の標準ライブラリやビルトイン関数に Query 文字列内のスペースを「+」として扱ってくれる関数があればそちらを使うべきですよね。
(ブラウザのJavaScriptでは見当たらないので頑張らなくてもいいんじゃないかという方針)

まとめ

Stack Overflow の回答コメントから引用。

In theory I think you should have %20 before the ? and + after:

参考文献

RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax
https://tools.ietf.org/html/rfc3986

W3C による URL に関するドキュメント
https://www.w3.org/Addressing/URL/uri-spec.html

フォームの URL エンコード処理に関するドキュメント
https://www.w3.org/TR/html4/interact/forms.html#h-17.13.4.1

Stack Overflow の URL 中のスペースをどうエンコードするかの質問
http://stackoverflow.com/questions/1211229/in-a-url-should-spaces-be-encoded-using-20-or

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14