@Thousandsprings (Chiharu Suzuki)posted at 2021-02-05

ある関数内で定義した変数を別の関数で使うには

Q&A

解決したいこと

ある関数内でaxiosのあとpromiseで呼び出した関数内の変数をまた下の関数内で使いたい

現在天気予報のウェブアプリを作っています。当日の天気を表示し、その下に次の日から６日間の天気予報を表示させたいと思っています。

Line 103: axios.get(localTimeApiUrl).then(showWeekdaysForecast); で関数showWeekdaysForecastを呼び出し、検索した場所の現地時間の曜日を連続で表示させたいのですが、Line106；function　showWeekdaysForecast内で定義したw DayNumをLine85；function showForecast内で使えるようにするにはどうしたらいいでしょうか？
（例：Tokyoと検索→現地の曜日は金曜日、その下に土曜日、日曜日。。。と天気を表すimgと共に表示；　Line 138のforecastElements.innerHTMLで6日分を表示したいと考えています）

発生している問題・エラー

Uncaught (in promise) ReferenceError: wDayNum is not defined
    at showForecast

自分で試したこと

Line103;axios以降を変数に入れ,関数を介さず値を取ろうとしましたが、promise下のオブジェクトへアクセスできませんでした。

2Answer

@tetr4lab posted at 2021-02-05

回答

showWeekdaysForecastを定義する前に(showForecastの定義内で)、あらかじめlet wDayNum;しておいて、showWeekdaysForecastではlet を外すというのはいかがでしょうか?

code

function showForecast() {
    let wDayNum = 0; // showForecastのローカル変数
    function showWeekdaysForecast() {
        wDayNum++; // showForecastのローカル変数を使用
    }
    showWeekdaysForecast()
    console.log(`wDayNum = ${wDayNum}`); 
}

showForecast();

result

wDayNum = 1

⇒ 参考

蛇足

ソースコードは、画像でなく、テキストを貼り付けると回答を得やすくなります。
- そうすることで、回答者は、コピペで検証することができますし、引用することも、修正案を示すことも容易になります。
ソースを貼り付ける場合は、「コードの挿入 (Qiita公式ヘルプ)」をお使いください。
- 特に、一部の言語は、正しく挿入しないと表示されない部分が生じます。
- コードの言語を指定すると、構文解析に基づいて着色され読みやすくなります。
  - 「```js」の行で始めると、javascriptの文法に基づいて着色されます。
- ファイル名を付けて冒頭に表記することもできます。
既に投稿した質問でも、再度編集して書き替えることができます。
- 記事の右上辺りに「編集する」リンクがあると思います。

1Like

Comments

@tetr4lab
実証コードを追記しました。

`wDayNum`は、`showForecast`のローカル変数として定義されます。
`showForecast`のローカル関数である`showWeekdaysForecast`からは、`wDayNum`へアクセス可能です。
@Thousandsprings
Questioner
回答ありがとうございます。下記のようにということで良いでしょうか？
こちらのコードですと非同期通信のためか、function showForecastのresponseがundefinedで返され、値をとることができませんでした。
@tetr4lab
はい、そういうイメージで、ローカル関数は親関数のローカル変数にアクセスできます。

非同期処理を待機するのは`await`とか使うのかと思いますが、不勉強で詳しく存じません。
この件をクローズして新たな質問として投稿されるのはいかがでしょうか。
お力になれず申し訳ありません。
@Thousandsprings
Questioner
自分もまだ初学者なので、また質問しつつ自分でも調べつつ進めてみます。どうもありがとうございました。m（__）m

@Thousandsprings posted at 2021-02-05

function showForecast(response) {
  console.log(response); //weekly forecast
  //change icons
  let forecastElements = document.getElementById("forecast");
  forecastElements.innerHTML = null;

  let forecast = null;

  //Temperature
  let maxTemp = null;
  let minTemp = null;

  //Local time
  let localTimeApiKey = "......";
  let latitude = response.data.lat;
  console.log(latitude);
  let longitude = response.data.lon;
  let localTimeApiUrl = `https://api.timezonedb.com/v2.1/get-time-zone?key=${localTimeApiKey}&format=json&by=position&lat=${latitude}&lng=${longitude}`;
  axios.get(localTimeApiUrl).then(showWeekdaysForecast);

  let wDayNum = 0;

  // //show the day of a week in local time
  function showWeekdaysForecast(weekDays) {
    console.log(weekDays); //local data
    let wDay = new Date(weekDays.data.formatted);
    console.log(wDay);
    wDayNum = wDay.getDay();
    
    console.log(wDayNum); //weekday number
  }
  showWeekdaysForecast();
  console.log(`wDayNum = ${wDayNum}`);

  let weekdays = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];
  let weekDay = document.getElementById("weekDay");
  weekDay.innerHTML = null;

  for (let index = 1; index < 7; index++) {
    forecast = response.data.daily[index];
    maxTemp = Math.round(response.data.daily[index].temp.max);
    minTemp = Math.round(response.data.daily[index].temp.min);

    forecastElements.innerHTML += `<div class="circle col-md-1"><div class=col-md-1" id="weekDay">${
      weekdays[wDayNum + index]
    }</div ><img id="imgForecast" src="https://openweathermap.org/img/wn/${
      forecast.weather[0].icon
    }@2x.png"/>
    <h3>${maxTemp}℃/${minTemp}℃</h3>
    </div>`;
  }
}
showForecast();

0Like

Are you sure you want to delete the question?