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

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

前回は「Google Apps Script（GAS）」の魅力について説明しました。
【GAS】Google Apps Scriptとは？何ができる？学ぶメリットは？

GASとは何か、何ができるのか、学ぶメリットがお分かりいただけたと思います。

今回は実際にGASの開発環境（スクリプトエディタ）を開いて、プログラムを実行していきたいと思います。

それではよろしくお願いします！

スクリプトエディタを開いてみよう

スクリプトエディタを開くには2種類の方法がありますがまずは「簡単な方法」で開いてみましょう。

Googleスプレッドシートから開く

Googleドライブを開き、「新規」→「Google スプレッドシート」の順にクリックします。

スプレッドシートを開いたら左上の「タイトル」を変更（「初めてのGAS」）し、「ツール」→ 「スクリプトエディタ」の順にクリックします。

この画面が表示されれば成功です。

Googleドライブから直接開く

次に、もう1つの方法で「スクリプトエディタ」を開いてみます。
ただし、こちらは「開き方」の説明のみになり、次に説明する「プログラムの実行」は先ほどの「Googleスプレッドシート」から開いた状態での説明になります。

頭が混乱してしまいそうであれば、まずはプログラムの実行まで終えてからこちらに戻ってくると良いでしょう。

Googleドライブから直接開く方法（こちらをクリック）

Googleドライブを開き、「新規」→ 「その他」を開きます。アプリを追加する必要があるので、「アプリを追加」をクリックします。

「Google Apps Script」アプリを検索してクリックします。

「接続」ボタンをクリックしてアプリの追加完了です。

アプリの追加が完了すると、先ほどの「新規」→「その他」の中に「Google Apps Script」が表示されます。

クリックすると、先ほどと同じ画面が表示されましたね。

プログラムを実行してみよう

スクリプトエディタを開けるようになったので、今度は実際にプログラムを書いて「実行」までしてみましょう。

プログラムを書いてみる

スクリプトエディタでやることは主に3つです。まずはこれだけ覚えておきましょう。

スクリプトエディタでやること

コードを書く
保存する
実行する

※ 実際は「関数を選択する」も含みますが今回は割愛します。

まずは次のようにスプレッドシートに「Hello GAS!!」と表示させてみましょう。

コードはこちらになります。
まずは実際に「プログラムを動かす」ことを体験してほしいので、何も考えず次のコードをコピペしてもらえば大丈夫です。
慣れてきたらぜひご自身でコードを書いてみましょう。

function myFunction() {
  Browser.msgBox('Hello GAS!!');
}

function myFunction() {

Browser.msgBox('Hello GAS!!');

}

必ず「保存」をしましょう。
「保存」をしないとプログラムを「実行」できません。下記のように「＊」がついていると「保存」し忘れの合図です。

左上のタイトル（無題のプロジェクト）が未設定の場合はタイトルの入力を求められるので、ここでは「初めてのGAS」としておきましょう。直接左上のタイトルをクリックして変更することもできます。

プログラムを実行する（メッセージを表示）

それでは「実行」ボタンをクリックしてみましょう。何やら変な画面が出てきましたね。

スプレッドシートなどを操作する場合、初回だけは「認証」が必要になります。手順に従って承認してしまいましょう。

初回の認証の流れはこちら（クリック）

手順1

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

手順2

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

手順3

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

手順4

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

承認が完了したらスプレッドシートの画面に戻ってみましょう。「Hello GAS!!」と表示がされていると思います。

プログラムを実行する（ログ画面に表示）

もう一つコードを書いてみます。
先ほどはスプレッドシートの画面にメッセージを表示しました。今回は「ログ」画面に表示してみます。

「ログ」は、GASの開発中に変数やプロパティの値などを出力して、スクリプトの動作が正しいかどうか確認するために使用します。こまめにログに出力して確認しながら開発を進めるようにしましょう。

下記のコードも先ほどと同様コピペして「保存」「実行」してみましょう。

function myFunction() {
  Logger.log('Hello GAS!!');
}

function myFunction() {

Logger.log('Hello GAS!!');

}

どうでしょう。「実行」を何度押しても画面が何も変わらずこの状態のままかと思います。

そうです。実はログ画面は「表示」タブの中にあるので自分で開かないといけません。

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

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

先ほどの「保存」「実行」についても「ショートカットキー」が用意されているので積極的に使っていきましょう。

◆ 「保存」ショートカットキー
【Mac】 ⌘（コマンド）＋ S
【Windows】 ctrl ＋ S

◆ 「実行」ショートカットキー
【Mac】 ⌘（コマンド）＋ R
【Windows】 ctrl ＋ R

では、ログ画面を表示してみましょう。ちゃんと「Hello GAS!!」と表示されていますね。プログラムの実行は以上です。

【参考】２種類のスクリプトについて

スクリプトエディタの開き方は２種類あると説明しました。それぞれの違いを次から見ていきますが、現時点では1つ目の「コンテナバインドスクリプト」が理解できれば十分だと思います。

コンテナバインドスクリプト

「コンテナバインドスクリプト」とは、1つ目の開き方（Googleスプレッドシートから開いたもの）のスクリプトのことです。
つまり、必ず「親」になるファイル（今回は「スプレッドシート」）があり、そのファイルを開いてから「ツール」→「スクリプトエディタ」の順に開くことになります。
（GoogleドキュメントやGoogleフォームからも同じように開くことができます）

また、下記のようにGoogleドライブに保存されているため、スクリプトに何か記載されているのか開かないと分からないといったデメリットもあります。運用上はどのファイルにスクリプトが紐づいているか分かるようにしておくと良いかもしれません。

スタンドアロンスクリプト

「スタンドアロンスクリプト」とは、2つ目の開き方（Googleドライブから直接開いたもの）のスクリプトのことです。
こちらは「親」になるファイルを持ちません。なので、どの「スプレッドシート」を操作するか指定する必要があります。また、「親」になるファイルを持たないため、Googleドライブから直接開くことになります。

先ほどのプログラムは「コンテナバインドスクリプト」で実行したものであり、「親ファイル」と紐づいていたからスプレッドシートを指定しなくても「Hello GAS!!」と表示がされたんですね。

同じように保存状態について見てみましょう。こちらは、マークが異なるのですぐにスクリプトが記載されているものだと分かります。
しかし、どのスプレッドシートを指定しているのかはここからは分からないため、こちらも運用上は下図のようにスプレッドシート側も同じ名前のファイル名にしておくと良いかもしれません。