jQueryをネイティブjavascriptに書き換えたい。

現在Web制作を学んでいます。学習中、以下のjQueryで書かれたコードをネイティブJSに書き換えたいと考えているのですが、変化してくれません。

//jQuery javascript
$(".menu-btn").click(function(){
  $(".navbar .menu").toggleClass("active");
});

//normal javascript
document.getElementsByClassName("menu-btn").addEventListener("click",function(){
  document.getElementsByClassName("navbar menu").classList.toggle(".active");
});

上記のコードは、menu-btnをクリックすると以下のクラス名（.navbar .menu）に

　　.navbar .menu{
    background: black;
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    left: -100%;
    text-align: center;
    padding-top: 80px;
  }

以下のように.activeを追加してメニューが横からスライドしてくるアニメーションを付けるものです。

  .navbar .menu.active{
    left: 0;
  }

しかし、jQueryを書き換えてもアニメーションは起こりませんでした。これは何が足りないのでしょうか。どう書き換えればよいのでしょうか。

以下HTML、CSSとJSのコードです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio1</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/ff832bf6f3.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <!-- Navigate section start -->
    <nav class="navbar">
      <div class="max-width">
        <div class="logo"><a href="#">Portfo<span>lio.</span></a></div>
        <ul class="menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Skills</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <div class="menu-btn">
          <i class="fas fa-bars"></i>
        </div>
      </div>
    </nav>
    <!-- Home section start -->
    <section class="home" id="home">
      <div class="max-width">
        <div class="home-content">
          <div class="text-1">Hello, my name is</div>
          <div class="text-2">Ogino Kaito</div>
          <div class="text-3">I'm a <span>Student</span></div>
        </div>
      </div>
    </section>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    <script src="main.js"></script>
  </body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}
.max-width{
  max-width: 1300px;
  padding: 0 80px;
  margin: auto;
}

/* navber style */
.navbar{
  position: fixed;
  width: 100%;
  padding: 30px 0;
  font-family: "Ubuntu", sans-serif;
  transition: all 0.3s ease;
}
.navbar.sticky{
  padding: 15px 0;
  background: crimson;
}
.navbar .max-width{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar .logo a{
  font-size: 35px;
  font-weight: 600;
  color: white;
}
.navbar .logo a span{
  color: crimson;
  transition: all 0.3s ease;
}
.navbar.sticky .logo a span{
  font-size: 35px;
  font-weight: 600;
  color: white;
}
.navbar .menu li{
  display: inline-block;
  list-style: none;
}
.navbar .menu li a{
  color: white;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  transition: color 0.3s ease;
}
.navbar .menu li a:hover{
  color: crimson;
}
.navbar.sticky .menu li a:hover{
  color: white;
}

/* menu button style */
.menu-btn{
  color: white;
  font-size: 23px;
  cursor: pointer;
  display: none;
}

/* home style */
.home{
  display: flex;
  background: url("img/black.jpg") no-repeat center;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
  color: white;
  min-height: 500px;
  font-family: "Ubuntu", sans-serif;
}
.home .max-width{
  margin: auto 0 auto 40px;
}
.home .home-content .text-1{
  font-size: 27px;
}
.home .home-content .text-2{
  font-size: 75px;
  font-weight: 600;
  margin-left: -3px;
}
.home .home-content .text-3{
  font-size: 40px;
  margin: 0 5px;
}
.home .home-content .text-3 span{
  color: crimson;
  font-weight: 500;
}

/* responsive media query style */
@media (max-width: 947px){
  .max-width{
    padding: 0 50px;
  }
  .menu-btn{
    display: block;
    z-index: 999;
  }
  .navbar .menu{
    background: black;
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    left: -100%;
    text-align: center;
    padding-top: 80px;
  }
  .navbar .menu.active{
    left: 0;
  }
  .navbar .menu li{
    display: block;
  }
  .navbar .menu li a{
    display: inline-block;
    margin: 20px 0;
    font-size: 25px;
  }
}

// navvar script
window.addEventListener("scroll", function(){
  var navbar = document.querySelector(".navbar");
  navbar.classList.toggle("sticky", window.scrollY > 20);
});

//jQuery javascript
$(".menu-btn").click(function(){
  $(".navbar .menu").toggleClass("active");
});

//normal javascript
document.getElementsByClassName("menu-btn").addEventListener("click",function(){
  document.getElementsByClassName("navbar menu").classList.toggle(".active");
});

m.ts10806

2021/02/28 07:46

コードだけで他者には要件は読み取れないので「どういう要件（機能、動作想定）なのか」を具体的に記載したうえで「現在のコードで何が起きているか」を記載されたほうが良いと思います。「うまくいかない」には何も情報が含まれてませんので。

program

2021/02/28 07:59

書き換えたい場所で行いたいこと、現在どんな状況なのかを書きたしました。

行動規範の内容に同意します

回答2件

※既存回答の補足的要素の回答です

JavaScriptが動かない場合、まず疑うべきはエラーです。
ブラウザデベロッパツールのコンソールを確認してください。

html
1
2<input type="button" value="click" class="menu-btn">
3
4 <script>
5document.getElementsByClassName("menu-btn").addEventListener("click",function(){
6  document.getElementsByClassName("navbar menu").classList.toggle(".active");
7});
8 </script>
9

下記のようなエラーが出ているはず

Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function

これはgetElementsByClassName()で得られる結果からaddEventListener が呼び出せないことを指します。

これはなぜか。
addEventListenerが対象としているのはあくまで「特定の要素」だからです（リンク参照）。

getElement**”s”**ByClassNameという名前から分かるように、このメソッドは複数の要素を返却します。

MDNより：指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します。

つまり
Elements[0]:element1
Elements[1]:element2

のような形で要素がかえってくるということ。
これは対象が１つであったとしても変わりません。

js
1console.log(document.getElementsByClassName("menu-btn"));

ということで、個々の要素に対してイベントを付与すべく、既に回答にあるように取得結果をループさせるなど工夫が必要になるわけです（絶対１個しかないなら[0]など直に指定してもいいと思いますが、それならID振るべきとは思う）。

投稿2021/02/28 08:10

編集2021/02/28 08:10

m.ts10806

総合スコア80875

program

2021/02/28 08:43

詳しく解説していただきありがとうございます！なぜ機能しないのかは理解できたのですが、正直今回のようなjQueryのコードを書き換えるのは割と難易度が高いように思えます。こういった場合、おとなしくjQueryをつかってコーディングしたほうがよいのでしょうか。それとも何か別のライブラリやフレームワークでよりいものがあったりするのでしょうか。

maisumakun

2021/02/28 08:44

何のためにjQueryから書き換えようとしたのですか？

program

2021/02/28 08:51

jQueryが最近人気がなくなりつつあるという記事を多数見かけ、何かほかにjQueryに代わる技術はないかと険悪したところ、素のJavaScriptでjQueryのコードがほぼ書けるということを知りました。それゆえ今回、質問させていただいた次第です。私自身Web制作においてJSのライブラリやフレームワークは何を使えばいいのかわからず困惑しています。

m.ts10806

2021/02/28 08:51

＞正直今回のようなjQueryのコードを書き換えるのは割と難易度が高いように思えます。 JavaScriptの習熟度によりますが、アニメーションは Vanilla JSで書こうと思うと結構しんどいです。 CSS5の機能を熟知できていればかなりの助けになると思いますが。＞何か別のライブラリやフレームワークでよりいものがあったりするのでしょうか。 jQueryはJavaScriptのライブラリです。「簡単に書ける」「慣れている」のならあえてVanilla JSで書くこともないです。オワコンとも思いません。jQueryがむしろ現時点ではベストともいえるでしょう。確かにBootstrapなど最新の5からはjQuery依存から脱しましたが、派生のプラグインは「jQueryプラグイン」として作られていることのほうが多く、まだまだ有用でしょう。また「フレームワーク」が例えばReactなどのことを仰っているのであれば、使いこなすための難易度はそれなりに高いと思います（私はまだまともに手を出したことはないですが）

m.ts10806

2021/02/28 08:54

下記を使えば「jQueryと変わらないセレクターの記述」は可能になります。 https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll ただ、AddEventが変わるわけではないので、今回提示したような個々の要素取り出しは必須です。 jQueryはそういう「たくさん書かなければならない、ループしなければならない」ところを裏でよろしくやってくれてるだけとも言えます。裏ではガンガンVanilla JSが動いてます。なので、「JavaScriptでjQueryのコードがほぼ書ける」・・・というより「ほぼ」がなくても良いです。結局JavaScriptですから。

m.ts10806

2021/02/28 08:57

>私自身Web制作においてJS これについては、自身が作るものなので「慣れているもの」「書きやすいもの」を優先して差し支えないと思います。もし就職を意識しているのなら、「絶対にVanilla JSで書かないと評価しない」という先の心配はいらないと思います。まだまだ「jQuery」を要件として掲げている求人はあるでしょうし、「JavaScript」とだけ書いてあったとしても「jQueryは除外する」わけではないと思います。ポートフォリオでjQuery使われてたとしてもあくまで「１つのものを作り上げる力」のほうが評点高いです。

program

2021/02/28 09:06

本当にありがとうございます！正直jQueryに対してあまり良い印象があまりなく、使う気はほぼ皆無でしたが、m.ts10806さんの解説でかなり印象が変わりました。それと、CSSの勉強ももっとしたいと思います。jQueryはがっつり、ではなく、ちょくちょく使っていこうかなと思います。今回作っているサイトではjQueryで作ってみます！

m.ts10806

2021/02/28 09:10

がんばってください。ひとつヒントとして、記法が混ざるのは良くないという点ですね。あるところは$('#hoge') あるところはdocument.getElementById('fuga') というのはコードの統一性とメンテナンス性に欠けます。

program

2021/02/28 09:12

承知いたしました。誰かがみてもすぐ理解できるようなコードを書くのを心がけたいと思います。

m.ts10806

2021/02/28 09:13

そうですね。それはいい心がけですが、実際にレビューを経験しないとなかなか観点は育ちませんので、まずは「数か月後、数週間後の自分に向けて」としてみてはどうでしょう。３日見なかったら他人のコード　みたいなことも言われるみたいですよ。

program

2021/02/28 09:15

目からうろこです！頑張ります！