UIフレームワークについて

先日、担当しているプロダクトで使用していたUIフレームワークを削除する対応を行いました。

UIフレームワークは便利な一方でデメリットもあると感じています。

今回はその辺りについて書いてみたいと思います。

UIフレームワーク

フロントエンド開発を行う上で何らかのUIフレームワーク（ライブラリ）を使用しているプロダクトは多いと思います。

主だったものをいくつか取り上げてみたいと思います。

Bootstrap

まずは最も人気のあるフレームワークの1つであるBootstrap。

Githubのスターは15万以上と圧倒的な数字です。

classを指定するだけで簡単に使用できます。

Bootstrap4系まではjQueryに依存していましたが、最新の5系ではjQueryは使われていないようです。

Material UI

続いてはこちらも人気のフレームワークMaterial UI。

Googleが提唱するMaterial Designに沿ったUIコンポーネントを提供するフレームワークです。

Githubのスター数は8万以上。

中身を見るとReactで実装されており、Reactを使用した開発で使われていることが多い印象です。

Tailwind CSS

ここ数年で名前を聞く機会が増えた印象なのがこのTailwind CSS。

名前の通りCSSフレームワークで、使い方はclassを指定するだけ。

例えばw-1/2というclassをつけるだけでwidth: 50%;というstyleを当てることができます。

レスポンシブ対応もclassの前にsm:やmd:等を付けるだけ。

また、Tailwind CSSを使って作られたTailwind UIというUIコンポーネントライブラリもあります。

その他、Vueで使われるものとしてはVuetifyやElement UI、Buefy等があります。

UIフレームワークのメリット・デメリット

これらのライブラリを使用する上でのメリットとデメリットを挙げてみたいと思います。

メリット

統一感のあるUIにできる

一番のメリットはこれだと感じています。

プロダクト全体で統一されたUIを実現することができるのでユーザーにとっても使いやすいものになります。

またUIの構築にかかる工数を削減することにも繋がります。

コードの記述量を減らせる

上で挙げたTailwind等では各classに1つstyleが対応しているのでそれを当てはめるだけでUIが完成します。

CSSを自分で書く必要はありません。

公式のドキュメントは勿論、こんなチートシートもあるので非常に便利です。

デメリット

一方でデメリットもあると思います。

自由度が低い場合もある

予め決まったコンポーネントを使用するということは便利な一方、自由度に欠ける部分があります。

フレームワークによっては拡張することも可能ですが、拡張するのであれば最初から自分でCSS書いた方が良いのでは？という思いもあります。

また得てして独自拡張したものは後々負債になりそうな気がします。

どこかで見たようなデザインになる

人気があるフレームワークということは使っている人が多いということであり、すなわち似通ったUIになりがちということでもあります。

簡単に「っぽい」UIが作れるというのはメリットでもありデメリットでもあるのかなと思います。

ライブラリに依存することになる

これが大きなデメリットだと思います。

例えばVueに依存しているUIフレームワークの場合、Vueのアップデートに対応するまで時間がかかってしまったり、最悪の場合対応しないことも考えられます。

特定のフレームワークに大きく依存しないことはプロダクトを長期的に運用していく上で必要な観点だと思います。

フレームワークを選定する際にはLTSがいつまでなのかや更新頻度等もチェックして吟味する必要があると思います。

まとめ

以上UIフレームワーク（ライブラリ）について簡単にですがまとめてみました。

モダンなフロントエンドの開発を行う上でその便利さは適度に享受しつつ、できる限り依存しないような仕組みを作ることを併せて考えていく必要があるなと改めて感じました。