Reactで管理画面を作る際のComopnentライブラリ選定メモ

考えをまとめるためにメモ。

目指すところ

  • 手早く・楽して作る

アプローチ

  • 全部自分で作る
  • CSSフレームワークを自前でラップし、その他は単目的ライブラリを探して使う
  • Bootstrap/Material Designなどを実装したライブラリをベースにしてその他を自分で作ったり単目的ライブラリを探して使う
  • 全部入り(管理画面用コンポーネントライブラリ)を使う

全部自分で作る

文字通り、デザインもCSS書くのも動きをつけるJSを実装するのも全て自前でやる

メリット

  • 全て自分で制御できるので、ライブラリ使っててよくある「これが出来ないの困るんだけど」みたいなことにならない
  • ライブラリ探しとか考えなくていい

デメリット

  • UIデザインが出来ないと話にならない
  • とにかく実装に時間がかかる
  • クオリティ担保が大変

CSSフレームワークを自前でラップし、その他は単目的ライブラリを探して使う

BootstrapなどのライブラリのCSSを自前で作ったComponentに記述して使う

メリット

  • JSの世界については全て自分で制御できるので、ベースになるCSSフレームワークの制御をかなり自由に実装できる
  • CSSフレームワークの恩恵(Gridレイアウトを簡単に使える、ちょっと洒落たデザインをすぐ実装できる)を得られる
  • マイナーなCSSフレームワークで、React実装がないものでも自分で実装するので関係なく活用できるので選択肢の幅が広い

デメリット

  • 全て自前実装に比べてマシだけどやっぱり実装が大変
  • 大抵の場合jQueryとの共存を考える必要がある
  • ライブラリくささが出る(Bootstrap感を隠せない感じ)

Bootstrap/Material Designなどを実装したライブラリをベースにしてその他を自分で作ったり単目的ライブラリを探して使う

reactstrapなどを使う

メリット

  • Gridなどを簡単に実装できる
  • 最低限作るのに道具が揃ってるのである程度手早く実装できる

デメリット

  • ライブラリくささが出る
  • bs,mdのComponentライブラリの細かいデザイン調整は案外手間がかかるっぽい(あんまり詳しくないけど)

全部入り(管理画面用コンポーネントライブラリ)を使う

CoreUIなどを使う

メリット

  • 提供されているものの範疇で実装するなら一番手軽
  • 定番のUIライブラリとちょっと違ったデザインを利用できるのでただBootstrapを使ったものと差別化できる

デメリット

  • 有償のものが多い
    • =利用者が多くないので、利用方法の模索が大変そう・バグを踏んだときが不安
  • React Componentが提供されている物が少ない

上から順に自由度が下がっていく感じ。

今までは手なりで「Bootstrap/Material Designなどを実装したライブラリをベースにして〜」でやってきたけど今回はどうしようかなあ