(license)みなさん、こんにちは!タカハシ(@ntakahashi0505)です。GASとVue.jsでWebアプリケーションを作成する方法をお伝えしています。【GAS&Vue.js】v-bindディレクティブを使って属性のデータバインディングをしてみようGASとVue.jsを使ってWebアプリケーションを作成する方法をお伝えしています。今回は、属性のデータバインディングをするv-bindディレクティブの使い方、ディレクティブとは何かについて解説します。tonari-it.com2018.08.17テキストや属性のデータバインディングをする方法をお伝えしてきました。前回のコード...ちょっと同じような記述が多くてイライラしますよね。そんなときに便利なのがv-forディレクティブです。いうことで、今回はGASとVue.jsによるWebアプリでv-forディレクティブを使って繰り返しで要素を描画する方法をお伝えします。前回のおさらいと今回の課題まず、前回のコードをおさらいしておきましょう。URLリクエストを受けてHTMLを返すdoGet関数を含むmain.gsはコチラ。htmlOutput;}HTMLにバインドするデータを保有するVueインスタンスを生成するのが、こちらのjs.htmlです。ScriptではHTML・CSSを使ってWebページを作成し公開することができます。このシリーズでは、その続きとしてはじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法をお伝えしていきます。ScriptではHTML・CSSを使ってWebページを作成し公開することができます。このシリーズでは、その続きとしてはじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法をお伝えしていきます。'https://tonari-it.com/gas-web-app-vue-js-data-binding/'}});</script>そして、そのデータバインディングを受けて表示するindex.htmlです。?></body></html>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に配列を指定してみます。ScriptではHTML・CSSを使ってWebページを作成し公開することができます。このシリーズでは、その続きとしてはじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法をお伝えしていきます。ScriptではHTML・CSSを使ってWebページを作成し公開することができます。このシリーズでは、その続きとしてはじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法をお伝えしていきます。['GASのWebアプリケーションでクライアント側JavaScriptを使うための基礎知識','GASでクライアントJavaScriptを使用する超簡単なプログラム','GASとJavaScriptフレームワークVue.jsを使ってWebアプリを作成するための最初の一歩','GASにVue.jsを導入する方法とその動作確認、そしてVue.jsの超基本を解説']}});</script>7=12行目ですが、listsというプロパティに記事タイトルを要素とする配列をセットしています。HTML側のliタグについて、以下のようにv-forディレクティブを指定してあげます。?></body></html>12行目がv-forディレクティブを仕込んだ部分です。プロパティlistsから、ひとつずつ取り出してそれをlistに格納しています。そのlistの中身(つまり、記事タイトルですが)をMustache構文で表示した上で、それぞれのli要素を描画するわけです。Webページを表示すると、以下のような結果が得られます。一行にまとめることができましたね。反復の対象となる配列の要素をオブジェクトにするただ、今回の場合、記事タイトルだけでなく、そのリンク先となるURLも必要です。タイトルとセットでURLをaタグのhref属性にセットする必要があります。そのような場合は、ループの対象となる配列の要素をオブジェクトにすると便利です。以下のようにデータ側、js.htmlを準備します。ScriptではHTML・CSSを使ってWebページを作成し公開することができます。このシリーズでは、その続きとしてはじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法をお伝えしていきます。ScriptではHTML・CSSを使ってWebページを作成し公開することができます。このシリーズでは、その続きとしてはじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法をお伝えしていきます。'https://tonari-it.com/gas-web-app-vue-js-data-binding/'}]}});</script>8行目からのlistsプロパティに注目してください。配列をセットしていますが、それはオブジェクトを要素とするものとなっています。オブジェクトのプロパティとして、以下のような値をそれぞれ設定しておくわけです。リンクURLそして、HTML側は以下のようにします。?></body></html>13行目をご覧ください。仮変数としてlistを取り出していますが、これはオブジェクトですから、ドット記法でプロパティを指定することで、さらにその要素を取り出すことができるわけです。Mustache構文には記事タイトルを参照するlist.tilte、aタグのv-bindディレクティブでhref属性にlist.urlを渡しながらループをしています。表示結果を見てみましょう。記事タイトルにリンクもつきましたね。まとめ以上、GASとVue.jsによるWebアプリでv-forディレクティブを使って繰り返しで要素を描画する方法をお伝えしました。これで、HTMLがスッキリ書けますよね...!なお、v-forディレクティブは配列だけでなく、オブジェクトや数値、文字列なども反復対象とすることができます。機会があれば紹介したいと思います。Vueインスタンスのdataオプションの記述がちょっと面倒...ほら、スプレッドシートからデータ取得できたら便利ですよね!次回以降、この部分を解決していきます。GASのWebアプリでクライアント側JavaScriptからサーバー側の関数を呼び出す方法GASとVue.jsでWebアプリを作る方法をお伝えしています。今回は、google.script.runオブジェクトを使用しつつ、GASのWebアプリでクライアント側JavaScriptからサーバー側の関数を呼び出す方法です。ScriptではHTML・CSSを使ってWebページを作成し公開することができます。このシリーズでは、その続きとしてはじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法をお伝えしていきます。プランノーツ代表、コミュニティ「ノンプロ研」主宰。ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ★フォロー頂ければ嬉しいです。「コミュニティ+講座」形式で継続性&教え合える環境も提供。!ノンプログラマーがプログラミングスキルを身に着ける支援ををするコミュニティ。セミナー・もくもく会・Facebookグループのサポートで「自らで学び続ける力をつける」支援、「教え合うことで学びの価値を上げる」場の提供をしています。Script【GAS×freeeAPI】スプレッドシートのデータからチャットワーク通知用の本文を作成する「当日入金予定の取引一覧を自動でチャットワークに送信する」シリーズの第6回目。スプレッドシートの値を取得して文字列結合し、チャットワークに通知する本文を作成します。Scriptでサイドバーの作り方を解説しています。Homeからの音声入力でチャットワークにタスク追加する方法を紹介します。Scriptにてチャットワークにタスク追加をします。Script【初心者向けGAS】Spreadsheetサービスの「オブジェクト」の基礎の基礎を知ろうGASプログラミングの基礎を学ぶシリーズです。今回は、GASでスプレッドシートを操作していく際に知っておくべきオブジェクトとその基礎、SpreadsheetApp、アクティブなスプレッドシートの取得についてです。SQLのデータベースにアクセスする方法をシリーズでお伝えしています。SQLのデータベースのレコードを更新・削除をする方法です。ScriptGASでGoogleフォームを作成する最も簡単なスクリプトイベントの申し込みフォームやアンケートを定期的に作成するのでれば、GASでGoogleフォームの作成ツールを作成しておくと便利です。今回は、Googleフォームを作成する最も簡単なスクリプトを紹介します。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント109セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント109セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。Scriptが「V8ランタイム」をサポート!モダンなECMAScript構文が使えるようになった2020.02.072020.02.08GASでコピーしたGoogleスライドのプレゼンテーションを取得する方法2020.02.052020.02.05Facebookページいつも隣にitのお仕事タイトルとURLをコピーしました。