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

お仕事おつにゃッス🐈

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

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

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

あっきょ

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

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

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

0円でプログラミングを学べるスクール

侍テラコヤはサブスク型のプログラミングスクール。

• 50種類以上の教材を学び放題
• 回答率100%の質問掲示板が無制限
• 無料で学べる「フリープラン」

仕事後の夜遅くでもスキルアップするならおすすめです。

口コミ・評判 公式サイト

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

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

初心者でも学びやすい＆挫折しないスクール3選

初心者でも学びやすいプログラミングスクールを3つ紹介します。

プログラミング独学の挫折率は60％近くと高め。

エラーを解決できなかったり相談できる人がいなかったりと理由はさまざまです。

モチベを保てる環境を整えたのがスクールで挫折率を1割未満に抑えられます。

そこで、デイコーで調査した82社から厳選して解説します。

テックアカデミー | 未経験から月5万の副収入を目指す

おすすめコース	はじめての副業コース
受講料(税込)	87,600円～(8週間プラン+給付金適応後)
分割払い(24回)	4,996円
受講形式	オンライン
強み	はじめての案件を100%保証 未経験でも月5万の副収入 累計案件数1,000件以上 経済産業省のリスキリング対象講座で受講料70%オフ

テックアカデミーは総合満足度95.3%で未経験者に人気のプログラミングスクール。

テキスト形式の教材で進めながら不明点を現役エンジニアのメンターに質問します。

• 週2回のマンツーマンメンタリング
• 毎日15〜23時までのチャットサポート
• 課題レビューとアドバイス

夜遅くまで対応するので退勤後も気軽に相談できます。

「はじめての副業コース」ではGASの開発ベースになったJavaScriptを使ってWeb制作を学習。

学習後はメンターの支援を受けつつスクールの独自案件で副業の実績を積み上げます。

案件報酬と1件につき1～5万円と高単価ッスよ！

あっきょ

卒業生の口コミ33件紹介 口コミ・評判はこちら

無料相談でアマギフ500円分もらえる 公式サイト

インターネット・アカデミー | Excel自動化で残業減

インターネット・アカデミーは初心者から最短距離でスキルを習得するスクール。

初心者が挫折しないサポートが10個が特徴で以下はその一部。

• 動画授業が24時間見放題
• 1年間受講受け放題
• 技術面の質問ができるチャットサービス
• 受講生限定のセミナーや交流会
• 手厚い転職準備サポート＆求人紹介

卒業後には未経験からエンジニア転職するキャリアプランも築けます。

Python×Excel自動化講座はエクセル自動化に特化したカリキュラム。

売上伝票の集計や顧客リスト抽出など実践的に学びながらPythonの基礎基本を身に着けます。

いつもの作業を効率化して残業を減らすならおすすめ。

受講者の8割近くが初心者で学びやすいのがわかるッス！

あっきょ

82社から8つ厳選 Pythonを学べるスクール

1分で無料カウンセリング予約 公式サイト

侍テラコヤ | 50種類以上の教材を学び放題

おすすめコース	フリープラン
受講料(税込)	0円～
受講形式	オンライン
強み	挫折しないプログラミングスクールNo.1 月額固定のサブスクで受け放題 累計35,000名以上の指導実績 挫折率8%の低さ

侍テラコヤは50教材以上を定額で受け放題のオンラインスクール。

回答率100％の質問掲示板などの初心者でも挫折しない環境が整っているのが特徴です。

フリープランは無料で教材の一部を閲覧可能。

GASを学ぶ場合、「業務自動化コース」で基礎基本から学べます。

まずは0円で教材を利用したい人にはおすすめです。

Python や HTML/CSS などのほかの言語も学べるッス！

あっきょ

卒業生の口コミ23件紹介 口コミ・評判はこちら

「フリープラン」でGASを無料で学習 公式サイト

おわりに | GASで配列の追加は簡単

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

そのままコピペして日常業務やプログラミングの練習に使ってみましょう。

今回紹介したサンプルコード以外にも、GASで配列の処理は可能。

ヒューマンエラーが起きやすく時間がかかる作業をGASに任せましょう。

不明点やスクール選びで悩んでいるならデイコーのお問い合わせまでご連絡を。

あなたのお力になります。