Materialize CSS(v1.0.0)とmaterialize-select2を併用してみたときの気づき #JavaScript

概要

Materialize(マテリアルデザインフレームワーク)を導入したWebページで、v0.100.2→v1.0.0へアップデートしつつSelect2を導入し、プルダウン検索させたいというのがきっかけでした。
で、実際にやってみたら変な引っかかり方をしたので覚書がてら投稿しようと思いました。

この時の実装要件

Materializeをv0.100.2からv1.0.0にアップデートする(今更感ありますが)
そして、MaterializeっぽいSelect2を実装したかった

登場人物

Materialize
- https://materializecss.com/
materialize-select2
- https://github.com/nikitasnv/materialize-select2

遭遇した現象

前提として、こんな感じのselectがhtmlに実装されていることとします。

index的な.html

<select id='select-form' placeholder='選んでね！'>
  <option disabled selected placeholder>選択してね！</option>
  <option value="1">アップル</option>
  <option value="2">オレンジ</option>
  <option value="3">バナナ</option>
  <option value="4">メロン</option>
</select>

materialize.cssをインクルードしている場合、JavaScriptで次の通り実装してあげる必要があり、この実装もされている前提とします。

script的な.js

$(document).ready(function(){
  /* 略 */
  $('select').formSelect();
  /* 略 */
}

この状態で生成されたUIがこんな感じ

さあ、ここに先述のselect2を適用したい！適用するぞ〜

script的な.js

$(document).ready(function(){
  /* 略 */
  $('select').formSelect();
  $('#select-form').sm_select();
  /* 略 */
}

(勘のいい方はこのあたりでおや？ってなると思います)

この状態で生成されるのが...

解決方法

まあ当たり前ですが、materializeのメソッドとselect2のメソッドは完全に別々に動いているため、呼び出すのは片方でよかったということでした。

script的な.js

$(document).ready(function(){
  /* 略 */
  // $('select').formSelect();
  $('#select-form').sm_select();
  /* 略 */
}

上記の通り、materialize-select2を採用するのであれば、片方だけでよかったということです。

気づき

フレームワークで生成するDOMを二回呼んでいるのがよくなかった。フロントエンドで複数のFWを読んでいる時は相互に邪魔しないことをちゃんと確認しないといけないですね。
- 同じ属性のDOMに対して作用するライブラリを同時に読み込むとどうなってしまうのか、というところは当然ですがそれぞれのライブラリのページで解説なんてされていません。というところをちゃんと考えていくことが必要なのかと思いました。
マテリアルデザインのフレームワークを採用する場合、そのフレームワークで何ができて何ができないのか、そして拡張するならどのように実装を書き換える必要があるのかと言う点がバックエンドでライブラリを追加するのとは勝手が違うということを思い知らされました。
- それでなくとも、フロントエンドは(僕の認識では)バックエンド以上にトレンドとなる技術の入れ替わりが激しい印象なので、今後フロントの技術選定に携わる機会があるとしたら、膨大なフレームワーク・ライブラリに対して何ができて何ができないかというところを詳細に把握することで、その後の改修・グロースに影響することを今回の件で学びました。フロントエンドって大変だあ。。。