##はじめに
突然ですが皆さんgoogleの__materialize__使ったことありますか？
私はフロントにかける時間を効率的にするためによく使います。
Bootstrapには負けますがこちらのmaterializeもなかなかの知名度で使っている人も多い模様。
しかし使用法で分からなくてハマる経験があったので共有します。
##結論：Dropdownの動かし方
今回はJavascriptのDropdownを例に解説します。
手順１
下記の順番でCDNを読み込みます。materializeの公式サイトにcssとjavascript両方CDNがありますので貼り付けてください。直接ファイルをダウンロードしてもいいですがCDNでも後からimportantなどで上書きすれば反映されますので安心です。
注意点は、jQueryの後にjsファイルとmaterialize（jsとcss両方)を読み込むことと、materialize.min.cssの後にcssを読み込むことです。
理由はjQueryのCDNを読み込んでからでないとjsファイルに書いたjQueryが動かないからです。また、下に行けば行くほど優先されるのでmaterializeより自分のcssファイルを下にした方が上書きされやすくなります。
手順2
ファイル名.htmlに以上のコードをコピペする
手順3
ファイル名.js(htmlと同じファイル名）に上記のコードをコピペする。
注意点はjavascriptの場合はこのままコピペで大丈夫ですが、
jQueryの場合は下記のコードの中に書かないと動かないということです。
$(function() {
//処理を書く部分
});
手順4
jsを編集する。
上記の, optionsを取り除きましょう。
正しくは、init(elems)になります。
開発者モードで見るとoptionsが定義されていないことでエラーが起こっていました。
以上の手順で動くようになります。
##補足：Optionsの使い方
jQueryバージョン
上記のように()の中に{}を入れてoptionsを書くだけです。
javascriptバージョン
javascriptはelemsの後に,を書いて{}の中にoptionsを書きます。optionsの意味の説明については公式サイトに書いてありますのでそちらをご覧ください。
##まとめ
ここに書いたことは他のmaterializeの要素にも適用できるのでぜひ使ってみてください。
以上でゼロから実装するとかなり大変なドロップダウンがいとも簡単に出来上がります。
materializeだけでなくいろんなツールを使って要領よく進めていきましょう！（特に初心者）