VIDEO LESSON

JavaScriptのArray.prototype.sort()の使い方：引数・戻り値・実例と注意点の解説動画

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

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

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

0:00こんにちは。
0:00今回はソートを紹介します。
0:02これは、配列の要素を並べ替えるための、配列のインスタンスメソッドです。
0:08ソートは並べ替えという意味で、数値を小さい順にしたり、文字列を辞書の順にしたりできます。
0:15たとえば、商品の価格を安い順に表示する、という場面で役立ちます。
0:20この動画では、書き方と比較関数の仕組み、戻り値と元の配列への影響、記事の基本例、
0:25降順や文字列の並べ替え、省略したときに起きる落とし穴、オブジェクトの並べ替え、
0:30そして注意点まで、実行結果と一緒に学びます。
0:35元の配列自体が変わる点が、このメソッドの大きな特徴です。
0:40並べ替えの基準を自分で決められる点が、柔軟さの理由です。
0:44まず動作環境を確認します。
0:46記事の互換性情報では、クロームでは一以降、エッジでは十二以降、ファイアーフォックスでは一以降、
0:51サファリでは一以降で使えます。
0:55ノード・ジェイエスではゼロ・一〇・ゼロ以降に対応しています。
0:59これらの数値はエムディーエヌの互換性データに基づく目安です。
1:04ソートは古くからある基本的な機能で、現在の主要な環境では広く使えます。
1:09追加の読み込みは不要で、配列に最初から関数として備わっていることを、実機で確認済みです。
1:15対応開始の版は、推奨版という意味ではない点にも注意しましょう。
1:20長く使われている機能なので、学習資料も豊富に見つかります。
1:24書き方を確認します。
1:26対象の配列に続けてソートと書き、カッコの中に比較関数を渡します。
1:31リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。
1:38比較関数は、二つの要素エーとビーを受け取り、負の数ならエーを先に、正の数ならビーを先に、
1:43ゼロなら同順位として扱います。
1:48戻り値は、並べ替えられた元配列そのものです。
1:52新しい配列が作られるわけではない点が重要です。
1:56スライドの例では、三、一、二が小さい順になり、一、二、三になることを実機で確認しました。
2:03まずはこの基本形を押さえましょう。
2:06省略した場合は、後で学ぶ既定の比較の仕方が使われます。
2:11記事の基本例を見ます。
2:13価格の配列は、百、二十、三という順序になっています。
2:17スプレッド構文でコピーを作り、そのコピーに、エー引くビーという比較関数でソートを呼びます。
2:24実行すると、三、二十、百という昇順の結果が表示され、記事の期待出力と一致し、
2:29ノードの実機結果とも一致しました。
2:34ポイントは、並べ替えたのがコピーの方なので、元の価格の配列は百、二十、三のまま変わらないことです。
2:42元の並びを残したい場合は、このようにコピーしてから並べ替える、という書き方が記事でも使われています。
2:50価格のように、数値の順序が意味を持つ場面で欠かせない処理です。
2:55比較関数の仕組みを詳しく見ます。
2:58エー引くビーという式は、エーの方が小さいとき負の数になり、ソートはエーを先に置きます。
3:06反対に、エーの方が大きいとき正の数になり、ビーが先に置かれます。
3:11等しいときはゼロで、同順位として扱われます。
3:15この単純な引き算が、数値の昇順を作る定番の書き方です。
3:20スライドの例では、五、二、八が、二、五、八になることを実機で確認しました。
3:27比較関数は要素のペアごとに何度も呼ばれ、その都度、一貫した負、ゼロ、正を返す必要があります。
3:35ここがソートを使いこなす核心です。
3:38呼ばれる順序や回数は、エンジンが自動で決めてくれます。
3:42並べ方のバリエーションを見ます。
3:45まず降順です。
3:46比較関数の引き算をビー引くエーに変えると、大きい順になります。
3:52スライドの例では、三、一、二が、三、二、一になることを実機で確認しました。
3:58次に文字列です。
4:00バナナ、アップル、チェリーという配列を、比較関数なしでソートすると、アップル、
4:05バナナ、チェリーという辞書順になることを確認しました。
4:11文字列の並べ替えは省略時の動きと相性がよい一方、数値では次の境界例で見る落とし穴があります。
4:19何を、どの順にしたいかで、比較関数の要否が変わります。
4:24名前の一覧や日付の一覧でも、考え方はまったく同じです。
4:29記事の境界例を確認します。
4:31百、二十、三という配列を、比較関数なしでソートするコードです。
4:36実行すると、百、二十、三という結果になり、記事の期待出力と一致し、実機結果とも一致しました。
4:44数値の順に並んでいないように見えますが、これは省略時に要素が文字列として比較されるためです。
4:52文字列としては、百は二十より前、二十は三より前に来ます。
4:57もう一つの例でも、十、九、二が、十、二、九という文字列順になることを確認しました。
5:04数値を並べ替えるときは、比較関数を必ず書く、と覚えてください。
5:10思った通りに並ばないときは、まずこの仕様を疑ってください。
5:15商品を価格順に並べる実例を見ます。
5:18ペン、ノート、バッグという商品が、それぞれ価格を持っています。
5:24コピーを作り、比較関数の中で各商品の価格同士を引き算してソートします。
5:31並べ替えた後に名前だけを取り出すと、ノート、バッグ、ペンという価格の安い順になることを実機で確認しました。
5:42オブジェクトの配列では、どの項目で比べるかを比較関数の中に書くのがポイントです。
5:50価格ではなく名前や日付で比べたい場合も、比べる項目を変えるだけで、同じ形が使えます。
5:58実際の画面表示の並び替えで、よく使う形です。
6:02並べ替えた結果は、そのまま画面の一覧表示に使えます。
6:08元の配列への影響を確認します。
6:10ソートは、ほかの多くの配列メソッドと違い、元の配列を直接並べ替えます。
6:15戻り値も、元の配列と同じものを指しています。
6:19スライドの例では、スプレッド構文でコピーを作ってから並べ替えたので、結果は一、
6:25二、三になり、元のデータは三、一、二のまま残ることを実機で確認しました。
6:31もしコピーせずにそのままソートすれば、元の順序は失われます。
6:35元の並びが後でも必要かどうかを先に考え、必要ならコピーしてから並べ替える、
6:39という手順を習慣にしましょう。
6:44この性質を知らずに使うと、思わぬ並びの消失につながります。
6:48注意点を三つ確認します。
6:50まず、アンディファインドの扱いです。
6:53アンディファインドの要素は比較関数へ渡されず、結果の末尾に置かれます。
6:59スライドの例では、並べ替え後の最後の要素がアンディファインドになることを実機で確認しました。
7:06次に、現在の仕様では、同じ順位になった要素同士の元の順序は保たれます。
7:12これを安定した並べ替えと言います。
7:15そして、比較関数が呼ばれるたびに矛盾した結果を返すと、並びは予測できません。
7:21負、ゼロ、正の意味を一貫させることが大切です。
7:25対象が配列でない値の場合は、呼び出し自体がエラーになります。
7:30空の要素についても、末尾に集まる扱いになる点を知っておきましょう。
7:35まとめです。
7:36ソートは、配列の要素を比較関数に従って並べ替え、元配列そのものを返すメソッドです。
7:43ポイントは三つです。
7:45まず、数値の昇順はエー引くビー、降順はビー引くエーという比較関数で作ること。
7:51次に、比較関数を省略すると文字列として比較されるため、数値の順にはならないこと。
7:58そして、元の配列が直接変わるので、残したい場合はコピーしてから並べ替えることです。
8:06まずは記事の基本例と境界例を実行し、比較関数ありとなしで結果を予測してから確かめてみてください。
8:14お疲れさまでした。
8:15価格や名前の一覧を並べ替えたい場面で、ソートを思い出してください。
8:21基準を言葉で説明できるようになれば、理解が深まった証拠です。

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

この動画で学べること

Array.prototype.sort()で配列を比較関数に従って並べ替える方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのArray.prototype.sort()の使い方：引数・戻り値・実例と注意点 →