【Javascript】文字列を任意のルールでソート

前提条件

• Javascriptをある程度理解している(Typescriptでも可)

目標

以下のような文字列の配列が与えられたとします。 地元ネタな話で恐縮ですが、私が住む静岡市のローカル線「静岡鉄道」の駅名の配列です。

let data = ['新静岡', '柚木', '音羽町', '狐ヶ崎', '草薙'];

上記は特にルールもなくバラバラに駅名が入っています。 これを「NAVITIME | 静岡鉄道の路線図」に従って、上り線の駅順にしたいです。

上記の例でいうと、最終結果を以下のようにしたいです。

let data = ['新静岡', '音羽町', '柚木', '草薙', '狐ヶ崎'];

方法

方法はいたって簡単で、ソートの基準となるマスタを用意します。 サンプルとしてわかりやすくするためconstで直接定義していますが、本来ならDBやConfigファイルに格納されているべき情報です。

// 新静岡から終点の新清水までの上り線駅順の配列
const SORT_LIST = ['新静岡',/*...略...*/ '音羽町',/*...略...*/ '柚木',/*...略...*/ '草薙',/*...略...*/ '狐ヶ崎',/*...略...*/ '新清水'];

このSORT_LISTを使ってsort()を行います。 sort()は比較関数を渡すことで、配列中から連続する2要素を比較して並べ替えることができます。

• MDN | Array.prototype.sort()

sort()の中で比較対象となる要素を引数にSORT_LISTのindexOf()を取得することで、上り線の駅順のマスタ配列に対して自身が何番目かを比較することができます。

const SORT_LIST = ['新静岡',/*...略...*/ '音羽町',/*...略...*/ '柚木',/*...略...*/ '草薙',/*...略...*/ '狐ヶ崎',/*...略...*/ '新清水'];
let data = ['新静岡', '音羽町', '柚木', '草薙', '狐ヶ崎'];

data.sort((a,b) => SORT_LIST.indexOf(a) - SORT_LIST.indexOf(b));
console.log(data);

出力結果

(5) ["新静岡", "音羽町", "柚木", "草薙", "狐ヶ崎"]

余談ですが、ソース中のSORT_LIST.indexOf(a) - SORT_LIST.indexOf(b)の順番を逆にすることで下り線の駅順にソートすることもできます。 別途SORT_LIST_DESCのようなものを作らなくてもいいです。

まとめ

今回はJavascriptにおける文字列配列のソートを任意のルールで行う方法をご紹介しました。 オーソドックスな方法で、一度覚えてしまえばなんてことないですが、初見だとなかなか思いつきにくいのかなと思い記事にしました。 この記事が初学者の方の役に立てば幸いです。

SNSでシェアする

タグ

• javascript
• typescript
• js
• ts
• 配列
• array
• list
• sort
• ソート
• 並べ替え
• 文字列
• string