JavaScriptで時刻オブジェクトの配列を数値ペアの配列に変換する方法

この記事では、時刻情報を持つオブジェクトの配列を、より扱いやすい数値ペアの配列へと変換するJavaScriptの実装方法を解説します。

前提となるデータ

まず、次のようなオブジェクトの配列が与えられていると仮定します。

const arr = [
    {"time":"18:00:00"},
    {"time":"10:00:00"},
    {"time":"16:30:00"}
];

この配列を引数として受け取り、以下の処理を行うJavaScript関数を作成する必要があります。

• 各オブジェクトから時刻文字列を抽出する（例：18:00:00、10:00:00、16:30:00）

• 時刻を「[18,0]」「[10,0]」「[16,30]」のような数値ペア形式に変換する

• 変換結果を1つの配列にまとめる

• 最終的な配列を返す

つまり、「18:00:00」という文字列から秒を取り除き、時と分だけを数値として配列化するイメージです。このような処理は、グラフ描画やカレンダー機能など、時刻データをプログラム的に扱いたい場面で役立ちます。

実装コード

実際のコードは以下の通りです。

const arr = [
    {"time":"18:00:00"},
    {"time":"10:00:00"},
    {"time":"16:30:00"}
];
const reduceArray = (arr = []) => {
    let res = [];
    res = arr.map(obj => {
        return obj['time'].split(':').slice(0, 2).map(el => {
            return +el;
        });
    });
    return res;
};
console.log(reduceArray(arr));

コードの解説

この関数の処理の流れを順番に見ていきましょう。

• split(':')：時刻文字列「18:00:00」をコロンで分割し、["18", "00", "00"] という文字列の配列を作成します。

• slice(0, 2)：先頭の2要素（時と分）だけを取り出し、秒の部分を除外します。結果は ["18", "00"] となります。

• +el：単項プラス演算子を使って、各文字列を数値型に変換します。「00」は 0 に、「30」は 30 になります。

• map()：元の配列の各オブジェクトに対して上記の変換を適用し、新しい配列を生成します。

実行結果

コンソールには次のように出力されます。

[ [ 18, 0 ], [ 10, 0 ], [ 16, 30 ] ]

このように、map() と split() を組み合わせることで、わずか数行のコードで時刻文字列を数値ペアの配列へと簡潔に変換できます。デフォルト引数 (arr = []) を設定しているため、引数なしで呼び出された場合でもエラーにならず空の配列を返す、安全な設計になっている点もポイントです。