【GAS】HtmlServiceの違い

GAS
1
2function doGet() {
3  return HtmlService.createHtmlOutputFromFile('index');
4}
5function doGet() {
6  return HtmlService.createTemplateFromFile('index').evaluate();
7}

html
1
2<!DOCTYPE html>
3<html>
4  <head>
5    <base target="_top">
6  </head>
7  <body>
8    <h1>あいうえおまるた</h1>
9  </body>
10</html>
11

これの違いを教えてください。
どっちでやっても同じものが表示されます！
あとcreateTemplateFromFile('index').evaluate();のevaluate()についてもよくわかっていません。

行動規範の内容に同意します

回答1件

ベストアンサー

createHtmlOutput～() 系は読み込んだデータからそのまま HtmlOutput を生成します。

対して、createTemplate～() 系は HtmlTemplate を生成します。HtmlTemplateはいわゆるテンプレートエンジンというやつで、外部から動的に値を埋め込んだり条件分岐やループを使用してコンテンツをサーバーサイドで動的に変更することができます。(HtmlTemplate.evaluate()を呼ぶことでHtmlOutputに変換します。）

HtmlTemplateでサーバーサイドで動作させる処理は<%と%>の間に記述します。
<%= 変数 %>の様に記述することで変数の内容を直接出力させることもできます。

例えばこんな HTML があった場合に、createHtmlOutput～()とcreateTemplate～()を使うケースを比べてみるといいでしょう。

HTML
1<!-- index.html -->
2<!DOCTYPE html>
3<html>
4  <head>
5    <base target="_top">
6  </head>
7  <body>
8    <h1>タイトルは「<?= myTitle ?>」です。</h1>
9    <hr>
10    <p>ループカウントは <?= myLoopMax ?> です。</p>
11    <ul>
12    <? for(let i = 0; i < myLoopMax; i++) { ?>
13      <li>ループ <?= i ?></li>
14    <? } ?>
15    </ul>
16    <hr>
17    <p>おわり</p>
18  </body>
19</html>

JavaScript
1// Code.gs
2function doGet(e) {
3  // createTemplateFromFile を使う場合
4  const template = HtmlService.createTemplateFromFile("index");
5  template.myTitle = "外部から設定したタイトル";
6  template.myLoopMax = 10;  
7  const output = template.evaluate();
8  
9  // createHtmlOutputFromFile を使う場合
10  //const output = HtmlService.createHtmlOutputFromFile("index");
11  
12  return output;
13}