

非同期通信でJSONデータの取得をクラス式で実現するにはどうしたらいいでしょうか？  
HTML上のボタン押下後に画像を表示できるようにしたいんですが、クラス式での方法を色々調べてもわかりませんでした。わかる方お力を貸していただきたいです。  
まだエンジニアの学習を始めて数ヶ月でわからない事だらけなのでお手柔らかにお願いいたします。

[code]

    const btn = document.getElementById("btn");
    const dogImg = document.getElementById("dogImg");
    
    // ボタンをクリックしたらイベント発動
    btn.addEventListener("click", () => {
      fetch("https://example.com/api") // APIのURL
        .then((response) => {
          return response.json();
        })
        .then((myJson) => {
          // imgタグに取得したURL画像を入れる
          dogImg.src = myJson["message"];
        });
    });
    
[/code]


CC BY-SA 4.0
2023-01-18T16:17:21.750
93442
2023-01-23T06:05:56.113
2023-01-23T06:05:56.113
3475
question
javascript json ajax
Ajaxを使用してJSONデータの取得をクラス式で実現するには？


たとえば「整数の乗算を足し算に置き換える」とか「三項演算子を`if`に置き換える」のような要求であればそれだけの情報でコードを書くことが可能ですが、クラスを定義するには「何を表現するクラスなのか」の情報が必要です。  
質問文のコードとコメントからはそれが不明で、とくにクラスを利用するメリットも思い浮かばないので「クラスを使ったコードに書き換える必要はない」が回答になります。

* * *

以下のような状況ならクラスが絡んでくる可能性はあるかな、という候補はありました。

  * `addEventListener()` の第2引数に、あるクラスのインスタンスを渡したい
  * `addEventListener()` の第2引数に、あるクラスのメソッドを渡したい
  * このクリックの挙動を組み込んだ[カスタム要素](https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_custom_elements)を定義したい
  * 外部APIへのアクセスをカプセル化したクラスを定義したい


CC BY-SA 4.0
2023-01-19T03:48:25.960
93446
2023-01-19T04:28:05.553
2023-01-19T04:28:05.553
3475
3475
93442
answer