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

gas

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

以前に「GAS」とは何か、どのようなことができるかはこちらの記事で紹介させていただきました。

gas【GAS】Google Apps Scriptとは?何ができる?学ぶメリットは?

 

GASで「効率化・自動化を進めたい」「webアプリを作りたい」などGASを学んでいきたいと思ってはいるものの、まったくのプログラミング初心者なので何をしたら良いか、どう勉強したら良いかわからないといった方もいると思います。

GASは「JavaScript」ベースの言語であることは以前の記事でもお伝えしました。なので、「JavaScript」の文法がわからなければ何も処理ができません。

しかし、GASは「Javascript」の一部しか取り扱っていないため、必要最低限の「JavaScript」を理解できれば処理ができてしまうわけです。なので、今回よりGASのための「JavaScript」シリーズを複数回に分けて説明していきたいと思います。

 

GASのための「JavaScript」シリーズ第1弾は、「JavaScript」の基本的な「書き方」や「変数」についてわかりやすく説明していきますので最後までよろしくお願い致します。

 

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

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

 

「JavaScript」の書き方を理解しよう

これから学ぶことは全てGASの開発環境である「スクリプトエディタ」で実行が可能なものなので、実際に開いて実行してみましょう。

スクリプトエディタの開き方やログの確認の仕方については一度こちらを確認しておいていただければと思います。

gas【GAS】開発環境(スクリプトエディタ)を開いて初めてのプログラムを実行してみよう

 

JavaScriptの書き方

では、JavaScriptを書いていきます。

まず、「Logger.log()」とありますが、こちらは( ) 内に入力された値をログに表示する」ために使うものでしたね。

復習ですが、「ログ」は、GASの開発中に変数やプロパティの値などを出力して、スクリプトの動作が正しいかどうか確認するために使用しました。よく使うものなのでショートカットキーを覚えておきましょう。

◆ 「ログ画面」ショートカットキー
【Mac】 ⌘(コマンド)+ Enter
【Windows】 ctrl + Enter

 

 

実際に「文字列」を出力する場合は、シングルクォーテーション(')」ダブルクォーテーション(")」でその文字列を囲みます。下記の通りどちらも「hello zak-papa」と出力されましたね。

基本文法

 

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

 

 

 

 

また、今回のようにLogger.log()で始まる1つの文章(「ステートメント」といいます)の終わりには、「;(セミコロン)」をつけます。
セミコロンはなくても問題なく動作する場合もありますが、思わぬ不具合が生じる可能性があるので忘れずにつけるようにしましょう。

セミコロン

 

 

上記のように波括弧 { } の中に複数の「ステートメント」を記載していきますが、その範囲を「ブロック」といいます。読みやすいように「改行」と「インデント(半角スペース2個分)」をするのが一般的です。tabキーを1回押すと半角スペース2個分のインデントができます。

ブロック、インデント、改行

 

 

関数

関数とは、「function」から始まる「一連の処理」をひとまとめにしたもので、自由に名前をつけて実行することができます。

最初は必ず「myFunction」という関数名になっており、そのままでも実行できますが実行する処理に応じて名前を変えるのが良いでしょう。(自動でメールを送る関数であれば「sendMail」など。)

function  関数名()  {

 処理

}

 

 

そして、プログラムはその「関数ごとに実行」することになります。

今回は練習ということで「myPractice」という関数名に変更して実行していきます。関数についての詳細は別の機会に説明したいと思いますので、今は上記の内容だけ覚えていれば大丈夫です。

関数名

 

 

 

コメント

コメントは「メモ」のようなもので自由に記載することができます。コメントを書いておくことで、「自分」が書いたコードをあとで読み返したときや「他人」が書いたコードを読む際の助けになります。わかりやすいように記載しましょう。

また、コメントはプログラムの実行には影響しません。

実際にコメントを書いてみましょう。
コメントの書き方には2通りあり、1つは「//」1行だけコメントにしたい場合に使用します。また、複数行にわたるコメントは「/* コメント */」のように記載します。

コメント

 

 

 

コメントが記載されても問題なくプログラムが実行されたかと思います。

コメントはよく使うものなので「ショートカットキー」が用意されています。

◆ 「コメント」ショートカットキー
【Mac】 control + /(スラッシュ)
【Windows】 ctrl + /(スラッシュ)

 

コメント化することを「コメントアウト」といい、コメントを解除することを「コメントイン」といいます。

上記のショートカットキーを利用する場合は「//」でコメント化され、カーソルがある位置や複数行を選択している状態でショートカットキーを押すことで簡単に1行でも複数行でもコメント化することができます。コメントの解除も同様です。

 

コメントアウト

 

 

「変数」を理解しよう

続いて「変数」をみていきましょう。

GASに限らずプログラミングでは「変数」というものが使われます。変数は、データ(値)の入れ物(箱)をイメージしましょう。

箱についている名前が「変数名」であり、箱(「name」「age」)の中に実際の値(「文字列(zak-papa)」や「数値(35)」など)を入れたり出したりして処理を行っていきます。

 

変数

 

 

ではなぜ「変数」を用いるのでしょうか。
変数の使い方や変数を使うメリット、注意点などを次から見ていきましょう。

 

 

変数の「宣言」と「代入」

まず、変数を使う場合は、「var」という特殊なキーワードを使って「宣言」をする必要があります。そして「=」の後に代入したい「値」を記載します。

プログラミングでは「=」は「等しい」ではなく、「右辺を左辺に代入するという意味になります。

var  変数名 = 値

 

 

実際に記述してみましょう。
「zak-papa」のように「文字列」の場合は「クォーテーション」でその文字を囲む必要があります。「35」は数値なので囲む必要はありません。このあたりは次回の「データ型」で説明します。

変数の書き方

 

変数

 

変数「let」について

変数は「var」というキーワードで宣言して使用するとお伝えしました。実はjavaScriptでは「let」というキーワードでも変数宣言ができます。むしろ「let」の方が新しく(ES2015)、JavaScriptでは積極的に使っているものです。

しかし、GASは少し古い仕様のjavaScriptがベースのため「let」を使用することができません。「let」以外にも「アロー関数」など使えないものがあるため普段からjavaScriptを扱っている方は少し注意が必要です。

 

 

変数の「出力」と「更新」

実際にコードを書いてログに出力してみましょう。代入した値がちゃんと出力されていますね。
変数を出力する際には「"name"」のように「クォーテーション」で囲まないようにしましょう。「文字列」として認識されてしまいます。

変数

 

 

 

では、同じ変数名に異なる値を入れた場合はどのようになるでしょうか。「age」という変数に「35」が代入されていましたが、「40」を続けて代入してみます。この場合は、値が上書き(更新)されてログに出力されます。

変数

 

 

 

もう1つ変数の更新について見てみましょう。「変数自身を更新」する場合です。

変数「age」に5を足したい場合は下記のように変数に5を足して再代入する形になります。こちらの書き方でも同じ40が出力されます。

var  変数名 = 変数名 + 5

 

変数

 

 

 

また、こちらは「短縮形」が用意されており、今回の場合は下記のように書くことでも同じ結果が得られます。

変数名 +=   5

 

変数

 

 

 

こちらは「足し算」だけでなく、「引き算」「掛け算」などでも同じように扱うことができます。「演算子」についてはシリーズ第2回の「データ型(数値型)」でも再度説明します。

演算子 説明
+= 左辺の値に右辺の値を加算(足し算)して代入
−= 左辺の値に右辺の値を減算(引き算)して代入
*= 左辺の値に右辺の値を乗算(掛け算)して代入
/= 左辺の値に右辺の値で除算(割り算)した値を代入
%= 左辺の値に右辺の値で除算した剰余(あまり)を代入

 

 

変数の「メリット」と「注意点」

変数を使う「メリット」は下記3点です。

変数を使う「メリット」
  1. 繰り返し使える
  2. 変更がしやすい
  3. 値が想像しやすい

 

例えば、「プログラミングを勉強しよう」という値を変数「study」に代入したとします。そうすると、「プログラミングを勉強しよう」という長い文章を使わなくても「study」と繰り返し使うだけで済んでしまいます。これが1つ目のメリットです。

変数

 

 

 

また、勉強する内容が今度は「英語」に変わった場合を考えてみましょう。この場合は変数「study」の中身(プログラミング)を変えるだけで、他の3つを変える必要がありません。これが2つ目のメリットです。

変数

 

最後のメリットは「変数名」からどのような値が入っているか想像しやすい点です。今回は「study」という変数名となっているため、「何か勉強するものが入っているんだな」と容易に想像ができます。「name」であれば「名前が入ってるんだな」と想像できます。

逆をいうと、変数名は何の値が入っているか想像しやすいものにしないと混乱します。例えば、変数名が「age」なのに「名前」が入っているといったことは避けるようにしましょう。

 

変数名を2単語以上にしたい場合は?

変数名は自由に決めることができますが、関数のところで取り上げた「myPractice」や「sendMail」のように「大文字」で区切るのが一般的となっています。このような書き方を「キャメルケース」といいます。(ラクダのコブのイメージ)

また、「my_practice」や「send_mail」のように「_(アンダーバー)」で区切る形を「スネークケース」といいます。GASでは、「MY_PRACTICE」や「SEND_MAIL」のように「大文字」で「定数名」に使うことがあります。

 

定数とは?

「定数」は、変数と同じように名前をつけて「データの箱」として使いますが、値を変更できないという特徴があります。「const」というキーワードで宣言して使用します。

その他の書き方は変数と変わりませんが、値を上書きされたくないような場合に用いると良いでしょう。GASでは「変数」が一般的に使われているので本記事でも変数の説明をメインにしています。

 

 

続いて、変数を用いる際の「注意点」を見ていきましょう。注意点は下記3点です。

変数を使う際の「注意点」
  1. 変数名に「予約語」は使えない
  2. 変数名は「数字」から始められない
  3. 変数名に「日本語」や「アルファベット」を極力使わない

 

まず1つ目の注意点ですが、変数名に「予約語」を使用することはできません。

予約語とは?

予約語とは、JavaScriptで特別な意味を持つキーワードのことです。これらは変数名や関数名などに使用することはできません。例えば、変数を宣言する際の「var」や条件分岐を行う際に使用する「if」などがあります。その他下記のような予約語があり、変数名と被るとエラーとなりますので被らない変数名にしましょう。

 

break case catch continue
debugger default delete do
else finally for function
if in instanceof new
return switch this throw
try typeof var void
while with    

【参考】MDN 予約語

 

 

2つ目の注意点は、「1name」などの数値から始まる変数名をつけることができません。その他にも「英数字」のみ、「$」のみ、「_」のみも使用できませんので注意しましょう。

 

3つ目の注意点は、エラーは出ませんが「名前」のように「日本語」を変数名に使用したり、「namae」のように「アルファベット」を使用することは避け、一般的な記法である「キャメルケース(「myPractice」「sendMail」 など)」で変数名を統一するようにしましょう。

 

 

 終わりに

以上、「JavaScript」の書き方と変数についてお伝えしました。

まずは基本的な書き方をしっかり理解しましょう。

そして、「変数」については今後も当たり前のように出てくるものなので、理解が曖昧な場合はもう一度復習しておきましょう。

 

さて、次回はJavaScriptの「データ型」についてお伝えします。

名前などの「文字列型」や足し算や引き算をする「数値型」などいくつか種類があり、その「データ型」ごとに実行できる処理が異なります。1つずつ順に見ていきましょう。

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

 

 

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