非エンジニアのためのデジタルリテラシー/チュートリアル/Googleスプレッドシートに自分だけの独自機能を追加する/#3. スプレッドシートに複数行のデータを書き込む
チュートリアルリファレンス 用語集
チュートリアルリファレンス 用語集

#3. スプレッドシートに複数行のデータを書き込む

Updated
2022/2/4 0:41
Author
Jumpei IkegamiJumpei Ikegami
 
前回は、スプレッドシートの画面に独自のメニューボタンを追加しました。ここからは、そのボタンの機能を実装してみましょう。
ここからのチュートリアルでは、業務で使うサンプルの顧客データを生成するツールを作ってみましょう。
この記事では、スプレッドシートで範囲を扱う方法を学びながら、複数行のデータを書き込むプログラムを書いてみます。
‍

前提知識

この記事は次のチュートリアルの続きとなっています。
#2. スプレッドシートに独自のメニューボタンを追加する2022/1/30 3:102022/2/4 0:02
‍

作るもの

プログラム中で指定した行数だけ通し番号を振る機能を、独自メニューボタンに追加します。

体験すること

このチュートリアルによって、以下を体験します。
  • スプレッドシートで範囲を指定する
  • スプレッドシートで指定範囲のセルを一括で更新する
  • スプレッドシートで指定範囲のセルを一括で初期化する
‍

チュートリアルスタート！

ここからは、実際に手を動かしながら読み進めていきましょう。ただ読むだけよりも、実際に体験した方が内容を深く理解することができます。
‍

複数行のダミーデータを書き込んでみる

前回のチュートリアルの最後、Apps Scriptのプログラムは次のような状態でした。
JavaScript
 
独自メニューボタンクリック時の処理は、関数genTestDataの中で定義されています。これを書き換えて、最終的なアウトプットに近づけていきます。
ここで、一連のチュートリアルで目指すゴールとなる機能を明確にしておきましょう。
  • 目指す機能
    • 別のシートにある住所マスタからランダムに住所を取ってくる
    • 指定した行数分だけ、次のようなデータを生成する
      • 通し番号（No.）
      • 住所
 
スプレッドシートでは、Apps Scriptのプログラムからこうした複数行のデータ書き込みを一括で実行することができます。そのためには、JavaScriptで表形式のデータを表現する必要があります。具体的には、次のように配列が入れ子になったデータによって行と列のあるデータを表します。
JavaScript
 
このダミーデータでスプレッドシートを更新するために、関数genTestDataを次のように変更してみます。（関数setCustomMenuは消さないように注意してください）
JavaScript
 
プロジェクトを保存してから [テストデータ生成] ボタンを押してみると、複数行のダミーデータが挿入できることが確認できます。
 
プログラムを眺めると、sheetのgetRange()で範囲（range）を取得し、rangeのsetValues()でその範囲を表データで更新できることがわかります。
ちなみに範囲の指定方法はいくつかありますが、ここではスプレッドシートでよく見るA1:B3という記法で左上と右下のセルを指定する方法を使っています。
JavaScript
 

シート範囲指定の方法は2種類ある

先ほどは固定のダミーデータでシートを更新しましたが、実際には必要なサンプルデータの行数は時と場合によって異なります。指定した数に合わせた行数だけデータを出力できるようになると便利です。ここでは1列目の通し番号（No.）だけを任意の行数だけ出力できるようにしましょう。
ここで問題が1つあります。行数を可変にする場合、先ほど学んだA1:B3という範囲指定の方法は少し都合が悪いです。もっと数値だけを使って範囲指定できる汎用的な方法があるので、予め学んでおきましょう。
たとえば、下記の2つの範囲指定方法は同じ意味になります。
JavaScript
 
実際、Apps Scriptの関数genTestDataを次のように書き換えても全く同じ動作になります。特に、NUM_ROWとNUM_COLUMNを実際のデータサイズから動的に指定できるのが便利ですね。
JavaScript
 
次の手順で、本当に結果が変わらないか試しにやってみてください。
  • 上記の内容で関数genTestDataを書き換えて保存する
  • シートのデータを削除する
  • [テストデータ生成] ボタンを押す
 
ちなみに、このように処理の結果を変えずに中身の実装方法だけを変えるような操作のことを、「リファクタリング」と呼びます。
 

通し番号だけを指定した行数だけ出力する

いよいよ、ダミーデータから卒業して通し番号を指定した行数だけ自分で生成してみましょう。ここで作成するべきデータは、次の通りです。
JavaScript
 
実際にプログラムに落とし込んでみると、次の通りになります。実際に関数genTestDataを更新してテスト実行してみてください。
JavaScript
 
プログラムの重要なポイントは、次の通りです。
  • 変数DATA_COUNTの値を増やすと、出力される行数も増えます
  • 次の変数を使って、更新データを管理しています
    • 変数table
      • 更新で使う、表形式のデータ
      • 配列を要素に持つ配列
    • 変数row
      • 変数tableに追加する1行分のデータ
      • 各セルの値を要素に持つ配列
  • 配列の最後に要素を追加するときは、push()を使います
 
また、変数iを初期値Nから1ずつ増やしながら最大値Mまで繰り返し処理をする場合は、for文を使って次のように書きます。
JavaScript
 
こうしたJavaScriptの文法は慣れるまでは難しそうに見えますが、10回くらい使うと慣れます。
これで、通し番号を指定した行数だけ出力することに成功しました。
 

実行時に既存データを自動で削除する

ここまでで、今回の記事で実現したい機能は実装できました。最後に、1つだけ便利機能を追加しておきましょう。
現状のプログラムには、1つだけ不便なところがあります。それは、期待する結果を得るにはプログラム実行前に手動で既存データを消さなければいけない点です。たとえば変数NUM_ROWを1+3など少ない値に変更してから再実行しても、以前のデータが残っていると結果のレコード数は3行になりません。
次のように、プログラムを編集しましょう。
  • 関数clearTestDataを追加
  • 関数genTestDataの最初で関数clearTestDataを呼び出す
JavaScript
 
保存して再実行すると、色んなセルにゴミが紛れている場合であってもプログラムが予めお掃除をしてくれるようになります。
 

次のチュートリアル

#4. サンプルデータをランダムにpickする2022/1/30 5:492022/2/4 0:44