記事概要
前の記事で、Googles Appps Script (GAS) を利用してGooglスプレッドシートに読み書き可能な、テーブル形式のフォームのプログラムを作成しましたが、そのプログラムの解説をします。
目次
テーブル関連のHTMLタグ＜table＞＜tr＞＜th＞＜td＞
GoogleAppsScriptで扱うフォームは、「テンプレート」とよばれる一種のTHMLファイルです。テーブルの表現もHTMLのタグを書いて実装しますが、テーブルを表現するための４種類のタグを以下にご紹介します。
- <table>～</table>～の記述部がテーブルとなることを表す。
- <tr>～</tr>tableタグの中で使用。～部が１行分（レコード）表す。
- <th>～</th>trタグの中で使用。～部が１個の見出し（ヘッダ）表す。
- <td>～</td>trタグの中で使用。～部が１個のデータ表す。
実際のHTMLコードは例えば以下となります。
＜table＞
<tr＞
＜th＞見出し1＜/th＞
＜th＞見出し2＜/th＞
＜th＞見出し3＜/th＞
＜/tr＞
＜tr＞
＜th＞見出しA＜/th＞
＜td＞データA1＜/td＞
＜td＞データA2＜/td＞
＜/tr＞
＜tr＞
＜th＞見出しB＜/th＞
＜td＞データB1＜/td＞
＜td＞データB2＜/td＞
＜/tr＞
＜/table＞
<tr＞
＜th＞見出し1＜/th＞
＜th＞見出し2＜/th＞
＜th＞見出し3＜/th＞
＜/tr＞
＜tr＞
＜th＞見出しA＜/th＞
＜td＞データA1＜/td＞
＜td＞データA2＜/td＞
＜/tr＞
＜tr＞
＜th＞見出しB＜/th＞
＜td＞データB1＜/td＞
＜td＞データB2＜/td＞
＜/tr＞
＜/table＞
上記のHTMLはブラウザでは以下の様に見えます。
こんな風にしてテーブルはHTMLコードで表現されるのですが、１行ずつの＜ｔｒ＞タグの中に、子要素として各セルを表す＜ｔｄ＞や＜ｔｈ＞タグを表記するので、ごくシンプルな表でもコードは結構に煩雑になります。
テンプレートはHTMLコードで表現するのですが、大ききな表だとタグの入れ子が複雑で書くのが大変になります。何とか効率よく表現できないでしょうか？
インラインコード（スクリプトレット）を使うと、複雑なテーブルのタグをforループで書けてしまう！
GASにはインラインコード（スクリプトレットとも言います）いう仕組みがあり、HTMLコードの生成そのものをJavaScriptを使って動的に行うことができます。
インラインコードとは、HTMLファイル中で＜？ ？＞タグを入れてその中にJavaScriptコードを書いたものです。
＜？ ここにJavascriptを書く ？＞
javascript は何行になっても良く、さらにユニークなのは、途中にHTMLタグを挿入することでプログラムのフローに沿ってHTMLタグを表記できることです。（例えば１０回のループ処理の途中であれば、プログラムの流れに沿って１０回表記したのと同じ結果が得られます）
書き方は以下の様になります。（？＞～＜？で挟んで書くイメージです）
＜？ Javascript ？＞HTML表記 ＜？ Javascript？＞
この仕組みを使えばHTMLタグの生成そのものをループ処理で効率よく生成できます。
インラインコードを用いると、テーブルの<tr>、<td> といったHTMLタグは、例えば以下の様にfor文を使ってテーブルのサイズによらず効率よく表記できます。（抽象的な表現で書いています。そのまま実装しても動きませんので注意）
＜？
for（行毎のループ）｛
？＞＜tr＞＜？
for（列毎のループ）｛
？＞＜td＞セルのデータ＜/td＞＜？
｝
？＞＜／tr＞＜？
｝
？＞
for（行毎のループ）｛
？＞＜tr＞＜？
for（列毎のループ）｛
？＞＜td＞セルのデータ＜/td＞＜？
｝
？＞＜／tr＞＜？
｝
？＞
インラインコードには<?=変数 ?>タグで変数を埋め込むこともできる
インラインコードで素晴らしいのは、固定したタグやテキストだけでなく、変数を埋め込むことが出来る点です。変数は「＝」を使って以下の様に表現します。
＜？＝変数 ？＞
これを用いると、例えば前述のセルのデータを表す部分は・・・
＜td＞セルのデータ＜/td＞
配列変数を用いて以下の様に表現できます。（もちろん配列に入る値はプログラムのどこかで表現しておく必要があります）
＜td＞＜？＝セル[ｉ行][j列] ？＞＜/td＞
さきほどのコードで、各セルの値を配列変数セル[ｉ行][ｊ列]に取得しておけば、以下のコードにより大きなテーブルも表現することができるという訳です。
＜？
for（行毎のループ）｛
？＞＜tr＞＜？for（列毎のループ）｛
？＞＜td＞ ＜？＝セル[ｉ行][j列] ？＞ ＜/td＞＜？
｝ ？＞＜／tr＞＜？
｝
？＞
for（行毎のループ）｛
？＞＜tr＞＜？for（列毎のループ）｛
？＞＜td＞ ＜？＝セル[ｉ行][j列] ？＞ ＜/td＞＜？
｝ ？＞＜／tr＞＜？
｝
？＞
