【jQuery】MaterializeのsideNav()が働かない

MaterializeのjQuery関数が動かない

マテリアライズ のNavbarはとてもオシャレですが、そのままではスマホサイズの時にメニュー一覧が表示されません。

↓画面を小さくすると、こんな感じで右側にあったメニューが消えます。

Materializeには、このように、メニューボタンを押すことで、メニュー一覧を別途開けるタイプがあります。

こちらの勝手が良さそうなので、使ってみようと思い、Materializeの公式に載っている通りにHTMLを記載し、JavaScriptのファイルに次を追記しました。

 $(".button-collapse").sideNav();

しかし、自分の環境では、メニューボタンを押してもメニューが表示されませんでした。
デベロッパーツールで確認したところ、「sideNavは関数ではありません」との記述が出てしまっていました。

解決策：　jQueryの読み込みとMaterializeの読み込みの順を逆にした

こちらのサイトに解決策が載っていました。
https://stackoverflow.com/questions/43994931/typeerror-sidenav-is-not-a-function

jQueryとMaterializeの読み込み順が逆だとうまくいかないようです。

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

上のように、jQueryのCDNが下Materializeのものより下に記述されていると動きません。なので順番を変えます。

 <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

このように、jQueryのCDNを先にMaterualizeのものよりも先に持ってきたところ、無事動きました。

学び: 英語のリファレンスもちゃんと読む

Materializeを上手に扱う上では欠かせないな〜と感じました。