### サーバー側とクライアント側のJavaScriptでデータを連携する ![image.png](https://boostnote.io/api/teams/xf-wHjup3/files/b21f644b72d4efb6100b405758cccbeb63b0169fef5849e4ebc2248ac6442ecf-image.png) Google App ScriptはGoogleのサーバー内で動作します。つまり、JavaScriptを埋め込んだHTMLをユーザーのPCブラウザに渡して何かしらの処理をブラウザ上でさせることができます。 ![image.png](https://boostnote.io/api/teams/xf-wHjup3/files/36db9d5bd961e5ff785f466f91e033185254d9498bb60fff71ef6b6574fca1f9-image.png) 上記の画像のようにGoogle App Scriptではクライアント側とサーバー側とで相互に連携をさせて動作をさせることができます。 ### クライアント側でJavaScriptができることクライアント側でJavaScriptを使ってユーザーのブラウザ上で動作させることができるのは以下の内容です。 - Webページやその要素に動きをつける - ページを切り替えずに表示の一部を更新する - リアルタイムに入力値のチェックや計算を行う - Webページで発生したイベントを受けて処理を呼び出す Vue.jsを使えばよりリッチな表現のアプリケーションを作ることができます。 ### サーバー側でJavaScriptができること今回、DBをスプレッドシートにしてフロント側からスプレッドシートに記載されているデータを読み出しを行います。 DBをスプレッドシートにすることによって社内ツールなど簡単なものはお金をかけずにアプリとして構築することができます。 ![image.png](https://boostnote.io/api/teams/xf-wHjup3/files/46e1edc33eb7fe8aa92695df87748c9186102565eb8ab1ff80847e2bdb6755c3-image.png) ### Google App Scriptのプロジェクトを用意するまずはスプレッドシートを用意して連携したGoogle App Scriptを作ります。 ![image.png](https://boostnote.io/api/teams/xf-wHjup3/files/9f63f0b6dfd79343b43055d3df218c0adb76937039e7ccbde87d891a99dbc334-image.png) そしてGoogle App Scriptにhtmlを表示する処理を書いてindex.htmlを作成します。 ```js // main.gs const doGet = () => { var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate(); htmlOutput .setTitle('GAS+Vue.js') .addMetaTag('viewport', 'width=device-width, initial-scale=1') return htmlOutput; } ``` ```html ``` このように書いたらデプロイから公開ウェブアプリケーションとしてデプロイすると、ウェブアプリのURLが表示されるのでブラウザで開くと先ほどのHTMLが表示されるようになります。 ![スクリーンショット 2022-07-02 16.14.27.png](https://boostnote.io/api/teams/xf-wHjup3/files/d771c891832b15edda06b660b7a657736f79281bb489870ad403c43084082fa9-%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-07-02%2016.14.27.png) index.htmlのbodyには何も書いていないのですがこのように表示されます。 ![image.png](https://boostnote.io/api/teams/xf-wHjup3/files/295a0129b7a77a2ee2774d4af6d008a388eaa1d7fed277bef533e08a9d3fc7e7-image.png) ### vue.jsを使えるようにする HTMLを表示できるようになったのでVue.jsを使えるようにしていきます。 GASでVuetifyを使う場合はVuetifyのCDNを読み込む必要がありますが、最新バージョンを使うので[公式サイト](https://jp.vuejs.org/v2/guide/installation.html#CDN)から最新バージョンのCDNを確認していきます。 ![image.png](https://boostnote.io/api/teams/xf-wHjup3/files/68a35e870db1a571b400b8198e35d6fa4c1db08390a3506574957caf760e6ebe-image.png) これでvue.jsを使えるようになったのでindex.htmlを下記のように書き換えます。 ```html

``` 次にGoogle App Scriptから追加してjs.htmlを作成していきます。 css.htmlもデフォルトテンプレートで良いので作らないとエラーが出るので作っていきます。 ```html ``` ```html ``` これで下記のようにメッセージが表示されたと思います。 ![image.png](https://boostnote.io/api/teams/xf-wHjup3/files/53e9c153a8b46367b506e5576bdd07e5d2b0311dedbbac9e574c8a80f255de8a-image.png) ### クライアント側Javascriptからサーバー側の関数を呼び出す現在はmain.gsのURLリクエストによってdoGet関数が動作し、ユーザーのブラウザいにindex.htmlを元にしたWebページが表示されています。 ![image.png](https://boostnote.io/api/teams/xf-wHjup3/files/1fe3e69854a0e62cbd9849b4aecc268058b038e2714bb4d146d112478c1e7790-image.png) ここからスプレッドシート情報を参照していきます。 ![image.png](https://boostnote.io/api/teams/xf-wHjup3/files/0ec1cda79d66b9bee8b934dfb93d08be5ccd15dc4a6f05d2c772b882dbe0c62d-image.png) このようにするためにはクライアント側のJavaScriptがユーザーのブラウザに展開された時点で、何らかの方法でサーバー側のGASの処理を呼び出す必要があります。 ### クライアント側のJavaScriptからのサーバー側の関数を呼び出すにはgoogle.script.runオブジェクトを使う Google App Scriptを使うにはクライアントからサーバー側の関数を呼び出すためのオブジェクトであるgoogle.script.runを使っていきます。 #### google.script.runの使い方 google.script.run.関数(引数1, 引数2, ....) 関数はサーバー側のgsファイルに記述された関数名となっています。引数は必要であれば記述しますが、必要がなければ省略が可能です。 #### google.script.runの呼び出しは非同期なので注意が必要 `google.script.run`はGoogleのサーバー処理と返事を待たずにクライアント側のJavaScriptは次のスクリプトを実行しています。つまり非同期通信を行なってデータを取得しています。なのでブラウザの処理を待ってもらうために`google.script.run.withSuccessHandler`を使う #### サーバー側の関数の呼び出しが成功したらクライアント側関数を呼び出す `google.script.run`オブジェクトの`withSuccessHandler`メソッドを使って処理を行います。 google.script.run.withSuccessHandlerの書き方 google.script.run.withSuccessHandler(コールバック関数).関数(引数1, 引数2, ...) このメソッドはサーバー側関数が正常に実行された場合、その戻り値をコールバック関数に渡して実行するように設定をするものです。コールバック関数はクライアント側のJavaScriptに記述していきます。これを使うことでサーバー側の処理完了時にクライアント側の必要な関数を呼び出すことができるようになります。また、サーバー側の関数呼び出しが失敗した時に、クライアント側関数を呼び出すwithFailureHandlerメソッドも用意されています。 ### クライアント側JavaScriptを経由してスプレッドシートのデータを呼び出す google.script.runオブジェクトを使ってサーバー側のスクリプトを呼び出しましょう。 ```js // main.gs const doGet = () => { let htmlOutput = HtmlService.createTemplateFromFile("index").evaluate(); htmlOutput .setTitle('GAS+Vue.js') .addMetaTag('viewport', 'width=device-width, initial-scale=1') return htmlOutput; } const getSpreadsheetName = () => { return SpreadsheetApp.getActiveSpreadsheet().getName(); } ``` 次に`js.html`を作っていきます。 ```html ``` google.run.scriptオブジェクトを使って`getSpreadSheetName`メソッドを呼び出します。そして呼び出しが成功した時点で戻り値を`initializeVue`関数に渡して実行します。そして`ssName`をindex.htmlに参照します。 ```html

``` するとこのようにスプレッドシートのデータを引っ張ってくることができます。 ![image.png](https://boostnote.io/api/teams/xf-wHjup3/files/882e6dbc5554992a0d7c9f54a23b4f63ff062e053241ecac8b586f1d26f3800b-image.png) ### スプレッドシートのデータを使ってWebページを生成するスプレッドシートを読み込むことに成功したので下記のようなデータをスプレッドシートに記載していきます。 ![image.png](https://boostnote.io/api/teams/xf-wHjup3/files/81bb954960c9cf5c7ddf09d8160aa7662a5464a0fdfe98344a9be907b81583d9-image.png) 次にGoogle App Scriptを下記のように書き換えてスプレッドシートのデータを取得します。 ```js // main.gs const doGet = () => { let htmlOutput = HtmlService.createTemplateFromFile("index").evaluate(); htmlOutput .setTitle('GAS+Vue.js') .addMetaTag('viewport', 'width=device-width, initial-scale=1') return htmlOutput; } const getSpreadsheetValues = () => { return SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues(); } ``` `SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues()`を使うことによってスプレッドシートの全てのデータを取得することができます。次に`js.html`を下記のように書き換えます。 ```html ``` 最後に`index.html`を書き換えていきます。 ```html

{{ list[0] }}

``` するとこのようにスプレッドシートの内容がブラウザに表示されました。 ![image.png](https://boostnote.io/api/teams/xf-wHjup3/files/e23ce69a45f2b453a9df152d5f9be5ca3a56bd71f6bbed2f11c906fdfcab9571-image.png) ### まとめ Google App Scriptとスプレッドシート、vue.jsを使えば社内ツールや個人アプリも簡単に作ることができます。 DBの費用もかからずに作成することができるのでぜひ挑戦してみてください。

{{ title }}

ブログ記事のタイトル