promiseのメソッドチェーンの中でajaxを使い要素を追加しhtmlcollectionをArray.fromで配列に直そうとすると空の配列になる現象について

Question

前提・実現したいこと

ajaxを使って追加した要素のhtmlcollectionをきちんとした配列に直したい。

発生している問題・エラーメッセージ

ajaxを使って追加した要素のhtmlcollectionを配列に直せない。なぜか空の配列になる。
javascript1の書き方をしても間違っていないと思っているのですができません。htmlcollectionは取得出来ているのでpromiseはしっかりと動いておりthenのチェーンも順番に処理できていると思うのですがArray.fromだけがうまくいきません。Array.fromも一応配列の形にはなっているので働いてるのでしょうが空の配列になります。

該当のソースコード

<div id="ui">unn</div>

Array.fromをしたら空の配列になるjsコード↓

                        function delayHello(){
                            var d = new $.Deferred;
                            d.resolve();                        
                            return d.promise();
                        }
                        let promise=delayHello();
                        promise.then(function(){
                            $.ajax()
                            .done(function(){
                                $('#ui').append('<div class="yur">こんんにちは</div>');
                            })
                            
                        }).then(function(){
                            console.log(document.getElementsByClassName('yur'));//htmlcollectionは取得出来ている。
                            console.log(Array.from(document.getElementsByClassName('yur')));//空の配列になる。

                        })                

Array.fromをしてもなぜかきちんと配列に値が入っているjsのコード↓

                        function ajaxWithAppendToBody(ajaxOptions){
                            var deferred = new $.Deferred;
                            $.ajax(ajaxOptions).done(function(data){
                                $('#ui').append('<div class="yur">こんにちは</div>)'); 
                                deferred.resolve(data); // resolve()でdoneメソッドを呼び出す
                            }).fail(function(data){
                                deferred.reject(data);  // reject()でfailメソッドを呼び出す
                            });
                            return deferred.promise();  // 戻り値はpromiseにする
                        }

                       
                        ajaxWithAppendToBody({
                        }).done(function(data){
                            // 非同期処理が成功時の処理
                            console.log(document.getElementsByClassName('yur'));//htmlcollectionは取得出来ている。
                            console.log(Array.from(document.getElementsByClassName('yur')));//きちんと配列になっている。

                        }).fail(function(data){
                            // 非同期処理が失敗時の処理
                        });

試したこと

javscript2のコードの真似をしてjavascript1のコードでresolveの前で要素を追加してみました。

function delayHello(){
                            var d = new $.Deferred;
                            $.ajax()
                            .done(function(){
                                $('#ui').append('<div class="yur">こんんにちは</div>');//resolveの前で要素を追加する
                                d.resolve();     
                            })
                                               
                            return d.promise();
                        }
                        let promise=delayHello();
                        promise.then(function(){
                            console.log(document.getElementsByClassName('yur'));//きちんとhtmlcollectionを取得出来ていた。
                            console.log(Array.from(document.getElementsByClassName('yur')));//配列の形になっていた
                            
                        })

そしたらきちんとした配列の形で出力されました。resolveの前でするとうまくいくようです。なぜresolveの後だと成功しないのでしょうか。promiseは非同期処理の順番を指定するものだと考えているのでできればthenの中でajaxなどの非同期処理を書けるようになりたいのです。

補足情報（FW/ツールのバージョンなど）

xampp
jquery 3系

Answer 1

1番目のコードは2つの問題があります。

• 外側のpromiseが $ajax のpromise解決を待っていない
• console.log の使い方（中に入っている情報に対する認識）を誤っている

まず1つ目ですが、簡単に確認するにはタグをappendする前にconsole.logで何らかのログを出すと分かります。

// ajaxの部分だけ抜粋
  .then(function () {
    $.ajax().done(function () {
      $("#ui").append('<div class="yur">こんんにちは</div>');
      console.log('div append done');
    });

HTMLCollectionのログの前に div append done が表示されるはずです。

MDNでPromiseの挙動を確認すると、返り値の項にこう書いてあります。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

・何も返さなかった場合、 then によって返される Promise は undefined の値で解決します。

外側のpromiseのthenは、確かにreturnがないので、何も返していません。なので、中の処理に関わらず即刻解決されて次のthenが処理されてしまっています。
これを防ぐには、$ajaxの結果をちゃんとreturnで返してあげれば良いです。

  .then(function () {
    return $.ajax().done(function () {
      $("#ui").append('<div class="yur">こんんにちは</div>');
      console.log('div append done');
    });

これだけでHTMLCollectionのログの前に'div append done'が出てきます。
一応、これでこの問題は解決です。この状態でArray.fromを使用すればちゃんとdiv.yurの配列が取得できます。

2つ目のconsole.logについてです。
他のブラウザで正確な検証はしていないのでchromeの場合に限っての説明としますが、console.logの引数にDOM要素を設定した場合、DOMへの参照になります。
コンソール上では ▶ HTMLCollection []と右向きの三角が表示されいます。ここをクリックすると中身が見れるわけですが、これは「今現在の」参照（document.getElementsByClassName('yur')の結果）になります。
そもそも、console.logの実行時点でちゃんと要素がappendされていれば、コンソール上の表示はHTMLCollection [div.yur]となるはずです。なので、元のコードではconsole.logの実行時点でHTMLCollectionは空だったのです。しかし、このHTMLCollectionはMDNの表現で言うと「生きて」おり、DOMの状況を監視してターゲット（この場合は"yur"クラスを持つ要素）に変更があった場合自動的に中身が更新されていくものです。最初のコードもコンソールで確認する段階には要素がappendし終わっているので、コンソールのHTMLCollectionをクリックするとdiv.yurが1つ入っているように見えます。
しかし、ログが出力された時点ではまだdiv.yurはappendされておらず、appendを検知して中身が更新されたHTMLCollectionを見ていただけなのです。

このように、console.logでDOMやオブジェクトをそのまま見ると「今いまの情報」を見ることができない場合が発生します。これを防ぐため、MDNのドキュメントは以下のような方法を推奨しています。

console.log(JSON.parse(JSON.stringify(obj)))

https://developer.mozilla.org/ja/docs/Web/API/Console/log#logging_objects

Comments

[_akasa]

MDNまで引用していただき丁寧な回答どうもありがとうございます。
console.log('div append done')を入れてreturnで$.ajaxを返すのとreturnを付けない書き方をしてみたらdiv append doneの出力のタイミングに違いがありました。
thenの中に書くハンドラ関数はどんな処理でも関数の処理を終えてから、次のthenの処理を始めるものだと考えていました。then()の中に書くハンドラ関数がpromiseを返す関数(非同期関数)だった場合はreturnを付けてreturn $.ajaxがあるから終わらせることができない($.ajax()の処理結果が必要である)状態にしているという理解でいいのでしょうか。
ログでhtmlcollectionを確認している時点ではappendされてなかったのですね。全然気づきませんでした。非同期関数の処理が丸ごと外側のpromiseの処理が終わってから実行されていたんですね。正しいコンソールログの使い方も教えてくださりありがとうございます。
$.ajax()はpromiseを返すということは実際はalwaysが省略されて$.ajax().always(function(){return new $.Deffered.promise()})のようになってるのでしょうか。
まだまだ本当に理解してない出来てないですが、調べていきます。教えてくださりありがとうございました。

[hope_mucci]

promise関連の動作原理にいろいろと理解不足があるように見受けられます。promiseは本当に複雑で難しい概念で、このようなコメント上でとても解説しきれません。回答に上げたMDNのドキュメントを読み、実際にいろいろなパターンを書いてみて勉強してください。
then()はpromiseをreturnすると、その後の動作がreturnしたpromiseの解決状況に依存します（MDNドキュメントの「返値」の一番下に書かれているパターン）。よって$.ajax関数の戻り値であるpromiseの解決とthen()の解決が同値になり、結果的に$.ajaxの処理完了を待つことができる、ということです。

[_akasa]

理解できてないことが多いので聞きたいことはありますが、まずはMDNのドキュメントをしっかり読んで書いてみます。それでも分からなければまた質問させていただきたいです。
確かにMDNのドキュメントに書いてありました。MDNのドキュメントと合わせてpromiseを基礎から勉強します。ありがとうございました。

Answer 2

$.whenかfetchで処理すると良いかと思います

Comments

[_akasa]

回答ありがとうございます。
MDNのドキュメントを見てみました。$.whenはこの場合の使い方が分からないので並列処理でないと解決できない問題の時に使ってみたいと思います。fetchを書いてみましたがエラーになったのでとりあえずpromiseと$.ajaxを使って書きたいと思います。でもfetchなどは知らなかったので助かりました。$.ajaxと二点違いがあるそうなので必要になった時にエラー含め解決して使いたいと思います。ありがとうございました。