[JavaScript]他のJSファイルから、letで指定した変数を呼び出す方法

Question

前提・実現したいこと

HTMLとJavaScriptを使って、アプリ開発をしております。
他のJSファイルから、letで指定した変数を呼び出す方法を教えてください。
※file2.jsでDialogflow応答結果を呼び出そうとしております。

試したこと

<script src="file1.js"></script>
<script src="file2.js"></script> 

・file1.js

let Dialogflow         // Dialogflowからの応答文言
:(省略)
  // Dialogflow応答
  xhr = new XMLHttpRequest();
  xhr.open('GET', dialogflowURL, true);

  // サーバからのデータ受信を行った際の動作
  xhr.onload = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
　　　　:(省略)
            Dialogflow = anstext;
            answer.innerHTML = "<p>" + anstext + "</p>";      // anstextに入っている返答部分を表示させています
          }else if (IntentName.substr(6,2) == "AI")
          {
　　　　　   :(省略)
          }else
          {            
        }
      }
    }

・file2.js

async function savetest() {

    var diaryData = [];
    diaryData = JSON.parse(localStorage.getItem('diaryData' + year + mon));
    var id = 0;
    if (diaryData == null) {  // まだデータがない場合

      var diary = {
        "id": 0,
        "date": now,
        "text": $('textarea[name="text"]').val(),
        "bbb": await Dialogflow
      }
      localStorage.setItem('diaryData' + year + mon, JSON.stringify(diary));
      id = 0;
    } else if (!(Array.isArray(diaryData))) { // データ一件の時（配列じゃないとき）
      var diary = {
        "id": 1,
        "date": now,
        "text": $('textarea[name="text"]').val(),
        "bbb": await Dialogflow
      }
      var Data = [];
      Data[0] = diaryData;
      // 配列に入れる
      Data.push(diary);
      id = 1;
      // 配列をlocalStorageに保存
      localStorage.setItem('diaryData' + year + mon, JSON.stringify(Data))
    } else {  //配列でデータが入っている場合（複数データがあるとき）
      var diary = {
        "id": diaryData.length,
        "date": now,
        "text": $('textarea[name="text"]').val(),
        "bbb": await Dialogflow
      }
      // 配列の最後尾に投稿するデータを追加
      diaryData.push(diary);
      // 配列をlocalStorageに保存
      localStorage.setItem('diaryData' + year + mon, JSON.stringify(diaryData));
      id = diaryData.length - 1;
    }
}

以上、よろしくお願い致します。

Comments

[int32_t]

提示されたコードだけでしたら、そのまま動くはずです。Dialogflow に何も代入していないので値は undefined ですが。

「応答文言」というコメントからすると、Dialogflow には非同期で何かが代入されて、その値を参照したいということなのでしょうか? もしそうなら、DialogFlowを更新するためのコードも開示してください。

[proday]

＞ int32_t 様
ご指摘ありがとうございます。
追記させていただきました。
おっしゃる通りです。
非同期で”anstext”で代入されております。
（ここに応答文言が返ってきます。）

Answer 1

scriptの閉じタグが閉じるような書き方になってませんが大丈夫ですか？
file1.js が変なスコープを利用せずグローバルに書いているなら
そのままいけるでしょう

//hoge.html

<script src="file1.js"></script>
<script src="file2.js"></script>

//hoge.txt

test

//file1.js

const url='hoge.txt';//本来であれば何らかのapi
let Dialogflow=fetch(url).then(res=>res.text());

//file2.js

(async()=>{
  const diary = {
    bbb: await Dialogflow
  };
  console.log(diary);
})(); 

Comments

[proday]

ご指摘ありがとうございます。修正致しました。
実際のコードは閉じております。
このままだと、”undefined”と返ってきてしまうのです。

[yambejp]

それは非同期処理でやっているからですね、xhrでさらに別ソースを
とってきているのですか？全体的に何をやりたいか不明です

[proday]

＞ yambejp 様
Dialogflow応答の処理を質問に追加させていただきました。
Dialogflow応答の結果をfile2.jsで呼び出そうとしております。

[yambejp]

file1でプロミスを返しておいて、file2でawaitで受け取ればいけます

//file1.js
let Dialogflow=fetch(dialogflowURL).then(res=>res.text());

//file2.js
(async()=>{
console.log(await Dialogflow);
})();

[proday]

＞ yambejp 様
ご回答ありがとうございます。
ちなみにですが、(async()=>{～の部分はvar diary = {の前に追加でしょうか。

[yambejp]

awaitはasync内でしか実行できません
こんな処理になります
(async()=>{
var diary = {
bbb: await Dialogflow
};
console.log(diary);
})();

[proday]

＞yambejp 様
ありがとうございます。
やってみたのですが、うまくいかないみたいです。。
後ほどコードの方追加させていただきます。

[yambejp]

本文に4つのファイルを記載しました
このまま改変せずにweb上でテストしてみてください
うまくいかない場合は、どういう動作をするのか
エラーはなにかでていないかを明記ください

[proday]

localstorageを使用しているせいですかね。。

[yambejp]

うーん、次から次へと情報を後出しをしてくるので回答がブレブレです
localStrageをどうやってかましているのですか？

[proday]

＞　yambejp 様
お手数お掛け致しますが、file2.jsのコードを追加いたしましたので、ご確認お願い致します。

[proday]

ちなみにこのコードだと"Connect error"になります。

[yambejp]

file2.jsがsavetest関数にはいっていますが、呼び出されていません
ちなみに複数箇所でつかうなら変数におとしておくとよいです

(async()=>{
const bbb=await Dialogflow;
const diary = {
bbb
};
console.log(diary);
})();

[proday]

＞yambejp 様
申し訳ございません。追記漏れでした。
file1.jsの方でsavetest();を呼び出してます。

[yambejp]

file1.jsは先行して呼び出して実行してるのですよね？
であればsavetestを実行しようにもfile2.jsが呼び出されてないので
実行できないのでは？
もう一度フローを精査してみてください

[proday]

> yambejp 様
逆にfile2.jsを先行して実行してみましたが、connecterrorが出ますね。。
見直したところ、localstorageがasyncLocalStorageではないからかなと思っているのですが、
関係ありますか？

[yambejp]

ちなみに私の回答のソースは動作したのでしょうか？
なんでも一足飛びにやらずに、一つ一つ仕様を確認しながら組み込んでみてください

それとfile1とfile2がそんなに関係が深いなら、一つにしてしまうほうが現実的ではないでしょうか？

[proday]

＞yambejp 様
動作確認できてないです。
原因なんですが、let Dialogflow=fetch(dialogflowURL).then(res=>res.text()); の
res.text()部分をURLにそった形に変更してないからですかね。

[yambejp]

同じディレクトリ内にファイル名も変えずに、一言一句なにも足し引きせずコピペで
４つファイルを作成して試してください
まずはそこからです

[proday]

＞yambejp 様
遅くなり大変申し訳ございません。
ファイルを一緒にすることで、できました！
ありがとうございました。