SIOS Tech. Lab | エンジニアのタメになるOSS・クラウド・認証の技術トピックス 
今回は「tremor」というUIライブラリについて紹介します。ReactでTailwindCSSを採用していれば、管理画面を楽に作ることができるのでは？というとても良い感触でした。その感動を爆速でブログにまとめてみました。一応ひな形も作ったのですぐお試しすることができます。一度、公式のリファレンスを覗いてみてください。使えるコンポーネントがあるかも！
ご挨拶とガイド
どもども！突然のゲリラ豪雨と雷によって、一時家が停電して大慌てな龍ちゃんです。ピカッと光って家が静かになってしまったのでビビり散らかしました。内心ビビっていても、意外と冷静なものでブログを書く手は止まりませんでしたねｗ。まぁネット必須の作業ではなかったので、特に問題もなかったが救いです。
今回は、友達のエンジニアから共有情報が飛んできたので勉強しました。「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」がインストールされます。
nodeLinker: node-modulesまぁ～「node_modulesをインストールするよ」というコマンドだけですね。これで、「yarn」のバージョンが1系じゃなくても動作します。
デザインに使用する際に使えるもの
UIライブラリを使用する際は、どこに使用するのかというのが重要になってきます。「Figma」を使っている方は、UI Kitなるものが存在しています。（Tremor UI Kit (Community)）
こちらを使うことで、「tremor」が出しているコンポーネントを用いて、デザインを作成することができます。デザインの手間も省くことができるのは、とても開発体験が良いです。
最近アプリを作るときは、「Figma」で簡単なデザインを作ってからコードを作成するようにしています。ノリでデザイン適応するよりもはるかに開発体験が上がるので、フロントの皆さんは「Figma」を覚えましょう。
終わりに
お疲れ様です。今回は「tremor」というUIライブラリの紹介でした。軽く使ってみたのですが、「tailwindcss」を採用しているプロダクトの場合は、「適応コンポーネントがある場合はすぐに入れてよいのでは？」という印象です。
タイトルにも乗っけているのですが、「管理画面」を作るときには非常に高い効果を発揮できると思います。ただ、意固地になって使おうとすると無理があるかな？という印象もあります。なので、「使えるときにはたくさん使って、微妙なときは見なかったことにする」という無難なことを言っておきます。
文中でも出てきましたが、最近は「Figma」を押しています。
フロントエンドの方には、必須の技術だと感じてきましたので使えるようになって損はないです！
さて、今週も終わりですんで残りの業務頑張りましょう。
Be the first to comment