Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GoogleツールでLINEBotを作ってみよう~GAS基礎編~

EngineerCafe
December 27, 2023
94

 GoogleツールでLINEBotを作ってみよう~GAS基礎編~

GoogleツールでLINEBotを作ってみよう~GAS基礎編~で使用したスライド資料です。
YouTubeでイベントの様子も見られますので併せてどうぞ。
https://www.youtube.com/watch?v=vfgUQstg2DE

EngineerCafe

December 27, 2023
Tweet

More Decks by EngineerCafe

Transcript

  1. 何が違うの? スタンドアロンスクリプト コンテナバインドスクリプト 保存 単体として保存 親となるファイルに紐づいて保存 新規作成 ダッシュボード、ドライブから作成 親ファイルから拡張機能として作成 開く

    ダッシュボード、ドライブから開く 親ファイル、ダッシュボードから開く メソッド — 紐づいたファイルに対するメソッドが使 用可能 トリガー 時間主導型、HTTPリクエスト、カレン ダーからのトリガーを設置可能 左に加えてコンテナに関するトリガーを 設置可能 UI — コンテナのUIのカスタマイズが可能 カスタム関数 — 作成可能 ライブラリ 作成可能 —
  2. それでは「名前」、「年齢」の名前を付けた変数を用意します。 宣言は以下の通りに行います。 let name; GAS…というよりはJavascriptではletキーワードで名前を付けた変数を宣言します。 宣言するだけだと初期化なので中身は空っぽです。 そこで中身を格納してみます。 この「格納する」ことを「 代入」と呼びます。 name

    = ’福岡太郎’; 文字列はシングルクォーテーションかダブルクォーテーションで囲みます。 これで、nameという変数には「福岡太郎」という名前が入りました。 letキーワードは変数を新規作成する時に使い、代入へは「=」が行いますので、 代入を行う時にはletを使う必要はありません。 末尾のセミコロンを忘れずに。 それでは次は、年齢を入れる箱を用意して格納してみましょう。
  3. let age = 30; 変数の宣言と代入を同時に行うことができます。 letキーワードで宣言、代入は「=」です。 数字を入れる際はシングルクォーテーションは必要ありません。 シングルクォーテーションを付けて数字を入力すると文字列扱いになります。 その場合は計算に使うことはできなくなるので注意が必要です。 次に、変数の中身を取り出して表示してみましょう。

    変数の名前をさきほども使用した console.logで表示します。(保存してから“実行”をクリック) console.log(name); 福岡太郎と表示されたでしょうか? 次は年齢を呼び出してください。呼び出し方は上記を参考に、自分で打ち込んでください。 30と表示されれば成功です。 正解は console.log(age); でした!
  4. キャメルケース   単語を連結した時に、 2つめ以降の単語の頭文字を大文字にする記法。   【例】userName、onlineEngineerCafe    大文字が飛び出てラクダのコブのように見えることから。   一般的に関数名や関数内の変数、定数にはキャメル記法を用います。 パスカルケース   キャメルケースでは 2つめ以降の単語の先頭を大文字にしていましたが、   パスカルケースでは最初の

    1文字目も大文字を使います。   キャメルケースに似ているのでアッパーキャメルケースとも呼ばれます。   【例】PhoneNumber、UserScriptManager   プログラミング言語「 Pascal」はこの記法で記述するためその名から来ています。   パスカルケースはクラス名に使われます。 スネークケース   単語を_(アンダースコア)で連結し、全てを小文字か大文字で書いたもの。   小文字だけで書いたものをスネークケース、大文字だけで書いたものを   アッパースネークケースと呼び分けたりもします。   【例】 USER_ID、LINE_ACCESS_TOKEN   アンダースコア記法とも呼ばれます。   グローバル定数やプロパティストアのキーなど、中身を変更しないものに使用します。
  5. ところで変数には「データ型」というものが存在します。 中身に応じて型が存在していて、その型によって計算処理が可能であったり不可能であったりします。 JavaScriptで使える型は以下の通り。 データ型 説明 例 数値型 整数値、浮動小数点値 10、-10、1.5 など

    文字列型 文字列 ’あいうえお’、’ABC’ など 真偽型 true(真) false(偽)のどちらかを返す true false null 値がないことを表す特殊な型 null undefined 未定義であることを表す特殊な型 undefined 配列型 インデックスをキーとするデータの集合 [10,20,30]、[’ABC’,’abc’,’あああ’] など オブジェクト型 プロパティをキーとするデータの集合 [X:120,Y:-200]、[name:’太郎’,age:25] など
  6. 言語によっては、一度宣言したデータ型には型に応じた中身しか入れることはできませんが、 (静的型付け) JavaScriptは動的型付けといい、中身に応じて型を変更してくれる言語なので、 GASも同様ですが、 特に意識しなくても大丈夫です。 しかしながら、中身を調べて型に応じたプログラミングは基本になりますので、 ついでに覚えておきましょう。中身を調べる時は type演算子を使用します。 console.log(typeof [変数の名前]);

    ためしに、「age」の型を調べてみましょう。 console.log(typeof age); 「number」と出力されました。これは「数値型」であるという意味です。 他に文字列の場合は string、真偽値の場合はboolean、配列型はarray、オブジェクト型はobjectと 出力されます。(nullやundefinedはそのまま返るだけですので省きます )
  7. letを使って配列型が宣言できたということは、定数の配列型も存在するということですね。 定数の宣言と代入は constで行いました。 ということは、 const NUMBERS = [0,10,20,30,40,50]; で、同じように定数の配列型を作成することも可能です。 定数だから格納した要素の変更は出来ない

    …と思われるかもしれませんが、 実は可能です。 要素の変更をする時は NUMBERS[0] = 60; この状態を解説すると、 0番目を60という中身で置き換える、という意味になります。 定数は「再代入を禁止する」という動きを持つものなので、配列型の場合は「要素の変更」という 動きならば可能です。 再代入とは宣言と代入をした時のような NUMBERS = [60,70,80,90,100]というようなやり方を 2回目以降は受け付けないという意味になります。 (ちなみに要素の追加はできます )
  8. GASは基本的にスプレッドシートに紐づいていますので、様々なデータを二次元配列でよく取り扱います。 一次元配列だけではなく、二次元配列についても用法をしっかり学んでおきましょう。 二次元配列の宣言には、 [](カッコ)内に[]を使うことで表現します。 10 20 30 40 50 60

    70 80 90 上のような構造にしたい場合、次のような宣言と代入を行います。 const list = [[10,20,30],[40,50,60],[70,80,90]]; 順番的にはなんとなく把握したんじゃないでしょうか? 左上の【0】から始まり右に要素を ,(カンマ)区切りで追加、 [](カッコ)を更に,(カンマ)区切りで下の段に移動 …を繰り返して要素を増やしています。 そして[]を[]で囲って二次元配列としています。 今回はこのような短い文章となっていますが、要素によっては長くなってきますよね。 その時は適宜改行し、読みやすくしてみましょう。
  9. また、要素を後から追加したい、変更したいという時には次のように記述します。 ※2段目の1番目の要素を書き換えたい時 list[1][0] = 150; ※4段目の要素がないので追加したい時 list[3] = [100,110]; ※4段目の3番目に追加したい時

    list[3][2] = 160; ※3段目の要素自体を書き直したい時 list[2] = [120,130,140]; 左から数えて何番目、上から数えて何番目、 というようなイメージです。 (0から数えるので注意 ) 10 20 30 150 50 60 120 130 140 100 110 160 10 20 30 40 50 60 70 80 90
  10. オブジェクト型について 配列型は、要素を0から順番にして格納していきました。 オブジェクト型は、このインデックス (0から付いた順番)を任意のもの(キー)にして要素を格納します。 たとえば、果物の名前をキーにして、中身は価格を格納しておきたいとします。 表記法は const fruits_price = {’りんご’:398,

    ’ぶどう’:580, ’みかん’:298}; :(コロン)を挟んで左側にキーを、右側に要素を記述します。 文字列の場合はシングルクォーテーションかダブルクォーテーションで囲みます。 区切りは,(カンマ)です。 取り出して調べる時は以下の通り。 console.log(fruits_price[’りんご’]);
  11. さきほどのロッカーの例を持ち出してみると、 オブジェクト型のロッカーではインデックスの代わりに「プロパティ」をキーとしています。 りんご ぶどう みかん さくらんぼ レモン 配列型「fruits」     (名前)

    398 580 298 780 200 プロパティ (キー) 要素(中身) インデックスのような「順番」という概念がありませんので、一番取り扱いやすいものかもしれません。 要素の追加は以下のように行います。 fruits_price['マンゴー'] = 2980; オブジェクトの名前[’プロパティ’] = 要素 という形です。
  12. 演算子 説明 例 + 加算、または文字列の連結 1+1、int(変数)+1、’福岡’+’太郎’ など - 減算、または符号の反転 10-1、 -x など

    * 乗算 10*10 (答えは100) / 除算 10/2 (答えは5) % 剰余 10%3 (答えは1) ** べき乗 5**5 (答えは3125) 算術演算子 まずは基本的な演算子。 剰余は割ったあまりを求めるものです。 べき乗は 5 と表されるようなものです。 5
  13. 代入演算子 説明 例 = 左辺の変数に値を代入 x=5(5という数がxに代入される) += 左辺の値に右辺の値を加算して代入 x +=

    5(結果は10) -= 左辺の値から右辺の値を減算して代入 x -= 5(結果は0) *= 左辺の値に右辺の値を乗算して代入 x *= 5(結果は25) /= 左辺の値を右辺の値で除算した値を代入 x /= 5(結果は1) %= 左辺の値を右辺の値で除算した剰余を代入 x %= 2(結果は1) **= 左辺の値を右辺の値でべき乗して代入 x **= 5(結果は3125) 代入演算子はconstで作成した定数には使えないことに注意が必要です。 (constは再代入を禁止する定数を作成する ) 代入演算子
  14. それではここから、プログラムを制御するための基本的な構文を学びます。 今回取り上げるのは「 if文」と「for文」。 プログラムには「もし~なら」という、条件によっては分岐するという組み込みが基本です。 この、「もし~なら」というのが if文。 プログラムは、基本的には、 1度きりのものです。 しかし繰り返し何度もやってもらうことは可能です。 その繰り返し処理に使うのが

    for文。 for文は「〇回繰り返す」という制御を行う構文です。 その中で、「もしボタンが押されたなら」や、「もし日付が偶数なら」など、 何かの条件によっては処理を変えるというプログラムを組む時には、 for文とif文を組み合わせて制御していくことになります。 その他にも、while文、break文など、制御構文は多岐に渡りますが、 今回のイベントで使う if文を集中的に学びます。
  15. プログラムするのは ・listという配列型に、1から順に100まで数字を追加していく ・もしも3の倍数の時は追加せずに飛ばす というものにします。 listという配列に、1から100までの数字(ただし3の倍数を除く)を格納したいわけですね。 そうなると、宣言文は … const list =

    [1,2,4,5,7,8,10,11,13…] と、手動で入力するとなるととてつもなく大変ですね。 1から100までならまだしも、3の倍数を抜きながらとなると非常にめんどくさい上にミスがあることもあります。 そこで、変数とfor文を使ってもっと簡単に実現します。 まずはletかconstで配列型「list」を空の状態で作成します。 let list = [];
  16. for文は for (初期化式, 条件式, 増減式){ [条件式がtrueの間実行される内容] } という書き方をします。 つまり、こういう記述になります。 for

    (let i=1, i <= 100, i++){ list.push(i); } 初期化式 条件式 処理 増減式 true false letで作成した変数は「カウンタ変数」と呼びます。 for文で繰り返す数を制御するための変数なのでそう呼ばれています。 iじゃなくても何でもいいのですが、ここは「 int」のiを使用しています。
  17. 構文の中に見慣れない式がありましたね。 ここで、条件式と比較演算子、論理演算子について触れておきます。 まずは条件式。 for (let i=1, i <= 100, i++){

    list.push(i); } これが条件式。 条件式は、左辺の数字と右辺の数字を比較演算子で計算し、 true(真)の値になっている間は 中身を実行するというものであり、条件が当てはまらなくなれば false(偽)の値を返し、 実行しないものとなっています。 比較演算子は次の通り。
  18. 比較演算子 説明 例 == 左辺と右辺が等しければ true 10 == 10 (true)

    | 10 == 11 (false) != 左辺と右辺が等しくなければ true 11 != 10 (true) | 10 != 10 (false) < 左辺が右辺より小さければ true 10 < 10 (false) | 10 < 11 (ture) <= 左辺が右辺以下であれば true 10 <= 10 (true) | 10 <= 11 (true) > 左辺が右辺より大きければ true 10 > 10 (false) | 11 > 10 (true) >= 左辺が右辺以上であれば true 10 >= 10 (true) | 11 >= 10 (true) === 左辺と右辺がデータ型も含めて等しければ true 10 === 10 (true) | 10 === ’10’ (false) !== 左辺と右辺がデータ型も含めて等しくなければ true 10 !== 10 (false) | 10 !== ’10’ (true) 以上、以下に気を付けていれば、使っていくうちに覚えられると思います。
  19. for (let i=1, i <= 100, i++){ list.push(i); } ①iという変数に1を代入して初期化し、

    ②iの中身が100になるまで ③iの変数を条件式に返したあと  1を加算する ④trueの間はpushメソッドで  配列型listの末尾に追加 演算子 例 説明 ++(インクリメント) x++(後置) 変数の値を返してから 1を加算する ++x(前置) 1を加算してから変数の値を返す --(デクリメント) x--(後置) 変数の値を返してから 1を減算する --x(前置) 1を減算してから変数の値を返す つまり、このfor文を読み解くとこうなります。
  20. この文章では「最初に 1を入れたiの中身が100になるまで繰り返す」なので、 100回繰り返す、という読み解き方ができます。 この100回繰り返す中で、 「もしもiに入れた数が3の倍数だった時」、という条件分岐 (if文)を組み込んでみます。 if文の構造をもう一度。 if(条件式){ [条件によって実行させたい内容] }

    でした。という事は if(i % 3 == 0){ } という書き方になります。 この条件式では、iに入った数を3で割った時の余りが 0であるかどう かで3の倍数であることを振り分けています。 ==は左辺と右辺が一致するかどうか、という比較演算子です。
  21. ここまでのコードをまとめると、以下のようになっていると思います。 なっていなければ今修正してください。 function myFunction() { let list = []; for

    (let i = 1; i <= 100; i++){ if(i % 3 == 0){ } list.push(i); } console.log(list); } しかし、このコードは不完全です。 何故なら、if文の中身がないからです。
  22. 実行させたい内容は、「 listの末尾に何も追加しない (飛ばす)」でした。 さて? if文では、「もし、3の倍数の時は」という分岐でした。 3の倍数でなければlistに追加しますが、3の倍数の時は追加したくありません。 しかし、「追加しない」というメソッドはありません。 何もしたくない、という時は { }

    内を空っぽ(そのまま)にする、という方法もあります。 しかし、今のようなif文だけでは3の倍数であっても普通に追加してしまいます。 何故なら、if文の外に「追加する」という文章があるから。 中身がないので外に出て、外の指示に従っているだけなのです。 つまり、指示の出し方が間違っているわけですね。
  23. 思いついた方法ですが、やり方はいくつかあります。 まずは、if文の中の条件式のやり方を変える。 i % 3 == 0 というのは、変数iの中の数字を3で割ったあまりが0かどうか、という判断をtrueかfalseで見分 ける式です。 あまりが0であれば3の倍数というものです。

    左右の数を比べて合致しなければ「 true」を返す比較演算子がありましたね。 これを使った i % 3 != 0 という式。 これは、iを3で割ったあまりが0でなければ、という式になります。 欲しかったのはこれです。 しかし、他にも方法はあります。 それがif else文です。 if文には分岐する時、必ずしも答えが合うものがあるわけではありません。 1の条件が当てはまるかだけではなく、そうではないなら、というもの。 そうではないなら、だけで分かれるとしたら 2通りの答えになりますね。 そうではないなら、更に 2の条件が当てはまるか調べることもできるようになります。
  24. if else文の構文は以下の通りです。 for (let i = 1; i <= 100;

    i++) { if (i % 3 == 0) { } else { list.push(i); } if else文は、もし~なら、そうでなければ、 の部分で分岐するものになります。 更にその中で「そうでなければ」と分岐するなら、 else if(条件式)~とぶら下がっていきます。 条件式 A 条件式 B 処理1 処理2 処理3 true true false false
  25. まずは改造。 もしもカウンタ変数が 3の倍数でなかったら listに変数を入れる、というものなので、 もしもカウンタ変数が 3の倍数でなかったら listに「ハズレ」という文字列を格納する、に書き換えます。 function myFunction() {

    let list = []; for (let i = 1; i <= 100; i++) { if (i % 3 != 0) { list.push(i); } } console.log(list); } 書き換えるのはココ! list.push(i);を、 list.push(’ハズレ’); に書き換えます。 文字列なのでシングルクォーテーションを 忘れずに!
  26. 次に、今のままでは「 3の倍数は省く」のままで当たりがなくなってしまいますので、 if文をif else文に書き換えます。 function myFunction() { let list =

    []; for (let i = 1; i <= 100; i++) { if (i % 3 != 0) { list.push(i); } } console.log(list); } function myFunction() { let list = []; for (let i = 1; i <= 100; i++) { if (i % 3 != 0) { list.push(’ハズレ’); } else { list.push(’当たり’); } } console.log(list); }