見出し画像

【JavaScript】一次元配列を二次元配列に変換する方法

SHIFT Group 技術ブログ

はじめに

こんにちは、SHIFTのITソリューション部に所属しているTanakaです。現在は開発支援プロダクト推進部のテックブースト（以下、TB）プロジェクトに参画しています。

私は現在、Node.js実行環境を用いたJavaScriptでの開発に従事しているのですが、今回はその開発の中で知った、一次元配列を二次元配列に変換する方法について、紹介させていただければと思います。

一次元配列と二次元配列について

まず前提知識として、一次元配列と二次元配列について軽く説明します。

一次元配列とは、シンプルに[ ]で囲まれる配列のことです。

一次元配列の例（本記事内の個人情報はランダム生成したものであり、実在する人物、組織等とは関係ありません）

[
  "氏名",
  "年齢",
  "性別",
  "今野 智博",
  "75",
  "男",
  "藁谷 玲",
  "77",
  "女",
  "辻川 ゆきこ",
  "36",
  "女",
  "宮崎 政利",
  "45",
  "男",
  "中村 裕加里",
  "43",
  "女",
  "内山 やよい",
  "57",
  "女",
  "早川 豊",
  "47",
  "男",
  "杉山 彩美",
  "33",
  "女",
  "廣瀬 綾子",
  "66",
  "女",
  "遠藤 寿彦",
  "44",
  "男",
];

一階層に全ての情報が入っていてとても見にくいですね。

一方で二次元配列とは、[ ]の中にもう一階層[ ]が入っている、[ [ ], [ ], [ ] ]のような形の配列のことをいいます。二次元以上の配列を、多次元配列といいます。

多次元配列の例

[
  ["氏名", "年齢", "性別"],
  ["今野 智博", "75", "男"],
  ["藁谷 玲", "77", "女"],
  ["辻川 ゆきこ", "36", "女"],
  ["宮崎 政利", "45", "男"],
  ["中村 裕加里", "43", "女"],
  ["内山 やよい", "57", "女"],
  ["早川 豊", "47", "男"],
  ["杉山 彩美", "33", "女"],
  ["廣瀬 綾子", "66", "女"],
  ["遠藤 寿彦", "44", "男"],
];

どうでしょう、見やすくないですか?
こうすることで、連想配列への変換や列数での処理ができるようになります。
二次元以上の多次元配列は、データを管理・操作するにあたり、一次元配列よりも便利です。
その例を次の見出しで紹介します。

※「最初から二次元配列使えばいいじゃん」と思うかもしれませんが、スクレイピングなどで情報を取得する際、データが
['header', 'header', 'header', 'value', 'value', value']
のような、整形する必要がある配列で出てくる場合があります。

多次元配列の便利さ

多次元配列がどうして便利か、簡単な例を挙げて説明します。
先ほどの多次元配列から、45歳以上のデータを抽出したいとします。

const data = [
  ["氏名", "年齢", "性別"],
  ["今野 智博", "75", "男"],
  ["藁谷 玲", "77", "女"],
  ["辻川 ゆきこ", "36", "女"],
  ["宮崎 政利", "45", "男"],
  ["中村 裕加里", "43", "女"],
  ["内山 やよい", "57", "女"],
  ["早川 豊", "47", "男"],
  ["杉山 彩美", "33", "女"],
  ["廣瀬 綾子", "66", "女"],
  ["遠藤 寿彦", "44", "男"],
];

const over45Age = data.filter((row) => row[1] >= 45); // 45歳よりも上の年齢のデータだけを抽出

console.log(over45Age);

/*
出力結果は
[
  [ '今野 智博', '75', '男' ],
  [ '藁谷 玲', '77', '女' ],
  [ '宮崎 政利', '45', '男' ],
  [ '内山 やよい', '57', '女' ],
  [ '早川 豊', '47', '男' ],
  [ '廣瀬 綾子', '66', '女' ]
]
*/

上の例では、dataに代入したデータのうち、45歳以上のデータだけをArray.prototype.filter()メソッドで抽出し、over45Ageという新しい変数に代入しています。なお、今回は簡単化のためアロー関数を用いています。

結果として、45歳以上のデータが正しく出力されていることがわかります。
列番号1を指定するだけで、簡単に抽出することができました。

これを一次元配列で行おうとすると、行と列の概念がないので、とても複雑な処理をさせなければなりません。
想像もしたくないですね…

ちなみに、filter()メソッドの使い方も過去に記事にしたので、よければ読んでみてくださいね！

一次元配列→二次元配列への変換方法

先ほどの例の通り、どうせなら配列を二次元に変換してから処理できれば、とても便利ですよね。
ということで、今回はJavaScriptの標準組み込みモジュールで解決しちゃいましょう！

const data = [
	'氏名',
	'年齢',
	'性別',
	'今野 智博',
	'75',
	'男',
	'藁谷 玲',
	'77',
	'女',
	'辻川 ゆきこ',
	'36',
	'女',
	'宮崎 政利',
	'45',
	'男',
	'中村 裕加里',
	'43',
	'女',
	'内山 やよい',
	'57',
	'女',
	'早川 豊',
	'47',
	'男',
	'杉山 彩美',
	'33',
	'女',
	'廣瀬 綾子',
	'66',
	'女',
	'遠藤 寿彦',
	'44',
	'男'
];

console.log(data);

const newData = [];
try {
	while (data.length) newData.push(data.splice(0, 3)); // dataの残りがある限り、dataの0番目から3つ分のデータを、newDataの最後尾にpushする
	console.log(newData);
	
	const over45Age = newData.filter((row) => row[1] >= 45); // 45歳よりも上の年齢のデータだけを抽出
	console.log(over45Age);
} catch (error) {
	console.error(error);
}



/*
console.log(newData);の出力結果は
[
  [ '氏名', '年齢', '性別' ],
  [ '今野 智博', '75', '男' ],
  [ '藁谷 玲', '77', '女' ],
  [ '辻川 ゆきこ', '36', '女' ],
  [ '宮崎 政利', '45', '男' ],
  [ '中村 裕加里', '43', '女' ],
  [ '内山 やよい', '57', '女' ],
  [ '早川 豊', '47', '男' ],
  [ '杉山 彩美', '33', '女' ],
  [ '廣瀬 綾子', '66', '女' ],
  [ '遠藤 寿彦', '44', '男' ]
]

console.log(over45Age);の出力結果は
[
  [ '今野 智博', '75', '男' ],
  [ '藁谷 玲', '77', '女' ],
  [ '宮崎 政利', '45', '男' ],
  [ '内山 やよい', '57', '女' ],
  [ '早川 豊', '47', '男' ],
  [ '廣瀬 綾子', '66', '女' ]
]
*/

どうでしょうか、配列の次元を変換し、無事抽出できたと思います。
ここからは変換に使ったメソッド等の解説をしていきます。

splice() メソッドは、その場で既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更するメソッドです。
基本的な構文

元の変数名.splice(取り除き始める位置, 取り除く値の個数, 挿入する値1, 挿入する値2, ... )

push()メソッドは、指定した配列の最後尾に値を挿入するメソッドです。
基本的な構文

push先の変数名.push(値1, 値2, ...)

.lengthは配列のプロパティで、配列の要素の数を取得できます。
基本的な構文

配列名.length;

while文は、条件がtrueの間、指定された処理を実行する構文です。複数処理をさせたい場合は、{処理1, 処理2}のように、処理を{ }で囲む必要があります。
基本的な構文

while (条件) 処理;

これらを踏まえて変換コードの解説をすると、

  1. dataの0番目から3つ分のデータを抽出する

  2. 1をnewDataの最後尾にpushする

  3. dataの残りがある限り、1と2を実行し続ける

というフローになっています。
なお、今回のエラーハンドリングは簡単のため、try-catch構文を用いています。

最後に、今回の変換コードのフォーマットを書いておきます。取り除く値の個数は自由に調節できます。
皆さん使ってみてくださいね！

const 変換先の変数名 = [];

while (変換元の変数名.length)
  変換先の変数名.push(変換元の変数名.splice(0, 取り除く値の個数));

おわりに

今回の記事では、一次元配列を二次元配列に変換する方法を紹介しました。
プロジェクトでは、最終的に一次元配列→二次元配列→連想配列まで変換したのですが、その方法についてはいずれ別の記事に書こうと思います。
この記事が私と同じようなJavaScript初学者の助けになれば幸いです。

執筆者プロフィール: Atsuhito Tanaka
株式会社SHIFT ITソリューション部所属。現在は、開発支援プロダクト推進部で、テックブーストプロジェクトに参画中。

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/

PHOTO：UnsplashのOskar Yildiz

みんなにも読んでほしいですか？

オススメした記事はフォロワーのタイムラインに表示されます！

最後まで読んでくださり、ありがとうございます！

御社サービスのご相談はお気軽に。
ソフトウェア品質のプロがお伺いします。