【GAS】初心者がGASとFormsでお小遣い帳を作ってみた

最近Googleスプレッドシートを使うことが増えてきたので、こちらでもいろいろやりたい。

というわけでGoogle Apps Script（GAS）を勉強してみることにしました。

Google Apps Script（GAS）についてざっくり

Googleスプレッドシートでマクロっぽいことをしたり、関数作ったりができるものみたいです。

GASはJavaScriptがベースになっているそうです。

作りながらだとこれをやりたいあれをやりたいで、調べながら尚且つ実践しながら進められるので習得が早い・・・と思っているので実戦形式で勉強します。

調べるといろんな方が情報発信してくれているのでありがたいです！

だいぶ前にPowerAppsで情報なさ過ぎたときとか泣いた。あとKotlinも情報が少ない気がする（そして投げ出し気味）

リファレンスだけがお供じゃ私は無理だ・・・

GASを使用してお小遣い帳を作成する

目標が無いと辛い人なので、今回はお小遣い帳を作成してみます。

だいぶ前にFormsオンリーで実践しようとしたことがありますが、思ったようにできずやめました（諦め早い）

今回はGASも合わせてどこまでできるかやってみます。

実践を通して基本的な処理ができるようになりたい（データの格納したり移動したりなどなど）と思っています。

ほんとに少しですがJavaScriptも勉強したことはあるのでイメージはつかみやすい、といいなと祈ってる

作成の流れ

以前アプリで使ったお小遣い帳や、テンプレートのイメージなんかを参考にざっくり目標イメージを考えて進めることにしました。

作りたい「お小遣い帳」のイメージ

１．入力画面（Forms）

２．収支一覧データベース（Spreadsheet）

３．データまとめ、グラフ表示（Spreadsheet）

というわけで、こんな感じでシートやツールを分けて作ろうかなと思っています。

データまとめページは正直あまりイメージがまとまっていませんが、Googleスプレッドシートのテンプレートにある「月間予算」を参考に、自分好みに作れたらなと思っています。

まずはFormsで入力画面を作る（GAS関係ない）

こちらはGASとは関係ないのでざっくりです。

Formsは直感的にできるので、まずは深く考えずサクサクいきます。

支出、入金を選択後に、それぞれの分類項目を選択してから金額入力へ移行するような流れで作成します。

ざっくり階層図

Forms作成のポイント

セクションを設定しないと「回答に応じて～」の設定ができないので、セクションを作って質問を作ります。

金額セクションはどっちも同じなので共通にしました。

ボタンは何でもいいのですが、押しやすいのでラジオボタンを選択。金額入力は記述式（短文）です。

Forms作成画面

Formsで取得したデータをGASでデータベース化する

データベースっぽくないですが、テーブルで収支を分けます。

最終的に表示するまとめ画面で加工がしやすいようにここで整える感じです。

新しく「データベースシート」を追加してテーブルを作る

収支は分けて管理したいので別々にテーブルを作成します。

データベースっぽくするなら一つのテーブルにした方がすっきり使いやすそうですが、今回は参考にした月間予算ぽく作ってみます。

データベースシート（GAS実行前）

支出と収入それぞれのテーブルを作成しています。

GASでそれぞれにデータを追加していきます。

GAS使ってデータベースシートにデータをコピーする

ここからが今回の本題です。

GASを使用して元のデータを扱いやすくするためにデータシートにコピーします。

GASでやっていること

本来は新しいデータだけをコピーする方がいいと思いますが、今回は全データを毎回全部コピーする形にしました。

GASの詳細についてはいろんなサイト様を参考にしつつ、ごちゃごちゃ書いては消してをしながら作成しました。

練習なので極論動けばいい、で作成しているのでおかしなところも多いと思いますがせっかくなのでコードも載せます。

フォームデータシート

Formsで入力したデータの集計結果のシートです。

こちらはFormsの「回答」たぶの「スプレッドシートで表示」を選択すると自動で作成されます。

一度作成されると列の移動や削除は基本的にできません。

function CreateDataSheet() {
  const thisSpredsheet = SpreadsheetApp.getActiveSpreadsheet();               // アクティブなスプレッドシート
  const getDataSheet = thisSpredsheet.getSheetByName('フォームの回答 1');       // フォームデータのシート
  const setDataSheet = thisSpredsheet.getSheetByName('収支');                 // 出力用シート（データベース）
  let dateStr = "";                                 // 日付
  let balanceStr = "";                              // 収支
  let subjectCol = 0;                               // 分類の列（収支別）
  let subjectString = "";                           // 分類
  let amountNum = 0;                                // 金額
  let setLastRow = getDataSheet.getLastRow() + 1;   // 最終行
  var expensesArrStr = [];                          // 配列（支出）
  var incomeArrStr = [];                            // 配列（収入）

  // 最終行までループ
  for (let i = 2; i < setLastRow; i++) {
    // 日付
    dateStr = Utilities.formatDate(getDataSheet.getRange(i, 1).getValue(),'JST','yyyy/MM/dd');
    // 収支
    balanceStr = getDataSheet.getRange(i, 2).getValue();
    // 金額
    amountNum = getDataSheet.getRange(i, 5).getValue();

    // 配列の作成　※収支で分岐
    if (balanceStr == "支出") {
      // 分類の列（支出）
      subjectCol = 3;
      // 分類（支出）
      subjectString = getDataSheet.getRange(i, subjectCol).getValue();
      // 配列格納（支出）
      expensesArrStr.push([dateStr, balanceStr, subjectString, amountNum]);
    } else {
      // 分類の列（収入）
      subjectCol = 4;
      // 分類（収入）
      subjectString = getDataSheet.getRange(i, subjectCol).getValue();
      // 配列格納（収入）
      incomeArrStr.push([dateStr, balanceStr, subjectString, amountNum]);
    }
  }

  // 支出 配列出力
  setDataSheet.getRange(3,1,expensesArrStr.length,expensesArrStr[0].length).setValues(expensesArrStr);

  // 収入 配列出力
  setDataSheet.getRange(3,6,incomeArrStr.length,incomeArrStr[0].length).setValues(incomeArrStr);
}

微妙なエラーに悩まされたものの、初めてにしてはスムーズに作れました。

多分取得の際にテーブルデータまとめて取得した方が良いとか、そもそも最終行だけ取得して追加した方がいいとか改善の余地は山程あると思いますが、まずは練習なのでこれで進めます。

とりあえず私の環境ではエラーは出ませんでした。

実行するとデータベースシートにデータが反映されます

GAS実行後のデータベースシート

こんな感じで反映されます。

このままでも収支比較くらいにはなるかなと思いますが、量が増えたり、視認性の問題だったりで別途シートを設けて見やすくしたいと思います。

トリガーを使ってフォーム入力（送信）されたら自動で実行されるようにする

STEP

左側にあるメニューからトリガーを選択

STEP

右下のトリガーを追加をクリック

STEP

イベントの種類を「フォーム送信時」に設定

必要に応じて実行する関数なども変更が必要です。

今回はいらなそうだったのでイベントの種類のみ変更しています。

STEP

保存する

画面右下の保存をクリックします。

STEP

トリガーが追加されていたらOKです

Formsを送信してテストしてみる

Formsで実行してデータを送信してみます。

自動でデータベースシートにデータが反映されていたらOKです。

実行後のデータベースシートを使ってまとめシートを作成する

デザインセンスってなんだろう・・・・とりあえずグラフ入れてみました。

一応このシート一枚で大体の収支を把握できるように作りました。

収支まとめシート

使用した関数など

注意点としてはデータベースシートの内容を行削除（値だけ削除ならOK）すると関数の取得がおかしくなるので基本的に削除はしないこと。

削除する時は再度INDEXの取得先の設定をやり直す必要がある

やってみて気付いたGASの見落としやすい落とし穴

メソッド名は大文字小文字間違ってないか確認する

序盤にやらかしたのが「Logger」を「logger」と打っていてエラーになって進まなかった。

私の注意力が足りないだけかもだけど、以外と気付かない事もあるので共有です。

「setValue」は配列の出力時は「setValues」と複数形になるので注意

これも知ってる人には今更かもしれませんが、私は躓いたので共有です。

ちなみに配列の場合でも出力先を指定している「arrayList[0]」などとしているときは「setValue」で出力されます。

逆に複数形にしているとエラーになるので注意です。

保存は手動（設定による？）

設定によるかもしれませんが、自動保存になっていないと普通に消えます。

スプレッドシートが自動保存なので油断してたら書いたものが消えました（遠い目）

保存されていないときは名前の横に「保存されていません」と表示されます

まとめ

スプレッドシート＆Formsを利用した簡単なお小遣い帳の完成です。

実は一回小項目まで作ってややこしくなって作り直してます

実用性は微妙ですが、GASの練習としては良かったんじゃないかなと思います。

とりあえずデータの取得と、配列の使い方とかは何となくわかったので良かったです。まだまだ練習は必要ですが、焦らずまた何か作りながらやってみようと思います。

何か作りながらやると楽しいと思います。一応完成があるので切りもつきますしね。

やっている途中でスプレッドシートの拡張機能にある「App Sheet」の方も気になったので、こちらも機会があったらやってみたいなと思います。