2018.08.15みなさん、こんにちは!タカハシ(@ntakahashi0505)です。GASでWebアプリを作成するシリーズ。今回からJavaScriptのフレームワークVue.jsが登場します。GASでクライアントJavaScriptを使用する超簡単なプログラムGASでクライアント側にもJavaScriptを使用してWebアプリを作成する方法をシリーズでお伝えしています。今回は、GASでクライアントJavaScriptを使用する超簡単なプログラムについて紹介します。tonari-it.com2018.08.14GASでクライアント側JavaScriptを使用する簡単な例を紹介しました。今回はGASとJavaScriptフレームワークVue.jsを使ってWebアプリを作成するための最初の一歩を進めて行きましょう。前回のおさらいまず、前回作成したプロジェクト構成を紹介します。URLリクエストを受け取ったら、後述するindex.htmlを受け渡すdoGet関数を含むmain.gsです。htmlOutput;}そして、その際に表示するWebページを構成するindex.htmlがこちら。?></body></html>クライアント側に渡して、ボタンをクリックした際に実行する処理changeMessageを含むのが、こちらのjs.htmlです。JavaScript!」が変更される、というものです。JavaScriptフレームワークが必要なのかJavaScriptのDOM操作の回りくどさを解決したい何も知らないと、「そう書くのね、わかった!」となってしまうのですが、ちょっと待ってください。このJavaScriptの処理、ちょっと面倒じゃないですか?イベントハンドラが発火する操作対象となるDOM要素を取得する操作対象のDOM要素をJavaScriptで記述されたデータに変更するこんなダンドリで動作をしています。2と3に注目してください。今回、操作する要素はid属性「hello」が付与されているpタグですよね。JavaScript!」に変更する可能性は十分にあります。それなのに、処理の書き方として「要素を取得して、その要素を変更する」というダンドリをわざわざ書かなければいけないのは回りくどいですよね。このような回りくどさは、HTML上に展開された要素(DOM要素といいます)と、JavaScriptで取り扱えるデータが切り離されて管理されていることに起因します。JavaScriptフレームワークの効能では、そのDOM要素の内容とJavaScriptで扱うデータが等しいものとしてリアルタイムに紐付いていたらどうなるか?その場合、以下のような理想的なストレートな処理が可能になります。イベントハンドラが発火する「操作対象となるDOM要素の内容=JavaScriptのデータ」を変更するどうせ変更する予定なら、最初からJavaScriptにより操作するデータと連携しておこう、というわけです。このような機能を含め、Webアプリケーションの枠組みを提供するのがJavaScriptフレームワークであり、その中で今回注目するのがVue.jsとなるわけです。JavaScriptフレームワークVue.jsとはVue.jsはDOM要素とJavaScriptのデータでいうと、以下の図に示すような「Model-View-ViewModel」というパターンを前提に提供されているフレームワークです。Vue.jsではじめるMVVM入門それぞれの説明は以下の通りです。DOM要素とJavaScriptのデータを取り持つ機能を持つつまり、Vue.jsが提供するVueオブジェクトが、DOM要素とJavaScriptのデータをリアルタイムに連携させる役割を持ってくれているということになります。フレームワークVue.jsの特徴JavaScriptのフレームワークには、React.jsやAngularなどいくつかの種類があり、いずれもバリバリ使用されていますが、ここではVue.jsの特徴と、なぜVue.jsをオススメするかについて解説します。学習コストの低さGASユーザーにとって最大の魅力はこの学習コストの低さです。GASでWebアプリを作る方はWebエンジニアとは限りませんから、学習にそこまで時間をかけられません。学習コストが低いのは、超助かるわけです。私がVue.jsを皆さんにオススメする最大の理由はコレです。柔軟性の高さとはいえ、Vue.jsは手軽に始められる一方で、アプリケーションの要求に応じてその使い方を柔軟に変えていける「プログレッシブフレームワーク」として生み出されています。やろうと思ったら規模の大きいのも行けるぜ!ということですね。Vue.jsを用いたGASのWebアプリでは、例として冒頭のプロジェクトをVue.jsを用いて書き換えてみましょう。index.htmlは以下のように修正しました。?></body></html>9行目に二重波括弧という謎の表現、10行目に「@click=」という新鮮な属性がありますね。続いて、js.htmlです。JavaScript!';}}});</script>こちらはだいぶ様子が変わりましたね。1行目はCDNっぽいですね。3行目以降は、Newキーワードを使ってVueというインスタンスを生成しているようです。若干複雑ですが、その引数はオブジェクト形式で、「el」「data」「methods」というプロパティやメソッドを設定しているようです。詳しくは次回以降で解説をしていきましょう。まとめGASとJavaScriptフレームワークVue.jsを使ってWebアプリを作成するための最初の一歩についてお伝えしました。JavaScriptフレームワークを使う意義、そしてVue.jsの特徴についてご理解いただけたのではないかと思います。次回は、Vue.jsの導入を進めていきます。初心者向けにGASとVue.jsによるWebアプリケーションの作り方についてお伝えしています。今回は、GASにVue.jsを導入する方法とその動作確認、そしてVue.jsの超基本を解説していきます。ScriptではHTML・CSSを使ってWebページを作成し公開することができます。このシリーズでは、その続きとしてはじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法をお伝えしていきます。プランノーツ代表、コミュニティ「ノンプロ研」主宰。ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ★フォロー頂ければ嬉しいです。「コミュニティ+講座」形式で継続性&教え合える環境も提供。!ノンプログラマーがプログラミングスキルを身に着ける支援ををするコミュニティ。セミナー・もくもく会・Facebookグループのサポートで「自らで学び続ける力をつける」支援、「教え合うことで学びの価値を上げる」場の提供をしています。Scriptで明日締切のTrelloのカード数をカウントして、チャットワークに通知する方法をお伝えします。チャットワークに通知することでタスク管理をする場合の締切忘れなどを防げます。SQLのデータベースにアクセスする方法をシリーズでお伝えしています。今回はGASのJDBCサービスでトランザクション処理を行う方法をお伝えします。Scriptで数列を記入する方法とR1C1形式についてブログの低品質コンテンツを自動であぶり出すシステムを作成しています。Scriptで数式を入力する方法とR1C1形式についてお伝えしつつ、システムを完成させたいと思います。Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズです。今回は、GASのダイアログで作成するファイルアップローダーの部品を配置する方法です。Scriptでダイアログを作るいくつかの方法と基礎知識GASの独自ダイアログを作成する機能を使って、csvファイルアップローダーを作る方法をシリーズでお伝えします。今回は、GASでダイアログの作るためのいくつかの方法とその概要についてをお送りしていきます。Scriptでフォーム送信メールからデータを取得してスプレッドシートに登録していくツールを作成しています。今回は、配列の中に特定の値が含まれているか判定をするsomeメソッドの使い方です。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣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をコピーしました。