oishisouプログラマ、ララ・ベル子さん改めArm4さんのゆるふわ奮闘記。この広告は、90日以上更新していないブログに表示しています。UIコンポーネントお久しぶりです。Vue.jsのUIフレームワークについてのまとめ記事(英語)を見つけてツイートしたところ、それなりにいいねがついたので「みんな、UIフレームワークをめっちゃ探してるな」と感じとり人気のあるフレームワークを日本語でまとめてみることにしました。人気のあるフレームワークは以下のブログ記事などを参考にしています。2018海外のVue.js用UIフレームワーク紹介記事を読み漁り、どの記事にもだいたい出てきているフレームワークを女の勘でチョイスしました。Historyを皆さんご存知ですか。ちなみに私は知りませんでした。githubのスター獲得の歴史をグラフで確認できるサービスです。丁寧な解説記事はこちら。女の勘で選んだベストフレームワークのスター獲得曲線を確認してみます。history見ておわかりのとおり、Elementは先発のVueのUIフレームワークで、スター数も飛び抜けて多いです。どのフレームワークも右肩上がりでスターが増えていますね。見てお分かりのようにVueのフレームワーク自体の人気が急激に出てきているのがお分かりいただけると思います。実は先発のフレームワークであるvue-materialも人気があったのですが、こちらの曲線を見てお分かりのように後発のマテリアルデザインフレームワークであるVuetifyが人気をかっさらっていってしまったようです。Historyも確認してみましょう。historyご覧になってお分かりのように、ついにVue.jsがReactを抜きました。(めでたいぜ!)私がVueを初めた数年前はフロント界隈のイベントにおいてVue勢はややマニアック勢だったのですが、もはや巷ではReactおじさんからVueおじさんへ変身しているおじさん勢も出てきています。twitter.comごらん。使ってみて判断する派です。当時最も人気と思われたElementとVuetifyを使ってみました。2018年6月時点で、Elementはレスポンシブレイアウトに対応していない状態でコンポーネントの詰め合わせという様相が強く統合的なフレームワークという感じではありませんでした。そのため、レイアウトされたページの見本がなく、綺麗にレイアウトするのがかなり大変でした。いうことで、当時は結果的に楽で綺麗にレスポンシブ対応のレイアウトができるVuetifyを選択しました。現在のElementのドキュメントを見る限りでは、レスポンシブ対応されていて統合的なフレームワークとして使えそうに見えます。アプリケーションに必要そうなコンポーネントもほぼ揃っているのでマテリアルデザインに抵抗がある人は使ってみてもよさそうだと思います。github.comリリースノートを見てみても活発に更新されてメンテナンスされているのが分かります。一点、注意としては中国の方が開発されているので、突然中国語がドキュメントなどに登場したりします。目立った致命的なバグやレイアウト崩れなどはほとんどないように思います。リリースノートを見てお分かりのとおり尋常じゃなく活発にリリースが行われています。github.com先日も新しいコンポーネントがリリースされました。現在まで定期的にアップデートしていますが、radioコンポーネントのイベントがinputからchangeになってしまったということ以外では書き換えが発生するようなことはありませんでした。一点注意点としてはVuetifyが採用しているcssプリプロセッサがstylusなのでstylusのloaderなどを入れたりファイルの分割などで少し工夫が必要かもしれません。Vue.jsのUIフレームワークのデザイン分類UIといえばデザインも非常に大事です。できれば綺麗で好みのデザインに近いフレームワークを使いたいところです。いうことでデザインに着目して分類してみました。MaterialBootstrap系BootstrapVueBuefy独自デザイン系Elementマテリアルデザインはレスポンシブ時の操作感まで考え抜かれていると感じることが多いです。大きな時計が出てくるTimePickerは当初は正直「え、なにこれ。」と思ったのですが使い慣れてくるとスマホからでもPCからでも驚くほど素早く気持ちよく時間の入力ができます。見慣れていないクライアントに「え、なにこれ。」と言われてしまうかもしれないのでお好みで使っていただければと思います。全体的にマテリアルデザインは洗練されている印象で、Bootstrap系は少しカジュアルな印象を与えます。Elementについては、色が全体的に薄いのでオシャレ感はかなりありますが、オシャレじゃなくていいからハッキリ見えるほうがいいというクライアント向けではなさそうです。マテリアルデザインはよくアニメーションがついてくるので、それが煩わしいと感じる人もいるかもしれません。フレームワーク選定についてここで紹介したフレームワークはコンポーネントがかなり充実しているものばかりなのでどれを採用しても良さそうな印象を受けます。あとは、Vue.jsの場合はコンポーネントがいかにカスタマイズして使えるかということが重要になってくるのでその辺の使い勝手は多少、自分で使ってみて検討してみるのがいいです。フレームワーク選定の時は、まずは人気があるものをリストアップし当たりをつけて、ドキュメントなどを読み込んで絞り込み、あとは実際に動かしてみて決めるというプロセスがいいように思います。ドキュメントの出来がいいというのはフレームワークを選ぶ上でかなり大事です。以下のポイントを重視するといいかなと思います。