はじめに

こんにちは。システムエンジニアのDiavoloです。

GASでWEBアプリを作成する場合、地味に嵌りがちなエラーの回避方法を記事にします。GASのWEBアプリの作成コードを参考にして、GASを作成し実行したときに、「TypeError: output.append is not a function」というエラーが出てしまうことがあります。
昔に書かれた記事のソースコードはChrome V8 ランタイム以前のものがあったりします。output.appendはChrome V8 ランタイムを有効にするとエラーになりますので、GASの設定をoutput.appendはChrome V8 ランタイムを無効にするとエラーが出なくなります。

ソースコード

Chrome V8 ランタイム無効の場合には、このソースコードで問題ありません

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <!-- 先程作成したコード.gsのfunction getData()をコールする -->
  <? var data = getData()?>

  <!-- getData()で取得してきたデータがdataに格納されていますので、これを出力する -->
  <table border=1>
    <?
      for(var i=0; i < data.length; i++){
        output.append('<tr>');
        output.append('<th>' + data[i][0] + '</th>');
        output.append('<th>' + data[i][1] + '</th>');
        output.append('<th>' + data[i][2] + '</th>');
        output.append('</tr>');
      }
    ?>
  </table>
  </body>
</html>

Chrome V8 ランタイムを有効にする場合には、こちらのソースコードになります

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <!-- 先程作成したコード.gsのfunction getData()をコールする -->
  <? var data = getData()?>

  <!-- getData()で取得してきたデータがdataに格納されていますので、これを出力する -->
  <table border=1>
    <?
      for(var i=0; i < data.length; i++){
        output._=('<tr>');
        output._=('<th>' + data[i][0] + '</th>');
        output._=('<th>' + data[i][1] + '</th>');
        output._=('<th>' + data[i][2] + '</th>');
        output._=('</tr>');
      }
    ?>
  </table>
  </body>
</html>

まとめ

TypeError: output.append is not a function が出る場合以下のいずれかの方法を試してください

①GASのChrome V8ランタイムを無効にする

②output.appendをoutput._=に変更する

この記事に掲載したソースコードについては、私の記事から抜粋しています。良かったら覗いてみてくださいませ！！
GoogleAppsScriptとGoogleスプレッドシートを連携したWEBアプリケーションを作成してみた【第二回】