第４回

内容：

• JavaScript 総論
• GAS の紹介（続き）

JavaSccript 総論

どこで動かすか

動作環境いろいろ

• ブラウザの中（クライアントサイドJS）

  • プログラムはWebページ（のHTMLコンテンツの中など）に記述され、

    （Script タグで挟まれた場所に書かれたものがJSのコード）

  • （一般には）サーバからコードが送られてきて、クライアント側（ブラウザ内）で 実行される

  • 開発ツールでも若干の実行は可能。

• サーバ側ソフトウェアとして
  • 「アプリケーションサーバ」機で動作し、Webサーバ経由でアクセスする （ことが多い）
  • サーバ内部で動いているので、何がどう動いているかは外部からは秘匿されている。
• 独立したプログラムとして
  • 処理系として Node.js が有名（だが最近は Deno も台頭）。
  • コマンドプロンプト（やPowerShellやUnix系OSの「シェル」）で 対話的に動作させたり、
  • エディタの中から呼出したり、
  • 複数のファイルから成る、規模の大きいソフトウェアとして実行したり、
  • 独立した実行形式のプログラムに変換して使ったり（いわゆる コンパイラ言語の使い方）、もできる。例えば Atom.exe がその例。
  • なお、サーバ側ソフトウェアは一般には、最初は独立したプログラムとして ローカル（自分のPC）で動作させ、デバッグやテストや検証が進行した後に サーバに「デプロイ」して、想定した動作環境での運用を開始する、 という流れで作られる。
• オンライン実行環境
  • Web画面でコードを入力・編集し、サーバ内のエンジン（サーバ側プログラムとは別） で実行し、結果が再びクライアントに送られてきてWeb画面に表示される。
  • jsdo.it が有名だった（が今はない）。今は Codepen paizaなど多数ある。
  • 学習や情報交換を目的としたものに加えて、Webアプリケーションを構築するのに 必要なツールを一通り揃えた、クラウド型サイト構築支援サイト、も台頭してきている （GASがその典型例）
  • ただし、実行の都度、大量のデータの転送が双方向に行われることになり、 そのオーバーヘッドが結構大きいので、ちょっとしたコーディングや動作実験は、 （ローカルに環境が持てる人は）ローカルで（ブラウザの開発ツールやnode.jsで） 行う方が心地よく使えるだろう。

学び方（推奨例）

1. 関数を呼び出してみる

   典型例：console.log(値1,値2,...)

   • 引数（括弧内に並べるものの）の数に制限はない
   • ついでに、変数も呼び出ししてみよう（名前を入力するとその値が表示される）。

2. 関数を定義して、呼び出してみる

   • （当然なのだが）定義しただけでは何も起きない。
   • 引数のある関数でもない関数でも、関数名の後ろに括弧は必要（定義時も呼出時も）。
   • 適切にインデンテーションを行うこと。
     • Ctrl+{, Ctrl+} のショートカットは知っておいて損はない

3. 値を返す関数を使ってみる

   • return 文が必要になる。
   • return 文がない関数は undefined を返す（その値はその先の計算には使えない）。

4. 関数は、実は「メソッド」でもあることを理解する

   • ついでに、オブジェクトについても認識しておこう
   • 関数がオブジェクトのメンバー（プロパティの、値）として保持されていることも知っておく。

5. メソッドチェーンを使ってみる

   • ピリオドで式が繋がっていく。
     • ピリオドの左（レシーバー）は、オブジェクト（を表す、変数だったり オブジェクトのメンバーだったり関数呼出だったり）で、
     • 右（セレクタ）は、オブジェクトに定義されているプロパティ名（メンバー）。
   • オブジェクトのメンバー（値）がさらにオブジェクトである場合 （括弧なしでピリオドが続く）と、
   • オブジェクトのメンバーが関数で、それを呼び出した結果の値がオブジェクトである場合（括弧の後ろにピリオド）がある。

（以下２項は今度やりましょう）

6. 配列と、繰り返しの構文（というかメソッドというか）に慣れる

7. 無名関数を使う

GAS の紹介（続き）

1. スクリプトの位置付け：
   • スクリプト単体でも作れるらしいが、
   • いずれかのアプリケーション（で提供される、ファイル）を「コンテナ」として それに付属したコンテナバインドスクリプトとして作るのが一般的らしい
   • アプリケーションの中でも Spread Sheet が最も広く使われているようだ （データベースとして使えるのが利点）。
2. 最初の使い方： （前回の解説を参照）。以下の解説も前回資料と対照しつつ 読み進めて下さい。
3. 関数を実行してみる場所として：
   • 関数の名前は（次項で使う予約された名前を除いて）何でもいい。
   • 実行したい関数名をメニューバーで選択し、
   • （新たに編集作業を行ったのなら）「保存」を行ってサーバに転送。
   • 「実行」ボタン、で実行される
4. Webサイトの骨組を作る場所として：
   • doGet() doPut() がそのために予約された関数名。 （これも前回行った）
   • 「デプロイ」すると、URLが付与されるので、
     • スクリプトエディタの「デプロイをテスト」か、
     • そのURLをブラウザ（の別タブ）に与える
     いずれかの方法で起動できる。
5. HTMLファイル（実際には、テンプレート）を預けておける

   • テンプレートには、

     1. .gs 側で用意した変数（オブジェクトのメンバー）を引用できる
     2. JSの式も書ける

   • こういった式は、<? ... ?> や <?= ... ?> で囲む。

     （一般的なテンプレートとほぼ同等のルール）

6. SpreadSheet（以下 SSと略記することもある）とのやりとり

   • データの参照と書込み：

     前回示したメソッドチェーンの形で、Range（範囲）をオブジェクト として取得した上で、

   • getValue, getValues, setValue, setValues といったメソッドで セル（範囲）の値の取得や変更ができる。

   • 範囲に対してできることは他にも多数あり。

7. 内蔵の関数は豊か
   • 例えば importXML を見てみよう。 (前に紹介した Crawling のプログラムを、サーバ上で実行して 結果をWebページとして表示する、といった実現も可能になる。 ただし上記関数ではCSSセレクタは使えずXPathでの指定になるが。)
8. ライブラリも使える
   • node.jsやクライアントサイドJSほど豊かではないが
   • 充実しつつはある。例えば、Cheerio（クローリングライブラリ）のgs対応版など。