WEBVTT

1
00:00:00.000 --> 00:00:00.948
こんにちは。

2
00:00:00.948 --> 00:00:06.793
今回はジャバスクリプトのユーアールエルサーチパラムス、ソートを紹介します。

3
00:00:06.793 --> 00:00:13.270
これは、クエリ文字列の中にあるキーと値の組を、キーの順番に並べ替えるメソッドです。

4
00:00:13.270 --> 00:00:18.246
たとえば、ページが二、カテゴリーがブックスという条件も、カテゴリーがブックス、

5
00:00:18.246 --> 00:00:23.222
ページが二という条件も、中身は同じ検索条件です。

6
00:00:23.222 --> 00:00:27.646
ところが文字列として比べると順番が違うため一致しません。

7
00:00:27.646 --> 00:00:33.175
キャッシュのキーやテストの期待値を作るとき、この違いは意外と困ります。

8
00:00:33.175 --> 00:00:39.652
ソートを使えば、手作業で分解して並べ直さなくても、順番をそろえた文字列を作れます。

9
00:00:39.652 --> 00:00:41.001
まず動作環境です。

10
00:00:41.001 --> 00:00:47.594
このメソッドはブラウザー専用の機能ではなく、ユーアールエルを扱う標準の仕組みの一部です。

11
00:00:47.594 --> 00:00:54.337
ブラウザーとノード・ジェイエスの両方で使え、追加のパッケージやビルド処理は必要ありません。

12
00:00:54.337 --> 00:00:59.657
二千十八年四月以降、主要ブラウザーを横断して利用できる機能とされており、

13
00:00:59.657 --> 00:01:04.977
現在のクローム、エッジ、ファイアフォックス、サファリを対象にできます。

14
00:01:04.977 --> 00:01:14.268
記事の実行環境はノード・ジェイエス二十二系以降を想定していますが、メソッド自体はそれより古いバージョンで追加されたものです。

15
00:01:14.268 --> 00:01:17.864
使う環境と導入された歴史は分けて考えてください。

16
00:01:17.864 --> 00:01:19.851
基本の書き方を見ましょう。

17
00:01:19.851 --> 00:01:26.425
ユーアールエルサーチパラムスのオブジェクトに対して、ドット、ソートと呼び出すだけです。

18
00:01:26.425 --> 00:01:27.801
引数はありません。

19
00:01:27.801 --> 00:01:35.139
配列のソートのように比較関数を渡したり、降順を指定したりする仕組みではない点に注意してください。

20
00:01:35.139 --> 00:01:41.254
戻り値はアンディファインドで、新しいオブジェクトが返ってくるわけではありません。

21
00:01:41.254 --> 00:01:45.382
呼び出したオブジェクト自身が、その場で書き換わります。

22
00:01:45.382 --> 00:01:52.414
並べ替えた結果を文字列で欲しい場合は、ソートの後に、改めてトストリングを呼び出してください。

23
00:01:52.414 --> 00:01:57.612
この、自分自身を変えるという性質が、後で見る失敗例にもつながります。

24
00:01:57.612 --> 00:02:00.326
並べ替えの規則も押さえておきましょう。

25
00:02:00.326 --> 00:02:05.896
比較されるのはキーで、その順番はユーティーエフ十六のコード単位の値に従います。

26
00:02:05.896 --> 00:02:10.752
日本語の読みの順番や、人間が自然だと感じる数値の順番とは限りません。

27
00:02:10.752 --> 00:02:16.751
たとえばキーがアイテム二とアイテム十なら、数字の部分を数として比べることはしません。

28
00:02:16.751 --> 00:02:21.322
文字として比べるため、アイテム十の方がアイテム二より前に来ます。

29
00:02:21.322 --> 00:02:24.607
スライドの実行結果でもその通りになっています。

30
00:02:24.607 --> 00:02:32.320
番号つきのキーを数値順に並べたい場合は、ソートだけに頼らず、別の並べ替え処理を自分で用意する必要があります。

31
00:02:32.320 --> 00:02:35.982
同じキーが複数ある場合の扱いも重要です。

32
00:02:35.982 --> 00:02:42.573
ソートは安定ソートで、キーが同じ組どうしは、元の相対的な順序を保ちます。

33
00:02:42.573 --> 00:02:50.629
たとえばタグがゼット、タグがエーという並びは、ソートした後もゼット、エーの順のままです。

34
00:02:50.629 --> 00:02:57.769
値まで小さい順に並べ替えてくれるわけではないので、ここを誤解しないでください。

35
00:02:57.769 --> 00:03:05.825
重複したキーを許すのがクエリ文字列の特徴で、このメソッドはその重複を消さずに保持します。

36
00:03:05.825 --> 00:03:12.599
同名キーの値の順番に意味があるデータでは、この性質がむしろ安全に働きます。

37
00:03:12.599 --> 00:03:18.092
逆に、値の順番を無視して比べたい場合は、別の工夫が必要です。

38
00:03:18.092 --> 00:03:25.126
記事の実例では、クエリ文字列を受け取って、キー順をそろえた文字列を返す小さな関数を作ります。

39
00:03:25.126 --> 00:03:32.772
最初に、引数が文字列かどうかをタイプオブで確認し、違っていればタイプエラーを投げて早めに知らせます。

40
00:03:32.772 --> 00:03:41.182
次に、その文字列から新しいユーアールエルサーチパラムスを作り、ソートを呼んでからトストリングで結果を返します。

41
00:03:41.182 --> 00:03:47.757
関数の中で新しいオブジェクトを作るため、呼び出し元の元の文字列そのものは変わりません。

42
00:03:47.757 --> 00:03:54.791
引数はユーアールエル全体ではなくクエリ部分の文字列で、戻り値には先頭の疑問符は含まれません。

43
00:03:54.791 --> 00:03:58.920
通信もファイル読み書きもしない、自己完結した処理です。

44
00:03:58.920 --> 00:04:01.144
期待出力を確認しましょう。

45
00:04:01.144 --> 00:04:10.210
最初の入力は、タグ、ページ、タグ、カテゴリーという順番で、二つ目の入力はカテゴリーから始まる違う順番です。

46
00:04:10.210 --> 00:04:14.914
ところが両方を整列すると、カテゴリー、ページ、タグ、タグという同じ文字列になり、

47
00:04:14.914 --> 00:04:19.619
比較結果はトゥルーになります。

48
00:04:19.619 --> 00:04:26.632
同名のタグは、ゼット、エーの元の順序を保ったまま残っている点にも注目してください。

49
00:04:26.632 --> 00:04:31.080
空文字列を渡した場合は、空文字列がそのまま返ります。

50
00:04:31.080 --> 00:04:36.725
文字列以外を渡すと、先ほどのチェックによりタイプエラーになります。

51
00:04:36.725 --> 00:04:42.028
この例は同期処理なので、アウェイトやプロミスの処理は不要です。

52
00:04:42.028 --> 00:04:43.371
よくある失敗例です。

53
00:04:43.371 --> 00:04:49.819
ソートの戻り値に続けてトストリングを呼び出す、いわゆるチェーンの書き方をするとエラーになります。

54
00:04:49.819 --> 00:04:54.520
戻り値はアンディファインドなので、そこからメソッドは呼べないためです。

55
00:04:54.520 --> 00:05:00.296
面白いのは、呼び出しに失敗しても、ソートによる書き換え自体はすでに終わっている点です。

56
00:05:00.296 --> 00:05:04.192
後からトストリングを呼べば、並べ替わった結果が得られます。

57
00:05:04.192 --> 00:05:08.222
書き方は、ソートとトストリングを別の文に分けるのが正解です。

58
00:05:08.222 --> 00:05:13.259
また、既存のオブジェクトを変更したくない場合は、新しいユーアールエルサーチパラムスに元のデータを渡してコピーを作り、

59
00:05:13.259 --> 00:05:18.296
そのコピー側を並べ替えてください。

60
00:05:18.296 --> 00:05:20.571
二つの注意点をまとめて見ます。

61
00:05:20.571 --> 00:05:27.851
一つ目は、ユーアールエル全体の文字列を、そのままユーアールエルサーチパラムスに渡さないことです。

62
00:05:27.851 --> 00:05:35.283
ユーアールエル文字列なら、まずニュー・ユーアールエルで解析してからクエリ部分を取り出してください。

63
00:05:35.283 --> 00:05:37.559
二つ目はエンコードの変化です。

64
00:05:37.559 --> 00:05:43.322
ユーアールエルオブジェクトのサーチパラムスは本体と連動していて、キーが一つしかなく並べ替えが起きなくても、

65
00:05:43.322 --> 00:05:49.086
ソート後に文字列の表記が変わることがあります。

66
00:05:49.086 --> 00:05:54.091
例では空白がプラス記号に、チルダがパーセント表記に変わっています。

67
00:05:54.091 --> 00:06:01.068
署名つきユーアールエルのように元の文字列自体が重要なデータには、安易に適用しないでください。

68
00:06:01.068 --> 00:06:02.789
活用場面を考えましょう。

69
00:06:02.789 --> 00:06:05.226
代表例は検索結果のキャッシュです。

70
00:06:05.226 --> 00:06:09.743
キャッシュのキーを作る直前にクエリを整列しておけば、条件を追加した順番による文字列の違いが減り、

71
00:06:09.743 --> 00:06:14.260
同じ条件でのヒットが増えます。

72
00:06:14.260 --> 00:06:19.279
テストでも、キーの順番だけが違う入力を比べる前の前処理として使えます。

73
00:06:19.279 --> 00:06:20.856
ただし注意も必要です。

74
00:06:20.856 --> 00:06:26.161
クエリだけをキーにすると、違うページの結果どうしが衝突する恐れがあります。

75
00:06:26.161 --> 00:06:31.610
実際には対象のパスや、結果に影響する利用者、言語などもキーに含めてください。

76
00:06:31.610 --> 00:06:39.640
導入するなら、検索条件を作る処理の出口、一か所だけに適用し、重複キーと空白を含むケースを確認するのが現実的です。

77
00:06:39.640 --> 00:06:40.834
最後にまとめです。

78
00:06:40.834 --> 00:06:47.332
ユーアールエルサーチパラムスのソートは、クエリのキーと値の組をキーの順番に並べ替えるメソッドです。

79
00:06:47.332 --> 00:06:52.239
引数はなく、戻り値はアンディファインドで、オブジェクト自身を書き換えます。

80
00:06:52.239 --> 00:06:57.013
並びはキーのユーティーエフ十六順で、同名のキーは元の値の順序を保ちます。

81
00:06:57.013 --> 00:07:02.450
そして、並べ替えと一緒にエンコード表記が変わる場合があることも忘れないでください。

82
00:07:02.450 --> 00:07:09.744
大切なのは、すべてのユーアールエルを一律に変えるのではなく、同じものとして扱ってよい範囲を先に決めることです。

83
00:07:09.744 --> 00:07:15.314
まずは手元の検索条件で試して、整列前と整列後の文字列を自分の目で比べてみてください。

84
00:07:15.314 --> 00:07:16.508
お疲れさまでした。