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

Slide 1

Slide 1 text

Googleツールで  LINE ChatBotを作ってみよう  【GAS基礎編】  エンジニアカフェ主催中高生・初心者向けコーディングイベントエンジニアカフェスタッフ　永石　好

Slide 2

Slide 2 text

このイベントでは、Googleのツールのひとつである Goole Apps Scriptを使って LINEのチャットボットを作成してみるというのが最終目的です。全2回で前編・後編に分け、前半である今回は【GAS基礎編】と銘打ち、GASの基本文法などを集中的に学びます。チャットボットは後編である 12/27のイベントで作成予定です。

Slide 3

Slide 3 text

GASとは何か GASはGoogle Apps Scriptの略称です。 Google社が提供しているサービスは、現在では仕事や生活上でなくてはならない存在になってきています。中でも、スプレッドシートの便利さは折り紙付きです。スプレッドシートは表計算ソフトウェアのひとつ。 Googleアカウントがあれば無料で扱うことが出来るため、誰でも気軽に導入することができます。作業はクラウド上で行われるため自動保存となり、ファイルの消失などに強いです。また、簡単にリンクを共有をすることができるので、グループ内で使われることも多くあります。ただし、インターネットに接続していることが必須条件のため、しばしば不便な面も見られるようです。

Slide 4

Slide 4 text

スプレッドシートはセルに関数を入れることで計算等を行うものです。家計簿のようなものを作ったり、 Googleフォームと連携して入力されたデータを格納したりしておくことができます。セル部分

Slide 5

Slide 5 text

そして肝心のGASですが、一言で言えば「開発ツール」です。基本はスプレッドシートから開く「スクリプトエディタ」でプログラミングします。プログラムの中身によっては、カレンダーやメール等、 Googleの他のサービスとの連携などに留まらず、外部サービスと連携したシステムを自分で構築することができるようになります。そのプログラミングに使う言語、という位置づけでも GASと呼ばれます。 GASはJavascriptをベースとした言語のため、基本文法等は同じですが、独自の関数が追加されています。逆に、DOM(Document Object Model の略で HTML や XML 文書を取り扱うための API )は扱えないなど、多少の違いがあります。スクリプトエディタの中で編集していくため、環境を整える必要がない点においても、非常に導入しやすいものとなっています。

Slide 6

Slide 6 text

それでは、まずスクリプトエディタを開くための準備を行います。まずはGoogleChromeを立ち上げ、ログインします。右上に丸いアイコンが表示されていればログインできています。 9つの点のアイコンから「ドライブ」を選んで開きます。開いたら、左側に表示されているメニューの中で、「＋新規」とかいてあるボタンをクリックします。

Slide 7

Slide 7 text

ボタンを押して出てきたメニューから、まずは「新しいフォルダ」を作成します。 (名前は何でも大丈夫なので、ひとまずは“無題のフォルダ”で大丈夫です) 新しいフォルダを作成したらフォルダの中へ移動し、更に「＋新規」で Googleスプレッドシートを選択します。

Slide 8

Slide 8 text

作成したスプレッドシートへ移動したら、「拡張機能」から「Apps Script」を選択します。

Slide 9

Slide 9 text

多少読み込みに時間がかかりますが、開くとこのような中身になっています。既にコードが数行書かれていますが、今回はこの場所で、 GASの基礎部分を学んでいきます。

Slide 10

Slide 10 text

その前に、GASの基本的なことから。 GASを開く時、スプレッドシートから拡張機能によって開きましたが、単独でも開くことができます。メニューの「その他」から「 Google Apps Script」で開くことができますが …ひとつ注意！

Slide 11

Slide 11 text

メニューから直接GASを開こうとする時、必ず新規作成という意味で開いてしまいます。その度新しいプロジェクトを作成してスクリプトエディタが立ち上がってしまうので、「ダッシュボード」という機能を使います。ダッシュボードはGASのプロジェクトを管理したり、モニタリングしたりするための場所。スプレッドシートに紐づいたファイルは外から確認できませんが、このダッシュボードから見ることができます。ダッシュボードを開く際は、プロジェクト名の横の「 Apps Script」をクリックします。プロジェクト名

Slide 12

Slide 12 text

これがダッシュボードの一部です。自分のプロジェクト一覧に並んだ名前がプロジェクト名です。「新しいプロジェクト」を選ぶと、新規でスクリプトエディタが開きます。ここで気を付けたいことがひとつ。 GASにはスタンドアロンスクリプトと、コンテナバインドスクリプトがあることです。

Slide 13

Slide 13 text

スタンドアロンスクリプトとコンテナバインドスクリプトとはスタンドアロンスクリプトは、 Googleドライブにプロジェクトファイルを直接保存します。コンテナバインドスクリプトは、スプレッドシート、ドキュメント、フォーム、スライドといった親ファイルに紐づく形で保存します。二つの違いはアイコンによって見分けることができます。スタンドアロンスクリプトコンテナバインドスクリプト (親ファイルはスプレッドシート )

Slide 14

Slide 14 text

何が違うの？スタンドアロンスクリプトコンテナバインドスクリプト保存単体として保存親となるファイルに紐づいて保存新規作成ダッシュボード、ドライブから作成親ファイルから拡張機能として作成開くダッシュボード、ドライブから開く親ファイル、ダッシュボードから開くメソッド — 紐づいたファイルに対するメソッドが使用可能トリガー時間主導型、HTTPリクエスト、カレンダーからのトリガーを設置可能左に加えてコンテナに関するトリガーを設置可能 UI — コンテナのUIのカスタマイズが可能カスタム関数 — 作成可能ライブラリ作成可能 —

Slide 15

Slide 15 text

トリガー？UI？コンテナ…？トリガーについては後ほど詳しく説明します。 UIはユーザーインターフェースの略称。ユーザーが使う時に分かりやすいレイアウトや、グラフィカルに誘導できるデザインを指します。コンテナという概念については追々分かっていくと思いますので、言葉で表現するよりは感じ取って学んでいくほうが無難でしょう。 (ほぼ言葉の通りなんですが )

Slide 16

Slide 16 text

まずは儀式さて、それではまずログに「 Hallo World」と表示させてみます。次のように記述してください。表示したいものが文字列だった場合はシングルクォーテーションで囲みます。プログラミングの基本的なルールとして、上から順にコード (命令)を読み込んで処理します。その命令の最小単位をステートメントと呼びます。ステートメントは単語の途中でない限りは改行することができます。 (本来なら改行しなくても OK) また、ステートメントの末尾には必ず「 ;」セミコロンを付けます。ステートメント

Slide 17

Slide 17 text

コードを書くと、左のメニューの「コード .gs」の頭に黄色いマークが表示されているのが分かるでしょうか。このマークは「未保存」の印です。スプレッドシートは基本的にクラウド作業のため自動的に保存されますが、スクリプトエディタは自動保存されません。コードを書いたあとは必ず保存します。ショートカットは「ctrl(command)キー＋S」です。

Slide 18

Slide 18 text

保存すると、グレーアウトで押せなかったボタンが押せるようになっているはずです。「実行」ボタンをクリックし、結果を待ってください。

Slide 19

Slide 19 text

画面下部で以下のような結果が表示されれば成功です！

Slide 20

Slide 20 text

ところで、実行ボタンの横に「 myFunction」とかかれたプルダウンメニューがありますね。このメニューで選択しているのが「関数名」です。関数は動きを一連にした塊のようなもので、「 function」という文で定義します。なのでここは、「myFunction」という名前の関数を定義します、のような意味になります。そして、実行の際にはプルダウンメニューで選んだその関数を実行します。 (この場合は文字の表示 )

Slide 21

Slide 21 text

試しに、改行して次のように記述してください。定義名はconsoleaとしていますが好きな名前で OKです。ここから追加実は中身は同じなので、ついでに読みやすくしてみます。ただ、実行した時にどちらを実行したのかを分かりやすくするため、「 Hello GAS!」としました。

Slide 22

Slide 22 text

この状態で保存し、今度はプルダウンメニューの中から先ほど作成した関数「 consolea」を選択し、実行してみてください。「Hello GAS!」と表示されれば成功です！このように、関数ごとに選んで実行結果を見ることができます。次に学ぶのは「変数」と「定数」。変数とは、箱のようなものだと思ってください。その箱には、1種類のものだけ入れることができます。文字でも数字でも、1種類だけ入れることができます。 123 (数式・数列) ”こんにちは” (文字列) どちらか1つだけです。最初に入れたものがあっても、消して (上書きして) 次に入れたものが残る箱です。

Slide 23

Slide 23 text

そして、数字を入れた時は、その数字で計算もできます。つまり、プログラム稼働中に、箱に入れた数字は変えられるというわけです。「変えられる数字」で変数。と覚えてください。プログラム中色んな種類の変数を扱いたいことがありますが、入れられる中身は 1個だけなので、変数が100個ある、なんていうことも普通です。全部同じ変数だと分かりづらいですよね。そこで、変数の箱には名前を付けるわけです。たとえば、「名前」「年齢」を記録しておくことにしましょう。 (変数の名前は必ず英数字で付けます ) 変数を使う時は、必ず先に「箱を使用します」という宣言が必要になります。宣言の後で、その箱に名前を付けます。 name age 何を入れるのか分かりやすく箱に名前を付ける

Slide 24

Slide 24 text

それでは「名前」、「年齢」の名前を付けた変数を用意します。宣言は以下の通りに行います。 let name; GAS…というよりはJavascriptではletキーワードで名前を付けた変数を宣言します。宣言するだけだと初期化なので中身は空っぽです。そこで中身を格納してみます。この「格納する」ことを「代入」と呼びます。 name = ’福岡太郎’; 文字列はシングルクォーテーションかダブルクォーテーションで囲みます。これで、nameという変数には「福岡太郎」という名前が入りました。 letキーワードは変数を新規作成する時に使い、代入へは「＝」が行いますので、代入を行う時にはletを使う必要はありません。末尾のセミコロンを忘れずに。それでは次は、年齢を入れる箱を用意して格納してみましょう。

Slide 25

Slide 25 text

let age = 30; 変数の宣言と代入を同時に行うことができます。 letキーワードで宣言、代入は「＝」です。数字を入れる際はシングルクォーテーションは必要ありません。シングルクォーテーションを付けて数字を入力すると文字列扱いになります。その場合は計算に使うことはできなくなるので注意が必要です。次に、変数の中身を取り出して表示してみましょう。変数の名前をさきほども使用した console.logで表示します。(保存してから“実行”をクリック) console.log(name); 福岡太郎と表示されたでしょうか？次は年齢を呼び出してください。呼び出し方は上記を参考に、自分で打ち込んでください。 30と表示されれば成功です。正解は console.log(age); でした！

Slide 26

Slide 26 text

console.log(name); console.log(age); 2行も書くのがめんどい …という時には繋げて表示することもできます。 (改行しないやり方) 変数同士を「,(カンマ)」で繋ぐ

Slide 27

Slide 27 text

実行すると、結果としては「福岡太郎　30」というログが表示されていると思います。もう少し自然な形で出力してみたいですね。そんな場合は次のように記述します。 console.log(name,’さんは、’,age,’歳です。’); 変数と変数を繋ぐ間にシングルクォーテーションで囲った文字列を挟むことでなんとなく自然な文字列に早変わり！！に見えますが、変数との間に空白があり、少し不自然ですね。では、この空白が出ないようにくっつけてみます。 console.log(name+’さんは、’+age+’歳です。’); どうでしょう？＋を使うと変数との間の空白がなくなりましたね。

Slide 28

Slide 28 text

それではさきほど計算した方法を使いながら、文章を繋げてみます。 console.log(name+’さんは、来年で’+age+1+’歳になります。’); 変数に入れた数は計算にも使えます。現在ageには30という数字が格納されているので、計算してみましょう。 console.log(age+1); 保存して実行し、計算ができていることを確認してみてください。実行してみると「！？」な結果。そうですね、「＋」というのは「足し算」の演算子ですが、先程のように「繋げる」という使い道もあります。この場合文字列として繋げるのを優先してしまったために、本来足し算をしてほしかった箇所でも繋げてしまうため、「福岡太郎さんは、来年で 301歳です。」というような表示になってしまうわけです。しかし、カンマで繋ぐと空白が出来てしまいますね。では、どのようにして自然に表示するか？という事になってきます。

Slide 29

Slide 29 text

こういう時は、その場で計算した結果を表示するのではなく、予め表示したい数にしておけばいいわけです。 age = 31; と先に代入しなおしておいて、 console.log(name+’さんは、’+age+’歳です。’); とすれば、自然に表示させることができます。しかし、あとでまた30という数字に中身を変更したり、また別の数字を代入したり …これはほぼ手動と変わらないのでは…という場面が出てくることもあります。こういう場合はどうすればいいのか …？

Slide 30

Slide 30 text

中身をころころ変えるのではなく、その場で計算した結果を表示したいという場合は、別の変数に代入しておけばいいわけです。つまり、「age」に「＋1」した「30＋1＝31」という数を「nextAge」という別の箱(変数)に一旦代入しておく。そして、本来表示させたかった文章に組み込んでいく、という手順です。つまり、 let nextAge = (age+1); これで、ageに代入した30に1を足した数をnextAgeという新たに作成した箱に代入しました。そして次に表示で、 console.log(name+’さんは、来年’+nextAge+’歳になります。’); と、その場では計算しないように表示させてみます。いかがでしょうか？ちゃんと自然に表示できたでしょうか。

Slide 31

Slide 31 text

変数の中身を代入しなおして使うのはとても簡単なことが分かりました。その一方で、中身を変えたくない変数というのが必要な場面も出てきます。そういう時に使うのが「定数」です。定数は、変数と違い、宣言＆代入を行ったあとは次回以降の代入を受け付けなくするものです。簡単に言えばロックのかかった変数です。定数の宣言＆代入には constキーワードを使用します。宣言と代入は同時に行います。変数と違って空っぽの状態では作成できません。記述は以下の通り。 const name2 = ’福岡花子’; 定数は、変更できないものなので、たとえば APIキーやパスワードなどの重要なもの、変更する可能性がないもの、変更したくないものに使用します。定数の中身を変更(再代入)しようとするとエラーが返ってきます。 ※イメージ

Slide 32

Slide 32 text

ちなみに変数や定数は複数同時に作成することができます。変数の場合 let age1,age2,age3; 上記の場合は宣言を行うだけなので中身はありません。中身を入れて宣言する場合は let age1=10,age2=20,age3=30; とします。同じように、代入した状態なら定数も複数同時に宣言できます。定数の場合 const name1=’福岡一郎’,name2=’福岡二郎’,name=’福岡三郎’;

Slide 33

Slide 33 text

変数の命名ルールについて変数を作成する際、その名前についての命名ルールが存在します。・予約語でないこと・数字で始まらないこと・記号は＿(アンダースコア)と＄のみ使える予約語というのは、プログラミング上使われるメソッドや関数に使われる文字列のことで、 letやconstなどのキーワードもそれにあたります。予約語は以下の通り。 break case catch class const continue debugger default delete do else enum export extends false finally for function if import in instanceof let new null return swich super this throw true try typeof var void while with

Slide 34

Slide 34 text

命名の時のコツ(のようなもの) 変数や定数を作成する際にはルールに気を付けていれば自由に名前を付けられますが、そこにちょっとしたコツを加えておくことで、「誰もが見やすい」ものにすることができるようになります。全てのプログラミングに通じることですが、「可読性に優れたコード」は全てのプログラマーが目指しているものです。つまり「誰が読んでも読み解きやすい、誰でも後が継ぎやすい」プログラムです。開発を1人で行うこともあるかとは思いますが、多くの人間が携わることの方が実は多いです。その時に統一しやすい、他の人にバトンを繋ぎやすい＝効率がいい、そういった意味で可読性は重要なファクターです。ほんの少しのコツを掴んでおけば、それを難なく実現できるようになるかもしれません。さて、そのコツのようなものとは … ・分かりやすい名前、意味が分かる単語を心がける・日本語ではなく英語を使う・用途によって表記法を変える

Slide 35

Slide 35 text

・分かりやすい名前、意味が分かる単語を心がける　　「a」や「b」「rtyhjnmloijk(めちゃくちゃに羅列しただけ )」など、記号にしか過ぎない単語では　　「何に使用するのか」が分かりづらく、読み解くのに余計な時間を要してしまいます。　　どんな名前でも自由に付けられますが、「 age(年齢)」「name(名前)」など、　　何に使用するのか、見れば分かる名前を心がけましょう。・用途によって表記法を変える　　キャメルケース(記法)、パスカルケース、スネークケースを使い分けると、　　より可読性が高くなります。・日本語ではなく英語を使う　　実はJavaScript(GAS)や一部の言語では日本語を変数に使うこともできます。　　が、かな変換・半角 /全角キーを押す手間が増え、修正回数も多くなりがちです。　　またプログラミングは英語で行いますから、慣れておくことに越したことはありません。

Slide 36

Slide 36 text

キャメルケース　　単語を連結した時に、 2つめ以降の単語の頭文字を大文字にする記法。　　【例】userName、onlineEngineerCafe　　　大文字が飛び出てラクダのコブのように見えることから。　　一般的に関数名や関数内の変数、定数にはキャメル記法を用います。パスカルケース　　キャメルケースでは 2つめ以降の単語の先頭を大文字にしていましたが、　　パスカルケースでは最初の 1文字目も大文字を使います。　　キャメルケースに似ているのでアッパーキャメルケースとも呼ばれます。　　【例】PhoneNumber、UserScriptManager 　　プログラミング言語「 Pascal」はこの記法で記述するためその名から来ています。　　パスカルケースはクラス名に使われます。スネークケース　　単語を＿(アンダースコア)で連結し、全てを小文字か大文字で書いたもの。　　小文字だけで書いたものをスネークケース、大文字だけで書いたものを　　アッパースネークケースと呼び分けたりもします。　　【例】 USER_ID、LINE_ACCESS_TOKEN 　　アンダースコア記法とも呼ばれます。　　グローバル定数やプロパティストアのキーなど、中身を変更しないものに使用します。

Slide 37

Slide 37 text

グローバル定数…？クラス名…？プロパティストアのキー…？よく分からない単語がゾロゾロと出てきましたね。プログラミングではよく分からない単語ばかり出てきますが、徐々に覚えていけますので、一気に覚えようとはせず、必要に応じて無理せず進んでいきましょう。 JavaScriptでは大文字・小文字が区別されますので、記法を定めることで、変数名などの入力ミスを防ぐ目的があります。ポイントを意識しながら、どのような名称にすれば読みやすいスクリプトになるのかを考えてみましょう。コツコツ

Slide 38

Slide 38 text

ところで変数には「データ型」というものが存在します。中身に応じて型が存在していて、その型によって計算処理が可能であったり不可能であったりします。 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] など

Slide 39

Slide 39 text

言語によっては、一度宣言したデータ型には型に応じた中身しか入れることはできませんが、 (静的型付け) JavaScriptは動的型付けといい、中身に応じて型を変更してくれる言語なので、 GASも同様ですが、特に意識しなくても大丈夫です。しかしながら、中身を調べて型に応じたプログラミングは基本になりますので、ついでに覚えておきましょう。中身を調べる時は type演算子を使用します。 console.log(typeof [変数の名前]); ためしに、「age」の型を調べてみましょう。 console.log(typeof age); 「number」と出力されました。これは「数値型」であるという意味です。他に文字列の場合は string、真偽値の場合はboolean、配列型はarray、オブジェクト型はobjectと出力されます。(nullやundefinedはそのまま返るだけですので省きます )

Slide 40

Slide 40 text

配列型について変数は1つにつき1つの中身しか入れられませんが、配列型の場合は1つの型にいくつでも中身を連結できます。イメージとしてはロッカーです。ひとつのロッカー(変数)にはひとつしか物が入りませんが、ロッカー自体を無限に増やすことができます。そのロッカーはカテゴリとしてまとめられている、というイメージです。 0 1 2 3 4 りんごぶどうみかんさくらんぼレモン・・・・・配列型は0から順にインデックス (見出し)が付いて格納されます。配列型「fruits」　　　 (名前)

Slide 41

Slide 41 text

配列型の宣言と代入は以下の通りに行います。 let fruits = ['りんご','ぶどう','みかん','さくらんぼ','レモン']; letは新しい変数を宣言＆代入を行うものですが、 [](カッコ)を使い、中身を,(カンマ)で区切ることで要素を増やしていきます。要素はシングルクォーテーションやダブルクォーテーションで囲うことで文字列も代入できます。中身を取り出して表示するには次のように記述します。 console.log(fruits[0]); fruitsの配列型のインデックス 0番を取り出して表示しました。このように、インデックス番号を指定して取り出して使います。中身を全て見たい時はインデックス番号を使わずそのまま配列型の名前のみを記述します。

Slide 42

Slide 42 text

letを使って配列型が宣言できたということは、定数の配列型も存在するということですね。定数の宣言と代入は constで行いました。ということは、 const NUMBERS = [0,10,20,30,40,50]; で、同じように定数の配列型を作成することも可能です。定数だから格納した要素の変更は出来ない …と思われるかもしれませんが、実は可能です。要素の変更をする時は NUMBERS[0] = 60; この状態を解説すると、 0番目を60という中身で置き換える、という意味になります。定数は「再代入を禁止する」という動きを持つものなので、配列型の場合は「要素の変更」という動きならば可能です。再代入とは宣言と代入をした時のような NUMBERS = [60,70,80,90,100]というようなやり方を 2回目以降は受け付けないという意味になります。 (ちなみに要素の追加はできます )

Slide 43

Slide 43 text

letで作成した配列型も、要素の追加や変更が出来ます。配列型に関してはconstで作成してもletで作成してもそこまで違いはありません。さて、今使用した配列型は「一次元配列」と呼ばれるものです。 (よく使用するので、「配列」のみでも一次元配列を指しますが ) JavaScriptでは「二次元配列」というものが扱えます。横に連なったのを一次元配列とするなら、縦にも連なる要素が増えるというイメージです。つまりは、スプレッドシートのセルのようなイメージですね。ただし、インデックスはどちらも 0から始まります。(スプレッドシートは行は 1から、列はAから) ちなみに三次元以上の配列も扱えますが、初心者のうちは手を出さないでおきましょう。 0 1 2 0 1 2

Slide 44

Slide 44 text

GASは基本的にスプレッドシートに紐づいていますので、様々なデータを二次元配列でよく取り扱います。一次元配列だけではなく、二次元配列についても用法をしっかり学んでおきましょう。二次元配列の宣言には、 [](カッコ)内に[]を使うことで表現します。 10 20 30 40 50 60 70 80 90 上のような構造にしたい場合、次のような宣言と代入を行います。 const list = [[10,20,30],[40,50,60],[70,80,90]]; 順番的にはなんとなく把握したんじゃないでしょうか？左上の【0】から始まり右に要素を ,(カンマ)区切りで追加、 [](カッコ)を更に,(カンマ)区切りで下の段に移動 …を繰り返して要素を増やしています。そして[]を[]で囲って二次元配列としています。今回はこのような短い文章となっていますが、要素によっては長くなってきますよね。その時は適宜改行し、読みやすくしてみましょう。

Slide 45

Slide 45 text

また、要素を後から追加したい、変更したいという時には次のように記述します。 ※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

Slide 46

Slide 46 text

オブジェクト型について配列型は、要素を0から順番にして格納していきました。オブジェクト型は、このインデックス (0から付いた順番)を任意のもの(キー)にして要素を格納します。たとえば、果物の名前をキーにして、中身は価格を格納しておきたいとします。表記法は const fruits_price = {’りんご’:398, ’ぶどう’:580, ’みかん’:298}; ：(コロン)を挟んで左側にキーを、右側に要素を記述します。文字列の場合はシングルクォーテーションかダブルクォーテーションで囲みます。区切りは,(カンマ)です。取り出して調べる時は以下の通り。 console.log(fruits_price[’りんご’]);

Slide 47

Slide 47 text

さきほどのロッカーの例を持ち出してみると、オブジェクト型のロッカーではインデックスの代わりに「プロパティ」をキーとしています。りんごぶどうみかんさくらんぼレモン配列型「fruits」　　　 (名前) 398 580 298 780 200 プロパティ (キー) 要素(中身) インデックスのような「順番」という概念がありませんので、一番取り扱いやすいものかもしれません。要素の追加は以下のように行います。 fruits_price['マンゴー'] = 2980; オブジェクトの名前[’プロパティ’] = 要素　という形です。

Slide 48

Slide 48 text

配列型にもオブジェクト型にも「分割代入」・「スプレッド構文」という便利なものがあります。基礎的なものであり、使いこなすと非常に応用の利くものではありますが、次回のイベントで使うことはありませんので混乱を避けるためにも今回は省略させていただきます。

Slide 49

Slide 49 text

ちょっと一息

Slide 50

Slide 50 text

少しだけおさらいします！ここまでやってきたことは・GASはJavaScriptをベースとして作られた開発ツールであり言語・GASはスタンドアロンスクリプトとコンテナバインドスクリプトの 2種類ある・console.log()　で出力・変数の宣言と代入について・表記法(キャメル・パスカル・スネーク )について・letとconstの違いについて(変数と定数) ・配列型とオブジェクト型についてでした。

Slide 51

Slide 51 text

ここまでで、計算方法については軽くしか触れていませんでしたので、改めて演算子についてきちんと触れておきます。算術演算子と代入演算子について算術演算子というのは計算に使うための演算子です。すなわち、「+(加算)」「-(減算)」「×(乗算)」「÷(除算)」そして「剰余」と、「べき乗」。これらを表すのに使う演算子は次の通りです。

Slide 52

Slide 52 text

演算子説明例 + 加算、または文字列の連結 1+1、int(変数)+1、’福岡’+’太郎’　など - 減算、または符号の反転 10-1、 -x　など * 乗算 10*10 (答えは100) / 除算 10/2 (答えは5) % 剰余 10%3 (答えは1) ** べき乗 5**5 (答えは3125) 算術演算子まずは基本的な演算子。剰余は割ったあまりを求めるものです。べき乗は 5 と表されるようなものです。 5

Slide 53

Slide 53 text

代入演算子説明例 = 左辺の変数に値を代入 x=5(5という数がxに代入される) += 左辺の値に右辺の値を加算して代入 x += 5(結果は10) -= 左辺の値から右辺の値を減算して代入 x -= 5(結果は0) *= 左辺の値に右辺の値を乗算して代入 x *= 5(結果は25) /= 左辺の値を右辺の値で除算した値を代入 x /= 5(結果は1) %= 左辺の値を右辺の値で除算した剰余を代入 x %= 2(結果は1) **= 左辺の値を右辺の値でべき乗して代入 x **= 5(結果は3125) 代入演算子はconstで作成した定数には使えないことに注意が必要です。 (constは再代入を禁止する定数を作成する ) 代入演算子

Slide 54

Slide 54 text

それではここから、プログラムを制御するための基本的な構文を学びます。今回取り上げるのは「 if文」と「for文」。プログラムには「もし～なら」という、条件によっては分岐するという組み込みが基本です。この、「もし～なら」というのが if文。プログラムは、基本的には、 1度きりのものです。しかし繰り返し何度もやってもらうことは可能です。その繰り返し処理に使うのが for文。 for文は「〇回繰り返す」という制御を行う構文です。その中で、「もしボタンが押されたなら」や、「もし日付が偶数なら」など、何かの条件によっては処理を変えるというプログラムを組む時には、 for文とif文を組み合わせて制御していくことになります。その他にも、while文、break文など、制御構文は多岐に渡りますが、今回のイベントで使う if文を集中的に学びます。

Slide 55

Slide 55 text

if文(条件分岐)について処理構造としては図の通り。プログラムは上から順に処理していきますので、途中で条件によって分岐させたい時は if文を使って、true(真)、false(偽)の結果によって処理を変えていきます。構文は if(条件式){ [条件によって実行させたい内容] } という書き方をします。実際にやってみましょう。条件式 true false

Slide 56

Slide 56 text

プログラムするのは・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 = [];

Slide 57

Slide 57 text

for文は for (初期化式, 条件式, 増減式){ [条件式がtrueの間実行される内容] } という書き方をします。つまり、こういう記述になります。 for (let i=1, i <= 100, i++){ list.push(i); } 初期化式条件式処理増減式 true false letで作成した変数は「カウンタ変数」と呼びます。 for文で繰り返す数を制御するための変数なのでそう呼ばれています。 iじゃなくても何でもいいのですが、ここは「 int」のiを使用しています。

Slide 58

Slide 58 text

構文の中に見慣れない式がありましたね。ここで、条件式と比較演算子、論理演算子について触れておきます。まずは条件式。 for (let i=1, i <= 100, i++){ list.push(i); } これが条件式。条件式は、左辺の数字と右辺の数字を比較演算子で計算し、 true(真)の値になっている間は中身を実行するというものであり、条件が当てはまらなくなれば false(偽)の値を返し、実行しないものとなっています。比較演算子は次の通り。

Slide 59

Slide 59 text

比較演算子説明例 == 左辺と右辺が等しければ 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) 以上、以下に気を付けていれば、使っていくうちに覚えられると思います。

Slide 60

Slide 60 text

また、論理演算子というものもあります。これは、「かつ」「または」「でなければ」というように、組み合わせによって条件を細分化したい時に使用します。たとえば、・10以上で、かつ20以下である(10～20の数をtrueとする) ・10か、または20である(10と20をtrueとする) ・10と20ではないこと(10と20をfalseとする) というような使用例です。論理演算子は以下の通り。論理演算子説明例 && 左辺と右辺がいずれも trueならばtrue 10 === 10 && 5 === 5 (true) 10 === 11 && 5 === 5 (false) || 左辺と右辺のどちらかが trueならばtrue 10 === 11 || 5 === 5 (true) 10 === 11 || 5 === 6 (false) ! 条件式の真偽値を反転させる !(10 === 10) (false) !(11 === 10) (true)

Slide 61

Slide 61 text

それから、for文の中にもう1つ見慣れないものがありましたね。増減式の中の「++」です。これはインクリメント演算子といい、演算対象となる変数の値を変更する特性があります。ちなみに「--」でデクリメント演算子と呼びます。たとえば、「x」という変数に1という数が入っていたとします。ここに x--　や　x++　で直接値に働きかけ、変数の値を増減します。また、--x　や、　++xという書き方もします。変数の前に置くか後ろに置くかで結果が少し違ってきますので、用法に注意が必要です。 for (let i=1, i <= 100, i++){ list.push(i); }

Slide 62

Slide 62 text

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文を読み解くとこうなります。

Slide 63

Slide 63 text

この文章では「最初に 1を入れたiの中身が100になるまで繰り返す」なので、 100回繰り返す、という読み解き方ができます。この100回繰り返す中で、「もしもiに入れた数が3の倍数だった時」、という条件分岐 (if文)を組み込んでみます。 if文の構造をもう一度。 if(条件式){ [条件によって実行させたい内容] } でした。という事は if(i % 3 == 0){ } という書き方になります。この条件式では、iに入った数を3で割った時の余りが 0であるかどうかで3の倍数であることを振り分けています。 ==は左辺と右辺が一致するかどうか、という比較演算子です。

Slide 64

Slide 64 text

構文を組み合わせる時に考えるのは優先順位です。プログラムは必ず上から順に読み込んで実行します。「もしも変数iの中に入った数が3の倍数の時は追加しない」「変数iを使って100回繰り返す」「listに変数iに入った数を追加していく」順序よく組み立て直してみましょう。組み立て方は for文がまず先(繰り返さないと1度で終わってしまうため ) その中身は「listに変数iに入った数を追加していく」条件分岐はいつしますか？ (もしも変数iの中に入った数が3の倍数の時は追加しない ) 変数iに入った時点で、3の倍数かどうかを調べて、倍数であれば追加したくない、わけですよね。そうなると中身の「追加する」よりは先になります。

Slide 65

Slide 65 text

なので、 ①for文 ②if文で分岐して条件に当てはまれば ③pushメソッドで追加という順番です。なので、先に記述したはずの for (let i=1, i <= 100, i++){ list.push(i); } の中にif文を組み込みます。組み込むのはココ

Slide 66

Slide 66 text

また、配列型listに、ちゃんと思ったように格納できているか確認するためにはコンソールへの表示が必要です。 for文から抜けた後はlistの中身を表示してみましょう。 console.log(list); for文の外で、myFunctionの中です。

Slide 67

Slide 67 text

ここまでのコードをまとめると、以下のようになっていると思います。なっていなければ今修正してください。 function myFunction() { let list = []; for (let i = 1; i <= 100; i++){ if(i % 3 == 0){ } list.push(i); } console.log(list); } しかし、このコードは不完全です。何故なら、if文の中身がないからです。

Slide 68

Slide 68 text

実行させたい内容は、「 listの末尾に何も追加しない (飛ばす)」でした。さて？ if文では、「もし、3の倍数の時は」という分岐でした。 3の倍数でなければlistに追加しますが、3の倍数の時は追加したくありません。しかし、「追加しない」というメソッドはありません。何もしたくない、という時は { } 内を空っぽ(そのまま)にする、という方法もあります。しかし、今のようなif文だけでは3の倍数であっても普通に追加してしまいます。何故なら、if文の外に「追加する」という文章があるから。中身がないので外に出て、外の指示に従っているだけなのです。つまり、指示の出し方が間違っているわけですね。

Slide 69

Slide 69 text

指示した通りにしか動かないのですから、指示を間違えないようにしないといけません。くどいようですが、やりたいことは「1から100まで、3の倍数を抜いた数を listに追加する」です。そして、今の記述では「変数iを作成(初期化)して、100になるまで、値を出力しては 1つずつ加算する値を出力した時、もしそれが 3の倍数なら、(空っぽ　だから無視) それをlistに追加する」という指示です。指示しなおすとしたら、値を出力した時、3の倍数でなければ追加するというやり方が思い浮かびますね。

Slide 70

Slide 70 text

思いついた方法ですが、やり方はいくつかあります。まずは、if文の中の条件式のやり方を変える。 i % 3 == 0 というのは、変数iの中の数字を3で割ったあまりが0かどうか、という判断をtrueかfalseで見分ける式です。あまりが0であれば3の倍数というものです。左右の数を比べて合致しなければ「 true」を返す比較演算子がありましたね。これを使った i % 3 != 0 という式。これは、iを3で割ったあまりが0でなければ、という式になります。欲しかったのはこれです。しかし、他にも方法はあります。それがif else文です。 if文には分岐する時、必ずしも答えが合うものがあるわけではありません。 1の条件が当てはまるかだけではなく、そうではないなら、というもの。そうではないなら、だけで分かれるとしたら 2通りの答えになりますね。そうではないなら、更に 2の条件が当てはまるか調べることもできるようになります。

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

プログラムというのは思い通りに動けば問題ないので、答えは1つだけ！というような固定はされていません。万国共通であるのは「コードの可読性に優れること」だけです。誰が読んでも分かりやすいコードを心がけたいですね。

Slide 73

Slide 73 text

さて、本題に戻ります。さきほどの「3で割ったあまりが0でなければ」という条件式を用いて、「1から100までの数の中で3の倍数を除く数を配列型に格納する」を記述してみます。 function myFunction() { let list = []; for (let i = 1; i <= 100; i++) { if (i % 3 != 0) { list.push(i); } } console.log(list); } 実行して、結果を確認してください。

Slide 74

Slide 74 text

それでは、仕上げとして、当たりと外れが入ったくじのプログラムを作ってみましょう。さっき記述したスクリプトを改造してみます。さきほどは、「1から100までの中で3の倍数を除いた数を listに格納する」でした。ここで、listの中に入ったのは67個の要素です。入らなかった要素(3の倍数)は計33個です。 67個は外れ、33個は当たりに書き直して、全てをlistに格納し、そこからランダムで引いてみるというスクリプトを組んでみます。

Slide 75

Slide 75 text

まずは改造。もしもカウンタ変数が 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(’ハズレ’); に書き換えます。文字列なのでシングルクォーテーションを忘れずに！

Slide 76

Slide 76 text

次に、今のままでは「 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); }

Slide 77

Slide 77 text

書き換えたら、実行を押して結果を確認してみます。大丈夫なら、次のステップ。ランダムでどれかを引き当てます。配列型の中からランダムで取り出すにはランダム関数を用います。まずはランダムな数を何か表示してみましょう。その前に、今のままだと表示するための実行で listの作成まで行ってしまうので、一旦非表示にします。非表示のやり方はコメントアウトと呼ばれます。自分で書いたスクリプトが何をしているのかをメモとして残しておく使い方が主ですが、一時的にスクリプトを無効化したい時にも使います。 1行のみの場合は先頭に //を付けるだけの簡単なものですが、数行にわたる場合は面倒ですね。そんな時は、 /*が先頭についたものから */が先頭に付いたものまで無効化するやり方の方が簡単です。次のようにコメントアウトしてみてください。

Slide 78

Slide 78 text

list生成は一旦お休みしてもらいます。 (console.log(list)は残しておきます)

Slide 79

Slide 79 text

コメントアウトすると全体はこんな感じです。

Slide 80

Slide 80 text

今度は、外にあるconsole.logを使って、ランダムな数字を表示してみます。ランダムに数字を生成するには Math.randomメソッドを使用します。 console.log(list); を console.log(Math.random()); と書き換え、実行してみてください。このような結果が返ってきたでしょうか？

Slide 81

Slide 81 text

Math.randomメソッドは0から1未満の小数点の中から乱数を生成します。しかしながら、listの中にあるのは100個の要素なので、欲しいのは1から100までを数字で引き出せるインデックス番号です。インデックス番号は0から99まで存在しているので、欲しいのは 0から99までの数字の生成です。そういう時に使うのが Math.floorです。 floor関数は小数点以下を切り捨てする動きを持ちます。しかし、random関数はそのままでは 0～1未満の小数点を生成しますので、こうします。 console.log(Math.floor(Math.random()*100)); もう一度実行して確認してください。 0から99の間の数字が返ってくれば成功です。 Math.floorは小数点切り捨てのため、 100まで生成とすると「0～99」までの数を返します。

Slide 82

Slide 82 text

今のスクリプトでは、ただ乱数を生成して表示しただけですので、くじを引くための「引換券」にしないといけません。引換番号を入れるための変数を作成し、生成した乱数をここに保存することで「引換券」とします。ということで、console.logで表示する前に、変数を宣言してそこに生成した乱数を代入します。 kuji = (Math.floor(Math.random()*100)); これで、「kuji」という変数に生成した乱数が代入されました。これだけではまだ番号が入っているだけなので、 console.logで表示する時に listのインデックス番号として利用します。さきほど残しておいた console.log(list[kuji]); に書き換えてください。書き換えたら実行してみましょう。当たりかハズレか、表示されたでしょうか？ただ、このままではちょっと味気ないので、文章を足してみましょう。 console.log(Math.floor(Math.random()*100));　を

Slide 83

Slide 83 text

console.log(list[kuji]); これを、 console.log(’くじの結果：’, list[kuji]); と書き加えてみます。これで実行してみてください。結果はどうでしたか？

Slide 84

Slide 84 text

いかがでしたか？今日はGASの基本の一部を履修しました。明日はfor文、if文を利用して、LINEDevelopersAPIと連携して LINEのチャットボットを作成します！明日は、LINEアカウントが必須になりますので、 LINEアカウントが紐づいたスマートフォンを必ずお持ちください。お疲れ様でした！明日もお待ちしています！