【GAS】pushメソッドで配列末尾に要素を追加する

2022年8月30日GASpush,スプレッド構文

Google Apps Script（GAS）における配列要素を操作するためのメソッドのうち、配列の末尾に新しい要素を追加するpushメソッドの使い方をご紹介します。

1. 配列を操作するメソッド
2. pushメソッドとは・使い方
- 2.1. 基本構文
3. pushメソッドを用いた二次元配列の追加
4. まとめ

配列を操作するメソッド

GASには配列（Arrayオブジェクト）の要素を追加したり削除したりするためのメソッドがいくつか用意されています。主に下記の5つのメソッドが良く使われます。

unshiftメソッド：先頭に新しい要素を追加
pushメソッド：末尾に新しい要素を追加
shiftメソッド：最初の要素を抽出
popメソッド：最後の要素を抽出
spliceメソッド：任意の位置の要素の削除し新たな要素を追加

これらのメソッドをうまく活用することで、工数の短縮はもちろんのこと処理時間を削減してGASでネックとなる処理時間エラーへの懸念を減らすことができます。

【GAS】配列に要素を追加する方法まとめ（push / unshift / splice）

pushメソッドとは・使い方

pushメソッドは、GASで配列の要素を操作するメソッドのうち、配列の末尾に新しい要素を追加するメソッドです。具体的には下記のような構文で記述することができます。

基本構文

Array.push(val1 [, val2,… , valN)

valN：配列に追加したい要素、配列の末尾に追加される
戻り値：要素が追加された新しい配列の要素数
元の配列は追加要素が加わった新しい配列に変更される

  let array = ['apple', 'orange', 'grape'];
  console.log(array.length); //3

  let newLength = array.push('peach', 'banana');  

  console.log(array); //['apple', 'orange', 'grape', 'peach', 'banana' ]
  console.log(newLength); //5

元の配列要素のデータ型に寄らず引数を指定することができ、例えば上記の例だと配列や数値でもOKです。

  let array = ['apple', 'orange', 'grape'];

  let newLength = array.push([['peach', 'banana'],2]); 
 
  console.log(array); //[ 'apple', 'orange', 'grape', [ [ 'peach', 'banana' ], 2 ] ]
  console.log(newLength); //4

pushメソッドを用いた二次元配列の追加

上記の例は一次元配列への要素追加のサンプルコードでした。GASではスプレッドシートと連携することが多いため、二次元配列での活用をこちらのパートで確認しておきたいと思います。

スプレッドシートから読み込んだデータやスプレッドシートに書き込むためのデータの形式は二次元配列なので、二次元配列の操作に慣れておくと非常に便利です。

二次元配列に対する一次元配列の追加

二次元配列にある一次元配列を追加する際は、その一次元配列をそのままイチ要素にするので何も考えずにpushメソッドを用いて要素追加すればOKです。

  values =   [[ '商品', '価格', '個数', '売上' ],
              [ 'ハンバーグ', 1000, 12, 12000 ],
              [ 'スープ', 500, 18, 9000 ],
              [ 'カレー', 1500, 8, 12000 ],
              [ 'シチュー', 800, 18, 14400 ]
            ];

  let  array =['スパゲッティ', 1000, 4, 4000,]
  values.push(array);

  console.log(values);
/*
[ [ '商品', '価格', '個数', '売上' ],
  [ 'ハンバーグ', 1000, 12, 12000 ],
  [ 'スープ', 500, 18, 9000 ],
  [ 'カレー', 1500, 8, 12000 ],
  [ 'シチュー', 800, 18, 14400 ],
  [ 'スパゲッティ', 1000, 4, 4000 ] ]
*/

二次元配列の追加①：スプレッド構文を用いる

今度は二次元配列に、もともと別で保持している二次元配列を追加したい場合を考えてみます。

  values =   [[ '商品', '価格', '個数', '売上' ],
              [ 'ハンバーグ', 1000, 12, 12000 ],
              [ 'スープ', 500, 18, 9000 ],
              [ 'カレー', 1500, 8, 12000 ],
              [ 'シチュー', 800, 18, 14400 ]
            ];

//追加したい配列
  let  array =[ ['スパゲッティ', 1000, 4, 4000,],
                ['オムライス', 1200, 5, 6000]]

上述の例と同じやり方で追加対象の二次元配列を引数にしてもうまくいきません。これは、挿入する二次元配列そのものが一つの要素として追加されてしまうためです。

//そのまま二次元配列をpushしても想定した戻り値は得られない

  values.push(array);
  console.log(values);

/*
[ [ '商品', '価格', '個数', '売上' ],
  [ 'ハンバーグ', 1000, 12, 12000 ],
  [ 'スープ', 500, 18, 9000 ],
  [ 'カレー', 1500, 8, 12000 ],
  [ 'シチュー', 800, 18, 14400 ],
  [ [ 'スパゲッティ', 1000, 4, 4000 ], [ 'オムライス', 1200, 5, 6000 ] ] ]
*/

pushメソッドで複数の要素を追加するには、その要素をリストとしてでpushメソッドの引数に記述しなければいけません。具体的には下記のようなスプレッド構文（…Array）を用いて外側の[]を外して引数に渡します。

//スプレッド構文を使う場合

  let  array =[ ['スパゲッティ', 1000, 4, 4000,],
                ['オムライス', 1200, 5, 6000]]

  values.push(...array);
  console.log(values);

/*
[ [ '商品', '価格', '個数', '売上' ],
  [ 'ハンバーグ', 1000, 12, 12000 ],
  [ 'スープ', 500, 18, 9000 ],
  [ 'カレー', 1500, 8, 12000 ],
  [ 'シチュー', 800, 18, 14400 ],
  [ 'スパゲッティ', 1000, 4, 4000 ],
  [ 'オムライス', 1200, 5, 6000 ] ]
*/

二次元配列の追加②：要素となる配列を列挙する

または手間ですがインデックスを指定して一つの配列ずつ引数とすれば同じ結果が得られます。

//要素を逐次追加する場合

  values.push(array[0], array[1]);
  console.log(values);

/*
[ [ '商品', '価格', '個数', '売上' ],
  [ 'ハンバーグ', 1000, 12, 12000 ],
  [ 'スープ', 500, 18, 9000 ],
  [ 'カレー', 1500, 8, 12000 ],
  [ 'シチュー', 800, 18, 14400 ],
  [ 'スパゲッティ', 1000, 4, 4000 ],
  [ 'オムライス', 1200, 5, 6000 ] ]
*/

まとめ

GASにおいて配列の末尾に任意の要素を追加できるpushメソッドとその使い方についてご紹介しました。