【GAS】GASとHTML間のデータ受け渡しが難しかった話

著者の簡単な経験

大学、大学院でJava,PHP,python,jsを触っていた。WEBシステムはjavaかphpでしか書いたことなかった。frameworkの経験はLaravelのみ。

何を実装したかった？

GASで個人ブースの簡単な予約管理WEBシステムを作りたかった。
予約一覧をスプレッドシートで管理してそれをユーザーにWEB経由で見せる的な構造にしたかった

何で苦労したか

スプレッドシートのデータをいい感じのHTMLで表す方法がわからん...！Laravel等のMVCフレームワークに慣れすぎてGASのよくわかんない構造が理解できていなかった。

どうやって解決したか

GASでHTMLタグを含む文字列を生成してHTMLに載せる
いやあ、パワープレイです。でも時間的に、自分の実力的にそうするしかなかった。
コード例はこんな感じです。（こんな関数を4つくらい書いた）

code.gs

/**-- シートをrowずつ読み込むんでTable要素を生成 --*/
function getReservationTable(sheetName){
 const sheet = spreadSheet.getSheetByName(sheetName);
 const all_data = sheet.getDataRange().getValues();
 let tableHtml="";
 let thead ="<thead>";

 for(var row = 0; row < 3; row++){
   if(row == 1){
     continue; //この行は表示したくない
   }
   thead += "<tr>"
   for(var column = 0; column < all_data[row].length; column++){
     thead += "<th>" + all_data[row][column] + "</th>";
   }
   thead += "</tr>"
 }
 thead += "</thead>"
 tableHtml += thead;

 let tbody = "<tbody>";
 for(var row = 3; row < all_data.length; row++){

   tbody += "<tr>";

   if(row == 3){
     tbody += "<th>" + all_data[row][0] + "</th>";
     tbody += "<th>" + all_data[row][1] + "</th>";
     continue;
   }
   
   for(var column = 0; column < 2; column++){
     tbody += "<th>" + all_data[row][column] + "</th>";
   }

   for(var column = 2;  column < all_data[row].length; column++){
     let available = all_data[row][column];
     if(available == ""){
       available = "⭕️";
     } else{
       available = "✕";
     }
     tbody += "<td>" + available + "</td>";
   }
   tbody += "</tr>"
 }
 tbody += "</tbody>";

 tableHtml += tbody;
 return tableHtml;
}

スプレッドシートで空白の箇所（つまり予約可能なとこ）を◯で表示したかった。
見出しとかも調整したかったから、考え抜いた結果が、これ。

結果

まあまあええ感じに出力できました

他にやり方あったのかなあ

とにかく締切が迫っておりましたので、急ぐしかなかった。。。
「こんな方法もある！」みたいなものがあればぜひご教示ください！

ありがとうございました！