GASは、日々の業務効率化や、仕事の自動化など多岐にわたる使い方ができる、Googleが提供しているプラットフォームです。
GASを使えば、環境構築の作業をすることなく、すぐに・手軽にプログラムを書けますし、何よりGoogleアプリとの連携や、その他のアプリケーションとの連携も手軽に行うことができます。Googleカレンダー・スプレッドシートなど、自動化や連携を行うことで日々の仕事の効率化が期待されます。
GASで書くコードはほとんど「JavaScript」であり、一部独自の関数が定義されているものの、過去にJavaScriptのコードを書いた方であればすぐに習得できると思います。
ここで「JavaScript？」「関数？」と思っている人も心配ありません。
本記事では入門編①に続き、プログラミングをしたことがない人にとっても、わかりやすいようにこのGAS≒JavaScriptが学べる様に解説しています。
入門編①では、「定数・変数」そして「条件分岐・繰り返し」について学びましたが、今回はJavaScriptでよく使われる「オブジェクト」と「配列」についてGASを使って学んでいきます。
これからJavaScriptを理解していくための重要な基礎となる範囲ですので、しっかり何度も読み返す事で理解を深め、学習を進めていきましょう！
JavaScriptのオブジェクトについて
JavaScriptにおけるオブジェクトとは、一体何を指しているのでしょうか？
オブジェクトはデータ型の一種であり、あるデータをプロパティ名（キー）と値のペアで管理したものになります。
| プロパティ名（キー） | 値 |
|---|---|
| name | 太郎 |
| age | 20 |
| sex | 男 |
上記のデータをオブジェクトで表す場合、以下の様なコードになります。
let user = {
name: "太郎",
age: 20,
sex: "男"
}この「プロパティ名」と「値」のペアのことを「プロパティ」と呼びます。このオブジェクトデータの場合、プロパティは3つあることになります。
関連した様々な情報（プロパティ）をひとまとめに管理したのが「オブジェクト」と言っても差し支えないでしょう。
オブジェクトにおけるデータの取り出し方
上記のオブジェクトデータuserから、年齢の情報だけを取りたい場合、以下の様なコードになります。
function myObject() {
let user = {
name: "太郎",
age: 20,
sex: "男"
}
// ageを取り出す
console.log(user.age);
}GASで実行すると、ageの値である「20」が出力されている事が確認できるかと思います。
このように、ドット記法（ドットで繋げる書き方）でプロパティ名を指定する事で、そのプロパティの値にアクセスする事ができます。また、[]を使ってアクセスすることも可能です。その場合は、[]内にプロパティ名を記述して、
user['name']
// または user[name] でも可能
>> 20と記述して下さい。
メソッドを定義する
オブジェクトの中には関数を定義する事もできます。その関数のことを「メソッド」と呼びますが、メソッドを作る事でそのオブジェクトに関連する処理をまとめる事ができます。
以下のコードを実行して動作を確かめてみましょう。
function myObject() {
let user = {
name: "太郎",
age: 20,
sex: "男",
getAge: function() {
return this.age;
}
}
// getAgeを呼び出す
console.log(user.getAge());
}メソッドにアクセスするときも同様にドット記法でアクセスする事ができます。また、メソッドは関数なので、メソッド名の後に()を付けるのを忘れない様にしましょう。
上記のコードでも同様に、「20」と表示されているのがわかるかと思います。
メソッド内で他のプロパティにアクセスする際は、同様のオブジェクト内に定義されているためthisを使ってアクセスします。ここは少し特殊な記法なので、そういうものなんだと覚えておいて下さい。（基本的に同じスコープ内にあるデータにアクセスしたい時に、thisを使うケースがあります）
これで、オブジェクトがどういうものなのか少し理解できたかと思います。
オブジェクトの作り方
オブジェクトの作り方は2種類あり、1つが「オブジェクトリテラル」を使った記述方法、もう1つが「Objectオブジェクト」を使った記述方法になります。
オブジェクトリテラルを使った記述方法
オブジェクトリテラルを使った記述方法でオブジェクトを作る場合、以下の様なコードを書きます。
{
プロパティ名1:値1,
プロパティ名2:値2,
プロパティ名3:値3, ...
}空のオブジェクトを作りたい場合、以下の様になります
let person = {};オブジェクトのプロパティの値には、数値や文字列などの任意のデータ型の値を設定できます。さらに、以下の様に、それぞれのプロパティに異なるデータ型の値を格納する事ができます。
let person = {
name: "Taro",
"年齢": 20*1, // 式でも可能
hello: function() {
console.log("Hello");
}
}プロパティ名は文字列またはSymbolオブジェクトを使って記述する必要があります。ただし、文字列が変数名などと同じルール則った値であれば、クォーテーションを省略して記述する事が可能です。（難しいことを考えず、文字列と変数の様な形であればOKです。）
プロパティ名の一文字目が数字で始まっていたり、空白がある場合はエラーが出る事があります。オブジェクトを生成した際にエラーが出る場合はその辺りを注意して作成しましょう。
Objectオブジェクトを使った記述方法
Objectオブジェクトは、JavaScriptで用意されている組み込みオブジェクトです。
Objectオブジェクトを使った、オブジェクト作成方法は以下になります。
new Object();空のオブジェクトの作成方法は以下になります。
let person = new Object();
console.log(person);
>> {}Objectオブジェクトで初期値を設定することはできず、空のオブジェクトを作成した後に、プロパティを追加していくことになります。
プロパティ値の変更とプロパティの追加・削除
プロパティの基礎がわかったところで、それらに変更を加えたりする方法を見ていきましょう。
プロパティ値の変更
では、オブジェクトのプロパティ値を変更するにはどうしたらよいでしょうか。
方法は簡単で、プロパティ値にアクセスすることで変数の様に後からその値を変更する事が可能です。
以下のコードをGAS上で実行してみましょう。
function myObject() {
let person = {
name: "Taro",
"年齢": 20*1, // 式でも可能
hello: function() {
console.log("Hello");
}
}
person.name = "太郎";
console.log(person);
}
name の値「太郎」に変更できている事がわかります。このように、ドット記法でプロパティ値にアクセスする事ができるため、変数と同様に変更も容易に可能です。
プロパティの追加
オブジェクトに新しいプロパティを追加する方法も簡単です。新しいプロパティ名を自分で定義して、そこに値を代入する事でプロパティを追加する事ができます。
以下のコードを実行して、動作を確認してみましょう。
function myObject() {
let person = {
name: "Taro",
"年齢": 20*1, // 式でも可能
hello: function() {
console.log("Hello");
}
}
person.weight = 55;
console.log(person);
}
実行ログを見ると、「weight: 55」が追加されているのがわかるかと思います。
この様に、新規のプロパティ名を任意に指定して、そこに値を入れるだけで新たなプロパティを追加する事ができるのです。
プロパティの削除
オブジェクトからプロパティを削除したい場合、delete演算子を使って削除する事が可能です。
function myObject() {
let person = {
name: "Taro",
"年齢": 20*1, // 式でも可能
hello: function() {
console.log("Hello");
}
}
delete person.hello;
console.log(person);
}
上記のコードを実行すると、「{name: ‘Taro’, ‘年齢’: 20}」となっており、関数プロパティが削除されている事がわかります。このようにして、プロパティを削除したい場合はdelete演算子を用いて削除します。
JavaScriptの配列とは
JavaScriptにおける「配列」とは、複数の値を一括で格納・管理する箱のことです。
例えば、クラスのテストの点数を一括で管理したいときなど、配列を使って管理します。
testResult = [15, 100, 34, 55, 60] // 配列は[]で表現される変数には1つの箱に1つの値しか格納できないため、意味を持った一括で管理したい複数の値については配列を使うことでそれを解決する事ができます。
配列は[]と,で区切った値を記述する事で表現できます。また、配列内の値にはそれぞれインデックス番号というものが割り振られており、0から順番にその番号が振られています。そのため、2番目の「100」という数字にアクセスしたい場合、以下の様なコードになります。
console.log(testResult[1]); // 0→1 と1が2番目の数字のため、1と記述
>> 100では、上記のtestResult配列から、平均点を算出するプログラムを実行してみましょう。
function hairetsuCheck() {
testResult = [15, 100, 34, 55, 60] // 配列は[]で表現される
testResultSum = testResult[0] + testResult[1] + testResult[2] + testResult[3] + testResult[4];
testResultAve = testResultSum / 5;
console.log(testResultAve);
}
「52.8」と実行結果が出てきたら平均点をうまく算出できていることになります。
上記のコードをもっと綺麗に書くならば、以下の様になります。入門編で学んだ①の繰り返しを使って書いてみましょう。
function hairetsuCheck() {
testResult = [15, 100, 34, 55, 60] // 配列は[]で表現される
testResultSum = 0; //合計値を初期化
for (let i = 0; i < testResult.length; i++) {
testResultSum += testResult[i];
console.log(testResultSum);
}
console.log(testResultSum / testResult.length);
}testResult.length で配列の長さを求める事ができます。今回の場合だと「5」になります。これを用いて繰り返し処理を配列の長さ分回し、合計値を求めた上で最終的にそれを再度配列の長さで割ることで、平均値を算出しています。
こちらも実行結果が「52.8」と出てきた事がわかると思います。確認してみて下さい。
このように、配列を使うことでコードが煩雑になりにくくなる点はメリットと言えるでしょう。
配列の作り方
配列の作り方には大きく分けて2種類あり、「配列リテラル」を使う方法と、「Arrayオブジェクト」を使う方法があります。
配列リテラルを使って配列を作る方法
配列リテラルを使って配列を作る方法は簡単で、上の例でも示した通り、[]を用いて作成します。
let hairetsu = [1, 2, 3, 4];配列の値には異なるデータ型を組み合わせて格納することもできるため、以下の様なコードも実行可能です。
let num = 2;
let hairetsu = [1, "test", num, 3];配列は空欄の値があっても許されます。
let hairetsu = [1, , 2, 3];
let hairetsu2 = [1, empty, 2, 3]; // 空欄はemptyでも表す事ができるArrayオブジェクトを使って配列を作る方法
Arrayオブジェクトは、JavaScriptで用意されている組み込みオブジェクトです。このArrayオブジェクトを使って配列を作る事ができます。
let hairetsu = new Array(1, 2, 3, 4);
// let hairetsu = [1, 2, 3, 4]と同じただし、数値を1つだけ入れる場合は、要注意です。この場合その要素数を持った配列が出来上がってしまいます。
let hairetsu = new Array(5);
console.log(hairetsu);
>> [empty, empty, empty, empty, empty]Arrayオブジェクトを使用する際は、以上の点に気をつけて使ってみて下さい。
配列に要素を追加したい場合
配列に要素を追加するには、いくつかの方法があります。1つずつ見ていきましょう。
インデックス指定で要素を追加
1つ目は、インデックス指定で要素を追加する方法になります。この方法で、指定のインデックスの位置に配列の要素を追加することができます
function hairetsuAdd() {
let classMate = ['Jo', 'Bob', 'Alisa'];
classMate[3] = 'Jack';
console.log(classMate);
}
['Jo', 'Bob', 'Alisa', 'Jack']と、要素の4番目（インデックス番号3番目）にJackが追加されているのがわかると思います。
ちなみに、既に値が入っているインデックス番号を指定すると、その部分のデータが入れ替わるので注意してください。
function hairetsuAdd() {
let classMate = ['Jo', 'Bob', 'Alisa'];
classMate[2] = 'Jack';
console.log(classMate);
}
>> ['Jo', 'Bob', 'Jack'] // index番号「2」のAlisa がリプレイスされるpushメソッドを使って配列の最後に要素を追加
配列はメソッドを持っており、pushというメソッドを使えば配列の最後に要素を追加する事ができます。コードは以下の様になります。
function hairetsuAdd() {
let classMate = ['Jo', 'Bob', 'Alisa'];
classMate.push('Jack'); // JackをclassMateの最後に追加
console.log(classMate);
}
['Jo', 'Bob', 'Alisa', 'Jack']と、最後にJackが入った事が確認できます。
unshiftメソッドを使って配列の先頭に要素を追加
配列はメソッドを持っており、unshiftというメソッドを使えば配列の最後に要素を追加する事ができます。コードは以下の様になります。
function hairetsuAdd() {
let classMate = ['Jo', 'Bob', 'Alisa'];
classMate.unshift('Jack'); // JackをclassMateの最後に追加
console.log(classMate);
}
['Jack', 'Jo', 'Bob', 'Alisa']と、最初にJackが入った事が確認できます。
配列から要素を削除したい場合
配列から要素を削除したい場合も、いくつか方法があります。こちらも1つずつ丁寧に見ていきましょう。
popメソッドを使って配列最後の要素を削除
配列はメソッドを持っており、popというメソッドを使えば配列の最後の要素を削除する事ができます。コードは以下の様になります。
function hairetsuDelete() {
let classMate = ['Jo', 'Bob', 'Alisa'];
classMate.pop(); // classMateの最後の要素を削除（この場合'Alisa'）
console.log(classMate);
}
['Jo', 'Bob']と、最後のAliceが削除された事が確認できます。
shiftメソッドを使って配列最初の要素を削除
配列はメソッドを持っており、shiftというメソッドを使えば配列の最初の要素を削除する事ができます。コードは以下の様になります。
function hairetsuDelete() {
let classMate = ['Jo', 'Bob', 'Alisa'];
classMate.shift(); // classMateの最初の要素を削除（この場合'Jo'）
console.log(classMate);
}
['Bob', 'Alisa']と、最初のJoが削除された事が確認できます。
lengthを使う方法、空の配列を使う方法について
配列の要素を削除する特殊な方法として、lengthと空の配列を使う方法がありますので一応紹介しておきます。
lengthで配列の長さを代入することで、その長さまでの配列に変化します。
function hairetsuDelete() {
let classMate = ['Jo', 'Bob', 'Alisa'];
classMate.length = 1; // classMateの1番目より後の要素が削除される
console.log(classMate);
}
>> [ 'Jo' ]また、空の配列を元の配列に代入することで、全ての要素を削除する事ができます。
function hairetsuDelete() {
let classMate = ['Jo', 'Bob', 'Alisa'];
classMate = []
console.log(classMate);
}
>> []まとめ
今回はGASで学ぶJavaScript入門という事で、オブジェクトと配列について学んでいきましたがいかがだったでしょうか？
オブジェクトと配列という概念は、最初は難しいと感じるかもしれませんが、とても大事な基礎になるので是非何度も読み返して理解していただければと思います。
変数・定数・条件分岐・繰り返しについて理解ができていない人は是非こちらも合わせて読んでみてください。
コメント