質問: document.getElementById("container") window.twttr.widgets.createTweet(tweetId, container) }, [tweetId]) setTweetId(12345) ``` 上記のようなコードで、ページにツイートを埋め込んでいるのですが、「`window.twttr`が存在しません」みたいなエラーになります。 `window.twttr`というのは`widgets.js`がロード完了すると使えるようになる何かです。 (DOMなのか何なのか理解していません。誰か知っていたら教えてください。) 1. トップページ(ツイートを埋め込んでいない)にアクセスして、`widgets.js`を読み込ませる。 2. サブページ(ツイートを埋め込んでいる)に移動。 のような手順ならエラーになりません。ツイートが画面に表示されます。 widgets.jsさえ読み込めればツイートを表示できているので、`window.twttr.widgets.createTweet()`の部分のコード自体が間違っている訳ではないです。 いまのところ、`setInterval`で1秒ごとに`window.twttr`の存在確認をしているのですが、効率が悪いと感じています。 `addEventListener`などで`window.twttr`が利用可能になるまで待ち、`window.twttr.widgets.createTweet()`を実行させるにはどうすればいいでしょうか?
回答: Twitter Developer Platformでは、「最も信頼できる方法」としてwidgets.jsロード用のサンプルコードが紹介されています。 ``` ``` このように`widgets.js`をロードした後、`twttr.ready`関数の引数にロード完了後実行したいコールバック関数またはアロー関数を投入すればツイートが表示されます。 ``` twttr.ready( () => twttr.widgets.createTweet("20",document.querySelector('div.container'))) ; ``` ここまでがリンク先のドキュメントに記載されいてる内容です。 質問のようなコードの場面で使用するのであれば、`twttr.ready`関数の引数に`setTweetId`を実行するコールバック関数を設定すれば表示できるのではないかと思います。