0

下記の箇所がいまいち分からなくてみているのですが、コンストラクタ 内の実行順が上からではない気がします。Javascriptは非同期処理のためでしょうか?

text-animation.js

class TextAnimation {
    constructor(el) {
        //elには<div class...が入ってる
        console.log(el);
        this.DOM = {};
        // 順番おかしい 分割された値が出てくる。
        const test = document.querySelector(el);
        console.log(test);
        if(el instanceof HTMLElement) {
            this.DOM.el = el;
        } else {
            this.DOM.el = document.querySelector(el);
        }
        this.chars = this.DOM.el.innerHTML.trim().split("");
        this.DOM.el.innerHTML = this._splitText();
    }
    _splitText() {
        return this.chars.reduce((acc, curr) => {
            curr = curr.replace(/\s+/, '&nbsp;');
            return `${acc}<span class="char">${curr}</span>`;
        }, "");
    }
    animate() {
        this.DOM.el.classList.toggle('inview');
    }
}
class TweenTextAnimation extends TextAnimation {
    constructor(el) {
        super(el);
        this.DOM.chars = this.DOM.el.querySelectorAll('.char');
    }
    
    animate() {
        this.DOM.el.classList.add('inview');
        this.DOM.chars.forEach((c, i) => {
            TweenMax.to(c, .6, {
                ease: Back.easeOut,
                delay: i * .05,
                startAt: { y: '-50%', opacity: 0},
                y: '0%',
                opacity: 1
            });
        });
    }
}

main.js

document.addEventListener('DOMContentLoaded', function () {
//Intersectionは交差、Observerは監視する物。
    //<div class="animate-title"...</div>挟まれた要素まで取得できる。allだから同じ物をリストにして返してくれる。
    //監視したい要素がリストで格納される。
    const els = document.querySelectorAll('.animate-title');
    //このentriesはio.observe(child)、io.observe(child2)...のように監視する対象が複数ある場合にこちらにentriesに格納される。
    //関数だから順番は合ってる。コールバック関数として渡される。
    const cb = function(entries, observer) {
        entries.forEach(entry => {
            if(entry.isIntersecting) {
                // entry.targetはelに値する。
                // 最初はentry.targetが.animate-titleだった。
                const ta = new TextAnimation('.animate-title')
                ta.animate();
                //entry.target.classList.add('inview');
                // 監視を停止するには
                observer.unobserve(entry.target);
                
            } else {
                // console.log('out view');
                // entry.target.classList.remove('inview');
            }
            
        });
        //alert('intersectiong');
    }

    const options = {
        //交差対象にしたい親の要素を設定する事ができる。
        //今は画面に入るか入らないかだけど、それをタグないに入るかどうかで設定できる?
        root: null,
        //上から300pxの所で交差するように設定できる。
        //左右にも値を設定すると交差してない事になる。pxか%を付けないないとエラーになる。
        //              上    右  下   左
        rootMargin: "0px",
        //交差する部分の位置を設定できる。内側が0で外側が10.5で真ん中でも動作可能にする。
        threshold: 0

    }

    const io = new IntersectionObserver(cb, options);
    // queryselectorAllで取得したdiv要素
    els.forEach(el => io.observe(el));
});

自分の想定では分割前の <div class="animate-title"... が出力されると思っていましたが、実際には分割された物がconsole.logで出力されました。

もう一つ気になった事が、コンストラクタ 内で下記のように変数を使用できると思っていたのですが、thisを付けないとtestは未定義と出ます。

test = document.querySelector(el);
console.log(test);

Pythonでは似たような書き方でself無しでも実行できました。

この違いは非同期処理・同期処理の違いによるものなのでしょうか?

Python での記述例:

class Person:
    def __init__(self, name, age):
        name2 = name
        print(name2)
        self.age = age
            
taro = Person('太郎', 18)
# 結果:太郎

すいません。よろしくお願いします。

追記すいません。
index.html
分割するものを載せていませんでした。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <section>

        <div class="animate-title">Start where you are.</div>

    </section>
    <section>

        <div class="animate-title">Use what you have.</div>

    </section>
    <section>

        <div class="animate-title">Do what you can.</div>

    </section>
    <script src="text-animation.js"></script>
    <script src="main.js"></script>
</body>

</html>
9
  • 1
    コンストラクタを実際に呼び出した時とエラーメッセージあると回答しやすいです! Commented 2020年8月22日 5:32
  • エラーは出ていないです。thisを使用しない場合未定義になります。
    – wataru
    Commented 2020年8月22日 5:45
  • 1
    それはjavascriptの構文エラーです。主語がないので推測になりますが、おそらくtestという変数が未定義になるということでしょうか。javascriptでは変数として代入する際には、変数として宣言する必要があります。例えばconst test = 1let test = 1var test = 1などとすると宣言と代入を同時に行うことができます。それと、分割されたものとはなんでしょうか。返り値のサンプルなりがないと憶測での回答になるので質問者様、回答者にとって効率が良くないのであるとお互いハッピーだと思います! Commented 2020年8月22日 6:12
  • 4
    意図せずコンストラクタが複数回呼ばれたりする問題かもしれませんので、呼び出し側も含んだ再現可能なサンプルコードを示したほうが良いかと思います。ja.stackoverflow.com/help/minimal-reproducible-example
    – int32_t
    Commented 2020年8月22日 7:19
  • すいません。うっかりしていました。宣言を忘れていました。付与したら期待どうりに動作しました。
    – wataru
    Commented 2020年8月22日 14:21

1 件の回答 1

1

質問者が言っている具体的な違いがわからないのですが、書き換えられるDOMをconsole.log()で表示しようとしているようなので、その問題だと推測します。この回答は全く見当違いの可能性があります。


Google Chromeで開発モードのConsoleを出した状態で、次のようなスニペットを実行しても再現できると思います。(他のブラウザでは現象が発生しない可能性があります。Google Chromeでのみ確認しています。)

const test = document.getElementById("test");
console.log(test);
test.innerHTML = "b";
console.log(test);
<div id="test">a</div>

次のようなログが出るでしょう。

<div id="test">b</div>
<div id="test">b</div>

一回目のconsole.log()が実行されるとき、中身は"a"だったはずなので、これはおかしいと思うかも知れません。では、各行の実行が非同期なのかというとそうではありません。次を同じように実行してください。

const test = document.getElementById("test");
console.log(test.innerHTML);
test.innerHTML = "b";
console.log(test.innerHTML);
<div id="test">a</div>

結果は次のようになるはずです。

a
b

一体何が違うのかですが、これはChromeのコンソール表示の仕様による物です。console.log()自体は同期的に、オブジェクトをコンソールに渡します。しかし、コンソールで実際に表示される処理は非同期です。最初のコードでは、同じDOMを渡しています。このときDOMの中身のコピーが渡されるのではなく、DOMへの参照が渡されるだけに過ぎないことに注意してください。コンソールでは、それがDOMの場合は、HTMLとして表現します。この処理はconsole.log()とは分離された非同期な処理であるため、最初のconsole.log()で渡された物も、表示処理をするときには既に書き換わった物になっていると言うことです。

この現象は配列(Array)等でも発生します。書き換え不可な文字列など以外をコンソールログとして表示した場合は、コンソールに渡されたときの中身ではなく、コンソールで表示されるときの情報であるということに注意しなくてはなりません。

※ コンソールでどのような表示をするかはブラウザ依存であるため、他のブラウザでは結果が異なる場合があります。


もうひとつ。Pythonの例ですが、JavaScriptで書くとこうなります。

class Person {
    constructor(name, age) {
        let name2 = name;
        console.log(name2);
        this.age = age;
    }
}
let taro = new Person('太郎', 18);
// 結果:太郎

Pythonは代入文を書くだけでローカル変数(トップレベルならグローバル変数)が宣言されたとみなされます。しかし、JavaScriptのstrictモードでは、varletconst等を用いた宣言文が必要です。非strictモードでは、代入文を書くだけでグローバル変数として宣言されたとみなされますが、class構文の内部は強制的にstrictモードになるため、この仕様は使用できません。

5
  • つまりコピーを作成しているのではなく、参照先へのアドレスを渡しているので参照先が変更されると変わってしまうという事でしょうか?一度javascriptが全て実行された後にchromeのコンソールで後で追ってconsole.logの部分を表示しているような感じで内部で動作しているのでしょうか?
    – wataru
    Commented 2020年8月23日 2:56
  • JavaScriptのおいて明示的に行わない限りオブジェクトのコピーを渡すことはありません。cosolel.logの仕様 console.spec.whatwg.org は結構複雑ですが、Printerの処理までは同期的処理されるはずです。しかし、コンソールウインドウでの表示が同期的であるかどうかまでは規定されていません(バッファを持って留意して良い)。ブラウザの実装によりますが、実際の文字列のような表示への変換はコンソールを見るときまで保留されます。そして、コンソールを表示したままであっても、その動作は別スレッド(別のWorker)で行われるため、必ず同期的な表示を期待することは難しいでしょう。そのような物が必要な場合は、文字列に変換してから渡すなどの工夫が必要です。
    – raccy
    Commented 2020年8月23日 3:25
  • それでconst test = String(document.querySelector(el));のように変更を加えて見たのですが、結果は[object HTMLDivElement]が出力されました。どうしたら上手くいきますか?
    – wataru
    Commented 2020年8月23日 5:20
  • 1
    outerHTMLを使ってシリアライズしてください。
    – raccy
    Commented 2020年8月23日 6:06
  • 上手く行きました!ありがとうございます。
    – wataru
    Commented 2020年8月23日 6:28

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。