GoogleAppsScriptを使ってみよう(前編)

#はじめに
QAという部署の中でエンジニアとして業務にあたっています。
皆さんの周りにもエンジニアの方がいらっしゃると思いますが、様々なエンジニアがいる中でこんな考え方を持っているエンジニアもいるという位の軽い捉え方で記事の方を読み進めていただければ幸いです。

さて、コーディングはエンジニアの主務と捉えている方も多いかと思いますが、実際のところエンジニアでなくてもコードがかける環境とある程度の知識があれば誰でもできるということをご存知でしょうか。

業務の効率化や自動化への注目が集まる中、度々行うちょっとした手作業を少しでも減らしたい人やプログラミングに興味があるけどちょっとやるにはハードルが高いなと感じている方を対象として、今日はGoogleAppsScriptを例にコーディングに関するお話をしていきたいと思います。

#アカウントの準備
* [Googleドライブにアクセスできるアカウント](https://www.google.com/intl/ja/drive/)

アカウントをすでにお持ちの方は先に読み進めてください。
お持ちでない方は下記アカウント作成の手順で作成する方法を説明します。

#アカウントの作成
1. 準備に記載した[Googleドライブにアクセスできるアカウント](https://www.google.com/intl/ja/drive/)のリンクにアクセスします。
2. ログイン画面に遷移するのでUI下部の「アカウントを作成」から「自分用」を選択し先に進みます。
<img width="465" alt="スクリーンショット 2019-12-08 20.45.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/3313f29b-1066-ddee-95b2-26f6e7e19a2d.png">
3. アカウント作成のために必要な情報を入力していきます。

<img width="467" alt="スクリーンショット 2019-12-08 20.49.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/a1d621ea-5929-957f-f322-ca970580f249.png">
<img width="432" alt="スクリーンショット 2019-12-08 20.54.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/92317f76-0dcc-9fc7-a027-7561ee936ef1.png">
<img width="432" alt="スクリーンショット 2019-12-08 20.55.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/ed037026-d242-a54e-ece7-d734e268261f.png">

4.プライバシーポリシーに同意するとアカウントの作成は終わりです。

ここで入力した情報は再度ログインするときに必要なので覚えておきましょう。

#Googleドライブへアクセス
無事Googleドライブへアクセスできると下の画像のような画面が表示されると思います。
<img width="521" alt="スクリーンショット 2019-12-08 21.04.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/b2e0ae66-e51b-5734-419d-a6c4243b5e4f.png">

#GoogleAppsScriptの実行をする準備
GoogleAppsScriptを実行できる環境は色々とあるのですが今回は「Google スプレッドシート」を使用します。
Googleドライブの画面から「＋作成」「Googleスプレッドシート」「空白のスプレッドシート」と選択していきます。
<img width="645" alt="スクリーンショット 2019-12-08 22.05.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/36b3475d-d070-d298-38a6-c2d7a7ca50e1.png">

画像はスプレッドシートを選択した後の画面です。
空白のスプレッドシートが作成され、GoogleAppsScriptのコーディングを行う準備ができました。

#スクリプト エディタ
スプレッドシートの画面で「ツール」「スクリプト エディタ」と選択します。
<img width="493" alt="スクリーンショット 2019-12-08 22.22.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/46a32e00-17d7-a5b4-5109-67955d2f1df6.png">

するとブラウザのタブが新しく作成され画像のような画面が表示されます。
このスクリプト エディタを使用してスクリプトの編集を行なっていきます。

#スクリプトについて
GoogleAppsScriptはJavascriptがベースとなってます。コードの書き方がJavascriptをベースにしたものとなっているだけでJavascriptの全ての機能を使用できるわけではありません。
今回はGoogleAppsScriptの導入を説明するところに留めるため、使用できる機能の詳細については説明しません。
スクリプトを書き進めていく中でスクリプトの書き方は正しいけど動作しないという状況に出会うかもしれませんがそれはそういうものだということでその状況に出会ったときに調べることにしましょう。
また今回作成した個人用のアカウントではスクリプトを実行する上で様々な制限があります。
単位時間当たりに処理できるAPIの呼び出し回数、使用できる変数の容量、通信量、実行時間など多岐に渡ります。
業務で使用する際には制限などからスクリプトで記述した処理が全て実行できるか確認してから使用するようにしましょう。
[スクリプトを使用する際に気をつける制限事項](https://developers.google.com/apps-script/guides/services/quotas)

それではスクリプトエディタに戻りスクリプトを記述していきましょう。

#スクリプトの実行
##関数
スクリプトエディタを開いてください。

``` javascript:コード.gs
function myFunction() {
  
}
```
このような文字が書かれているかと思います。
「function」から始まり、「任意の文字列 + ()」それに「{」で始まり「}」、で終わる記述となっています。
これらの一連のルールで記載されたものをGoogleAppsScriptでは「関数」と呼び
他の連携できるアプリケーションから実行できる最小の単位となります。
実際に実行できることを確認してみましょう。

##関数の実行
スクリプトエディタのツールバーに下の画像のようなアイコンが表示されているでしょうか
<img width="179" alt="スクリーンショット 2019-12-08 23.31.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/9a5b29d1-dc31-0138-cdf6-fd47376f8157.png">
右向きの矢印、虫のようなアイコン、それに先ほどのmyFunctionという文字列が表示されています。
「関数」の項目で他のアプリケーションから実行できる最小単位であると説明しました。
初めから用意されているmyFunctionの他に自分で関数を作っていくと、このUIで選択できる関数も定義した分だけ増えていきます。
それではmyFunctionを実行してみましょう。
実行する手順は下記の通りです。

1. 虫のアイコンの隣に表示されている文字列がmyFunctionであることを確認する。
2. 虫のアイコンの隣に表示されている右向きの矢印のアイコンを押す。

となります。
実際に押してみましょう。

<img width="494" alt="スクリーンショット 2019-12-08 23.31.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/c751be58-29f4-06ac-dc84-8de018da2241.png">

画像のような表示になったでしょうか?
これはprojectに名前を入力していないため表示されます。
「はい」を選択してprojectに名前をつけましょう。
名前は「SampleScript」とします。
<img width="465" alt="スクリーンショット 2019-12-08 23.32.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/ae913ed6-016a-0c43-a995-2135e574452c.png">

okを押します。
しばらく待ちましょう・・・。
何も起きませんね。
今回はこれで成功です。
「myFunction」の中身を思い出してみましょう。

``` javascript:コード.gs
function myFunction() {
  
}
```
この通り、myFunctionは「{}」の中に何も書いていませんでした。
今回はこの何もしないという関数を実行して正常に終了することが確認できました。

ただこのままだと実行して正常に終了したと言われても本当かどうかわかりませんね。
実際に処理されている内容がわかるように表示してみましょう。

#Logger.log()
突然魔法のような言葉が出てきました。
これを正しく理解するためには「クラス」という概念を理解する必要があります。
ここでは理解する必要ないためそういうものがあるということだけ知っていれば大丈夫です。
「.」(ピリオド)は見慣れないと思いますが、「()」はすでにみたことがあるはずです。
「関数」のところで説明しましたね。「任意の文字列+()」の形です。
Logger.log()も関数の一種で実行することができます。
Logger.log()は実行することでログを記録することができます。
記録する内容は「()」の中に記述したものが記録されます。
実際にやってみましょう。
myFunctionの中身を下記のコードのように書き換えてください。

``` javascript:コード.gs
function myFunction() {
  Logger.log(123)
}
```

コードを書き換えたら保存します。
使用しているPCの種類によりますが、Windowsであれば「Ctrl+s」、macであれば「command+s」で保存が可能です。
保存したら再度実行してみましょう。実行は「虫アイコンの隣」の「右向きの矢印」でした。

実行ボタンを押した後、何か変化があったでしょうか・・・。
画面上には何も変化がないように見えます。
先ほどLogger.log()はログを記録することができると書きました。
ログはどこに記録されているのでしょうか。

##ログ
<img width="394" alt="スクリーンショット 2019-12-09 0.47.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/70239d9e-f514-a5bf-522c-4ba2bcc70158.png">
スクリプトエディタのメニューに「表示」という項目があります。
「表示」を選択するとリストが表示されます。
このリストの中に「ログ」という項目が見つかったでしょうか。
選択してみましょう。

```
ログ
[xx-xx-xx xx:xx:xx:xxx xxx] 123.0
```
と表示されました。
でも実際にLogger.logの()の中にいれたのは「123」だったはずなのに「123.0」と表示されてしまいました。これについても今回は導入ということで詳細は説明しません。
GoogleAppsScriptで扱っている数値の種類がそういうものという理解で構いません。
どうしても気になる方は、[こちら](https://ja.wikipedia.org/wiki/%E5%80%8D%E7%B2%BE%E5%BA%A6%E6%B5%AE%E5%8B%95%E5%B0%8F%E6%95%B0%E7%82%B9%E6%95%B0)を参照して少しでも難しそうだと思ったら引き返して大丈夫です。

次に文字も表示してみましょう。
myFunctionの中身を次のように書き換えます。

``` javascript:コード.gs
function myFunction() {
  Logger.log(文字列を表示してみるよ)
}
```

保存して実行してみましょう。
<img width="614" alt="スクリーンショット 2019-12-09 0.40.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/bb8ed98f-f150-ca71-7c17-fcbdf1815753.png">
赤い背景で何か表示されました。
GoogleAppsScriptでこの赤い背景で文字が表示されるのは、スクリプトに何か正しくない処理を記述してしまったときです。
スクリプトを書いていく上でとても重要な情報になります。
この赤い背景の表示がなくなるまではスクリプトは正常に動作しません。
ですからこの赤い背景の文字が表示されてしまう原因が何かを見つけ、解決しなければなりません。

幸いなことに表示されている文章には解決するためのヒントが含まれています。
今回の場合だと、「文字列を表示してみるよ」が定義されていません、と、(行2、ファイル「コード」)がヒントになります。
(行2、ファイル「コード」)をどう解釈するかというと、ここに記載されている内容は問題が発生した場所、になります。
スクリプトエディタを見ましょう。
<img width="287" alt="スクリーンショット 2019-12-09 1.33.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/e3506a81-c6d9-99d0-ab9e-fb28b8d6c72f.png">
「コード.gs」と書かれたタブがありますね。
ファイル「コード」と書かれているのはどうやらこのタブのようです。
そして、「行2」と書かれているところはどうでしょう。
新しく編集した箇所の「Logger.log(文字列も表示してみる)」がちょうど2行目ですね。
先ほどまで正常に動作していたスクリプトを書き換えたときに、正常に動かないスクリプトが混じってしまったようです。
先ほどの赤い背景の文章にもう一つヒントが含まれていました。
「「文字列を表示してみる」が定義されていません」という内容です。
どういう意味でしょうか。

##文字列
実は先ほどの赤い背景の文章を表示するためにわざと間違ったコードを書きました。
GoogleAppsScriptで文字を表示する場合にはもう一つ守らなくてはいけないルールがあります。
そのルールというのは、文字(文字列)は「'」(シングルクォーテーション)もしくは「"」(ダブルクォーテーション)で囲われていなければいけないというものです。
何故かについては後ほど説明します。ここではそういうものだという認識で大丈夫です。
正常に表示されるように「'」(シングルクォーテーション)を使ってスクリプトを修正しましょう。


``` javascript:コード.gs
function myFunction() {
  Logger.log('文字列を表示してみるよ')
}
```

保存して実行します。
どうでしょうか。
ログを見てみましょう。

```
[xx-xx-xx xx:xx:xx:xxx xxx] 文字列を表示してみるよ
```
表示されていますね。
ここで一つ疑問がでます。
先ほどの赤い背景の文章で「「文字列を表示してみる」が定義されていません」という内容が表示されていました。
定義とは一体なんでしょうか・・・。

##変数
実はこの記事を書くまで自分も「「文字列を表示してみる」が定義されていません」と表示されている内容が理解できませんでした。
後ほどその内容をサンプルのスクリプトで実行しますが、その前にもう一つスクリプトを書くうえで重要な「変数」という概念があります。
よく箱のようなもの、入れ物のようなものと説明されますがその内容について軽く触れていきます。

``` javascript:コード.gs
function myFunction() {
  var hensuu = 123
  Logger.log(hensuu)
}
```

「var hensuu = 123」と見慣れないルールが出てきました。
Qiitaのコードブロックでは「var」は「function」と同様に黄色の文字で表示されるようです。
この「var」ですがGoogleAppsScriptでは変数を宣言するときに使用されます。
続く「hensuu」ですがこれは自由な名前がつけられます。
今回は変数の説明をするために用意したので「hensuu」という名前をつけました。
この変数は関数の中で様々な役割を担うことになるので、その時々の役割に応じた名前をつけるとスクリプトが読みやすくなるでしょう。
「hensuu」に続く「=」ですがGoogleAppsScriptでは「代入」を表します。
「変数」はこの「代入」により「hensuu」の役割が変わるため、箱のようなものと表現されます。
「var hensuu = 123」は、「hensuu」という名前の「変数」を宣言して「123」を「代入」するという内容になります。
次の行の「Logger.log(hensuu)」は見覚えがありますね。

早速「myFunction」の内容を編集して保存、実行してみましょう。

ログには何が表示されているでしょうか。

```
[xx-xx-xx xx:xx:xx:xxx xxx] 123.0
```

と表示されました。
続けて「hensuu」が箱のようなものと呼ばれることを確かめてみましょう。
「変数」に「文字」(文字列)を「代入」してみます。

``` javascript:コード.gs
function myFunction() {
  var hensuu = 123
  Logger.log(hensuu)

  hensuu = '文字列を代入するよ'
  Logger.log(hensuu)
}
```

「myFunction」の内容を編集して保存、実行してみましょう。
今度はログには何が表示されているでしょうか。

```
[xx-xx-xx xx:xx:xx:xxx xxx] 123.0
[xx-xx-xx xx:xx:xx:xxx xxx] 文字列を代入するよ
```
と表示されました。
最初「hensuu」の中に「123」が入っていてログには「123.0」が表示されましたが、
「'文字列を代入するよ'」を「代入」することにより「123」はどこかに消え「文字列を代入するよ」が表示されるようになりました。
これが箱のようなものと表現される理由です。実際にはもう少しなんでも入れられるのでなんとかポケットのようなものですね。
ここでは詳細について説明を行いませんが「代入」を行うことで上書きできるということを覚えておいてください。

さてちょっとだけ話を戻します。
「var hensuu = 123」は「hensuu」という名前の「変数」を宣言して「123」を「代入」するという内容でした。
では「123」を「代入」する前、「hensuu」には何が入っているのでしょうか。
見てみましょう。

``` javascript:コード.gs
function myFunction() {
  var hensuu
  Logger.log(hensuu)
}
```

保存して実行します。
ログをみてみましょう。

```
[xx-xx-xx xx:xx:xx:xxx xxx] undefined
```
と表示されました。
「var hensuu」は「hensuu」という名前の「変数」を使用するという宣言でした。
宣言をして何も「代入」していない状態では、使用はできましたがその中身は「undefined」(未定義)となりました。
では使用するという宣言そのものをしなかった場合はどうなるのでしょうか。
「var hensuu」を取り除き、Logger.log()で「hensuu」ログの記録をしてみます。

``` javascript:コード.gs
function myFunction() {
  Logger.log(hensuu)
}
```
保存して実行します。

![スクリーンショット 2019-12-09 11.27.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/465fdd73-46cc-aaf9-b77e-83ac4940be87.png)
どこかで見覚えがありますね。

##赤い背景の文章
<img width="614" alt="スクリーンショット 2019-12-09 0.40.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/bb8ed98f-f150-ca71-7c17-fcbdf1815753.png">
どうやら以前出てきた赤い背景の文章と同じような内容です。
文字列を表示する場合には「'」(シングルクォーテーション)もしくは「"」(ダブルクォーテーション)で囲うという方法で解決しました。
しかし今回は「var hensuu」を取り除くという操作で発生してしまったため、以前出てきた赤い背景の文章を「var」を使用することで解決します。

``` javascript:コード.gs
function myFunction() {
  var 文字列を表示してみるよ
  Logger.log(文字列を表示してみるよ)
}
```
「hensuu」を「文字列を表示してみるよ」に置き換えました。
保存して実行します。
ログには何が表示されるでしょうか。

```
[xx-xx-xx xx:xx:xx:xxx xxx] undefined
```
と表示されました。
コードを見ましょう。
「var」はこれから変数を使用しますという宣言でした。
宣言の後には「変数」の名前が続くので、「文字列を表示してみるよ」が「変数」の名前となります。
そしてログに記録されている内容は「undefined」(未定義)でした。
「変数」には「代入」を行うことができます。

``` javascript:コード.gs
function myFunction() {
  var 文字列を表示してみるよ = '今度こそ文字列を表示する'
  Logger.log(文字列を表示してみるよ)
}
```
保存して実行します。
ログには何が表示されるでしょうか。

```
[xx-xx-xx xx:xx:xx:xxx xxx] 今度こそ文字列を表示する
```
うまく「代入」ができたようです。

<img width="614" alt="スクリーンショット 2019-12-09 0.40.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423369/bb8ed98f-f150-ca71-7c17-fcbdf1815753.png">
この赤い背景の文章は一般的に「エラー」や「エラーログ」と呼ばれます。
書かれている内容にはエラーを解決するためのヒントが隠されていると説明しました。
一つ目の解決方法は「文字列を表示する」という目的であったため、「'」(シングルクォーテーション)を使用することで「文字列を表示してみるよ」を文字列として定義することで解決しました。
二つ目の解決方法は「var hensuu」と同様に「変数」として定義することで解決しました。
「エラー」は一見するとどう解決できるか不可解な内容に見えます。
しかしながら問題は一つでありその解決方法はスクリプトの文脈により多岐にわたるため、エラーログにはエラーが発生した箇所と問題になっている内容しか示されません。
このエラーを解決する時に何をおいても重要なのは、何を目的としたスクリプトを書いていたのかを見失わないこと、そしてスクリプトの目的を果たすためにどのようなコードを書くかを考えることです。

#まとめ
だいぶ長くなりましたが今回のまとめです。

・スクリプトを書くための準備（アカウントの作成、スプレッドシートの作成、プロジェクトの保存）
・関数の実行
・Logger.log()の使い方
・数値
・文字列
・変数
・エラーログ(赤い背景の文章)

について余談を交えながら説明しました。
どの内容についてもGoogleAppsScriptを扱う上で基本的な概念となりますが、これらをおさえてしっかりと要点を理解しておくことでコーディングでつまずいたときに自分で解決できるようになります。
今回の内容はGoogleAppsScriptの扱い方が主な内容となりましたが、全て理解できていればすでにスプレッドシートのカスタム関数と呼ばれる機能を作成できる位の力はついています。
次回記事を書くのは12/20の予定となっていますが今回説明した内容を踏まえて、カスタム関数の作成方法やGoogleカレンダーとスプレッドシートを連携する方法など、より実践的な内容にするつもりです。
これからGoogleAppsScriptを使いたいという人の足がかりとなりますように。

おしまい。

#関連する記事
[GoogleAppsScriptを使ってみよう(後編)](https://qiita.com/omomukumamani_piroshi/items/585c4478474b8d8c571c)
[GoogleAppsScriptを使ってみよう(おまけ編)](https://qiita.com/omomukumamani_piroshi/items/03425833a0bdfc1249ca)