はじめに

Vue.js使ってますか？？？

とっても便利ですよね！

今回はマテリアルデザインのCSSフレームワークの
Materialize(マテリアライズ)
https://materializecss.com/

を導入しようとしたけど、やめた話です。

まず、どんな経緯だったかというと「ちっちゃいサービス」を思いついたので
RailsとVueで作ろうと思ったわけです！

で特に画面のデザイン部分ですが、コンポーネントフレームワークのElement UI とかも良いかなと思ったけど、なるだけコンポーネントをライブラリに依存させないほうがいいかなと思って、マテリアルデザインをささっと導入しようと思ってMaterializeを選択しました！

それからどしたの

最初は良かったんです！
カラム構成で画面を整えつつ、ボタンとかもイケてる感じに簡単に実装できるので。
しかしFormパーツを作ろうとしてSelectのタグを配置した瞬間に異変に気づきます。

Selectが動かない、optionに並べた選択肢が出ない！？
なんでと思ってMaterializeのリファレンスを見たら、
初期化が必要という事でmaterializeのJS読み込むか、jQueryを導入しないといけないとの事！

いずれの方法でもVueのイベントサイクルに影響するとかReal DOMを取り扱うのに気が引けてしまって
結局導入をやめてElement UIを使う事にしました。

よくよく考えれば分かる事だったのと、気づいてから上手く外部JSを導入する方法を見つけた訳では無かったのでちょっと知見とかもフィードバックできずにごめんなさい。

Materiarizeを導入するためのnpm ライブラリもちらほらありましたが結局Elementに戻る形になってしまいました。

なので上手く利用できる人はいいですが、特別な理由がなければコンポーネントフレームワークの方が実は簡単に使えてるなと思った次第です。

お土産に他に使ってるコンポーネントフレームワークの紹介を置いていきます。

GoogleのWEBアプリっぽい管理画面の素材があって試しに導入するのも簡単です。
またサイトのサンプルの完成度が高く動作を確認しながら導入できるサンドボックスもあります。
全体的にフレームワークを導入しないといけないので部分的にコンポーネント利用するのには不向きだと思います。