GASは、日々の業務効率化や、仕事の自動化など多岐にわたる使い方ができる、Googleが提供しているプラットフォームです。
GASを使えば、環境構築の作業をすることなく、すぐに・手軽にプログラムを書けますし、何よりGoogleアプリとの連携や、その他のアプリケーションとの連携も手軽に行うことができます。Googleカレンダー・スプレッドシートなど、自動化や連携を行うことで日々の仕事の効率化が期待されます。
GASで書くコードはほとんど「JavaScript」であり、一部独自の関数が定義されているものの、過去にJavaScriptのコードを書いた方であればすぐに習得できると思います。
ここで「JavaScript？」「関数？」と思っている人も心配ありません。
本記事ではプログラミングをしたことがない人にとっても、わかりやすいようにこのGAS≒JavaScriptが学べる様に解説しています。
今回は、GASを用いて、プログラミにング必要な知識を一つずつ解説していきます。
これさえ読めば「プログラミング経験者」になれると思いますので、是非最後まで一緒に手を動かしながら読み切っていただければと思います。
JavaScriptとは？
JavaScriptとは、ブラウザでいつも見るようなWebページに最適化されたプログラミング言語です。この言語を使うことでWebページに非常に複雑な機能をつけることができます。
例えば、文字を動かしたり、背景をカーソルに合わせて変化させたり、3DオブジェクトをWebページに埋め込んだり、他のサービスから情報を取得してきたり、、、とにかくWebページに様々な機能を持たせることができるのが特徴です。
よくWebページはHTML/CSSで書かれていると言われますが、近年ではJavaScriptを使っていないページを探す方が難しく、ほぼ全てのWebページにこの技術が使われています。
そのため、JavaScriptを習得すれば、インターネット上に様々な機能を持ったWebページ（＝Webアプリケーション）を開発し、世界に公開することができます。
GASでは、このJavaScriptを用いてコードを記述します。
JavaScriptは歴史も紐解くともっと面白く、そして、より詳しく説明する事もできますが、混乱するのでまずは「Webページで色々できるんだ〜」くらいの理解で進んでもらって大丈夫です。
JavaScriptとJavaの関係
「JavaとJavaScriptって違うの！？」と言う方がよくいます。はい、違います。
JavaとJavaScriptは全く別物で、共通点と言えばプログラミング言語であるくらいです。
JavaはSun Microsystems社が1996年に正式バージョンを発表したプログラミング言語です。Javaは仮想マシン（JVM）の上で動作をすることで、環境に依存しない言語であることが特徴です。そのため、どんなPC端末でもJVMさえあれば動作するアプリケーションを作ることができます。
対してJavaScriptとは、Netscape Communications社が開発したWebプログラミング言語です。Webベースで動作するため、SafariやChromeといったブラウザと、テキストエディタさえあれば動作させることが可能です。
アプリケーションを動作させるために、Javaはプログラムを一度PCに理解させるためにコードを一括翻訳する「コンパイル」と言う処理が必要ですが、JavaScriptではコンパイルは必要ありません。そのような観点でも、大きな違いがあるプログラミング言語なのです。
名前が似ていてややこしいですが、ここで区別し、覚えておきましょう！
ECMAScriptとは？
JavaScriptを学んでいるとECMAScriptという単語を耳にすることがあると思います。これは言語のことではなく、JavaScriptの「仕様」を定めているものになります。
昔々、JavaScript の標準化が行われ、基本となる仕様が ECMAScript という名前で定められました。ECMAScriptは定期的に改定されており、それが基礎となって、追加でブラウザの関係の機能を追加した言語がJavaScriptというわけです。
そのため、JavaScript自体にバージョンはなく、基本的にECMAScriptベースでバージョンが区別されます。
ブラウザ毎に、ECMAScript のどのバージョンに対応しているのかが異なります。つまり特定のバージョンでは動作しないコードもあるということです。
あまり意識することは初めは無いかもしれませんが、学習が進むにつれて高度なプログラミングを行うタイミングで、ECMAScriptとまた再会するかもしれません。頭の片隅に入れておいて頂ければと思います。
JavaScriptチュートリアル（定数・変数・条件分岐・繰り返し）
JavaScriptについて少し理解が深まった所で、早速使ってみましょう！
手を動かして、実際にコードを書いてみることでプログラミングがもっと上達していきます。
是非読み進めながら同時にコードを書くことをお勧めします。
まずは左上の「新規」から「その他」＞「Google App Script」を任意のフォルダで開きましょう。
このような画面が出たら「スクリプトを作成」をクリックしてください。
上記のようなエディタが出現したら、コードを書く準備ができています！めちゃめちゃ簡単ですね。
この様なスクリプトファイルの作成方法を「スタンドアロン型」と言います。
他のプログラミング言語であったり、プラットフォームを使うとこんな簡単に環境構築はできないです。
GASやJavaScriptは非常に便利なツールなので、これからプログラミングを学ぶ人にとってもピッタリだと思います。
それでは次の項目に進みましょう。
まずはHello, Worldしてみよう
まずはプログラミング学習定番の「Hello, World」をやってみましょう！
プログラムを実行した時に、「Hello, World」と表示がされるようにプログラムを記述していきます。
今、エディタにこのようなコードが書かれていると思います。これは一体何でしょうか？
function myFunction() {
// この中にプログラムを記述する
}後々学習していくものになりますが、これは「関数」と呼ばれるものです。関数には関数の前に function という修飾子が付きます。（名前の前にfunctionを記述することでそれが関数になる）
関数とは、与えられた値を元に、定められた（書いたプログラムの）独自の処理を実行し、その結果を返す命令の事です。最初は理解できなくて大丈夫です。この関数の中に、実行したい処理を記述します。以下のように追記してみて下さい。
function myFunction() {
console.log("Hello, World"); // Hello, World という文字列を表示させる
}コードが書けたら、「⌘＋S」もしくは「プロジェクトを保存」ボタンを押してコードを保存して下さい。
そうすると、「実行」ボタンが押せるようになっていると思います。では、押してみましょう。
実行ボタンを押すと、書いたプログラムが実行されます。実行の結果は、実行ログに記載されます。
上記のように、「Hello, World」と表示されたのがおわかりでしょうか。これで「文字列の表示」を実行することができました！プログラミングの一歩を踏み出した感じがしますね！
次項から、実際にJavaScriptの文法について学んでいきます。
定数と変数
定数と変数について学んでいきましょう。「定数とは？」「変数とは？」の前に、まずはJavaScriptで「演算」ができることを見ておきましょう。
演算とは、学生の時に学んだ「足し算」「引き算」「掛け算」「割り算」などの計算のことです。以下のコードを書き、実行してみて下さい。どのような結果になるでしょうか。
function myFunction() {
console.log(1+1);
console.log(1-1);
console.log(2*1);
console.log(4/2);
}
上記のように、きちんと計算された結果が出てきていることがわかります。しかし、これだと結果だけが表示されて一体何を表しているのか分かりません。
表示用の関数であるconsole.log()は、文字列と組み合わせて演算結果も表示することができます。では、コードを次のように修正してみましょう。
function myFunction() {
console.log("1+1: ", 1+1);
console.log("1-1: ", 1-1);
console.log("2*1: ", 2*1);
console.log("4/2: ", 4/2);
}では、これで実行してみましょう。
これで、実行結果が何を表しているのかが分かりやすくなりました。
このように、プログラミングでは自分なりにわかりやすいように様々な要素を組み合わせて表示を行うことが大事です。自分が意味わからなくなっては勿体無いですからね。
さて、これでJavaScriptで演算ができることがわかりました。では、この演算結果を一時的に保存したい時、どのようにして保存しておけば良いのでしょうか？
そこで出てくるのが「定数」と「変数」になります。どちらにも共通することは、「結果を格納する箱」だということです。
定数とは
まずは 「定数（constant variable）」から解説します。
定数とは、「固定された値を入れるための箱」と覚えておけば良いでしょう。
一定の＝constantな値=variableを入れるため、定数と呼ばれています。定数を扱うには、次のように記述します。
const weight = 60;上記のプログラムは、weightという定数を「宣言」しています。constを前に付けることでweightは「定数」としてプログラム上解釈されます。そしてこのweightに60を代入することで、60という値をweightに保存することができます（定数の初期化）。
では、実際に保存されているか確認してみましょう。
function myFunction() {
const weight = 60;
console.log(weight);
}実行したらどうなるでしょうか。
「60」という値が表示された方はおめでとうございます。定数が正しく動作している証拠です。
このように、weightという定数を表示することで、その中身の値である「60」が表示されるのです。
変数とは
実は、変数も定数と同じで、「値を入れるための箱」であることに変わりは無いのですが、変数ではその値を後からでも変更できるということが特徴です。
え、定数は後から数字を変えることができないの？と思ったそこのあなた。そうです、定数は後から値を変えることが禁止されています。だから「定」数であり、変えられる箱が「変」数なのです。
実際に確認してみましょう。以下のコードを実行すると、エラーが出るはずです。
function myFunction() {
const weight = 60;
weight = 70; //定数の値を変更してみる
console.log(weight);
}
TypeError: Assignment to constant variable. とエラーが出てきたことがわかると思います。これは、定数なので後から変更できませんよ〜とプログラムが怒っているために表示されます。
では、変数にして同様のコードを書くとどうなるでしょうか。定数の宣言がconstであったのに対し、変数では、letを使います。
function myFunction() {
let weight = 60;
weight = 70; //定数の値を変更してみる
console.log(weight);
}
「70」と表示され、うまく実行されたかと思います。
この様に、変数の場合は箱の中の値を何度でも変更することができます。これを「再代入」と呼んだりします。
変数名も定数名も、自分の好きな文字列で定義することができます。
定数も変数も共通して言えることは、「わかりやすいように値にラベルを付ける」ということと、「値を入れる箱である」ということです。
空の変数だけを先に定義しておいて、後から値を入れたりするケースもあります。
定数と変数の違いはコードを書いていると体で覚えてくるので、最初はあまり理解できなくてもどんどん先へ進んでみてください。
条件分岐
さて、ここから少しプログラミングっぽくなってきます。条件分岐について学んでいきましょう。
条件分岐とは、文字の通り、ある条件の時に処理が分岐するという仕組みのことです。条件分岐にはいくつか書き方があり、それぞれについてこれから1つずつ見ていきましょう。
if文をマスターしよう
条件分岐の書き方の1つに「if文」があります。「if文」とは、ある特定の条件を指定し、その時に特定の処理を実行させる書き方になります。
百聞は一見にしかず。まずはコードを見てみましょう。
function myFunction() {
const weight = 100;
if (weight >= 90) {
console.log("平均体重を超えています");
}
}実行すると、平均体重を超えています と実行結果に出てきたと思います。しかし、weight = 50 とするとどうでしょうか。この時は実行結果には何も表示されません。
if文は、以下のように書きます。
if (条件式) {
条件式を満たした時に実行されるプログラムを書く
}そのため、条件式部分である weight >= 90 の部分が真である時（正しい時）、{}内のコードが実行される、といった流れになります。今回の例ではweightの値は100であったために条件式を満たし、console.log()が実行されたということです。
条件が満たされない場合は{}内のコードは実行されません。だから、weight = 50 とすると実行結果には何も表示されないのです。
if文の条件式でよく使われる主な比較演算子を記載しておきます。
| 比較演算子 | 例 | 意味 |
|---|---|---|
| == | A==B | AとBが等しい |
| != | A!=B | AとBが等しくない |
| < | A＜B | AがBより小さい |
| <= | A<=B | AがB以下 |
| > | A>B | AがBより大きい |
| >= | A>=B | AがB以上 |
{}内で囲われた部分のコードは「ブロック」と呼ばれており、そのブロック領域で宣言した変数や定数は、その領域外では使えないという制約もあります。
function myFunction() {
if (1 > 0) {
const x = 0;
}
console.log(x);
}
この時、ReferenceError: x is not defined とエラーを吐いてしまいます。これは、xがifブロック内に宣言されていることで、ifブロック外でxを使うことが許されていないからです。
少し難しいですが、ある領域内で宣言したもの（定数や変数、関数など）はその領域内でしか使えない、領域外では使えない、と覚えておきましょう。
else文とelse if文をマスターしよう
先ほどのコードを使って「else文」と「else if文」について見ていきましょう。
それぞれひとつずつ解説していきます。
else文の使い方
else文は、if文の()内に書いた条件式を満たさない時に実行したい処理がある時に使います。
if (条件式) {
条件を満たしたときに実行されるコード
} else {
条件を満たさないときに実行されるコード
}例えば、以下のようになります。
function myFunction() {
const weight = 60;
if (weight >= 90) {
console.log("平均体重を超えています");
} else {
console.log("おそらく平均体重の範囲内です");
}
}すると、実行結果は おそらく平均体重の範囲内です と表示されたかと思います。これは、weight = 60 が if文の条件式を満たさないために、else文のブロック内の処理が実行されたからです。
weight = 100 に戻すと、条件式を満たすために実行結果は 平均体重を超えています と表示されるはずです。やってみてください。
これが、else文の基本的な使い方になります。
else if文の使い方
else文の他に、else if文というものもあります。これは、条件を複数設定したい時に使う構文になります。
先ほどのelse文のみだと、「条件を満たした時」「条件を満たさなかった時」と2通りの分岐処理しか書くことができません。しかし、else if文を使えば、「条件①を満たした時」「条件②を満たした時」「条件③を満たした時」…「条件を満たさなかった時」といった風に、複数条件を設定することができます。
次の例を見てみましょう。
function myFunction() {
const weight = 60;
if (weight >= 90) {
console.log("平均体重を超えています"); //①weightが90以上の時実行される
} else if (weight >= 50){
console.log("平均体重の範囲内です"); //②weightが50以上90未満の時実行される
} else {
console.log("平均体重以下です"); //③weightが50未満の時実行される
}
}これを実行すると、weightは50以上90未満の範囲に入るので、真ん中のconsole.log()が実行されます。
このように、else if を複数連結させることで、複数条件での条件分岐が可能になります。
elseの後ろには条件式は記述しません。if文、else if文の条件式から自動的に条件を満たさない場合と判定されるためです。そこは覚えておきましょう。
if (条件式①) {
条件①を満たしたときに実行されるコード
} else if (条件式②) {
条件②を満たしたときに実行されるコード
} else if (条件式③) {
条件③を満たしたときに実行されるコード
} else {
上記すべての条件を満たさなかったときに実行されるコード
※記述なしでも動作します
}繰り返し
では、最後に繰り返しについて見ていきます。繰り返しはプログラミングの醍醐味で、何度もやる同じ作業を自動化するといった意味で非常によく使う構文になります。
こちらも複数の記述方法があるため、状況によって使い分けるなどして工夫していきましょう。
まずは、覚えるところからスタートですが、使っていくうちに何が適切か分かってくるようになります。
for文をマスターしよう！
JavaScriptで繰り返し処理を行う時に使う基本的な構文が、このfor文になります。
for文では、①初期化式、②繰り返し条件、③更新式、の3つを用いて記述していきます。
for (初期化式; 繰り返し条件式; 更新式) {
// ここに繰り返したい処理を記述します
}初期化式とは、繰り返し処理を始める前に最初だけ実行される式のことです。繰り返し条件は、その条件を満たす限りfor文のブロック内の処理が実行されます。ブロック内の処理が終わると、更新式が毎回最後に実行されます。
このような流れで、繰り返し処理が実行されるわけです。では、実際にコードを書いて実行してみましょう。
function myFunction() {
for (let i=0; i < 10; i++) {
console.log("Hello, World");
}
}実行すると、「Hello, World」と10回表示されましたでしょうか。うまく繰り返し処理が機能しているのを確認してください。
ここで、i++ とは i = i + 1 と同義です。プログラミングでは = があった場合必ず右側から実行されますので、もともと i に入ってた数字に1を足したものが、再度 i に代入されるという流れになります。
for文の()で宣言されている変数 i は繰り返し回数を数えるための変数になります。そのため、この i のことを「ループカウンタ」と言ったりします。
ループカウンタはfor文のブロック内で使うことができます。
function myFunction() {
for (let i=0; i < 10; i++) {
console.log("Hello, World: ", i);
}
}
このように、実際にiの中に入っている値を確認することも可能です。試してみて下さい。
ループカウンタのスコープ
ループカウンタはfor文のブロック内で利用できると言いましたが、ブロック外では使えないことに注意してください。
あくまでfor文で宣言された変数なので、for文の外側では使えない、と解釈しておくと良いでしょう。では実際に使えないことをコードで確認してみて下さい。どのように書くか分かりますか？
function myFunction() {
for (let i=0; i < 3; i++) {
console.log("Hello, World: ", i);
}
console.log(i); // for文のブロック外でループカウンタを呼び出す
}
ReferenceError: i is not defined とエラーが出てきたと思います。翻訳すると、「iは宣言されていません/定義されていません」とエラーメッセージが出ていますね。これは、ループカウンタのスコープ（使える範囲）がfor文内のみになってしまうからです。
そのため、このiをループで一定回数処理を回して、ループの外側でも使いたい場合、変数をfor文の外側のスコープで宣言しましょう。
function myFunction() {
let i = 0;
for (i ; i < 3; i++) {
console.log("Hello, World: ", i);
}
console.log(i); // for文のブロック外でループカウンタを呼び出す
}
するとどうでしょうか。最後の更新式が実行されて、3という数字が最後に出てきたと思います。
この例のiはmyFunction()関数内で宣言されているため、同じレイヤで呼び出すことができます。
スコープについての概念が少し理解できたのでは無いでしょうか。
breakとcontinue
繰り返し処理を途中で抜けたい！そんな時に使うのがbreak文になります。
break が呼び出されると、for文を抜け出します。
function myFunction() {
for (let i = 1 ; i < 10; i++) {
if (i == 5) {
break;
}
console.log(i); //1→2→3→4
}
console.log("break文を実行しました");
}それでは実際に実行して、break文でfor文を抜けられるか確かめてみましょう。
1から順番にループカウンタがインクリメント（1ずつ増えていく）されていき、5になったところでif文の条件に合致し、break文が実行されます。break文が実行されると、実際にそれ以降if文のブロック内の処理は実行されず、次のプログラムが実行されていることがわかります。
このように、break文は特定の条件でループを抜けたい場合に使用します。
では、特定の条件の時に、ループを抜け出さずに「その時だけ実行しない」方法はどうやって実現するのでしょうか。それが、continue文になります。
continue文を使えば、そのループのの処理だけを途中で止める事が可能です。
function myFunction() {
for (let i = 1 ; i < 10; i++) {
if (i == 5) {
continue;
}
console.log(i); //1→2→3→4→6→7→8→9
}
console.log("for文を実行しました");
}
上記のプログラムを実行してみると、「5」の時だけループ内処理が実行できていないことに気づきます。
continue文は、このようにして特定条件下の繰り返し処理をスキップする事ができるのが、特徴です。
まとめ
GASを使ったJavaScript入門、ということで、今回はJavaScriptについて学ぶことができました。
「定数・変数・条件分岐・繰り返し」について学習しましたが、理解は深まりましたでしょうか？
また、実行環境はGASを用いているため、GASの画面がこうなっているんだ、とか、こう使うんだ、といった部分もある程度分かったかなと思います。
プログラミングは読むだけでは上達しません。上達する時は自分でコードを書く時です。今回手を動かしていない人も、是非このページをブックマークしてチャレンジしてみてください。
JavaScriptを学習することは、GASを使いこなすための基礎力になります。GASを学びたいと思っている人は是非、この機会に深く学習してみて下さい！
コメント