編集履歴

回答編集履歴

テキスト追加

2021/10/06 17:21

投稿

スコア0

test CHANGED Viewed

@@ -281,3 +281,317 @@
 とします。➡ [サンプル3](https://codepen.io/i8086x/pen/powBqoe?editors=1010)
+## コメントに対する回答
+コメントへ回答するために、以下のサンプルで説明します。（下記のHTMLを丸ごとコピペしてHTMLファイルを作り、ブラウザで表示させてご確認ください）
+```html
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>362305@teratail</title>
+  <style>
+      .root { width: 510px; }
+      body > .container { padding-left: 10px; }
+      body > .container > .container { padding-left: 30px; }
+      body > .container > .container > .container { padding-left: 50px; }
+      body > .container > .container > .container > .container { padding-left: 70px; }
+      .header__nav-btn, .cover-darken { margin-bottom: 15px; height: 36px; display: flex; align-items: center; padding-left: 5px; font-size: 16pt; cursor: pointer; color: white; }
+      .header__nav-btn { background-color: red; }
+      .cover-darken { background-color: blue; }
+      .result {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 520px;
+          height: 60px;
+          text-align: center;
+          font-size: 20pt;
+          background-color: yellow;
+      }
+      .js-open:after {
+          content: 'is-opened: No'
+      }
+      .js-open.is-opened:after {
+          content: 'is-opened: Yes'
+      }
+  </style>
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      function addClassToggleOnTriggers(toggledItemSelector, toggledClass, triggerSelector) {
+        // CSSクラスをトグルする対象要素を特定する。（与えられたセレクタで複数要素が該当しても先頭要素のみを対象にする。これは既存を踏襲）
+        const toggledItem = document.querySelector(toggledItemSelector);
+        if (!toggledItem) return;
+        // CSSクラスをトグルする関数
+        const handleToggle = () => {
+          toggledItem.classList.toggle(toggledClass);
+        }
+        // トグル実行のトリガーとなる要素に、トグルを実行する関数をaddEventListenerする。
+        document.querySelectorAll(triggerSelector).forEach(triggerElm => {
+          console.log(triggerElm.textContent);
+          triggerElm.addEventListener('click', handleToggle);
+        });
+      }
+      addClassToggleOnTriggers('.js-open', 'is-opened', '.header__nav-btn, .cover-darken');
+    })
+  </script>
+</head>
+<body>
+<div class="container root">
+  <div class="cover-darken">1</div>
+  <div class="header__nav-btn">2</div>
+  <div class="container">
+    <div class="header__nav-btn">4</div>
+    <div class="header__nav-btn">5</div>
+    <div class="container">
+      <div class="cover-darken">9</div>
+      <div class="header__nav-btn">10</div>
+      <div class="container">
+        <div class="cover-darken">12</div>
+      </div>
+    </div>
+    <div class="cover-darken">6</div>
+  </div>
+  <div class="container">
+    <div class="container">
+      <div class="cover-darken">11</div>
+    </div>
+    <div class="header__nav-btn">7</div>
+    <div class="header__nav-btn">8</div>
+  </div>
+  <div class="cover-darken">3</div>
+</div>
+<div class="result">
+  <div class="js-open is-opened"></div>
+</div>
+</body>
+</html>
+```
+上記のHTMLをブラウザで表示させると以下のようになります。
+![イメージ説明](96ba4f13107d0f6b02857ee3fc1ba593.png)
+- 赤い矩形は `.header__nav-btn` です。青い矩形は `.cover-darken` です。
+- 赤または青の矩形をクリックすると、黄色の矩形の中のテキストが、**is-opened: Yes** と **is-opened: No** とを切り替えます。
+- 赤と青の矩形の左端に、白い数字が書かれています。数字の規則は以下です。
+  ・ DOMツリーの中で深い場所にあるものほど、数字は大きくなります。
+　　　　・ 同じ深さにある矩形は、連続した数字がふられます。
+Javascriptの中に
+```javascript
+// トグル実行のトリガーとなる要素に、トグルを実行する関数をaddEventListenerする。
+document.querySelectorAll(triggerSelector).forEach(triggerElm => {
+  console.log(triggerElm.textContent);
+  triggerElm.addEventListener('click', handleToggle);
+});
+```
+というコードがありますが、これの `triggerSelector` に渡されるセレクターの文字列は
+`'.header__nav-btn, .cover-darken'`
+です。これは `.header__nav-btn` と `.cover-darken`をカンマ区切りで並べた[セレクタリスト](https://developer.mozilla.org/ja/docs/Web/CSS/Selector_list)です。
+また、`forEach` に渡している関数の中で
+```javascript
+console.log(triggerElm.textContent);
+```
+で、`triggerElm` のテキスト内容を出力させています。以下はこれによって出力されたログです。
+![イメージ説明](a3421f635db3f66cb92fb19765d6456c.png)
+これは、`querySelectorAll('.header__nav-btn, .cover-darken')` で取得される要素のリストに、どのような順番で要素が並んでいるかを表しています。
+この取り出される順番について、querySelectorAllの仕様の確認をすると、W3Cの[Selectors API](https://www.w3.org/TR/selectors-api/) のドキュメントに以下の記述があります。
+> 6.2. Finding Elements
+・・・
+The querySelectorAll() methods on the Document, DocumentFragment, and Element interfaces must return a NodeList containing all of the matching Element nodes within the subtrees of the context node, in document order. If there are no matching nodes, the method must return an empty NodeList.
+とあり、この中の "in document order" のリンク先に、以下の一文があります。
+> The term document order means a depth-first pre-order traversal of the DOM tree or subtree in question.
+この中にある、　depth-first　で pre-order　なDOMツリーの巡回をした結果が、先ほどの以下です。
+![イメージ説明](7afd8a56dd2c02b5f65aa5bf8087c41d.png)
+depth-first　で pre-order　なツリーの巡回というのは、絵で説明すると、以下のような順序でノードをたどる辿り方です。
+![イメージ説明](cb43fb47027eddaa7032d9daa0b5e6c8.png)
+なお、depth-first　（深さ優先）に対照的な辿り方は、breadth-first (幅優先）で、pre-order に対照される辿り方には in-order や post-order があります。ご興味あれば調べてみるとよいかもしれません。

テキスト修正

2021/10/06 17:21

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -108,9 +108,7 @@
-jQueryもどきを自作してみる、っていうのはどうでしょう？
+jQueryもどきを自作してみる、っていうのはどうでしょう？ たとえば
 ```javascript

テキスト追加

2021/10/03 01:15

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -104,7 +104,7 @@
-### 別案
+### 別案1
@@ -199,3 +199,87 @@
 ですが、こんな怪しげなまがいものを自作して、プチ[John Resig](https://ja.wikipedia.org/wiki/%E3%82%B8%E3%83%A7%E3%83%B3%E3%83%BB%E3%83%AC%E3%82%B7%E3%82%B0)になった自己満足に浸るヒマがあったら、[本物](https://jquery.com/)を使えるようになったほうが断然いいです。ということで、別案を提示するつもりが、質問の本題からはそれて、「jQueryを覚えてみては？」というのが結論になってしまいました。申し訳ありません。
+### 別案2
+この回答のはじめに挙げた
+> `menu_open()`関数の引数を以下のように拡張します。
+>
+> ・第1引数： `toggledItemSelector` --- 第2引数で与えるCSSクラスをトグルしたい要素のセレクタ
+> ・第2引数： `toggledClass` --- 第1引数のセレクタに該当する要素に対してトグルしたいCSSクラス
+> ・残余引数： `...triggerSelectors` --- トグルを行うトリガーとなる（クリッカブルな）要素のセレクタ群
+という提案を修正した案を挙げておきます。どこを修正するかというと、
+> ・残余引数： `...triggerSelectors` --- トグルを行うトリガーとなる（クリッカブルな）要素のセレクタ群
+の部分です。ここを残余引数で渡すのではなく、ひとつのセレクタの文字列で渡すことができます。というのは、セレクタの文法で、複数のセレクタのOR結合は、カンマ(`,`)で区切れば実現できるからです。
+また先に書いたように、関数名を `addClassToggleOnTriggers` に修正します。以下はこの修正によるコードです。
+```javascript
+function addClassToggleOnTriggers(toggledItemSelector, toggledClass, triggerSelector) {
+  // CSSクラスをトグルする対象要素を特定する。（与えられたセレクタで複数要素が該当しても先頭要素のみを対象にする。これは既存を踏襲）
+  const toggledItem = document.querySelector(toggledItemSelector);
+  if (!toggledItem) return;
+  // CSSクラスをトグルする関数
+  const handleToggle = () => {
+    toggledItem.classList.toggle(toggledClass);
+  }
+  // トグル実行のトリガーとなる要素に、トグルを実行する関数をaddEventListenerする。
+  document.querySelectorAll(triggerSelector).forEach(triggerElm => {
+    triggerElm.addEventListener('click', handleToggle);
+  });
+}
+```
+質問にある例に適用するには
+```javascript
+addClassToggleOnTriggers('.js-open', 'is-opened', '.header__nav-btn, .cover-darken');
+```
+とします。➡ [サンプル3](https://codepen.io/i8086x/pen/powBqoe?editors=1010)

テキスト追加

2021/10/02 16:10

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -198,4 +198,4 @@
-ですが、こんな怪しげなまがいものを自作して、プチ[John Resig](https://ja.wikipedia.org/wiki/%E3%82%B8%E3%83%A7%E3%83%B3%E3%83%BB%E3%83%AC%E3%82%B7%E3%82%B0)になった自己満足に浸るヒマがあったら、[本物](https://jquery.com/)を使えるようになったほうが当然いいです。ということで、別案を提示するつもりが、質問の本題からはそれて、「jQueryを覚えてみては？」というのが結論になってしまいました。申し訳ありません。
+ですが、こんな怪しげなまがいものを自作して、プチ[John Resig](https://ja.wikipedia.org/wiki/%E3%82%B8%E3%83%A7%E3%83%B3%E3%83%BB%E3%83%AC%E3%82%B7%E3%82%B0)になった自己満足に浸るヒマがあったら、[本物](https://jquery.com/)を使えるようになったほうが断然いいです。ということで、別案を提示するつもりが、質問の本題からはそれて、「jQueryを覚えてみては？」というのが結論になってしまいました。申し訳ありません。

コード追加

2021/10/02 00:56

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -99,3 +99,103 @@
 のような名前になるかと思います。
+### 別案
+jQueryもどきを自作してみる、っていうのはどうでしょう？
+```javascript
+(function () {
+  function myQuery(selector) {
+    const nodeList = document.querySelectorAll(selector);
+    return new myQuery.__clazz__(nodeList);
+  }
+  myQuery.__clazz__ = class {
+    constructor(nodeList) {
+      this.nodeList = nodeList;
+    }
+    on(eventType, handler) {
+      this.nodeList.forEach(node => {
+        node.addEventListener(eventType, handler);
+      });
+    }
+    toggleClass(cssClass) {
+      this.nodeList.forEach(node => {
+        if (node.classList) {
+          node.classList.toggle(cssClass);
+        }
+      });
+    }
+  }
+  window.$ = myQuery;
+})();
+```
+ってなものを作っておいて、質問にある例に適用するならば、
+```javascript
+$('.header__nav-btn, .cover-darken').on('click', function() {
+  $('.js-open').toggleClass('is-opened');
+});
+```
+とすると。
+先のサンプルに対して、このjQueryもどきを使うと、こんなん。➡ [サンプル2](https://codepen.io/i8086x/pen/ZEyZXjE?editors=1010)
+ですが、こんな怪しげなまがいものを自作して、プチ[John Resig](https://ja.wikipedia.org/wiki/%E3%82%B8%E3%83%A7%E3%83%B3%E3%83%BB%E3%83%AC%E3%82%B7%E3%82%B0)になった自己満足に浸るヒマがあったら、[本物](https://jquery.com/)を使えるようになったほうが当然いいです。ということで、別案を提示するつもりが、質問の本題からはそれて、「jQueryを覚えてみては？」というのが結論になってしまいました。申し訳ありません。

テキスト追加

2021/10/02 00:30

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -85,3 +85,17 @@
 また、
 - トリガー指定のあるセレクタに、複数の要素が該当した場合（たとえば上記のサンプルでは、`.B` ボタン は二つあります。）、そのすべてに、クリックハンドラとして、トグル実行の関数をクリックリスナーとして設定します。
+**補足：**
+上記の修正だと、トグルするCSSクラス名(`"is-open"`)も引数で与えるため、関数名の`menu_open()`も変える必要がありそうです。たとえば
+　- `addClassToggleOnTriggers()`
+のような名前になるかと思います。