Fetch API　二回クリックしないとテキストが反映されない理由が知りたい

前提

vscodeで下記のようなページを作っています。ボタンをクリックしたらFetch APIでjsonファイルを読み込み,
テキストが出現するはずなのですが、（アニメーションも失敗していますが）なぜか二回クリックしないとテキストが反映されません。理由が知りたいです。
よろしくお願いします。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <title></title>
7    <link rel="stylesheet" type="text/css" href="style.css">
8    <script src="data.js" type="text/javascript"></script></script>
9</head>
10<body>
11    <div class="main">
12        <h1 id="words">メッセージ</h1>
13        <p   class="name" id="name"></p>
14        <p class="text-button" id="text-button">ボタン</p>
15      
16        <script src="function.js" type="text/javascript"></script>
17
18    </div>
19</body>

data.js
1let list = [];
2let nameValue = ""
3
4async function testData() {
5    const res = await fetch("省略");
6    const data = await res.json();
7    nameValue = data[0][1];
8    for (i = 1; i <data.length; i++){
9        list.push(data[i][i+1]);
10    }
11    return list;
12}

function.js
1const textBtn =document.getElementById("text-button");
2let lists;
3
4
5(async function() {
6    lists = await testData();
7
8    const clicked = () => {
9        let selecter = parseInt(Math.random()*((lists.length)-1)+1);
10        let button = document.getElementById("text-button");
11        let words = document.getElementById("words");
12        let name = document.getElementById("name");
13        
14        new Promise((resolve, reject) => {
15            resolve();
16        })
17    
18            .then(() => {
19                console.log(selecter);
20                console.log(lists[selecter]);
21                console.log(button.getAnimations()[0]);
22                
23             
24            })
25            .then(() => {
26               //省略
27    };
28    textBtn.addEventListener("click",clicked);
29  })();
30

style.css
1html {
2    cursor: default;
3}
4body {
5    background-image:url("sky01.png");
6   
7    
8} 
9
10.text-button{
11    
12    transition: all 1.2s;
13   
14}
15.text-button:hover{
16    backdrop-filter: sepia(60%);
17    border-radius:20px;
18    cursor: pointer;
19    width:130px;
20}
21.fadeIn{
22    animation-name:fadeInAnime;
23    animation-duration:3s;
24    animation-fill-mode:forwards;
25    opacity:0;
26}
27.fadeIn2{
28    animation-name:fadeInAnime2;
29    animation-duration:7s;
30    animation-fill-mode:forwards;
31    opacity:0;
32}
33
34@keyframes fadeInAnime{
35    from{
36        opacity:0;
37    }
38    to{
39        opacity:1;
40    }
41}
42
43@keyframes fadeInAnime2{
44    from {
45        opacity: 0;
46    }
47    to {
48        opacity: 1;
49    }
50}

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

回答2件

ベストアンサー

ご提示のコードを試してみましたが、『二回クリックしないとテキストが反映されない』という現象ではなかったです。『クリックできるようになるまで時間がかかる』という現象を確認しました。

クリックイベントのハンドラが設定されるのが、lists = await testData();の後ですから、通信が終わるまではイベントが設定されない、という話ではないでしょうか。

投稿2024/04/24 02:53

Lhankor_Mhy

総合スコア36134

tatti2345

2024/04/24 03:14 編集

ありがとうございます。 lists = await testData();の通信を早める方法はないでしょうか？もっと早く表示させたいです。

Lhankor_Mhy

2024/04/24 03:17 編集

body の最後で実行していますから、ほぼDOMContentLoadedに近いタイミングだと思います。もっと早い段階で読み込みを開始してはどうでしょうか。ローカルで実行した場合にはあまり変わらないかもしれないですが……

tatti2345

2024/04/24 03:53

回答ありがとうございます。非常に参考になりました。

int32_t

2024/04/24 04:36

<head>の先頭に <link rel="preload" as="fetch" href="https://script.google.com/macros/s/AKfycbwHgr1r_IMMX5i-icdtoQxj6uhmzkSey-IjZAOcpRTjFu48L4sDrpydm7DNumZdQqq8/exec"> を書いておくと多少早くなるかもしれません。

tatti2345

2024/04/24 05:12

int32_t様ありがとうございます！試してみます。

Lhankor_Mhy

2024/04/24 05:17

通信速度を見てみました。 GASのURLを叩くと302リダイレクトされるようなのですが、当方の環境ではそれだけで1.5s～2.0sほどかかっていました。リダイレクト後は0.5s程度でしたので、GASを使っている限り劇的な短縮は望めないかもしれません。見せ方の工夫をした方がいいのかもしれません。

tatti2345

2024/04/24 06:32

Lhankor_Mhy様ありがとうございます。 Google Apps Scriptは使っておりません。参考に致します。

Lhankor_Mhy

2024/04/24 06:34

ああ、あのURLはテスト用だったのですね。理解しました。

tatti2345

2024/04/24 06:57

すみません、仰っていることが分かりました。あのurlはGASで作成されている可能性があります。GAS以外のURLでできないか検討してみます。

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

複雑に考えすぎでは？
こんな感じで

javascript
1<script>
2window.addEventListener('DOMContentLoaded', async ()=>{
3  const url='https://script.google.com/macros/s/AKfycbwHgr1r_IMMX5i-icdtoQxj6uhmzkSey-IjZAOcpRTjFu48L4sDrpydm7DNumZdQqq8/exec';
4  const data= (await fetch(url).then(res=>res.json())).map(x=>Object.values(x)[0]);
5  const nameValue=data.shift();
6  data.forEach((x,y)=>data.push(data.splice(parseInt(Math.random()*(data.length-y)),1)[0]));
7  document.querySelector('#text-button').addEventListener('click',()=>{
8    if(data.length){
9      document.querySelector('#name').textContent=nameValue;
10      words.textContent=data.shift();
11    }else{
12      words.textContent="おしまい";
13    }
14  });
15});
16</script>
17<div class="main">
18<h1 id="words">メッセージ</h1>
19<p class="name" id="name"></p>
20<p class="text-button" id="text-button">ボタン</p>
21</div>