UIライブラリを導入する際の注意点

投稿日：2025年7月17日

WebアプリケーションのUIを実装する際、UIライブラリを使用すると、す来ない開発コストでリッチなデザインを作成することができます。

UIライブラリはフロントエンドのフレームワーク毎に用意されていることが多く、Vue.jsの場合はVuetifyやElement Plusなどがあります。React.jsの場合はMaterial UIなどがあります。
これらのUIライブラリは非常に便利な反面、いくつかのデメリットもあり、導入には注意が必要です。UIライブラリの導入を検討に参考になるよう、UIライブラリのデメリットについて解説します。

デメリット１：E2Eテストのハードルが上がる

E2Eテストとは、End to Endテストの事で、エンドユーザーが使用することを想定したテストのことです。Webアプリケーションの場合、ブラウザを使って各ユースケース毎の操作を確認することがE2Eテストになります。

E2Eテストのためのフレームワークは色々とあり、有名なものだとSeleniumやCypress、Playwrightなどがあります。
ブラウザを自動操作するテストでは、Webページの要素を取得して入力やクリックなどの操作をプログラムで制御することになります。
ブラウザを自動操作するフレームワークでは、多くの場合CSSセレクターの要領でWebページの要素を取得します。

例えば、以下のようなHTML要素があったとします。

<input type="text" name="email" id="email" class="email">

Cypressの場合は以下の書き方で要素の取得ができます。

cy.get('#email')  // idによる取得
cy.get('.email')  // class属性による取得
cy.get('input[name="email"]') // name属性による取得

HTML標準のタグを使って実装する場合は、CSSセレクターの知識があれば比較的簡単に要素を取得してWebページを操作することができます。

しかし、UIライブラリを使用すると、この要素の取得が格段に難しくなります。

分かりやすい例だと、セレクトボックス（プルダウン）があります。
HTML標準のタグで実装する場合は、selectタグを使うことが一般的かと思います。

Vuetifyの場合だと、v-selectコンポーネントがあります。

セレクト・コンポーネント — Vuetify

select コンポーネントは、ユーザーが選択できるオプションのリストを提供します。

https://vuetifyjs.com/ja/components/selects

以下は公式サイトのサンプルコード。
これだけのコードで見た目がかなりリッチなデザインになるので、とても便利に感じます。

<v-select
  label="Select"
  :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
></v-select>

しかし、実際にレンダリングされた要素をブラウザのディベロッパーツールなどで見てみると分かりますが、div要素が深く入れ子になっており、かつselect要素は使われていません。（実態としてはinput要素が使われています）
このような要素をプログラムで取得して操作しようと思うと、実際にレンダリングされた要素の構造を調べたりする必要があり、時間がかかる上、テストコードの可読性や保守性も低くなってしまいます。

デメリット２：スタイルの自由度が下がる

開発のスピードを速める代わりに自由度が下がるというトレードオフは、UIライブラリに限らず、ほぼ全てのフレームワークやライブラリの特徴と言えます。

UIライブラリの場合、最初から多くのスタイル（CSS）が適用された状態になっており、スタイルを変更しよう思ってもうまく適用されなかったり、どのクラスに対してスタイルを適用すべきかが分かりにくいケースが多々あります。
また、強制的にスタイルを変更しようと思うとUIライブラリによって自動的に付与されているクラス属性に対してスタイルを適用しなければけないケースもあり、コードの認知コストが高くなってしまいます。

UIライブラリを組み合わせることで求めていたUIデザインが作れるのであれば問題ありませんが、デザインに対して多くのカスタマイズをしようと思うと、それなりに大変です。

デメリット３：バージョンアップやライブラリ切り替え時のコストが大きい

UIライブラリもライブラリである以上、バージョンが古くなったりサポートが切れてしまう事があります。その場合はバージョンアップをしたり別のUIライブラリに切り替える必要がありますが、バージョンアップで仕様が大幅に変わった場合や、別のライブラリに移行する場合、元のデザインが大きく崩れてしまう可能性が高いです。
そうなってしまうとバージョンアップやライブラリの移行に想定外の開発コストがかかる可能性があります。

まとめ

UIライブラリのデメリットばかりをピックアップしてしまいましたが、デザインやCSSに対して高度な知識がなくても短期間でリッチなUIデザインを作れるのは大きなメリットです。

メリットとデメリットを認識したうえで、プロジェクトの特性、プロダクトの特性などを踏まえてUIライブラリの導入を検討するのが良いのかなと思います。
Webサイト・Webアプリ全体の統一感をうまくコントロールできるのであれば、部分的にUIデザインを導入するという選択肢もありかもしれません。

終わりに

以前、個人的にReactを使ったWebアプリを開発していたことがあり、その時にMaterial UIを使って実装していました。実装中は非常に楽で便利だと感じていたのですが、後になってE2Eテストを作りたくなって実装を始めてみると、UIライブラリがテスト実装の大きなハードルになることに気づきました。それ移行、Webアプリを開発する際、UIライブラリ導入に対して慎重に考えるようになりました。

また、自社内にVue.jsのバージョンアップ（Vue2 → Vue3）の案件に関わっているメンバーがいるのですが、そのメンバーもUIライブラリに苦しめられています。Vueのバージョンアップに伴ってUIライブラリのバージョンも上げる必要があるそうなのですが、その影響範囲が思いのほか大きくVueバージョンアップの障壁になっているとのことでした。E2Eテストを作成しておけばバージョンアップ時のデグレは検知しやすくなりますが、UIライブラリ自体がE2Eテストのハードルも上げてしまうため、結局のところUIライブラリがバージョンアップ全体に関して大きな障壁となっているようです。
（この辺りの詳細はいずれ当事者のメンバーが別の記事で書いてくれることを期待）

以上、UIライブラリを導入する際の注意点についてでした。
Webアプリケーションのプロジェクト立ち上げ時などの参考になれば幸いです。

システム開発に関するご依頼・お問い合わせはこちらから。