【GAS】JavaScript基本⑤ 〜 複数の値を扱う「配列」「オブジェクト」を理解しよう

GAS

みなさんこんにちは。zak-papaです。

前回は「for」文、「while」文による「繰り返し(ループ)」処理についてお伝えしました。

gas【GAS】JavaScript基本④ 〜 for文、while文で「繰り返し(ループ)」処理をしてみよう

 

そして、GASのための「JavaScript」シリーズ第5弾は、「配列」と「オブジェクト」です。

これまでは1つのデータを「変数」に代入して使用していましたが、データが「複数」になると1つ1つ変数に代入して使用していくのは効率的とは言えません。

そのような場合に便利なものが「配列」「オブジェクト」です。配列やオブジェクトを使えば複数の値も変数1つで扱うことができます。

 

また、GASでは特に「配列」の扱いが非常に大事になってきます。なぜなら、GASでは1回あたりの処理時間に制限(6分)があり、「配列」を利用して値を一気に取得したり書き込んだりすることで処理スピードを格段に向上させることができるからです。

 

「配列」は内容が盛り沢山となりますので、途中で休憩しながら読み進めていただければと思います。

 

 ◆「GASのためのJavaScript」シリーズ

【GAS】JavaScript基本① 〜 基本的な「書き方」や「変数」を理解しよう
【GAS】JavaScript基本② 〜 「データ型」について理解しよう
【GAS】JavaScript基本③ 〜 if文、switch文で「条件分岐」をしてみよう
【GAS】JavaScript基本④ 〜 for文、while文で「繰り返し(ループ)」処理をしてみよう
【GAS】JavaScript基本⑤ 〜 複数の値を扱う「配列」「オブジェクト」を理解しよう

 

「配列」で複数の値を扱ってみよう

まずは、「配列」について見ていきましょう。

例えば「人」の情報について扱う場合に、「名前」や「年齢」など1つずつ「変数」に代入して扱うことはできましたね。

3つの変数

 

 

 

上記のように1つずつ変数を用いて扱うこともできますが、「人」の情報が複数ある場合に1つにまとめて管理できると便利ですね。そのような場合に使うのが「配列」になります。

変数名は一般的に「複数形」が使われるので、変数「persons」に「配列」の形で代入するとこのようにスッキリ書くことができます。

変数代入

 

 

「配列」のイメージが掴めたところで、次から配列について詳しく見ていきましょう。

 

 

「配列」の書き方と代入

まずは配列の書き方です。「[ ](角括弧)」と「,(カンマ)」を使用して記述します。

[ 値1,  値2,  値3  ...  ]

 

例えば、下記のような書き方で、「①文字列のみ」、「②数字のみ」、「③文字列と数字を含んだ配列」などがあります。

配列の書き方

 

 

上記③を変数に「代入」する場合は、次のように変数名を「複数形」にして記述するのが一般的です。

変数代入

 

 

「変数」の場合はそれぞれが独立した1つの箱に入っているものでした。

変数のイメージ

 

 

「配列」は1つの大きな箱(配列名:persons)の中に、それぞれの「値」がそれぞれの「箱」に入っているイメージを持ってもらえるとわかりやすいかと思います。

「箱」の数と「値」の数は同じ「3つ」ですが、配列は「インデックス」という番号が振られ最初が「0」からスタートすることになるため注意が必要です。また、「値」のことを「要素」といいます。

変数のイメージ

 

 

「配列」の要素の出力・更新

では、次に「配列」からそれぞれの値を出力してみましょう。それぞれの値にアクセスするには「インデックス」を使って(「キー」として)次のように記述します。

配列名 [インデックス]

 

配列の要素の取得

 

 

 

続いて、配列の中身を「更新」してみます。更新する場合は、次のように記述します。

配列名[インデックス] = 更新する値

 

「zak-papa」を「zak-mama」に、「35」を「28」に、「よろしく」を「ヤッホー」に更新してみましょう。

配列の要素の更新

 

 

 

では、配列の「インデックス」がない場合(インデックスが「3」の場合)、どのようになるでしょうか。スクリプトを実行してみると、次のように新しい要素の「追加」になります。

ただ、配列に要素を追加する場合は「push()」(後述)メソッドを使う場合が多いです。「push()」の使い方は後ほど説明します。

配列の要素の追加

 

 

 

最後に、配列の中に値がいくつあるか「要素数」を出力する方法も覚えておきましょう。
「要素数」を出力するには「length」というプロパティを使用し、次のように「配列名」と「length」を「.(ドット)」で繋げて記述します。

配列名 . length

 

 

最初の「zak-papa」の配列に戻って要素数を出力してみましょう。要素は「3つ」あったので「3.0」と出力されます。

配列の要素数

 

 

 

「配列」と「繰り返し処理」(for文)

配列の中身を順に取り出すこともよくあります。今回は「fruits」配列を使って説明していきます。

まずは、「Logger.log()」で1つずつ配列の中身を取り出してみましょう。

配列の出力

 

 

 

こちらは配列の要素の出力と更新のところでも説明したので問題ないですね。
でも、この処理の仕方だと要素の数が10個や50個と増えた場合に1つずつ記述していくのは効率的ではありません。

このような場合に前回説明した「繰り返し処理」を使えばもっと楽に処理ができましたね。

gas【GAS】JavaScript基本④ 〜 for文、while文で「繰り返し(ループ)」処理をしてみよう

 

次のように配列から「for」文を使って順に要素を出力することができます。
インデックスは「0 〜 2」までなので、「i < 3」又は「i <= 2」と書けばいいですね。

配列とfor文

 

 

 

では、「fruits」配列に「pineapple」が追加された場合はどう記述すれば良いでしょう。
「i < 3」を「i < 4」に変更すれば確かに出力はできますが...。

配列とfor文_2

 

 

 

ただ、この場合だとさらに要素の数が増えた場合に毎回手直しが必要になり、手間が発生してしまいます。

そこで、この「4」という数字に着目してみましょう。
この「4」という数字は、配列の「要素数」と同じですね。要素数を出力するものは上記でも説明した「length」プロパティがありました。

そうすると次のように記述することができます。

配列とfor文_3

 

 

この書き方であれば、要素数が5個でも10個でも増えても何も変更する必要はないですね。
この書き方も是非覚えておきましょう。

 

 

「配列」の要素の追加・削除(push, unshift 等)

続いて、配列の「先頭」や「末尾」を操作(追加・削除)する便利なメソッドを説明します。

ここからは少し応用になります。上記で説明した基本を理解して余力があれば取り組みましょう。
まだ理解が不十分の場合は、先に「オブジェクト」を学ぶと良いと思います。「オブジェクト」は基本のみ説明しています。

オブジェクトの説明へ(クリック)

 

 

まずは「追加」からです。「先頭」に値を追加する場合は「unshift()」、「末尾」に値を追加する場合は「push()」を使います。
なお、値の「追加」は「1つ」だけでなく「複数」追加することが可能です。

unshift_push

 

 

下記に簡単な配列(numbers)を用意しました。
この配列の先頭に「0」「5」、末尾に「50」「60」の2つずつを追加する場合は次のように記述します。
[0, 5]のような配列の形ではなく、(0, 5)の形で( )の中に数字を入れて追加します。

配列の要素の追加_unshift_push

 

 

無事追加されましたね。

それでは今度は「削除」する方法を見ていきましょう。
「先頭」の値を削除する場合は「shift()」、「末尾」の値を削除する場合は「pop()」を使います。( )の中は何も記述せずに使用します。

shift_pop

 

なお、値の「削除」は先頭と末尾のそれぞれ「1つ」のみになります。では、先ほどの例文に続けて記述してみましょう。

配列の要素の削除_shift_pop

 

 

 

先頭の「0」と末尾の「60」が削除されましたね。

今回お伝えした4つのメソッドは、配列の要素数を数えなくても「自動」で先頭と末尾に対して処理を実行してくれる便利なものです。
特に「push()」は使用頻度が高いのでしっかりと使い方を覚えておきましょう。

 

unshift_push_shift_pop

 

 

 

「配列」の要素の追加・削除(splice)

先ほどは配列の要素の「先頭」と「末尾」のみに対して操作(追加・削除)を行ってきました。

では、配列の「途中」に追加をしたり、または先ほどできなかった「複数の要素の削除」をする場合はどのようにしたらよいでしょうか。
実は「splice()」という便利なメソッドが用意されています。

 

「splice()」は次のように2つの方法で記述することができます。

 ※ 「削除」する場合

 splice ( 変化を開始するインデックスの位置,  削除数 )

 

※  「追加」する場合)

 splice ( 変化を開始するインデックスの位置,  削除数,  追加する値①,  追加する値②, ... )

 

 

少し分かりにくいので今回もこちらの配列(numbers)を使って見ていきましょう。

numbers

 

 

「splice(1, 2)」を実行したらどのような結果になるでしょうか。
これは、インデックスの「1」番目を「開始位置」として、そこから「2つ」分を削除するという意味になります。

splice

 

実際に実行してみましょう。「20」と「30」が削除され、「10」と「40」の2つが残りましたね。

配列の要素の削除_splice

 

 

 

続いて、残った2つの値の配列の間に「25」と「35」の2つの値を入れてみましょう。
開始位置は「10」の次、つまりインデックスが「1」ですね。そして今回は削除する値がないので「0」、その後に追加したい値を続けて記述します。

配列の要素の追加_splice

 

 

 

真ん中に「25」と「35」が追加されましたね。

では最後に元の配列の状態に戻して終わりましょう。先ほど追加した「25」と「35」を削除して、「20」と「30」を追加すればいいですね。
このように同じ数の削除と追加は値を「変更」していることになりますね。

配列の要素の変更_splice

 

 

 

「二次元配列」で複数の値を扱ってみよう

「二次元配列」とは?

続いて「二次元配列」について見ていきましょう。

これまで見てきた配列は「一次元配列」であり、1つの配列の中に「値」が「,(カンマ)」で区切られて格納されていました。
では、「二次元配列」の場合は、簡単にいうと1つの配列の中にさらに「配列」が「,(カンマ)」で区切られて格納されているものになります。

一次元配列と二次元配列

 

二次元配列は、次のように改行して記述するとわかりやすいでしょう。

二次元配列

 

上記の二次元配列は、下図のようにまず大きな箱(緑色)があり、その中に小さな箱(水色)が3つずつ入っています。
さらにその小さな箱の中(水色)にそれぞれ1つずつ値が入っているイメージです。

 

二次元配列のイメージ

 

 

まずはイメージがつかめましたでしょうか?

GASでは「スプレッドシート」を操作することが多く、「スプレッドシート」のデータを「配列」で扱えるかどうかが"カギ"となります。次のようにスプレッドシートの各「行」のデータは、右側に記載の通り「(一次元)配列」で扱うことになります。

スプレッドシートと配列

 

 

そして、「複数行」のデータについては、「二次元配列」で扱うことになります。

スプレッドシートと二次元配列_2

 

 

実際にスプレッドシートのデータを全て取得してみましょう。スプレッドシートには下記のデータを貼り付けてください。

zak-papa 35 よろしく
zak-mama 28 ヤッホー
zak-baba 60 バイバイ

 

 

コードはこちら。今の時点ではコードの意味はわからなくて大丈夫です。
実行してみると下記の通り「二次元配列」で取得できていることが分かると思います。

スプレッドシートと二次元配列_3

 

 

 

※ このような画面が出てきたら次の手順で許可してあげましょう。スプレッドシートを扱う場合、初回のみ「認証」が必要になります。

認証画面

 

 


手順1

①「許可を確認」をクリック

認証画面


手順2

②「ご自身のGoogleアカウント」をクリック

Google_アカウント

 

手順3

③「詳細」→ 「初めてのGAS(安全ではないページ)に移動」をクリック

 

アカウントの認証

 

アカウントの認証

 


手順4

④「許可」をクリックして承認完了です。

Google_アカウント


 

 

 

冒頭でお伝えした通り、GASでは1回あたりの処理時間に制限(6分)があります。
配列を利用することで値を一気に取得したり書き込んだりでき、処理スピードを格段に向上させることができます。

データ量が大きくなればなるほどその恩恵を得られると思います。今回は概要のみの説明になりますので、実際の使用方法はまた別の機会にお伝えできればと思います。

 

 

 

 

「二次元配列」の操作

続いて、「二次元配列」の各要素にアクセスする方法を見ていきましょう。

「一次元配列」では、配列名[インデックス]という形で「インデックス」を「キー」として値を取得することができましたね。

配列の出力_2

 

 

 

それでは、スプレッドシートの「C2」の値を「二次元配列」の状態から取得するにはどのように記述すれば良いでしょうか。
※「C2」を1つのセルとして取得する簡単な方法はありますが、今回は「二次元配列」から要素を取得する方法をお伝えしています。

C2の取得

 

 

「二次元配列」も同じように「インデックス」で取得することができます。

先ほどの「箱」のイメージで見てみましょう。
「ヤッホー」は大きな箱のインデックス「1」の中にあり、さらにその中の小さな箱のインデックス「2」にありますね。なので、「persons[1][2]と記述することでデータを取得することができます。

つまり、まずは①大きな(外側の)配列のインデックスを取得し、その後に②小さな(内側の)配列のインデックスを見ていけばいいですね。

 

二次元配列の要素の取得

 

 

別の見方もしてみましょう。スプレッドシート上ではこのように考えるとわかりやすいかと思います。

「1行目」と「A列」どちらもスタートは「0」であり、そこから目的の値まで縦(下)に何個進んで、横(右)に何個進むかで考えると上記と同じ記述の仕方になります。

 

二次元配列の要素の取得_スプレッドシート

 

実際に出力してみましょう。

二次元配列_C2

 

 

 

以上、「二次元配列」についてお伝えしてきました。
見慣れない形なので最初は理解が難しかったかもしれません。

しかし、GASでは「スプレッドシート」だけでなく、「Gmail」などを扱う際もこの「二次元配列」を使ってメールを取得したりします。復習してしっかりと理解しておきましょう。

 

 

「オブジェクト」で複数の値を扱ってみよう

続いて「オブジェクト」です。「連想配列」とも呼ばれ、他言語でいう「ハッシュ(Ruby)」や「辞書型(Python)」と同様のものになります。

オブジェクトは配列と同じく「複数」の値を扱うときに便利なものですが、オブジェクトは「名前」付きで値を管理することができ、例えば、「35」という数字は「age」、つまり「年齢」を表していることがすぐに分かります。

また、オブジェクトは順番を保持していないのでログ出力の際は必ずしも記述した順番にはならないということも覚えておきましょう。

オブジェクト

 

 

 

「オブジェクト」の書き方と代入

まずはオブジェクトの書き方です「{ }(波括弧)」と「,(カンマ)」を使用して記述します。

{ }(波括弧)の中では下記のように「{ プロパティ(キー)① : 値① , プロパティ(キー)② : 値② }」の書き方をします。
先ほどの「名前」の部分を「プロパティ(キー)」といい、「プロパティ」と「値」の間には「:(コロン)」で繋げて記述します。

{ プロパティ(キー)① : 値① , プロパティ(キー)② : 値② }

 

 

下図の2つ目のように「改行」して書くこともでき、こちらの方が読み易くなります。
もちろん「配列」でも同じように改行して書くことができました。

最後の「,(カンマ)」は付けても問題なく動きますが、付け外す手間もあるのでそのまま付けておくのが良いでしょう。

オブジェクトの書き方

 

変数に「代入」する場合は、配列と同じように変数名を「複数形」にして記述するのが一般的です。

オブジェクト_変数代入

 

 

 

配列は「インデックス」という「箱」でしたが、オブジェクトは「プロパティ」という「箱」に入っているイメージを持ってもらえるとわかりやすいかと思います。
先ほどもお伝えしましたが、プロパティがあることで値がどのような意味なのかわかりやすいですね。

オブジェクトのイメージ

 

 

そして、次の章でも説明しますが、配列は「インデックス」を「キー」として、オブジェクトは「プロパティ」を「キー」として箱の中にある値を取り出したり、逆に新しく値を入れたりすることを行います。

配列とオブジェクトのイメージ比較

 

まずは、両者の違いを理解しておきましょう。

 

 

「オブジェクト」の要素の出力・更新

では、次に「オブジェクト」からそれぞれの値を出力してみましょう。

それぞれの値にアクセスするには「プロパティ(キー)」を使って次のように記述します。
1つ目の「.(ドット)」を使って記述することが一般的です。

① オブジェクト名 . プロパティ(キー)

② オブジェクト名 ["プロパティ(キー)"]

 

オブジェクト_プロパティ

 

 

 

続いて、オブジェクトの中身を「更新」してみます。更新する場合は、次のように記述します。

オブジェクト名 . プロパティ(キー) = 更新する値

 

では、配列と同じように「zak-papa」を「zak-mama」に、「35」を「28」に、「よろしく」を「ヤッホー」に更新してみましょう。

オブジェクト_更新

 

 

 

また、オブジェクトの「プロパティ」にないものを記述すると次のように新しい要素の「追加」になります。

オブジェクト_追加

 

 

オブジェクトについては、今の段階ではここまでを理解しておけば十分でしょう。

 

 

 終わりに

以上、「配列」と「オブジェクト」についてお伝えしました。盛り沢山の内容で少し疲れましたね。お疲れ様でした。

プログラミング初心者には最初は理解が難しかったかもしれませんが、「配列」も「オブジェクト」も、「条件分岐」や「繰り返し処理」と同じく他の言語でも同じように扱うことができますので是非使い方をマスターしておきましょう。

そして、GASにとって特に「配列」は、データの処理時間を左右する重要な役割を持つものになります。こちらの記事でスプレッドシートのデータ取得に関して説明していますので実際の使い方はご確認いただければと思います。

PC【GAS】スクリプトエディタからセルの値の取得や入力など基本的な操作をしてみよう

 

 

今回は以上となります。最後まで読んでいただきありがとうございました!