(cache)GASのWebアプリケーションでクライアント側JavaScriptを使うための基礎知識

みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。

以下の記事ではじまる「GASユーザーのための初めてのHTML・CSS講座」シリーズでお伝えしているとおり、GASではWebページを作成して公開をすることができます。

Google Apps Scriptで最も簡単なWebページを作成して公開する

GASユーザーかつHTMLページ・CSS初心者向けにWebページの作り方の基本中の基本を解説していきます。まず、その最初の一歩として、GASで最も簡単なWebページを作成して公開する方法をお伝えします。

面倒なサーバーの準備も不要、しかも無料…。

社内用アプリケーションとかちょっとしたツールを作る上で、どうしても必要になる技術があります。

それは、クライアント側のJavaScriptです。

クライアント側、つまりブラウザで動作するJavaScriptを使いこなすことで、作成したWebページに動きをつけたり、リアルタイムで更新や計算をしたり、さまざまなことが実現できるようになります。

このシリーズでは、はじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法を紹介していきます。

初回となる今回は、GASのWebアプリケーションでクライアント側JavaScriptを使うための基礎知識についてお伝えしていきます。

では、行ってみましょう！

GASのWebアプリとJavaScript
クライアント側JavaScriptを含めるGASのWebアプリのテンプレート
まとめ

GASのWebアプリとJavaScript

そもそも、JavaScriptとは？

皆さんはGASユーザーなので、日頃からプログラミング言語JavaScriptは触れているはずです。

しかし、本来JavaScriptが主戦場としているのは、別の場所なのはご存知ですよね。

すなわち、JavaScriptはブラウザ上で動作し、Webページのコンテンツを操作するために生まれた言語で、その場合はユーザーが操作するPC（つまりクライアント）で動作します。

サーバー側とクライアント側のJavaScript

一方で、GASが動作をするのはGoogleのサーバー内です。

GASでWebアプリを作る際には、クライアント側のJavaScriptも埋め込むことができます。

つまり、JavaScriptを埋め込んだHTMLをユーザーのPCブラウザに渡して、何かしらかの処理をブラウザ上でさせることができるということです。

そして、クライアント側とサーバー側とで相互に連携をさせて動作をさせることができます。

クライアント側JavaScriptでできること

クライアント側JavaScriptを使ってできることをもう少し深掘りしてみましょう。

クライアント側JavaScriptを使ってユーザーのブラウザ上で動作させることができる例として、以下のようなものがあります。

Webページやその要素に動きをつける
ページを切り替えずに表示の一部を更新する
リアルタイムに入力値のチェックや計算を行う
Webページで発生したイベントを受けて処理を呼び出す

よりリッチな表現や快適なUIが提供できるようになりますし、高度なデータの処理や受け渡しもできるようになります。

クライアント側JavaScriptを含めるGASのWebアプリのテンプレート

冒頭で紹介した「HTML・CSS講座」のシリーズは終えているものとして、本シリーズのテンプレートとなるファイル構成を紹介しておきます。

まず、サーバー側のGASスクリプト「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;
}

function doGet() {

var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();

htmlOutput

.setTitle('GAS+Vue.js')

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

return htmlOutput;

}

吐き出したURLを受けてHTMLファイル「index.html」を表示するdoGet関数です。

タイトルと、metaタグはこちらで指定するようにしておきます。

以下が「index.html」です。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  </head>
  <body>
    <!-- ここにbodyを記述していく -->
    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>

</head>

<body>

<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>

</body>

</html>

まだ、何もコンテンツがありません。

強制スクリプトレットタグで「css.html」と「js.html」を読み込むようにしています。

名称の通り、それぞれCSSとクライアント側JavaScriptを記述するためのファイルですが、それらのファイルはまだ何も記述していない空のファイルとします。

お気づきかも知れませんが、GASではgsファイルか、htmlファイルかしか作ることができません。したがって、JavaScriptやCSSのファイルもhtmlファイルに記述します。

つまり、必然的にサーバー側はgsファイル、クライアント側はhtmlファイルに記述することになります。

まとめ

以上、GASのWebアプリケーションでクライアント側JavaScriptを使うための基礎知識についてお伝えしました。

GASのWebアプリでJavaScriptを使うメリットや、そのベースとなる知識はご理解いただいたのではないかと思います。

さて、GASユーザーがこのような方法でWebアプリに挑戦する意義は非常に大きいものと思います。

というのも、クライアント側JavaScriptのスキルを身につけることで、キャリアとして市場で人気のある「フロントサイドエンジニア」を視野に入れて、その足がかりにできるようになるからです。

ぜひ、業務システムやツールを練習台にして、クライアント側JavaScriptのスキルも身に着けていただければと思います。

さて、次回は実際にクライアント側JavaScriptを動作させてみましょう。

どうぞお楽しみに！

　　投稿者プロフィール

タカハシノリアキ株式会社プランノーツ　代表取締役

株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる！」をテーマに、VBA＆GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ
★ご依頼・ご相談はお気軽にどうぞ！→お問い合わせはコチラ
★フォロー頂ければ嬉しいです。

GASのWebアプリケーションでクライアント側JavaScriptを使うための基礎知識