GASでVue.jsを使い日付データを出力するのにmomentをどう設定すれば良いでしょうか

GASでSperadSheetの内容をHTML出力したいのですが、日付データがあるとうまく出力出来ません。

Vue.jsを利用しない方法では直接GAS側にライブラリを適用する方法で出力できるのですが、Vue.jsを併用するときの設定がわかりません。
ほぼこちらのサイトを参考にさせていただきました。
https://tonari-it.com/gas-vue-js-spreadsheet-values/

例えば下のコードを使った場合に'toupperはうまく出ます、ですが、同じように'moment'を設定してもエラーにはなりませんが内容が出力されません。実際のjs.htmlの中のように設定してますと今度はエラーとなります。(画面表示一部)

日付名前説明
{{ list[0] | moment }} {{ list[1] }} {{ list[2] }}

どうぞよろしくお願いします。

Vue
1Vue.filter('toupper', function(value) {
2  return value.toUpperCase()
3})
4
5 Vue.filter('moment',function (date) {
6            return moment(date).format('YYYY/MM/DD HH:mm');
7})

main.gs

GAS
1function doGet() {
2  var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
3  htmlOutput
4    .setTitle('GAS+Vue.js')
5    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
6  return htmlOutput;
7}
8
9function getSpreadsheetValues(){
10  return SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues();
11}
12

js.html

HTML
1<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
3<script>
4google.script.run.withSuccessHandler(initializeVue).getSpreadsheetValues();
5
6function initializeVue(values){
7
8  new Vue({
9    el: '#app',
10    data: {
11      tocTitle: 'GASとvue.jsとmoment',
12      tocDescription: '日付データをそのまま出力するとエラーになることを回避する方法',
13      lists: values
14    },
15    filters: {
16      moment: function (date) {
17      return moment(date).format('YYYY/MM/DD HH:mm');
18    }
19    
20  });
21}
22
23</script>

index.html

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
6  </head>
7  <body>
8    <div id="app">
9      <h2>{{ tocTitle }}</h2>
10      <p>{{ tocDescription }}</p>
11      <table>
12      <tr><th>日付</th><th>名前</th><th>説明</th></tr>
13        <tr v-for="list in lists"><td>{{ list[0] | moment }}</td><td>{{ list[1] }}</td><td>{{ list[2] }}</td></tr>
14      </table>
15    </div>
16    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
17  </body>
18</html>

ここから追記1

json形式で渡すとうまく動きます。
変更点のみ記述します。
js.html

javascript
1function initializeVue(values){
2  console.log(values);
3  values = JSON.parse(values);

index.html

HTML
1<tr v-for="list in lists"><td>{{ list.date | moment }}</td><td>{{ list.job }}</td><td>{{ list.name }}</td><td>{{ list.client }}</td></tr>

なぜSpreadSheetの配列だとエラーになるのかわからないままです。

追記2

使用しているSpreadSheetのデータです。

日付名前試験内容
2019/03/13 鈴木国語
2019/03/15 鈴木数学
2019/03/13 鈴木国語
2019/03/13 佐藤理科
2019/03/15 佐藤数学
2019/03/13 佐藤国語
2019/03/13 佐藤国語

デバッカーでのconsolの内容です
日付なし

userCodeAppPanel:6
(8) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
0
:
(2) ["鈴木", "国語", ob: Observer]
1
:
(2) ["鈴木", "数学", ob: Observer]
2
:
(2) ["鈴木", "国語", ob: Observer]
3
:
(2) ["佐藤", "理科", ob: Observer]
4
:
(2) ["佐藤", "数学", ob: Observer]
5
:
(2) ["佐藤", "国語", ob: Observer]
6
:
(2) ["佐藤", "国語", ob: Observer]
length
:
7
ob
:
Observer {value: Array(7), dep: Dep, vmCount: 0}
proto
:
Array

日付あり
userCodeAppPanel:6 null

です。よろしくお願いします。

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

回答2件

ベストアンサー

withSuccessHandler(function)のfunctionの引数として与えられる変数には以下の制約があります。

https://developers.google.com/apps-script/guides/html/reference/run#detailed-documentation

Most types are legal, but not Date, Function, or DOM element besides form; see description

Date型やFunction型は使用できないようです。
今回の場合、valuesの1レコードの要素が

[(new Date(1552402800000)), "\u9234\u6728", "\u56fd\u8a9e"]

といったようにDate型になっており、制約に引っかかっていました。

対策として、JSONエンコードが良いと思います。

javascript
1// main.gs
2function getSpreadsheetValues(){
3  var values = SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues();
4  return JSON.stringify(values);
5}

javascript
1// js.html
2    data: {
3      tocTitle: 'GASとvue.jsとmoment',
4      tocDescription: '日付データをそのまま出力するとエラーになることを回避する方法',
5      lists: JSON.parse(values)
6    },

投稿2019/09/19 12:08

yuhigash

総合スコア327

s.kono

2019/09/20 01:01

回答ありがとうございます! 無事出力出来ました!!!助かりました_( )_ 英語の本家のサイトを怖がらずに読めるようにならないといけませんね、、最終的にはタイトル部とか調整が必要になると思うので、今後はJSONについてはもう少し勉強していきたいと思います。

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

さっと目を通したのみですが、moment()の閉括弧が足りないように思います。

js.html

function initializeVue(values){

  new Vue({
    el: '#app',
    data: {
      tocTitle: 'GASとvue.jsとmoment',
      tocDescription: '日付データをそのまま出力するとエラーになることを回避する方法',
      lists: values
    },
    filters: {
      # !!!!!! moment functionが閉じられていない !!!!!!
      moment: function (date) {
      return moment(date).format('YYYY/MM/DD HH:mm');
    }

  });
}

投稿2019/09/18 05:50

編集2019/09/18 05:51

yuhigash

総合スコア327

s.kono

2019/09/18 07:02

回答ありがとうございます。「}」を足したらエラーは出なくなりましたが内容が出力されません。 <画面表示一部> 日付データをそのまま出力するとエラーになることを回避する方法日付名前説明 (ここにデータが表示されるはずなのですか゛何も表示されませんシートにデータはあります) valuesの1行目がタイトル行だったのでこれがいけないのかと思い、 values.shift(); を追加したら今度はvaluesに値がないとのエラーになってしまいました。 logを見るとvaluesにはデータが入っていました。

s.kono

2019/09/18 07:04

Uncaught TypeError: Cannot read property 'shift' of null at initializeVue (userCodeAppPanel:5) というエラーです。

yuhigash

2019/09/18 08:27

エラー内容は、「values」がnullというものです。ですので、valuesに値が入っていないかもしれません。 valuesに何が入っているかを確認してください。 ``` function initializeVue(values){ console.log(values) <- コレを追加 new Vue({ ``` valuesに値が入っていない場合は、 ``` function getSpreadsheetValues(){ return SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues(); } ``` この関数の返り値をdebugしてみてください。

s.kono

2019/09/18 09:01

回答ありがとうこざいます。 function getSpreadsheetValues() ここでのlogには値が入っています。 function initializeVue(values){ console.log(values) <- コレを追加こちらはまだ試していないのでやってみます!

s.kono

2019/09/19 00:35

htmlファイル内のconsole.log(values)でのlogの表示はどう確認するのかわからなかったのでずか、 spreadsheetを日付の入っていないシートにして{{ list[0] | moment }}→{ list[0] }}にすると正常に出力されます。values.shift();も問題なく1行目がスキップされてweb画面で表示されました。シートに日付データが入っていた時に問題が起きているようですが取得に成功しなければ入ってはこない処理内でエラーとなっているのでよくわからなくなっています。

s.kono

2019/09/19 05:23

console.log(values)の中身はwebのデバッカーで確認することが出来ました。なぜ出力できないのか? values.shiftがエラーになるのかはわからないままです。

yuhigash

2019/09/19 06:14

確認ありがとうございます。日付データが入っている場合と入っていない場合の、 ``` console.log(values) ``` の結果をそれぞれ追記ください。また、その際のSpreadsheetのサンプルデータも記載いただけると、問題の原因特定が進めやすくなります。

s.kono

2019/09/19 06:31

ありがとうございます。質問に追記2で記述しました。よろしくお願いします。

yuhigash

2019/09/19 11:58

理解できましたので、別に回答させて頂きます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！