Open19日前にコメント追加3

jsで気になったこととか

.textContentと.innerTextは、どちらもDOM要素のテキストを取得または設定するために使用されるプロパティですが、いくつかの重要な違いがあります。

1. `.textContent`

取得する内容: .textContentは、要素内のすべてのテキストノードを取得します。これは、要素の子孫に含まれるすべてのテキストを含み、HTMLタグは無視されます。
パフォーマンス: .textContentは、DOMの構造を考慮せずに単純にテキストを取得するため、パフォーマンスが良いです。
スタイルの影響: .textContentは、CSSスタイルや表示状態に関係なく、すべてのテキストを取得します。たとえば、display: noneの要素のテキストも取得されます。

const element = document.getElementById("example");
console.log(element.textContent); // すべてのテキストを取得

2. `.innerText`

取得する内容: .innerTextは、要素内の表示されているテキストを取得します。これは、CSSスタイルによって非表示になっているテキスト（たとえば、display: noneの要素のテキスト）は含まれません。
パフォーマンス: .innerTextは、ブラウザが表示するテキストを考慮するため、パフォーマンスが若干低下することがあります。
スタイルの影響: .innerTextは、要素のスタイルに影響を受けるため、表示されているテキストのみを取得します。また、改行や空白も考慮されます。

const element = document.getElementById("example");
console.log(element.innerText); // 表示されているテキストを取得

まとめ

.textContent: すべてのテキストノードを取得し、HTMLタグは無視され、パフォーマンスが良い。非表示のテキストも含まれる。
.innerText: 表示されているテキストのみを取得し、CSSスタイルの影響を受ける。改行や空白も考慮される。

この違いを理解することで、必要に応じて適切なプロパティを選択して使用することができます。

ポテト

JavaScriptにおけるstaticキーワードは、クラスのプロパティやメソッドを定義するために使用されます。staticで定義されたプロパティやメソッドは、インスタンスではなくクラス自体に関連付けられます。つまり、クラスのインスタンスを作成しなくてもアクセスできるということです。

あなたが示したコードの例では、targetsという静的プロパティがクラス内で定義されています。このプロパティは、クラスのインスタンスを作成しなくても、クラス名を通じてアクセスできます。

以下は、staticを使った簡単な例です：

class MyClass {
    static targets = ["name", "output"];

    static getTargets() {
        return this.targets;
    }
}

// クラス名を使って静的プロパティにアクセス
console.log(MyClass.targets); // ["name", "output"]

// 静的メソッドを使って静的プロパティにアクセス
console.log(MyClass.getTargets()); // ["name", "output"]

このように、staticを使うことで、クラスに関連するデータやメソッドを整理することができます。

ポテト

// 変更を監視するノードを選択
const targetNode = document.getElementById("some-id");

// (変更を監視する) オブザーバーのオプション
const config = { attributes: true, childList: true, subtree: true };

// 変更が発見されたときに実行されるコールバック関数
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      console.log("子ノードが追加または削除されました。");
    } else if (mutation.type === "attributes") {
      console.log(`${mutation.attributeName} 属性が変更されました。`);
    }
  }
};

// コールバック関数に結びつけられたオブザーバーのインスタンスを生成
const observer = new MutationObserver(callback);

// 対象ノードの設定された変更の監視を開始
observer.observe(targetNode, config);

// その後で、監視を停止することができる
observer.disconnect();

このコードは、JavaScriptのMutationObserverを使用して、DOM（Document Object Model）の変更を監視する方法を示しています。以下に、各部分の詳細な説明を行います。

1. 監視対象のノードを選択

const targetNode = document.getElementById("some-id");

document.getElementById("some-id")を使用して、IDがsome-idの要素を取得し、それをtargetNodeという変数に格納します。このノードが監視対象となります。

2. オブザーバーのオプションを設定

const config = { attributes: true, childList: true, subtree: true };

configオブジェクトは、MutationObserverがどのような変更を監視するかを指定します。
- attributes: true：属性の変更を監視します。
- childList: true：子ノードの追加や削除を監視します。
- subtree: true：対象ノードの子孫ノードも監視対象に含めます。

3. コールバック関数の定義

const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      console.log("子ノードが追加または削除されました。");
    } else if (mutation.type === "attributes") {
      console.log(`${mutation.attributeName} 属性が変更されました。`);
    }
  }
};

callback関数は、DOMの変更が検出されたときに呼び出されます。
mutationListは、発生した変更のリストを含む配列です。
observerは、MutationObserverのインスタンスです。
ループ内で、各変更のタイプを確認し、子ノードの変更や属性の変更があった場合に適切なメッセージをコンソールに出力します。

4. `MutationObserver`のインスタンスを生成

const observer = new MutationObserver(callback);

MutationObserverのインスタンスを作成し、先ほど定義したcallback関数を引数として渡します。

5. 監視の開始

observer.observe(targetNode, config);

observeメソッドを使用して、targetNodeに対して監視を開始します。configオブジェクトで指定したオプションに基づいて、どの変更を監視するかが決まります。

6. 監視の停止

observer.disconnect();

disconnectメソッドを呼び出すことで、監視を停止します。これにより、以降のDOMの変更は監視されなくなります。

まとめ

このコードは、特定のDOM要素に対して属性の変更や子ノードの追加・削除を監視するための基本的な実装を示しています。MutationObserverは、リアルタイムでDOMの変更を追跡するのに非常に便利なAPIです。これを使用することで、動的なウェブアプリケーションにおいて、ユーザーの操作や他のスクリプトによる変更に応じて適切な処理を行うことができます。

1. .textContent

2. .innerText

まとめ