【JavaScript】時間(hh:mm)をソート(sort)する方法

JavaScriptで「12:30」などの時間をソートする場合に正常にソートできない方は、記事で問題を解決できます。大事なポイントは、コロンを除去した上でソートしているのかどうかです。

これから解説するソースコードはVue.jsを使って記述していますが、Vue.jsを知らなくても理解できる内容になっています。HTML, CSSは無視してJavaScriptのメソッドのみに着目してください。

アンチパターン : 分をソートできない

下記JSFiddleのresultタブで「並べ替えボタン」を押してみましょう。

早い順に並べ替える場合、13:10が13:00の前に来てしまっていますし、遅い順に並べ替えても13:01が13:00の前に来てしまっているので正常なソートではありません。

問題のソース

sortAsc() {
    this.items.sort((a, b) => {
      let asc_a = parseInt(a.start_time, 10);
      let asc_b = parseInt(b.start_time, 10);
      return asc_a - asc_b;
  })
},
sortDesc() {
    this.items.sort((a, b) => {
        let desc_a = parseInt(a.start_time, 10);
        let desc_b = parseInt(b.start_time, 10);
        return desc_b - desc_a;
  })
}

原因はソート対象がコロンの前までになってしまっているからです。parseInt()で整数に変換してソートをかけても正常に動かないのはこのためです。

正常にソートできるように修正しましょう。

parseInt()メソッド

デザインパターン : 分まで正常にソートする

下記のJSFiddleは正常に動作しています。具体的に何が異なるのかを解説します。

ポイントはこれだけ! – コロン(:)を除去する

上記のアンチパターンとの違いは、コロンを除去している点です。

sortAsc() {
    this.items.sort((a, b) => {
      const asc_a = this.convertInt(a.start_time)
      const asc_b = this.convertInt(b.start_time)
    
      return asc_a - asc_b;
  })
},
sortDesc() {
  this.items.sort((a, b) => {
       const desc_a = this.convertInt(a.start_time);
      const desc_b = this.convertInt(b.start_time);
       return desc_b - desc_a;
  })
},
convertInt(value) {
    return parseInt(value.replace(":", ""), 10);
}

コロンを除去して数値を返すconvertInt()関数を用意しました。ただ値を返すだけの処理ですが、複数箇所で使う可能性のある処理は共通化します。

コロンを削除した4桁の整数でソートが可能になりました。時間をソートする際にはコロンを除去してソートするのを忘れないようにしましょう。

sort()メソッド

関連記事

コメント

この記事へのコメントはありません。