【GAS】JavaScript基本② 〜「データ型」について理解しよう

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

前回はJavaScriptの「書き方」や「変数」についてお伝えしました。

【GAS】JavaScript基本① 〜基本的な「書き方」や「変数」を理解しよう

GASのための「JavaScript」シリーズ第2弾は、「データ型」です。

「JavaScript」では、「文字列型」や「数字型」などいくつか「データ型」というものがあります。扱うデータの種類によって実行できる処理が異なってきますので、今回はどのような「データ型」があるのか順に見ていきましょう。

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

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

「データ型」を理解しよう

では、「データ型」について見ていきましょう。

例えば、足し算や引き算をしたい場合には「数値型」でなければできませんし、文字を扱いたい場合は「文字列型」にする必要があります。このように扱うデータの種類によって実行できる処理が異なってきますので、それぞれの「データ型」については理解しておきましょう。

次の表はこのあと説明する「データ型」の概要です。まずはさらっと目を通しておきましょう。

データ型	概要	例
① 文字列型（String）	文字列（名前など）	zak-papa、よろしくなど
② 数値型（Number）	整数や小数など	100, 100.25 など
③ 真偽型（Boolean）	「真（true）」 or 「偽（false）」	true, false
④ 配列型（Array）	複数の値を扱う（インデックスをキーとする）	[ "zak-papa", 35, "よろしく" ] （角括弧）
⑤ オブジェクト型（Object）	複数の値を扱う（プロパティをキーとする）	{ "zak-papa", 35, "よろしく" } （波括弧）
⑥ null, undefined	値がない、未定義である	null, undefined

① 文字列型（String）

「文字列型」は、第1回の記事でも何度か出てきていましたね。「シングルクォーテーション(')」か「ダブルクォーテーション(")」で囲んでいました。

では、「I'm zak-papa」を「シングルクォーテーション」で囲むとどうなるでしょうか。この場合は、保存する時点で下図のようにエラーとなってしまいます。

時間がないときや動作確認がしたい時などは、「コピペ用コード」をご活用ください。
ただ、実際にコードを書いてみると頭にも残りやすくなるので、初心者のうちはぜひご自身で書いてみることをオススメします。

コピペ用コードはこちら

function myPractice() {　   

  // シングルクォーテーションで囲むとエラーになる
  Logger.log('I'm zak-papa');  
  
}

function myPractice() {　

// シングルクォーテーションで囲むとエラーになる

Logger.log('I'm zak-papa');

}

文字列内で「シングルクォーテーション」か「ダブルクォーテーション」を使っている場合は、使われていない方で囲むようにすることで正常に処理が実行されます。

コピペ用コードはこちら

function myPractice() {　   

  // ダブルクォーテーションで囲む
  Logger.log("I'm zak-papa");  
  
}

function myPractice() {　

// ダブルクォーテーションで囲む

Logger.log("I'm zak-papa");

}

エスケープシーケンス

実は「シングルクォーテーション」のままでも正常に処理される他の方法があります。

「\（バックスラッシュ）」を「シングルクォーテーション」または「ダブルクォーテーション」の前につけることで正常に処理を実行することができます。

コピペ用コードはこちら

function myPractice() {　   

  // バックスラッシュで区切る
  Logger.log('I\'m zak-papa');  
  
}

function myPractice() {　

// バックスラッシュで区切る

Logger.log('I\'m zak-papa');

}

このような記法を「エスケープシーケンス」といいます。
他にも「改行」や「タブ」を表す「\n」や「\t」も使う機会があると思うので覚えておきましょう。

コピペ用コードはこちら

function myPractice() {　   
   
  Logger.log('I\'m zak-papa');
  Logger.log("I'm zak-\npapa");  // 改行
  Logger.log("I'm zak-\tpapa");  // タブ
  
}

function myPractice() {　

Logger.log('I\'m zak-papa');

Logger.log("I'm zak-\npapa"); // 改行

Logger.log("I'm zak-\tpapa"); // タブ

}

「\」の場所がわからない方は下記で試してみてください。【Windows】の場合はうまく表示されない場合もあるようなので、下記のサイトを参考に表示できるか確認してみてください。

◆ 「バックスラッシュ」の場所
【Mac】 option ＋ ¥　　　

【Windows】「ろ」キー（半角） or 「ろ」キー（全角）→「F10」キー

参考 WindowsPCの半角バックスラッシュ()入力方法！入力できない時は？

文字列の連結

文字列同士を繋げて表示したい場合もあるかと思います。その場合は「＋（プラス）」で繋ぎます。

コピペ用コードはこちら

function myPractice() {　   

  // 文字列連結
  Logger.log("I'm" + " " + "zak-papa");
  
}

function myPractice() {　

// 文字列連結

Logger.log("I'm" + " " + "zak-papa");

}

② 数値型（Number）

続いて「数値型」です。こちらもよく使うデータの種類になります。

「数値型」は「クォーテーション」などで囲む必要はありません。「整数」も「小数」も扱うことができます。

「整数」の場合もログ上では「100.0」のように小数点が表示される仕様になっており、処理上は問題ないので気にしなくて大丈夫です。

コピペ用コードはこちら

function myPractice() {　   

  // 数値の出力
  Logger.log(100);
  Logger.log(100.25);
  
}

function myPractice() {　

// 数値の出力

Logger.log(100);

Logger.log(100.25);

}

算術演算子

では、加減乗除の計算をしてみましょう。下記の記号（半角）を用いて計算します。このような記号を「算術演算子」といいます。

演算子	説明
＋	加算（足し算）
−	減算（引き算）
*	乗算（掛け算）
/	除算（割り算）
%	剰余（あまり）

実際の使用例はこちら。
割り算の結果がおかしい表記になっていますが、これはコンピュータが内部で扱っている二進数が小数をうまく表現できないために起こる現象のようで、小数が近似値になることは多いようです。今のところはあまり気にしないで大丈夫でしょう。

コピペ用コードはこちら

function myPractice() {　   
   
  Logger.log(100 + 3); // 足し算
  Logger.log(100 - 3); // 引き算
  Logger.log(100 * 3); // 掛け算
  Logger.log(100 / 3); // 割り算
  Logger.log(100 % 3); // 余り
  
}

function myPractice() {　

Logger.log(100 + 3); // 足し算

Logger.log(100 - 3); // 引き算

Logger.log(100 * 3); // 掛け算

Logger.log(100 / 3); // 割り算

Logger.log(100 % 3); // 余り

}

数字型の加算と文字列型の連結

上記の通り、数値型同士を「＋（プラス）」で繋いだときは「加算」が実行されました。
では、片方を「文字列（クォーテーションで囲む）」にするとどうなるでしょうか。

この場合、もう片方も「文字列」と認識されてしまい、結果的に「100」と「3」の文字列連結である「1003」となります。

このようにデータ型が異なると処理も異なることを理解しておきましょう。

コピペ用コードはこちら

function myPractice() {　   
  
  Logger.log(100 + 3);   // 足し算
  Logger.log(100 + "3"); // 文字列連結
  
}

function myPractice() {　

Logger.log(100 + 3); // 足し算

Logger.log(100 + "3"); // 文字列連結

}

③ 真偽型（Boolean）

続いて「真偽型」です。論理型やBoolean（ブーリアン）型とも言われます。

こちらは「true（真）」or「false（偽）」や「正しい（真）」or 「正しくない（偽）」などの2択のことですね。

「100 < 200」は正しい（true）ですし、「zak-papaは女性である」は正しくない（false）ですね。

GASに限らずプログラムは「条件」によって処理を分ける（条件分岐）ことが多く、この「真偽値」によって処理を分けることになります。「条件分岐（if文、switch文）」については第3回で詳しく説明します。

④ 配列型（Array）

続いて「配列型」です。

「配列」と次に説明する「オブジェクト」について今回は「概要のみ」の説明となり、第5回で詳しく説明しますので現段階ではイメージだけ掴んでおきましょう。

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

コピペ用コードはこちら

function myArray() {　   
  
  // １つずつ変数に代入
  var person1 = "zak-papa";
  var person2 =  35;
  var person3 = "よろしく";
  
  Logger.log(person1); 
  Logger.log(person2); 
  Logger.log(person3); 
  
}

function myArray() {　

// １つずつ変数に代入

var person1 = "zak-papa";

var person2 = 35;

var person3 = "よろしく";

Logger.log(person1);

Logger.log(person2);

Logger.log(person3);

}

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

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

コピペ用コードはこちら

function myArray() {　   
  
  // 配列を変数に代入
  var persons = ["zak-papa", 35, "よろしく"]
  
  Logger.log(persons); 
  
}

function myArray() {　

// 配列を変数に代入

var persons = ["zak-papa", 35, "よろしく"]

Logger.log(persons);

}

上記で見た通り、配列は「[ ]（角括弧）」と「,（カンマ）」を使用して記述します。

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

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

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

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

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

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

なので、GASではこの配列の扱いが非常に大事になってきます。詳しくは第5回で説明します。

⑤ オブジェクト型（Object）

続いて「オブジェクト型」です。こちらも、第5回で詳しく説明しますので現段階ではイメージだけ掴んでおきましょう。

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

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

オブジェクトは「{ }（波括弧）」と「,（カンマ）」を使用して記述します。

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

{ プロパティ（キー）① : 値① , プロパティ（キー）② : 値② }

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

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

変数に「代入」する場合は、配列と同じように変数名を「複数形」にして記述するのが一般的です。
実際にログに出力すると、記述した順番通りになっていないことがわかると思います。オブジェクトは順番を保持していないのでログ出力の際は必ずしも記述した順番にはならないということも覚えておきましょう。

コピペ用コードはこちら

function myObject() {　   
  
  // オブジェクトを変数に代入
  var persons = {
    name: "zak-papa",
    age :35, 
    greeting: "よろしく"
  };
  
  Logger.log(persons); 
  
}

function myObject() {　

// オブジェクトを変数に代入

var persons = {

name: "zak-papa",

age :35,

greeting: "よろしく"

};

Logger.log(persons);

}

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

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

現時点ではなんとなく分かった感じで大丈夫です。第5回で詳しく説明します。
まずは、両者とも「複数」の値を扱うものであるという認識を持っておけば良いでしょう。

⑥ null, undefined

最後に「null」と「undefined」についてですが、「null」は「値がない」ことを表し、「undefined」は「未定義である」状態を表します。

例えば、変数を宣言して値を代入していない場合は「undefined」になります。

どちらも「ない」という状態を表しており、現段階では「こういうものもあるんだな」くらいに頭の片隅に置いておけば良いと思います。

コピペ用コードはこちら

function myPractice() {　   
  
  // 変数の宣言のみ
  var person;
  Logger.log(person); 
  
}

function myPractice() {　

// 変数の宣言のみ

var person;

Logger.log(person);

}

終わりに

以上、「JavaScript」の「データ型」についてお伝えしました。

「配列」と「オブジェクト」は少し難しかったですよね。
本シリーズを順に進めていけば「配列」や「オブジェクト」などもしっかりと理解できるようになります。焦らず順に理解を深めていきましょう。

次回は条件によって処理を振り分けることができる「条件分岐」についてお伝えします。

最後まで読んでいただきありがとうございました！