【GAS入門】感覚で分かる！第３回初めての Google Apps Script

f:id:tabemi:20210603220011j:plain

どうも、たべみです。

今回は、GAS入門コースの第3回目です。

前回は、GASでスプレッドシートを扱う際の基本の3ステップのうち、
2つ目の「値を編集する」前段階として、値のアクセス方法についてお伝えしました。

基本の3ステップ

シートの値を取る
値を編集する
シートに値を戻す

今回は満を持して第2ステップである「値を編集する」を解説していきます。

前回の記事は、こちらです。

tabemi.hatenablog.com

1．前回までの復習

f:id:tabemi:20210602114433p:plain — Google スプレッドシートにあ~な行を書いた

現在スプレッドシートには、あ~な行のあいうえお表が作成してあり、プログラムで取得し、それを cosole.log(); で出力させました。

前回までのコード

function myFunction() {

  const ss = SpreadsheetApp.getActiveSpreadsheet(); 
  const sheet = ss.getSheets()[0]; 
  const values = sheet.getDataRange().getValues();
 
  console.log(values);
  console.log(values[1][3]); 
  console.log(values[1]); 
  console.log(values[3][4]); 
}

f:id:tabemi:20210602125901p:plain — 前回のログ出力

2次元配列の中身

values	0列目	1列目	2列目	3列目	4列目
0行目	あ行	か行	さ行	た行	な行
1行目	あ	か	さ	た	な
2行目	い	き	し	ち	に
3行目	う	く	す	つ	ぬ
4行目	え	け	せ	て	ね
5行目	お	こ	そ	と	の

2．値を編集する

前回、値を編集するには、2次元配列を操作する知識が必要だとお伝えしました。

今回の入門コースでは、あくまでGASでスプレッドシートを自動化する際の考え方を解説する記事ですので、深入りはしません。

ご了承ください。

とはいっても、何も操作しないのは芸がないので、「複雑ではない値の変更」をやっていきます。

2-1．値を変更する

では、例として0列目にあるすべての文字の語尾に (´∀｀) を追加してみましょう。

values	0列目	1列目	2列目	3列目	4列目
0行目	あ行	か行	さ行	た行	な行
1行目	あ	か	さ	た	な
2行目	い	き	し	ち	に
3行目	う	く	す	つ	ぬ
4行目	え	け	せ	て	ね
5行目	お	こ	そ	と	の

まずは、下のコードの通りに記述してください。

//で始まるコメントの写しは不要です。

function myFunction() {

  //ここからシートの全ての値を取得するテンプレ
  const ss = SpreadsheetApp.getActiveSpreadsheet(); //スプレッドシートを取得する
  const sheet = ss.getSheets()[0]; //一番右にあるシートを取得する
  const values = sheet.getDataRange().getValues();//シートのすべての値を取得する
  //ここまでがおまじない
  //2次元配列というデータの形でシートの値が values として取得できた。

  //console.log( ?? )という形で、
  //データの中身を関数実行時に画面下部のウィンドウで見ること（出力）ができる

  console.log(values);
  console.log(values[1][3]); 
  console.log(values[1]); 
  console.log(values[3][4]); 
  
  //ここから値の変更
  console.log('ここから繰り返し');

  //繰り返しテンプレート
  //for (let i = 0;  i < values.length; i++){
    //console.log(values[i][0]) => 0列目を繰り返し
    //処理内容
  //}
  for (let i = 0 ;  i < values.length; i++){
    console.log(values[i][0]) // => 0列目を繰り返し
    values[i][0] = values[i][0] +"(´∀｀)";
  }

  console.log('最後の出力↓');
  console.log(values);
  
}

2-2．ログを確認する

▶実行し、ログを確認してみましょう！

するとログの一番最後の行の console.log(valeus) の出力結果に注目すると0列目に絵文字が追加されています！

f:id:tabemi:20210603210928p:plain

//2次元配列を縦に繰り返すときのテンプレート
for (let i = 0 ;  i < values.length; i++){
  console.log(values[i][0]) // => 0列目を繰り返し
  values[i][0] = values[i][0] +"(´∀｀)";
}

ログをよく見ると、あ行、あ、い、う、え、お、と2次元配列の0列目が出力されていることも分かります。

console.log(); の数と出力の数があっていないじゃないか！と思われた方は鋭いです。

確かに「ここから繰り返し」から「最後の出力↓」までに、合計6つ出力があるにもかかわらず、コード上では1つの console.log(); しかありません。

2-3．繰り返しのテンプレート

真相は「1つのcosole.log(); が6回実行されている」ということです。

もう少し抽象的に言うと、
「同様の処理がvaluesの行数分だけ繰り返されている」ということができます。

同様の処理をvaluesの行数分だけ繰り返すためには、下に示すようにコード書き、必要に応じて処理を書き換えます。

処理を書き換える部分以外は、もはやテンプレートといっても過言ではありません。

//2次元配列を縦に繰り返すときのテンプレート
for (let i = 0 ;  i < values.length; i++){ //ここから
  console.log(values[i][0]) // => 0列目を繰り返し
  //処理を書き換える
  values[i][0] = values[i][0] +"(´∀｀)";

  //ここまで処理を書き換える
} //ここまでが繰り返し処理

ソースコードをみて、なんか難しいこと書いてある！と思われた方、好奇心が素晴らしいです。

しかし、ここは怠慢になりましょう。

おそらく学び始めの方なら、
とりあえず使えた=>少し慣れてきた。カスタマイズしたい=>調べる。
という段階を経るのではないでしょうか。

そのため今回は、
知識として「forは繰り返しの処理」という一点のみ伝えます。

そして「同様の処理をvaluesの行数分だけ繰り返す」には、上に示したテンプレートを使用しましょう。

//頭の中はこのくらいでOKです。

for(なんとかかんとか){
  //繰り返せるんだ！！
}

2-4．繰り返しの中身

では、どのように処理がなされているのか、繰り返しの中身を追っていきましょう。

//0回目
console.log(values[i][0]) // => あ行
values[i][0] = values[i][0] +"(´∀｀)";

cosole.log(); はもうみなさんご存じですね。ログを出力します。
一番初めの出力は、ログを確認すると間違いなく「あ行」であるようです。

次に、console.log(); の下のプログラムの意味をお伝えします。

values[i][0] = values[i][0] +"(´∀｀)"; //  これは何？

「変数」と同じように、
イコールのあるプログラムは、イコールを挟んで右辺の処理結果が、左辺に代入されます。

これを一番初めの処理を例に具体的に言い換えると、
「あ行を出力するvalues[i][0]の値は、あ行と (´∀｀) を足したもの」ということができます。

//左辺の値は、values[i][0]と絵文字を足したもの
values[i][0] = values[i][0] +"(´∀｀)";

そしてこの処理をすることによって、 あ行の語尾に (´∀｀) が追加されます。

試しに下のように書き加えて出力してみましょう！

//0回目
console.log(values[i][0]) // => あ行
values[i][0] = values[i][0] +"(´∀｀)";
console.log(values[i][0]); // => あ行(´∀｀)

確かに、右辺の結果が左辺に代入されたようです！

その他、一番初めの処理に続く処理でも同様です！

f:id:tabemi:20210603215708p:plain — console.log(); を追加した後の出力結果

ログで見られる通り、あ行(´∀｀) の後、 console.log(values[i][0]); は「あ」を出力してます。そして今度は、あと (´∀｀) を足し、、、と繰り返されていくのです！

なんとなくもやもやする、、という方、ぜひ追加したconsole.log(values[i][0]; の下に次のコードを追加してみてください。

console.log(values[i][0]) // => あ行
values[i][0] = values[i][0] +"(´∀｀)";
console.log(values[i][0]); 
console.log( i ); //付け加える

理解のきっかけになると思います！

以上が、今回の説明となります。
2次元配列の操作、つまり2番目のステップである、「値を編集する」についてお伝えしました。

2-6．ざっと復習

for は繰り返し処理。
下のように書くと、列数だけ繰り返し処理ができる。

//2次元配列を縦に繰り返すときのテンプレート
for (let i = 0 ;  i < values.length; i++){ //ここから
  console.log(values[i][0]) // => 0列目を繰り返し
  values[i][0] = values[i][0] +"(´∀｀)";

} //ここまでが繰り返し処理

詳しくは、2次元配列の知識となります。

さらに解説したいところですが、また別の機会に譲るとします。

3．最後に

今回は、2次元配列 values の値を編集しました。
そしてそれは、2次元配列の操作は for を使って繰り返し処理をし実現したのでした。

値を取得した直後↓

values	0列目	1列目	2列目	3列目	4列目
0行目	あ行	か行	さ行	た行	な行
1行目	あ	か	さ	た	な
2行目	い	き	し	ち	に
3行目	う	く	す	つ	ぬ
4行目	え	け	せ	て	ね
5行目	お	こ	そ	と	の

値を編集した後↓

values	0列目	1列目	2列目	3列目	4列目
0行目	あ行(´∀｀)	か行	さ行	た行	な行
1行目	あ(´∀｀)	か	さ	た	な
2行目	い(´∀｀)	き	し	ち	に
3行目	う(´∀｀)	く	す	つ	ぬ
4行目	え(´∀｀)	け	せ	て	ね
5行目	お(´∀｀)	こ	そ	と	の