React+TailwindCSSで管理画面を作る時の選択肢：tremor

今回は「tremor」というUIライブラリについて紹介します。ReactでTailwindCSSを採用していれば、管理画面を楽に作ることができるのでは？というとても良い感触でした。その感動を爆速でブログにまとめてみました。一応ひな形も作ったのですぐお試しすることができます。一度、公式のリファレンスを覗いてみてください。使えるコンポーネントがあるかも！

1 ご挨拶とガイド
2 tremorの何がうれしいの？
3 tremorのインストールの手順と注意点
4 デザインに使用する際に使えるもの
5 終わりに

ご挨拶とガイド

どもども！突然のゲリラ豪雨と雷によって、一時家が停電して大慌てな龍ちゃんです。ピカッと光って家が静かになってしまったのでビビり散らかしました。内心ビビっていても、意外と冷静なものでブログを書く手は止まりませんでしたねｗ。まぁネット必須の作業ではなかったので、特に問題もなかったが救いです。

今回は、友達のエンジニアから共有情報が飛んできたので勉強しました。「tremor」というUIライブラリになります。なんと！これは僕が大好きな「tailwindcss」を用いて作られているUIライブラリになります。「tailwindcss」を使うことができれば、カスタマイズやレイアウトの作成がサクサクすることができます。「tremor」の公式サイトですが、めちゃくちゃ見やすいです。全然興味がない人も見ていて楽しいので、是非開いてください。

当ブログで扱う内容としては、以下になります。

「tremor」の何がうれしいのか
「tremor」インストール時に気を付けるべきこと：インストール時参考にしたリンク付き
デザインに使用する際に使えるもの

とりあえず動かす環境が欲しい方は、セットアップまで終わらせているのでこちらのリポジトリをクローンしてください。

それでは、さくっと紹介していきたいと思います。

tremorの何がうれしいの？

さて「tremor」PRタイムです。UIライブラリの良いところは、自分で実装するのが手間なものを引数渡すだけで使えるという点になります。「tailwindcss」を使い始めてCSSを書くことの手間が大幅に削減されました。そこに加えて「tremor」を使うことのメリットについて以下にまとめています。

「ボタン」や「Tips」といったよく使うコンポーネントから、Chart系まで揃っています。これから種類も増えそうな雰囲気があるので要Watchです！

その中でも目を引くのがChart系です。「tailwindcss」に依存はしていますが、お手軽なインストールで完成度の高いChartが載せることができるようになるのは魅力的です。以下に例を貼っておきますね。

hoverすることで、値が出てくるという「ありがちな要望」にもちゃんと応えているのはポイント高いです。同様の理由で「ProgressBar」のコンポーネントも素晴らしいです。ライトな感じで依頼されることがありますが、実装自体は結構面倒なものが一発で出てくるのはうれしいです。複数種類あったので、是非公式サイトを覗いてみてください。

ここまで図を貼れば、きっと公式のサイトを見に行きたくなったでしょう。公式リファレンスがめちゃくちゃ見やすいのもポイントです。UIライブラリを使うときに知りたい情報が一枚にまとまっているので、使う際は公式を開いていればすぐ使えると思います。

tremorのインストールの手順と注意点

それでは、インストールの手順と注意点についてまとめていきます。「tremor」は「tailwindcss」を用いて作成されているため、まず先に「tailwindcss」のインストールが必要になります。ここは、公式にもしっかりと記載されているのでしっかりと呼んで手順を進めてください。

Reactのセットアップ
tremorのセットアップ

正直、公式が見やすすぎます。なので、ここではインストールの手順については書きません。公式を見に行きましょう。

じゃあ何書くんだ？という話になるので、僕が詰まった点について書いていきたいと思います。僕が詰まった点としては、「yarnのバージョンによってnode_modulesがインストールがされていなかった点」になります。「tremor」は「node_modules」にインストールして使用することが想定されています。そのため、yarnのバージョンが1.x.xではない場合は「.yarnrc.yml」を作成して以下をコピペすることで「node_modules」がインストールされます。