React コンポーネントライブラリの選定で Mantine を選んだ話

はじめに

この記事では、とある新規 Webサービスの開発プロジェクトにおいて、React コンポーネントライブラリの選定でMantine を選ぶまでの過程や実際に使ってみてよかったところ、大変だったところを記載します。

技術選定を行った時期は、2024年8月です。後述する情報も2024年8月時点の情報です。

プロジェクトの特徴

今回のプロジェクトは、以下のような特徴がありました。

• 短納期（品質よりも納期が優先）
• データを様々なグラフで表現したい
• UI/UX にこだわりたい
• 初期リリース以降も機能追加して、複雑性の高いサービスになる可能性がある
• サービスのランニングコストは極力抑えたい

そのため、これらの点を踏まえて技術選定をしました。
そもそも CSS や Sass、CSS フレームワークではなく、React コンポーネントライブラリを使うことになった理由も上記の点を踏まえての判断になります。

選定基準

ライブラリの選定においては、先述したプロジェクトの特徴も踏まえ、以下のような点を重視しました。

• コンポーネントの豊富さ（特にグラフ）
• カスタマイズ性
  • カスタマイズのオプションが豊富にある
• 学習コスト
  • 開発メンバーの利用経験
  • ドキュメントの豊富さ、読みやすさ
  • 実装、カスタマイズが簡単にできる
  • 癖が少ない（ライブラリ独自のルール、用語などが少ない）
• 安心して利用できる
  • 利用者数
  • リポジトリのスター数
  • ライブラリの直近のアップデート日やアップデート頻度
  • 外部からの評価
• パフォーマンス
  • ダウンロードサイズ
  • 画面が重くならないか
• テーマ設定及びその上書きができる
• レスポンシブ対応
• アクセシビリティ対応
• 無料で利用できる

また、npm trends や以下のような React コンポーネントライブラリを比較する記事、ドキュメントの情報も参考にしました。

選定最終候補のライブラリ

上記の選定基準をもとに Mantine、Chakra UI、Material を最終候補として選定しました。
そして、以下のように各ライブラリのよい点、懸念点を整理し、最終的に Mantine を選定しました。特にグラフ表現の多様性とカスタマイズ性、アップデートの頻度が決めてとなりました。

上記3つのライブラリの記事執筆時点（2024年12月）の npm trends は以下の通りです。
Material UI が圧倒的にダウンロードされています。

https://npmtrends.com/@chakra-ui/react-vs-@mantine/core-vs-@mui/material

Mantine

• よい点
  • コンポーネントや UI関連の便利機能が豊富
    • 100以上のコンポーネント、50以上の hooks がある
  • 多様なグラフを利用でき、カスタマイズ性もある
    • Recharts という D3 ベースの React 向けグラフライブラリをもとにしている
    • https://mantine.dev/charts/getting-started/
  • プロジェクトに参画予定の開発者5名のうち、3名が利用経験ある
  • ドキュメントやコミュニティでの情報が豊富
  • アップデートが頻繁にある
    • メンテナンスがしっかりしている
    • 機能追加も頻繁にある
    • https://github.com/mantinedev/mantine/releases
  • 全ての機能を無料で利用できる
• 懸念点
  • 比較対象のライブラリと比較するとダウンロード数が少ない
  • Issue が一定数ある

Chakra UI

• メリット
  • プロジェクトに参画予定の開発者5名のうち、3名が利用経験ある
  • シンプル
• 懸念点
  • コンポーネントや hook の数が少ない
  • グラフも乏しい
  • テンプレートマーケットはたくさんあるが、有料
  • 直近大きな変更ある可能性がある（アップデートコストがかかる懸念）
    • 現バージョン（v2系）は2023年11月からリリースがなく、v3 の開発している
    • ※実際、2024年10月に v3 が正式リリースされました

Material UI

• メリット
  • ダウンロード数は圧倒的に多い
  • 情報が豊富
  • コンポーネントが豊富
• デメリット
  • 一部のコンポーネント・機能が有料
    • https://mui.com/pricing/
  • デザインスタイルが厳格

実際に使ってみて

Mantine を実際に使ってみた所感を記載します。

よかったところ

今回のプロジェクトでは、トータル10種類近くのグラフを実装しましたが、1種類以外のグラフは Mantine で実装できました。
特に棒グラフと折れ線グラフを組み合わせたグラフを実装する必要があったのですが、技術選定をした後のリリースで追加された CompositeChart を利用することで、短期間で実装できました。

また、グラフのX軸・Y軸のラベルやツールチップの表示位置のカスタマイズもできました。

※Mantine を使ったグラフの実装、カスタマイズの具体例については、以下のような記事に記載しています。

Mantine で実装できなかったグラフは、Mantine の大元となっている D3.js を利用しました。
https://d3js.org/

大変だったところ

実装初期は、スタイルの指定方法がたくさんあったので、どれを使えばよいか試行錯誤しました。
ただ、ドキュメントに CSS modules がパフォーマンス面で一番よいという記載があったので、テーマコンポーネントのスタイルは CSS modules を利用することにしました。

※テーマや CSS modules の実装方法については、それぞれ以下の記事に記載しています。

また、テーマ設定したスタイルが他のスタイルに上書きされてしまうこともありました。こちらの事象は、ドキュメントで指定された順番に従って Mantine パッケージを import していないことが原因でした。

最後に

複数の技術を比較検討できるようにしておくことで、用途に合わせてより最適な技術を選択できるようになると思いました。今回は React コンポーネントライブラリの比較検討の話でしたが、今後は他の分野でも選択肢を多く持てるようになりたいです。
また、特にフロントエンドは技術の変遷が速いので日々のキャッチアップも大切だと改めて感じました。

最後まで読んでいただきありがとうございました！