JavaScriptで多次元配列をソートする方法を現役エンジニアが解説【初心者向け】

JavaScriptで多次元配列をソートする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• 多次元配列とは
• 多次元配列のソートアルゴリズム
• 実際にソートしてみよう
• まとめ

 

多次元配列とは

配列の中に配列が入っている配列のことです。

配列の中に配列を入れることができるため、配列を何重にも深くすることができます。配列の中身が配列のような深さが2階層であれば2次元配列となり、さらに深くなるようなら3次元配列、4次元配列、、、という具合になります。

これらをまとめて多次元配列と呼びます。イメージとしてはマンションのような形です。1階に世帯が何個もあり、2階にも世帯が何個もあり、3階にも、、という階ごとに世帯の配列がマンションという1つの建物にまとめられています。

このマンションのイメージを実際にJavaScriptの配列として記述してみます。

まずは1階の世帯だけの1次元配列は下記のようになります。

[101, 102, 103]

これを2階の世帯の配列、3階の世帯の配列と用意し、各階を配列の値になるように[（ブラケット）で囲います。そして各階の配列を,（カンマ）で区切り、下記のような配列の中に配列が入った2次元配列になります。

[
  [101, 102, 103],
  [201, 202, 203],
  [301, 302, 303]
]

 

[PR] フロントエンドで副業する学習方法を動画で公開中

多次元配列のソートアルゴリズム

配列のソート（並び替え）は、JavaScriptに標準で組み込まれているArrayオブジェクトのsortメソッドを使います。配列が多次元かどうかは、配列の値の指定方法が違うだけでソートの方法は同じです。

まずはsortメソッドの扱い方を確認します。引数は省略、または1つもたせることができます。引数を省略した場合は配列の要素を文字列に変換してから辞書順に並び替えます。

つまり、下記のように10、1、3と数字が並んでいる場合は、文字としての辞書順で1の次は3ではなく10になります。

let array = [10, 1, 3];
console.log(array.sort());  // [1, 10, 3]

数値をソートする場合はこの点に注意が必要です。引数を1つ持たせる場合は、ソートする関数をもたせます。この関数によって、数値を数値順にすることはもちろん自由に順序を指定することができます。そして、配列および多次元配列の要素の指定方法をここで復習しておきます。

配列の要素は0から始まります。配列の1番目の値を取得する場合は、配列に[0]をつけます。多次元配列の場合は、配列の中の値が配列なので[0][0]のようにつなげます。

具体的に取得する例を紹介します。下記のような2次元配列をarrayという変数に格納しています。

let array = [
  ['あ', 'い' , 'う'],
  ['か', 'き', 'く'],
  ['さ', 'し', 'す']
]

「あ」を取得する場合は、1つ目の配列の1つ目の値となり、要素は0から始まるので下記の記述で取得します。

array[0][0]

 

実際にソートしてみよう

まずは多次元配列を用意します。

今回は3人の生徒の、3回おこなったテストの点数を持っている多次元配列としました。（多次元配列のソートの説明をシンプルにすることを優先した構造にしています）

let multipleArray = [
  [50, 70, 80], //1人目
  [60, 40, 20], //2人目
  [30, 90, 60]  //3人目
]

テストがおこなわれるたびに、最新の点数が配列に追加されていくような場合に、最後の点数が低い順にソートする場合の処理を紹介します。

multipleArray.sort( (a, b) => {
  return a[a.length - 1] - b[b.length -1]
})

ソートの関数では、引数のaとbを比較しマイナスの数字が返されると低い順にソートされます。今回は最新の点数で比較するため、各配列の最後の要素（length-1）で比較しています。

このソートで下記のように最後の点数が低い順にソートされました。

0: (3) [60, 40, 20]
1: (3) [30, 90, 60]
2: (3) [50, 70, 80]

 

まとめ

多次元配列のソートを紹介しました。配列の階層が深くなる分処理が複雑になりますが、最終的な処理は配列を1つずつ扱うことをおさえれば通常のソートと変わりありません。

筆者プロフィール

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。