Help us understand the problem. What is going on with this article?

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

概要

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

この時の実装要件

  • Materializeをv0.100.2からv1.0.0にアップデートする(今更感ありますが)
  • そして、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がこんな感じ

スクリーンショット 2019-08-06 18.23.49.png

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

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

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

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

スクリーンショット 2019-08-06 18.24.25.png

解決方法

  • まあ当たり前ですが、materializeのメソッドとselect2のメソッドは完全に別々に動いているため、呼び出すのは片方でよかったということでした。
script的な.js
$(document).ready(function(){
  /* 略 */
  // $('select').formSelect();
  $('#select-form').sm_select();
  /* 略 */
}
  • 上記の通り、materialize-select2を採用するのであれば、片方だけでよかったということです。

気づき

  • フレームワークで生成するDOMを二回呼んでいるのがよくなかった。フロントエンドで複数のFWを読んでいる時は相互に邪魔しないことをちゃんと確認しないといけないですね。
    • 同じ属性のDOMに対して作用するライブラリを同時に読み込むとどうなってしまうのか、というところは当然ですがそれぞれのライブラリのページで解説なんてされていません。というところをちゃんと考えていくことが必要なのかと思いました。
  • マテリアルデザインのフレームワークを採用する場合、そのフレームワークで何ができて何ができないのか、そして拡張するならどのように実装を書き換える必要があるのかと言う点がバックエンドでライブラリを追加するのとは勝手が違うということを思い知らされました。
    • それでなくとも、フロントエンドは(僕の認識では)バックエンド以上にトレンドとなる技術の入れ替わりが激しい印象なので、今後フロントの技術選定に携わる機会があるとしたら、膨大なフレームワーク・ライブラリに対して何ができて何ができないかというところを詳細に把握することで、その後の改修・グロースに影響することを今回の件で学びました。フロントエンドって大変だあ。。。
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away