photo credit: miko59 Perspective de triangles via photopin (license)
みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。
GASとVue.jsでWebアプリケーションを作成する方法をお伝えしています。
前回の記事はコチラ。
テキストや属性のデータバインディングをする方法をお伝えしてきました。
ただ、前回のコード…ちょっと同じような記述が多くてイライラしますよね。
そんなときに便利なのがv-forディレクティブです。
ということで、今回はGASとVue.jsによるWebアプリでv-forディレクティブを使って繰り返しで要素を描画する方法をお伝えします。
では、行ってみましょう！
前回のおさらいと今回の課題
まず、前回のコードをおさらいしておきましょう。
URLリクエストを受けてHTMLを返すdoGet関数を含むmain.gsはコチラ。
function doGet() {
var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
htmlOutput
.setTitle('GAS+Vue.js')
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
return htmlOutput;
}
HTMLにバインドするデータを保有するVueインスタンスを生成するのが、こちらのjs.htmlです。
そして、そのデータバインディングを受けて表示するindex.htmlです。
{{ tocTitle }}
{{ tocDescription }}
!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
js.htmlのほうではtitle1,title2,…とか、url1,url2,…とかのプロパティの設定が、そしてindex.htmlのほうでは、li要素を要素数分記述するのが、それぞれ冗長な感じはありますよね。
こんなとき、使いたくなるのが「反復処理」です。
Vue.jsでは配列やオブジェクトについて反復処理をする便利なディレクティブが用意されているんです。
v-forディレクティブで反復処理をする
v-forディレクティブの構文
Vue.jsで、dataオプションに指定した配列やオブジェクトなどについて反復処理を行うときにはv-forディレクティブを使います。
配列について反復を行う場合のv-forディレクティブの書式はコチラです。
配列には、Vueインスタンスのdataオプションに指定した配列のプロパティ名を指定します。
上記記述により、配列にある要素を順番に一つずつ取り出し仮変数に格納しながら繰り返され、その分のタグが描画されます。
仮変数の要素は、Mustache構文やディレクティブに渡す値として利用することができます。
なお、以下のようにすると、仮変数として配列の要素だけでなく、インデックスも同時に取り出すことができます。
仮変数1に要素、仮変数2に取り出した要素に対応するインデックスが格納されます。
v-forディレクティブを使用して記事一覧を表示する
例として以下のように、dataオプションのプロパティlistsに配列を指定してみます。
7=12行目ですが、listsというプロパティに記事タイトルを要素とする配列をセットしています。
一方、HTML側のliタグについて、以下のようにv-forディレクティブを指定してあげます。
{{ tocTitle }}
{{ tocDescription }}
!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
12行目がv-forディレクティブを仕込んだ部分です。プロパティlistsから、ひとつずつ取り出してそれをlistに格納しています。
そのlistの中身（つまり、記事タイトルですが）をMustache構文で表示した上で、それぞれのli要素を描画するわけです。
Webページを表示すると、以下のような結果が得られます。
一行にまとめることができましたね。
反復の対象となる配列の要素をオブジェクトにする
ただ、今回の場合、記事タイトルだけでなく、そのリンク先となるURLも必要です。
タイトルとセットでURLをaタグのhref属性にセットする必要があります。
そのような場合は、ループの対象となる配列の要素をオブジェクトにすると便利です。
つまり、以下のようにデータ側、js.htmlを準備します。
8行目からのlistsプロパティに注目してください。配列をセットしていますが、それはオブジェクトを要素とするものとなっています。
オブジェクトのプロパティとして、以下のような値をそれぞれ設定しておくわけです。
– title: 記事タイトル
– url: リンクURL
そして、HTML側は以下のようにします。
!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?> != HtmlService.createHtmlOutputFromFile('js').getContent(); ?>{{ tocTitle }}
{{ tocDescription }}
13行目をご覧ください。
仮変数としてlistを取り出していますが、これはオブジェクトですから、ドット記法でプロパティを指定することで、さらにその要素を取り出すことができるわけです。
Mustache構文には記事タイトルを参照するlist.tilte、aタグのv-bindディレクティブでhref属性にlist.urlを渡しながらループをしています。
表示結果を見てみましょう。
バッチリ記事タイトルにリンクもつきましたね。
まとめ
以上、GASとVue.jsによるWebアプリでv-forディレクティブを使って繰り返しで要素を描画する方法をお伝えしました。
これで、HTMLがスッキリ書けますよね…！
なお、v-forディレクティブは配列だけでなく、オブジェクトや数値、文字列なども反復対象とすることができます。機会があれば紹介したいと思います。
ただ、Vueインスタンスのdataオプションの記述がちょっと面倒…
ほら、スプレッドシートからデータ取得できたら便利ですよね！
次回以降、この部分を解決していきます。
どうぞお楽しみに！
