VIDEO LESSON

JavaScriptのURLSearchParams.sort()：クエリのキー順をそろえるの解説動画

再生時間 7:16動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はジャバスクリプトのユーアールエルサーチパラムス、ソートを紹介します。
0:06これは、クエリ文字列の中にあるキーと値の組を、キーの順番に並べ替えるメソッドです。
0:13たとえば、ページが二、カテゴリーがブックスという条件も、カテゴリーがブックス、
0:18ページが二という条件も、中身は同じ検索条件です。
0:23ところが文字列として比べると順番が違うため一致しません。
0:27キャッシュのキーやテストの期待値を作るとき、この違いは意外と困ります。
0:33ソートを使えば、手作業で分解して並べ直さなくても、順番をそろえた文字列を作れます。
0:39まず動作環境です。
0:41このメソッドはブラウザー専用の機能ではなく、ユーアールエルを扱う標準の仕組みの一部です。
0:47ブラウザーとノード・ジェイエスの両方で使え、追加のパッケージやビルド処理は必要ありません。
0:54二千十八年四月以降、主要ブラウザーを横断して利用できる機能とされており、
0:59現在のクローム、エッジ、ファイアフォックス、サファリを対象にできます。
1:04記事の実行環境はノード・ジェイエス二十二系以降を想定していますが、メソッド自体はそれより古いバージョンで追加されたものです。
1:14使う環境と導入された歴史は分けて考えてください。
1:17基本の書き方を見ましょう。
1:19ユーアールエルサーチパラムスのオブジェクトに対して、ドット、ソートと呼び出すだけです。
1:26引数はありません。
1:27配列のソートのように比較関数を渡したり、降順を指定したりする仕組みではない点に注意してください。
1:35戻り値はアンディファインドで、新しいオブジェクトが返ってくるわけではありません。
1:41呼び出したオブジェクト自身が、その場で書き換わります。
1:45並べ替えた結果を文字列で欲しい場合は、ソートの後に、改めてトストリングを呼び出してください。
1:52この、自分自身を変えるという性質が、後で見る失敗例にもつながります。
1:57並べ替えの規則も押さえておきましょう。
2:00比較されるのはキーで、その順番はユーティーエフ十六のコード単位の値に従います。
2:05日本語の読みの順番や、人間が自然だと感じる数値の順番とは限りません。
2:10たとえばキーがアイテム二とアイテム十なら、数字の部分を数として比べることはしません。
2:16文字として比べるため、アイテム十の方がアイテム二より前に来ます。
2:21スライドの実行結果でもその通りになっています。
2:24番号つきのキーを数値順に並べたい場合は、ソートだけに頼らず、別の並べ替え処理を自分で用意する必要があります。
2:32同じキーが複数ある場合の扱いも重要です。
2:35ソートは安定ソートで、キーが同じ組どうしは、元の相対的な順序を保ちます。
2:42たとえばタグがゼット、タグがエーという並びは、ソートした後もゼット、エーの順のままです。
2:50値まで小さい順に並べ替えてくれるわけではないので、ここを誤解しないでください。
2:57重複したキーを許すのがクエリ文字列の特徴で、このメソッドはその重複を消さずに保持します。
3:05同名キーの値の順番に意味があるデータでは、この性質がむしろ安全に働きます。
3:12逆に、値の順番を無視して比べたい場合は、別の工夫が必要です。
3:18記事の実例では、クエリ文字列を受け取って、キー順をそろえた文字列を返す小さな関数を作ります。
3:25最初に、引数が文字列かどうかをタイプオブで確認し、違っていればタイプエラーを投げて早めに知らせます。
3:32次に、その文字列から新しいユーアールエルサーチパラムスを作り、ソートを呼んでからトストリングで結果を返します。
3:41関数の中で新しいオブジェクトを作るため、呼び出し元の元の文字列そのものは変わりません。
3:47引数はユーアールエル全体ではなくクエリ部分の文字列で、戻り値には先頭の疑問符は含まれません。
3:54通信もファイル読み書きもしない、自己完結した処理です。
3:58期待出力を確認しましょう。
4:01最初の入力は、タグ、ページ、タグ、カテゴリーという順番で、二つ目の入力はカテゴリーから始まる違う順番です。
4:10ところが両方を整列すると、カテゴリー、ページ、タグ、タグという同じ文字列になり、
4:14比較結果はトゥルーになります。
4:19同名のタグは、ゼット、エーの元の順序を保ったまま残っている点にも注目してください。
4:26空文字列を渡した場合は、空文字列がそのまま返ります。
4:31文字列以外を渡すと、先ほどのチェックによりタイプエラーになります。
4:36この例は同期処理なので、アウェイトやプロミスの処理は不要です。
4:42よくある失敗例です。
4:43ソートの戻り値に続けてトストリングを呼び出す、いわゆるチェーンの書き方をするとエラーになります。
4:49戻り値はアンディファインドなので、そこからメソッドは呼べないためです。
4:54面白いのは、呼び出しに失敗しても、ソートによる書き換え自体はすでに終わっている点です。
5:00後からトストリングを呼べば、並べ替わった結果が得られます。
5:04書き方は、ソートとトストリングを別の文に分けるのが正解です。
5:08また、既存のオブジェクトを変更したくない場合は、新しいユーアールエルサーチパラムスに元のデータを渡してコピーを作り、
5:13そのコピー側を並べ替えてください。
5:18二つの注意点をまとめて見ます。
5:20一つ目は、ユーアールエル全体の文字列を、そのままユーアールエルサーチパラムスに渡さないことです。
5:27ユーアールエル文字列なら、まずニュー・ユーアールエルで解析してからクエリ部分を取り出してください。
5:35二つ目はエンコードの変化です。
5:37ユーアールエルオブジェクトのサーチパラムスは本体と連動していて、キーが一つしかなく並べ替えが起きなくても、
5:43ソート後に文字列の表記が変わることがあります。
5:49例では空白がプラス記号に、チルダがパーセント表記に変わっています。
5:54署名つきユーアールエルのように元の文字列自体が重要なデータには、安易に適用しないでください。
6:01活用場面を考えましょう。
6:02代表例は検索結果のキャッシュです。
6:05キャッシュのキーを作る直前にクエリを整列しておけば、条件を追加した順番による文字列の違いが減り、
6:09同じ条件でのヒットが増えます。
6:14テストでも、キーの順番だけが違う入力を比べる前の前処理として使えます。
6:19ただし注意も必要です。
6:20クエリだけをキーにすると、違うページの結果どうしが衝突する恐れがあります。
6:26実際には対象のパスや、結果に影響する利用者、言語などもキーに含めてください。
6:31導入するなら、検索条件を作る処理の出口、一か所だけに適用し、重複キーと空白を含むケースを確認するのが現実的です。
6:39最後にまとめです。
6:40ユーアールエルサーチパラムスのソートは、クエリのキーと値の組をキーの順番に並べ替えるメソッドです。
6:47引数はなく、戻り値はアンディファインドで、オブジェクト自身を書き換えます。
6:52並びはキーのユーティーエフ十六順で、同名のキーは元の値の順序を保ちます。
6:57そして、並べ替えと一緒にエンコード表記が変わる場合があることも忘れないでください。
7:02大切なのは、すべてのユーアールエルを一律に変えるのではなく、同じものとして扱ってよい範囲を先に決めることです。
7:09まずは手元の検索条件で試して、整列前と整列後の文字列を自分の目で比べてみてください。
7:15お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

URLSearchParams.sort()でクエリのキー順をそろえる方法を解説。引数・戻り値、ブラウザーとNode.jsの実行手順、同名キーの順序維持、元データの変更や再エンコードの注意点を学べます。

解説記事・サンプルコードを読む：JavaScriptのURLSearchParams.sort()：クエリのキー順をそろえる →