GASのHTMLとのデータ連携と値の確認方法について

###前提・実現したいこと
極めて初心者になります。お手柔らかに教えて頂ければ幸いです。
エラーが発生しているわけではございません。
理由が知りたいです。

HTML(クライアント)側からGASを呼び出します。
その返り値を受け取りHTML側で保持したいのですが上手く行きません。
受け取れてはいるようです。
変数に格納しalertで確認しているのですがalertの場所によって表示されたりされなかったりします。

この理由を教えてください。

本当に初歩的な質問で大変恐れ入りますが、どうぞ宜しくお願い致します。

###発生している問題・エラーメッセージ

alertを使用して変数を確認できる場所と出来ない場所がある。

###該当のソースコード

<!DOCTYPE html>
<html>
<head>
  <!--GASではAPP生成過程のパース処理によりタイトルは置き換わる-->
  <title>売買管理入力フォーム</title><!--実際には表示されないタイトル-->
</head>

  <script>
    //顧客情報取得モジュールを稼働
    google.script.run.withSuccessHandler(eventEnd).getclient()

    // getclient() が正常終了した際の処理
    function eventEnd(serverResult){
    var client_name = serverResult;

    alert(client_name);//ここのアラートは中身共に問題なし

    }

    alert(client_name);//ここ、もしくは以降の場所ではアラートは機能せず内容も確認不可

  </script>

###試したこと
同HTML上にある他の変数はどの場所でもalertで出力されることは確認済み。
このgoogle.script.runの正常終了時の返り値を変数に格納した値のみ場所によって機能したりしなかったりする。

###補足情報(言語/FW/ツール等のバージョンなど)
極シンプルなGASとhtmlとのデータ授受です
ブラウザはgoogle chrome

行動規範の内容に同意します

回答1件

ベストアンサー

多分、下記のようなことだと思います。

JavaScript
1	var client_name = 'みていぎ'; // ここで宣言
2
3	//顧客情報取得モジュールを稼働
4	google.script.run.withSuccessHandler(eventEnd).getclient(); // ← 「;」が無いと場所によっては意図しない挙動になる
5
6	// getclient() が正常終了した際の処理
7	function eventEnd(serverResult){
8	//	var client_name = serverResult; // ← 「var」を付けることでスコープが関数「eventEnd」の中のみになるから他から見えない
9		client_name = serverResult;
10		alert( client_name );
11	}
12
13	alert( client_name ); // 「みていぎ」と表示される

投稿2017/03/05 09:30

kei344

総合スコア69400

退会済みユーザー

2017/03/05 10:14

早々のご回答本当に嬉しく存じます。セミコロンで挙動は変わりませんでした。しかし今後の為に注意したいと思います。ありがとうございます。「var」についても外しても変化はありませんでした。 eventEnd関数内のalertは機能し、それ以外では機能しません。ちなみにclient_nameには複数の文字列（会社名）が入る配列になるのですが、それが関係しているのでしょうか。しかし、場所によってはちゃんとその内容が表示されるのでなんとも言えないのですが。。。

kei344

2017/03/05 10:24

「ここで宣言」の部分は足していますか？

退会済みユーザー

2017/03/05 10:41

「ここで宣言」の内容通りに事前に宣言しますと、「みていぎ」とアラートが出ます。 client_nameが戻り値で上書きされていないようです。今ふと気付いたのですが、GASで「公開」から「最新のコードでテストします」で稼働確認しているのですが、「みていぎ」はHTML表示前にアラートが出るのに対し、戻り値の確認できるeventEnd関数内でのアラートはHTMLが表示された後に表示されている様です。なぜかこのgetclient関数呼び出しや正常終了時のeventEndの順番が最後になってる気がします。関係あるのでしょうか。。最終目的は.gsからの戻り値をHTML内で保持し使いたいです。拙い説明でお手を煩わせて大変恐縮ですが、どうぞ宜しくお願い致します。

kei344

2017/03/05 10:49

それが普通の挙動です。 google.script.run.withSuccessHandler(eventEnd)でeventEnd関数を渡しているので、そこで得たデータを使うのはSuccessHandlerが実行されるタイミングになります。そのタイミングは確実に alert( client_name ); // 「みていぎ」と表示されるより後です。 eventEnd関数で入れたclient_nameを使うのであれば、関数内から呼ぶかeventEnd関数より後のイベントです。例えば、「ここで宣言」を残した状態で、クリックイベントなどを設定し、その関数内でclient_nameを使う際はeventEnd関数で入れた内容が出るでしょう。

退会済みユーザー

2017/03/05 11:57

ありがとうございます。どうやら私がGAS、HTML、javascriptの関数やコマンドでの処理の流れを理解しきれていないことが原因の様です。 kei334さんのお陰でその事に気付き、問題解決に進展がありました。もう少し基本的な知識を身に付けてみようと思います。この度は貴重なお時間とご返答を頂き本当に有難うございました。

退会済みユーザー

2017/03/08 12:54

連投失礼いたします。本件、GASが用意しているgoogle.script.runが「非同期処理」であるために起きた現象でした。小生、プログラムにおける同期非同期の概念が抜けていたため今回の事象が理解できなかった次第です。 google.script.runで指定する関数はサーバー側にリクエストを投げ、DBを読み込みデータ取得し応答するという内容のものでして、非同期に処理されておりました。その為クライアント（HTML）サイドのアラートとのタイミングのズレが発生していたと理解しました。 kei344様、沢山の的確なアドバイスとヒントを頂き本当に有難うございました。

行動規範の内容に同意します