Query Strings and Parameters 日本語ガイド

Everything after the first ? in an http(s) URL begins the query component—a string interpreted as application/x-www-form-urlencoded-style pairs by most browser and server frameworks, even when the form is not literal HTML.

https://api.example.com/items?tag=book&sort=price_asc&page=2

Parsing yields three keys: tag, sort, page.

Pair syntax

• Pairs are separated by & (historically ; appears in wild traffic but is discouraged without explicit support).
• Inside a pair, the first = separates name from value:
  • flag → empty string value in many parsers
  • q= → empty value
  • q=ruby+gems → literal plus signs may mean spaces under form rules (see Lesson 5).

?q=hello&empty=&flag

Repeating keys is allowed by the wire format:

?tag=a&tag=b

Interpretation stacks (keep last vs collect array) depends on framework—never assume blindly.

Encoding values before concatenation

If a value contains &, =, #, or non-ASCII text, encode the component before joining:

const base = "https://example.com/search";
const params = new URLSearchParams({ q: "fish & chips", city: "São Paulo" });
const url = `${base}?${params.toString()}`;

Using URL keeps delimiters sane:

const url = new URL("https://example.com/search");
url.searchParams.set("q", "100% completion");
console.log(url.toString());

Parsing pitfalls

Manual split('&') fails when stray & appears inside decoded values:

// Looks fine until decoding reveals extra &
decodeURIComponent('a=b%26c=d')

Prefer URL (searchParams), server libraries, or parsers that iterate bytes with correct state instead of simplistic string splits after partial decoding.

Relative URLs and HTML context

Anchors <a href="..."> resolve relative URLs against the document base:

<a href="?page=2">Next</a>

That can surprise you if you expected an absolute path—understand resolution order (scheme → host → path → query addition rules).

Ordering and normalisation

Some signed URLs or caches treat parameter order as significant. When generating canonical strings for signatures, define whether you sort keys and how you percent-encode—AWS-style signing and OAuth 1.0 style string-to-sign are classic examples of strict canonicalisation beyond casual browser behaviour.

Mastering query strings is mostly about component boundaries and choosing the right encoding layer for each layer of your stack.