次のコードを実行したとき、console.log の出力として正しいものはどれですか？ const params = new URLSearchParams('tag=js&tag=ts&tag=react'); console.log(params.get('tag'));

解説

正解は 'js' です。URLSearchParams は同じキーを複数持つことができますが、get() メソッドは最初にマッチした1件だけを返す仕様になっています。すべての値を配列で取得したい場合は getAll('tag') を使う必要があります。配列が返ったり、カンマ区切りの文字列になったり、最後の値が返ったりはしません。この「同じキーが複数あり得る」「getは最初の1件だけ」という挙動を知らないと、配列で渡したはずのパラメータが1件しか取れずバグになりがちです。getとgetAllの使い分けconst params = new URLSearchParams('tag=js&tag=ts&tag=react'); params.get('tag'); // 'js' params.getAll('tag'); // ['js', 'ts', 'react'] params.has('tag'); // trueクエリ文字列で配列を表現する方法は実は標準化されておらず、?tag=js&tag=ts のように同じキーを繰り返す方式や、?tags[]=js&tags[]=ts のようにブラケットを使う方式など複数の流派があります。URLSearchParams は前者（重複キー方式）をネイティブにサポートしています。URLとURLSearchParamsを組み合わせる実務では生の文字列をパースするより、URL オブジェクト経由で扱うのが安全です。const url = new URL('https://example.com/search?q=react&page=2'); url.searchParams.get('q'); // 'react' url.searchParams.set('page', '3'); url.toString(); // 'https://example.com/search?q=react&page=3'set() は既存のキーを上書きし、append() は重複を許して追加します。この違いも頻出ポイントです。知っておくと得する細かい挙動自動でURLエンコード: params.set('q', 'hello world') とすると、文字列化したとき自動で q=hello+world になる。手動で encodeURIComponent する必要はない反復可能: for (const [key, value] of params) で全エントリを回せる+ はスペース: クエリ文字列では歴史的に + がスペースを表す。%20 との違いに注意「クエリパラメータを配列で受け取りたい」と思ったら、まず getAll を思い出すのがプロの第一歩です。