【簡単】GASで配列に要素を追加する4つの方法

お仕事おつにゃッス🐈

文系未経験から社内SEになった、あっきょ（@daily_code_JP）です！

Google Apps Scriptsで配列内の要素を追加する方法で悩んだことありませんか？

この記事ではそのお悩みを、Google Apps Scriptのコードで解決し、配列の要素を追加する方法を4つ紹介します。

あっきょ

この記事は以下で悩んでいる人におすすめ！

• 配列内の要素を追加するメソッドの種類と方法を知りたい
• スプレッドシートでセル内の値を整理するのに使いたい
• プログラミングでJavaScriptを学んだけど、何を作っていいかわからない

誰でも無料で簡単にできますので、お気軽に学んでいきましょう！

配列に要素を追加するイメージ

GASで配列内に要素を追加する方法を4つ紹介します。

配列内をあなた自身で操作できれば、オリジナルアプリの開発が楽になります。

また、セル内の値を取得して処理するときも楽になります。

結果として、人的ミスの削減や業務効率化につながります。

配列に要素を追加する準備

Google Apps Script で配列の要素の一部を加える準備をします。ファイルが1つ必要です。

サンプルコードを貼り付ける場所

サンプルコードはGoogle スプレッドシートにコピペします。

上バーの「拡張機能」の中にある「Apps Script」をクリック。ここにコードを書きます。

配列内の要素を追加する4つのコード

配列内に要素を付け加えるメソッドを紹介します。要素を追加する方法は4つです。

unshift() | 配列の先頭に要素を追加

unshihtメソッドは、配列の先頭の要素を追加します。

つまり、配列の左から数えて1番目に要素を入れます。

引数は不要です。

unshiftメソッドを使ったサンプルコード

function appnedArray(){
  const array = ["2", "3", "4", "5", "6"];
  const data = "1"; //配列の先頭に追加

  array.unshift(data);

  Logger.log(array);
}

サンプルコードを実行して動きを把握しましょう。

この例の場合、unshiftメソッドは配列内の「2」の左側に「1」を追加します。

実行結果は画像の通りです。左端が「1」になっているのがわかります。

push() | 配列の末尾に要素を追加

pushメソッドは、配列内の末尾に要素を追加します。

つまり、配列の右から数えて1番目に要素を加えます。

引数はいりません。

popメソッドを使ったサンプルコード

function appnedArray(){
  const array = ["1", "2", "3", "4", "5"];
  const data = "6"; //配列の末尾に追加

  array.push(data);

  Logger.log(array);
}

以下のサンプルコードの場合、pushメソッドは配列内の「5」の右に「6」を追加します。

実行結果は画像の通りです。

左端が「6」になって加えられているのがわかります。

splice() | 配列内の要素の順番を指定して追加

spliceメソッドは、配列内の任意の位置に要素を追加します。

このメソッドは配列内の要素を削除するときにも使えますが、要素を追加する場合は3つの引数を入れます。

この文章だと説明が不足するので、要素を追加する例を2つ紹介します。

3番目に要素を1つ追加する場合

function appnedArray(){
  const array = ["1", "2", "4", "5", "6"];
  const data = "3"; //配列の3番目に追加

  array.splice(2, 0, data);

  Logger.log(array);
}

配列の番号は0から始まるので、配列内に文字列の「3」を追加するには第一引数に2を記入します。

また、第三引数には追加する要素の定数dataを入れます。

実行結果は画像の通りです。「2」と「4」の間に「3」追加されているのがわかります。

2番目から要素を2つ追加する場合

function appnedArray(){
  const array = ["1", "4", "5", "6"];
  const data1 = "2"; //配列の2番目に追加
  const data2 = "3"; //配列の3番目に追加

  array.splice(1, 0, data1, data2);

  Logger.log(array);
}

要素を一度に複数追加することもできます。

配列内に「2, 3」の2つを追加するには、第一引数に1を入れます。

第三と第四引数には配列内に追加する定数をそれぞれ入れます。

実行結果は画像の通りで、「2」と「3」が順番通りに配列内に追加されています。

配列内の番号を指定して追加(非推奨)

配列内の番号を指定して追加する方法です。

0から始まる要素の番号を記入すると、配列内のその番号に要素を追加できます。

6番目に要素を追加する場合

function appnedArray(){
  const array = ["1", "2", "3", "4", "5"];
  array[5] = "6";  //配列の6番目に要素を追加

  Logger.log(array);
}

定数array のカッコ内に番号を記入すれば、配列内に要素を追加します。

このコードでは配列の6番目に要素を追加するので、「5」と記入します。

実行結果は画像の通りです。左端が「6」になっています。

配列内の番号を指定する方法をオススメしない理由

先ほど紹介した配列内に要素を追加する方法の中で、「配列内の番号を指定して追加」を非推奨にしました。

メソッドを覚えなくていいぶん楽にコードを書けるのは事実です。

しかし、GASで自作アプリを開発するときには思いもよらぬバグを起こす可能性があります。

①要素内を上書きしてしまうから

function appnedArray(){
  const array = ["1", "2", "4", "5"];
  array[2] = "3";  //配列の3番目に追加

  Logger.log(array);
}

理由の1つ目は要素を上書きして、配列内のデータが勝手に変わることです。

例として、配列の3番目に要素を追加します。

出力結果は以下の通りです。

文字列の「3」を追加しましたが、配列内にあった「4」が上書きされたのがわかります。

②空の要素(null)が入って要素の個数が変わるから

function appnedArray(){
  const array = ["1", "2", "3", "4", "5"];
  array[6] = "6"; //配列内の末尾の番号を誤って7番目に追加 

  Logger.log(array);
  Logger.log("配列内の要素の個数は" + array.length + "個"); //配列内の要素の個数をかぞえる
}

間違ってインデックス番号を入力した場合、空の要素のnullが入って配列内の個数が変わります。

例として、配列内の6番目に要素を追加するところを誤って7番目に入れたことを想定します。

また、配列内の要素の個数をかぞえる lengthプロパティ を使います。

結果は画像の通りです。

配列内の6番目にnull、配列の7番目に文字列の「6」が入っています。

また、要素の個数も7個で正確な個数を計算できません。

要素の追加でバグを発生させない対策

結論から言うと、この記事で紹介した3つのメソッドを目的に合わせて使うことです。

どのメソッドも要素を上書きしたり、空の要素が発生する原因を抑えることができます。

特に配列内の末尾の番号は頻繁に変わるので、pushメソッドを使うとバグが発生しにくいアプリを開発できます。

たった3つの配列の使い方を覚えるだけで、アプリ開発の作業量とバグチェックが明らかに楽になって時間短縮につながります。

【基本】GASで配列を処理する方法一覧

この記事では、配列内の要素を追加する方法を4つ紹介しました。

GASでは追加以外にも、要素の削除や取り出しもできます。

誰でも簡単に無料でできるので、ぜひご参考ください。

もちろん、コピペOKです。

配列内の要素が配列の二次元配列の扱い方についてはこちら。

おわりに | さらにGASのスキルをアップするには

以上、GASで配列に要素を追加する4つの方法でした。

そのままコピペして日常業務で使いやすいように改修したり、プログラミングの練習や動作確認用に使ってみましょう。

GASでさらに業務効率化したい場合、参考書やプログラミングスクールを使うとあなた自身でアプリを作るスキルが身に付きます。

プログラミング未経験者にもわかりやすく解説しています。

プログラミングスクールは82社を分析して5つ厳選してるッスよ！

あっきょ

次回の記事もご期待ください！