質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

Q&A

解決済

1回答

5280閲覧

MutationObserverがうまく動作しない

tenshinhan

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

0グッド

0クリップ

投稿2021/01/20 09:22

###概要
現在chromeの拡張機能を作成しています。
(ざっくり言うと)runtime.onMessage.addListenerで別のjavascriptファイルから値を受け取り、その値を元にツイートを検索するような機能を作成しています。

twitterのツイートは非同期で取得されているのでMutationObserverを利用して要素に変化があるたびツイートを読み込んで検索条件に当てはまるか判断する、というような動作をしたいのですが、そこで以下のようなエラーが出ます。

error

1Error in event handler: TypeError: Failed to construct 'MutationObserver': parameter 1 is not of type 'Function'. 2 at serch

(エラーが出る場所はここです↓)

javascript

1var observer = new MutationObserver(deleteTweet(message))

###コード全体

javascript

1chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) { 2 console.log(message.text) 3 4 serch(message) 5 6 sendResponse() 7 return 8}) 9 10function serch (message) { 11 function deleteTweet (message) { 12 console.log('doing') 13 // 表示されているツイートの本文が含まれている要素を取得 14 let articles = document.querySelectorAll("div[lang='ja'] > span") 15 16 if (articles.length > 0) { 17 Array.prototype.forEach.call(articles, async (article) => { 18 if (!article.innerText.includes(message.text)) { 19 let tweet = article.closest('article') 20 let range = tweet.parentNode 21 range.style.display = 'none' 22 } 23 }) 24 } 25 } 26 27 // オブザーバーの作成、ここでエラーが出る 28 var observer = new MutationObserver(deleteTweet(message)) 29 var target = document.getElementsByTagName('section')[0] 30 observer.observe(target, { 31 childList: true, 32 subtree: true 33 }) 34}

###わからないこと
一度deleteTweet(function)が実行されたのちエラーが出るためオブザーバーを作成した時点で一度引数に設定したfunction(ここではdeleteTweet)が実行されていることになるのですが、なぜobserver.observeする前に実行されるのかが理解できていません。

またエラーにはdeleteTweetはfunctionではないとありますが、function以外の何者でもないのでどうすれば解決するのか全くわかりません。
TypeError: "x" is not a function←この資料などを読みましたが、今のところ解決方法が全く思いつきません。

初歩的な質問で申し訳ありませんが、何かアドバイス等ありましたら教えていただけると大変助かります…。よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

この行でMutationObserverに渡されているのがdeleteTweetではなく、deleteTweet(message)だからです。
件のエラーでfunctionではないと言われているのは、deleteTweetではなく、deleteTweetを実行した結果の戻り値です。。

javascript

1var observer = new MutationObserver(deleteTweet(message))

※追記、コメントに対して回答します。
関数オブジェクトに括弧を付けると、それは関数の呼び出しになります。
この行の時点で既にdeleteTweetが実行されています。
そして、new MutationObserverの引数には、deleteTweet(message)の戻り値のnullが渡されます。

javascript

1var observer = new MutationObserver(deleteTweet(message)) 2 ↑この部分で実行している

関数自体を渡したいなら、括弧無しで記述して下さい。

javascript

1var observer = new MutationObserver(deleteTweet)

deleteTweetに対して外部から値を渡したい場合については、クロージャの仕組みを使いましょう。
例を一つ挙げますが、まず自分で調べて理解するようにして下さい。

javascript

1function sample() 2{ 3 const hoge = "hogehoge";//ここで宣言した変数は 4 function uni() 5 { 6 console.log(hoge)//ここからも参照できる。 7 } 8 uni();//hogehogeが表示される。 9} 10 11console.log(hoge);//当然ここからは参照できない。

投稿2021/01/20 09:41

編集2021/01/20 12:25
AT_2nd

総合スコア266

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tenshinhan

2021/01/20 10:38

コメントしてくださりありがとうございます。 MutationObserverにはDOM変更時に実行したい関数を渡すという認識なのですが(これは合っていますか…?)、実行したい関数に引数を渡す必要があるときはどうすれば良いのでしょうか。 あと実行した結果の戻り値がfunctionではないというのはどういうことでしょうか…。 DOM変更→observerが変更を確認→deleteTweetを実行という一方的な?流れの動作という認識だったのですが、どのタイミングでどこに戻り値が返されているのでしょうか。 初歩的な部分で申し訳ないのですがなかなか理解できず困っているので、お時間ありましたら返信して頂けると嬉しいです。よろしくお願いいたします。
tenshinhan

2021/01/20 14:13

ご返信くださりありがとうございます。 戻り値のことについてはざっくり理解できたように思います。丁寧に説明してくださり本当にありがとうございます!クロージャについても一度しっかり調べます。本当に助かりました!ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問