GASでスプレッドシートをオブジェクト配列にすると色々捗る

スプレッドシートからデータを引っ張ってくると、そのままだと二次元配列になります
例えば以下のようなスプレッドシート

batting	name	uniform
3	坂本	6
4	岡本	25

//gs側
function getDatas(){
  const datas=SpreadsheetApp.openById("kyojindasen").getSheets()[0].getDataRange().getValues()
  console.log(datas)
}

//こんな形です
[
  ["batting","name","uniform"],
  [3,"坂本",6],
  [4,"岡本",25]
]

このままだとデータとして使いにくいです。

例えば、「打順が4番目の選手の名前は?」という入力に対して、"岡本"というデータを出力したいとします。

// まさかこんな出し方はしないでしょう。
const player_name = datas[2][1]

しかし、二次元配列ではデータを縦に見ることはできないため、各配列の0番目を見ていって「4」を見つけるという操作ができません（無理やり転置すればできなくもないですが、無駄なのでやりません）

それに行番号や列番号で指定してしまうと、スプレッドシート の行や列が増えたり減ったりした時に対応できなくなります。

二次元配列ではなく、javascriptのオブジェクトを詰め込んだ配列にすると扱いやすくなります。

const players= [
    {batting:3,name:"坂本",uniform:6},
    {batting:4,name:"岡本",uniform:25}
]

これなら「打順が4番目の選手の名前は?」という入力に対して、"岡本"というデータを出力するには以下のコードで実装できます。

const player = players.find(player=>player.batting===4)

もし、「打順5番目に背番号8番の"丸"という名前の選手を加える」時には以下のように実装できます。

const maru = {batting:5,name:"丸",uniform:8}
players.push(maru)

他にも色々メリットはありますが、それらを紹介する前に二次元配列をオブジェクト配列に変換する方法を紹介します。

function getSpreadsheetData(){
      const datas = SpreadsheetApp.openById(id).getSheets()[0].getDataRange().getValues()
      const head = datas.shift()
      const items = datas.map(row => {
        return row.reduce((acc, r, idx) => {
          acc[head[idx]] = r;
          return acc;
        }, {})
      })
			return items
}

解説は少し難しいですが、簡単に説明します。

const datas = SpreadsheetApp.openById(id).getSheets()[0].getDataRange().getValues()
const head = datas.shift()

//headとdatasは以下の形。
head = ["batting","name","uniform"]
datas= [
  [3,"坂本",6],
	[4,"岡本",25]
]

datasの一列一列に対して、配列をオブジェクトにします。

mapメソッドの中身は以下のようなことをしています。

//この部分
row.reduce((acc, r, idx) => {
          acc[head[idx]] = r;
          return acc;
        }, {})

//reduceというメソッドでオブジェクトにしている
head= ["batting","name","uniform"]
row = [3,"坂本",6]

//idx=0
acc={}　　　　　//acc = {}
//idx=1
acc.batting=3 //acc = {batting:3}
//idx=2
acc.name="坂本"//acc = {batting:3,name:"坂本"}
//idx=3
acc.uniform=6 //acc = {batting:3,name:"坂本",uniform:6}

mapメソッドでは、これをrowの2番目に対しても実行を繰り返します。
最終的にdatasの数だけ要素ができます。（この場合は2つ）

reduceメソッドは初心者のうちは馴染みにくいメソッドかもしれませんが、他の言語でも使える（言い換えればそれだけ使用シーンが多いメソッド）ので、使えるようになっておくことを強く勧めます。

何が便利か

• もしスプレッドシートの一列目が日本語の時は、以下のように要素を取り出せます。

const players= [
	{"打順":3,"名前":"坂本","背番号":6},
	{"打順":4,"名前":"岡本","背番号":25},
]
//背番号25の選手の名前は?
const sensyu = players.find(player=>player["背番号"]==25)
sensyu["名前"]
//=> "岡本"

• vuetifyを使うとv-data-tableに表示できます。