スプレッドシート＆GASでHTMLのTableタグを書き出す

セル数の多いTableタグを複数書き出す必要ができたので、GASで自動化を行ったので備忘録として。
※こちらでは削除していますが、実際の利用ではあらかじめテーブルタグ等にはクラス名等を入れ、コピペで張り付けるだけにしています。
※2024/9/24時点のWindows環境では動いていましたが、必ず動くと保証するものではないことをご注意ください。

自動化シート制作手順

1. シートを2枚作り、1枚は HTML と名付ける。もう1枚は自由。ここでは便宜上 表シート とします
2. スプレッドシート上からGASを開きコードをコピペ
3. 表シートに図形描画機能を使ってGAS起動ボタンを設定
4. 表シートのA1セルから表を張り付け
5. GAS起動ボタンをクリックしてGASを起動
6. HTMLシートのA1に入力されたコードをダブルクリックしてセル内編集の状態にしてからすべて選択→コピペ
7. 強調表示など、細かい調整をして完成

GAS動作手順概略

1. 表の範囲を自動選択する
2. 表を二次元配列として格納する
3. 配列をfor …ofで取り出す
4. 1行目は見出し（'<th>）、それ以外は本文（'<td>）として繰り返しながら変数に書き加える
5. HTMLシートを表示してA1セルに作成したHTMLを書き込んで完了

実際のコード

function myFunction() {
  var tableHTML = '<table >\n';
  var i = 0;

  //アクティブなスプレッドシートのシートを取得する
  let mySheet = SpreadsheetApp.getActiveSheet();
  //選択されているアクティブなセルを取得する
  const scores = mySheet.getDataRange().getValues();

  //for...ofで配列からひとつずつ要素を取得
  for(let score of scores){
  i++;
  if ( i == 1){
    tableHTML = tableHTML + '<thead><tr>';
        for(let cell of score){
          tableHTML = tableHTML + '<th>' + cell + '</th>\n';
        }
     tableHTML = tableHTML + '</tr></thead>\n\n<tbody>'; 
  }else{    
   
    tableHTML = tableHTML + '<tr>'; 
      for(let cell of score){
          tableHTML = tableHTML + '<td>' + cell + '</td>\n';        
      }     
    tableHTML = tableHTML + '</tr>\n\n'; 
    }
  }
  
  tableHTML = tableHTML + '</tbody></table>';

  let sheet = SpreadsheetApp.getActive().getSheetByName('HTML');
  sheet.activate();
  sheet.getRange(1, 1).setValue(tableHTML);
}

シートの構成

• 表を作成するシート（シート名：自由）
• HTMLを書き出すシート（シー十名：HTML）

表を作成するシートにはGAS起動ボタンをセットして、アクティブなシートからHTMLを作る、という挙動にしています。

もっと良いやり方もあると思いますが、とりあえず今日ほしかったので、ひとまずは動けばいいの精神。

---

---