エラーが出てしまい動作しなくなったDrawer.jsについて解決のアドバイスをお願いします。

前提・実現したいこと

プログラミング初心者です。独学で練習用ページを作成していたところ、掲題のようになってしまいました。
公式ページを見直したりGoogleでエラーの解読に挑戦しましたが知識が乏しく解決出来ません。

・CDNで導入
・JSはHTMLファイルに書き込んでおり外部ファイルはありません。

初投稿のため不足している情報があればご教授いただけると助かります。

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

jquery-3.3.1.slim.min.js:2 Uncaught TypeError: $(...).drawer is not a function
    at HTMLDocument.<anonymous> (index.html:429)
    at l (jquery-3.3.1.slim.min.js:2)
    at c (jquery-3.3.1.slim.min.js:2)

該当のソースコード

HTML
1
2<!doctype html>
3<html lang="ja">
4
5<head>
6
7  <!-- Google Fonts -->
8  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap"
9  rel="stylesheet">
10
11  <!-- Required meta tags -->
12  <meta charset="utf-8">
13  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
14
15  <!-- Bootstrap CSS -->
16  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
17    integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
18
19  <!-- Style CSS -->
20  <link rel="stylesheet" href="css/styles.css">
21
22  <!-- Responsive CSS -->
23  <link rel="stylesheet" href="css/responsive.css">
24
25  <!-- Font Awesome -->
26  <script src="https://kit.fontawesome.com/48317d2fd7.js" crossorigin="anonymous"></script>
27
28  <!-- Swiper -->
29  <script src="/js/swiper.min.js"></script>
30  <link rel="stylesheet" href="/css/swiper.min.css">
31
32  <!-- wow -->
33  <script src="js/wow.min.js"></script>
34  <link rel="stylesheet" href="/css/animate.css">
35
36
37<!-- 該当のdrawer要素 -->
38
39  <!-- drawer.css -->
40  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
41
42  <!-- jquery & iScroll -->
43  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
44  <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
45  
46  <!-- drawer.js -->
47  <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
48
49<!-- ここまで -->
50
51
52  <!-- smooth-scroll.js -->
53  <script src="/js/smooth-scroll.polyfills.min.js"></script>
54
55  <!-- floating js -->
56  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
57
58  <title>練習ページ</title>
59</head>
60
61
62<body class="drawer drawer--right">
63
64  <!-- header -->
65  <header data-scroll-header role="banner">
66
67    <div class="header-left">
68      <a class="header-logo" href="#">
69        <img src="img/logo.png" alt="logo">
70      </a>
71    </div>
72
73    <!-- PC nav -->
74    <div class="pc header-right">
75      <ul class="header-menu">
76        <li>
77          <a class="header-main" href="#card">Card</a>
78        </li>
79        <li>
80          <a class="header-link" href="#news">News</a>
81        </li>
82        <li>
83          <a class="header-link" href="#price">Price</a>
84        </li>
85        <li>
86          <a class="header-link" href="#access">Access</a>
87        </li>
88        <li>
89          <a class="header-link" href="#contact">Contact</a>
90        </li>
91      </ul>
92    </div>
93
94    <!-- SP & Tablet nav -->
95    <!-- ボタンの種類-->
96    <div class="sp header-right">
97      <button type="button" class="drawer-toggle drawer-hamburger">
98        <span class="sr-only">toggle navigation</span>
99        <span class="drawer-hamburger-icon"></span>
100      </button>
101      <!-- ナビ中身 -->
102      <nav class="drawer-nav" role="navigation">
103        <ul class="drawer-menu">
104          <li><a class="drawer-brand" href="#">Brand</a></li>
105          <li><a class="drawer-menu-item" data-scroll href="#card">Card </a></li>
106          <li><a class="drawer-menu-item" data-scroll href="#news">News</a></li>
107          <li><a class="drawer-menu-item" data-scroll href="#price">Price</a></li>
108          <li><a class="drawer-menu-item" data-scroll href="#access">Access</a></li>
109          <li><a class="drawer-menu-item" data-scroll href="#contact">Contact</a></li>
110        </ul>
111      </nav>
112    </div>
113  </header>
114 
115  <!-- header -->
116
117 <!-- Drawer.js -->
118  <script>
119    $(document).ready(function() {
120  $('.drawer').drawer();
121});
122  </script>
123
124</body>

試したこと

・HTMLクラス名の見直し
・drawer以外のヘッダー要素の削除
・検証ツールでエラーメッセージの確認

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

・公式ページと同じバージョンを使っています。

kei344

2020/05/08 03:41

script要素の部分も提示してください。

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

回答1件

ベストアンサー

2種類のjQueryを呼んでいる事が原因です。3.2.1のほうを削除するか、1.11.3を削除して3.2.1をその場所に移動するかしてみてください。

URL
1https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
2https://code.jquery.com/jquery-3.2.1.min.js

投稿2020/05/08 04:38

kei344

総合スコア69608

WebBeginnerK

2020/05/08 05:10

素早いご回答ありがとうございます。すぐに試してみましたが、・3.2.1のほうを削除・1.11.3を削除して3.2.1をその場所に移動どちらも残念ながら動作しませんでした・・。ただ、3.2.1がなくてもFloatingは動作したままだったのでおそらく不要なコードだと言うことがわかりました。

kei344

2020/05/08 05:13

エラー文は変わりませんか？

WebBeginnerK

2020/05/08 05:19

どちらの場合も同じエラー文です。

kei344

2020/05/08 05:21

3.3.1.slimがどこかで呼ばれているので、それを探してください。

WebBeginnerK

2020/05/08 05:26

Body直前のBootstrap部分にありました。 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

kei344

2020/05/08 05:28

それも削除で。（slim版は機能が少ないので他ライブラリが対応していない可能性があるので）

WebBeginnerK

2020/05/08 05:31

削除したら動作しました！エラーも消えています。ありがとうございます。 Bootstrapはぼぼ使っていませんが、上記の記述もJqueryライブラリでこの場合不要なんでしょうか？

kei344

2020/05/08 05:34

「上記の記述」はどれでしょう。（「Jqueryライブラリでこの場合」もよくわからない） Bootstrapのjsは現在のバージョンではjQuery（slim版でなくてもよい）が必要なので、Bootstrapのjsより前の部分でjQueryが呼び出されていれば問題ないと思います。

WebBeginnerK

2020/05/08 05:54

失礼しました。上記とはslim版jQueryのことでした。 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> がJQueryの何なのか分からなかったので。 →Bootstrapのjsより前の部分でjQueryが呼び出されていれば問題ないという回答で疑問がすべて解決しました。素早くご対応いただき大変助かりました。ありがとうございました。

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