[GAS]2次元配列をオブジェクト化[最終系] 【前編】‐5日目‐

GAS

どうも。つじけ(tsujikenzo)です。このシリーズでは「2次元配列をオブジェクトに変換する」という内容で全6回でお送りします。今日は第5回目です。

今回から、「基礎とかいいから最終的にコピペで使えるコードを教えてよ」という声にお答えして、チートコードを【前編・後編】にて構築していきたいと思います。

ライブラリまで公開できると御の字ですが。。。(無理は禁物)

前回までのおさらい

前回までは、オブジェクトリテラルの基礎 を学びました。

最後は、for文で大量のオブジェクトを生成する方法をご紹介しましたね。

[GAS]オブジェクトリテラルと仲良くなろう【後編】‐4日目‐
どうも。つじけ(tsujikenzo)です。このシリーズでは「2次元配列をオブジェクトに変換する」という内容で全6回でお送りします。今日は第4回目です。今日はオブジェクトリテラルの基礎・後編です。オブジェクトリテラルについては最後なので頑張

今回は、「前回の書き方で何が問題だったのか」を振り返り、今後の作戦 「メンテナンス不要でオブジェクトの生成をしたい」 【前編・後編】で練りたいと思います。

プロパティキーの直書き

配列型のオブジェクト生成は、このような書き方でした。

一方、オブジェクト型のオブジェクト生成はこのような書き方でした。

const values = [['id','name','age'],['tg001','辻健蔵',45],['tg002','江藤大',35]];

const object = {};
for (let i = 0; i < values.length; i++) {
object[values[i][0]] = {id:values[i][0],name: values[i][1], age: values[i][2]};
}
console.log(object)
//{id:{id:’id’,name:’name’,age:'age'},tg001:{id:’tg001’,name:'辻健蔵',age:45},tg002:{id:’tg002’,name:'江藤大',age:35}}

ご覧の通り2つとも、予めプロパティキー(name, id, age)を直書きしなければなりません。

このようにコード内に直接書かないといけない変数や値(マジックナンバーと呼びます)があると、可読性も下がりますし、プロパティを後で追加したい時など、メンテナンスコストが大変掛かってしまいます。

プロパティキーに変数を使用する

プロパティキーを直書きしない為に、2日目で勉強しました 「プロパティキーに変数を使用する」 テクニックを使います。

const property = 'number';
const object = {[property]:100};
console.log(object); // { number : 100 }
[GAS]オブジェクトリテラルと仲良くなろう【前編】‐2日目‐
どうも。つじけ(tsujikenzo)です。このシリーズでは「2次元配列をオブジェクトに変換する」という内容で全6回でお送りします。今日は第2回目です。引き続きオブジェクト、特にオブジェクトリテラルの基礎について前編・中編・後編としてまとめ

変数名に使用したい文字列は2次元配列の先頭にあります。(ほとんどのスプレッドシートはそうなっていますよね)

const values = [['id','name','age'],['tg001','辻健蔵',45],['tg002','江藤大',35]];
console.log(values[0]); //['id','name','age']

そしてオブジェクトのプロパティを生成する際は、「オブジェクトは同名のプロパティキーが無ければ新規追加し、既にあればオブジェクトに要素を追加する」 という性質を利用して下記のように書くことができます。

まず、1つ目の要素([‘id’,’name’,’age’])をオブジェクトに変換してみましょう。

const object = {};
object[values[0][0]] = values[0][0];
object[values[0][0]] = values[0][1];
object[values[0][0]] = values[0][2];
console.log(object); // {id:’id’, name:’name’, age:’age’}

2つ目のレコード([‘tg001′,’辻健蔵’,45])も変換してみて、1つ目のコードと違いを比べましょう。

object[values[1][0]] = values[1][0];
object[values[1][0]] = values[1][1];
object[values[1][0]] = values[1][2];
console.log(object); // {id:’tg001’, name:’辻健蔵’, age:45}

オブジェクト生成をfor文で回す為に

この2つを見比べると、違いはここにあります。

  • プロパティキー(左辺)はobject[values[i][0]]をfor文で回す
  • プロパティの値(右辺)はvalues[0][i]、values[1][i]、values[2][i]….をfor文で回す

なんだかパズルみたいになってきましたね。しかし、後は必要な値を用意するだけですので頑張りましょう。

[左辺] 2次元配列の先頭をHEADERとして変数に格納する

[‘id’,’name’,’age’]をfor文で回す為に、HEADERという定数を用意して代入しておきましょう。

元のvaluesを壊さないように、スプレッド構文で複製を作ってから操作します。

const VALUES= [['id','name','age'],['tg001','辻健蔵',45],['tg002','江藤大',35]];
const HEADER = [...values].shift();

HEADERを利用することで、先ほどの左辺はこのように書けます。

object[VALUES[i][0]] → object[HEADER[i]] // object{id}, object{name}, object{age}….

[右辺] for of文で2次元配列の1要素ずつ処理する

VALUES[0][i]、VALUES[1][i]、VALUES[2][i]….なので、2次元配列から1つずつ要素(value)を取り出すfor文が使えそうです。

さらに先ほどのHEADERをentries()メソッドで分解することにより、HEADERのインデックス([‘id’,’name’,’age’]の3つ)を使ってfor文をiで回します。

for (const value of VALUES){
for (const [i, element] of HEADER.entries()){
object[HEADER[i]] = value(i);
}
}

本日のまとめ

さて、ここまでの流れをコードにしてみました。myFunctionを実行してみましょう。

function myFunction() {

const VALUES = [[ 'id', 'name', 'age' ],[ 'tg001', '辻健蔵', 35 ],[ 'tg002', '江藤大', 37 ] ];
const HEADER = [...VALUES].shift();

const object = {};
for (const value of VALUES){
for(const [i, element] of HEADER.entries()){
object[HEADER[i]] = value[i];
}
console.log(object);
}
}

ログを確認すると、2次元配列の各要素ごとにオブジェクトを生成できてますね。

[20-11-24 13:24:45:605 JST] { id: 'id', name: 'name', age: 'age' }
[20-11-24 13:24:45:608 JST] { id: 'tg001', name: '辻健蔵', age: 35 }
[20-11-24 13:24:45:611 JST] { id: 'tg002', name: '江藤大', age: 37 }

ということで、今回は 「メンテナンス不要でオブジェクトの生成をしたい」 【前編】をお届けしました。

次回は、生成したオブジェクトを格納していきます【後編】をお届けします。

「コピペで動かせるコード教えてって言ったじゃん。」はい、次回でご紹介できると思います。

このシリーズの目次

[GAS]2次元配列をオブジェクトに変換する‐1日目‐
[GAS]オブジェクトリテラルと仲良くなろう【前編】‐2日目‐
[GAS]オブジェクトリテラルと仲良くなろう【中編】‐3日目‐
[GAS]オブジェクトリテラルと仲良くなろう【後編】‐4日目‐
[GAS]2次元配列をオブジェクト化[最終系] 【前編】‐5日目‐
[GAS]2次元配列をオブジェクト化[最終系] 【後編】‐6日目‐

タイトルとURLをコピーしました