※この記事は以前ちょっと株式会社 社員ブログで公開していたものです
こんにちわ！フロントエンドエンジニアのしまむーです！
今回は先月末(2022年1月末)にv1.0が公開されたばかりのフロントエンドライブラリXtend UIについてご紹介したいと思います。
Xtend UIとは
Xtend UIはシンプルでカスタマイズ性の高いUI設計をサポートするフロントエンドライブラリです。UIライブラリと呼ばれるものに比べてスクロール連動のアニメーションなどフロントエンドの広範囲をサポートするライブラリになっています。内部的にはTailwind.css、vanilla.js、Gsapで構成されています。
Webサイトやアプリケーション等の構築の際に必要となるUIのデザインに必要な初期工程をある程度担ってくれるようなライブラリになります。
A11y規格にも準拠しており、アクセシビリティにも配慮されているので注目しています。
Vanilla JS、Reactで利用するためのドキュメントも用意されています。
どんなコンポーネントや機能が用意されているのか
まずコンポーネントとしては下記のような基本的なものが用意されています。
Button
Card
Icon
Link
List
Loader
Media
Row
Table
Form
ラジオボタン、チェックボックス、複数選択などフォームで頻繁に使うものは一通り用意されていますね。
上記に合わせて、ドロップダウンメニュー、スクロールナビゲーション、スライダーやトグルボタン、モーダルなども用意されています、おおよそのことは用意されているコンポーネントで出来そうです。
スタイルのカスタマイズなどはtailwind.config.jsの設定の変更や、tailwindのユーティリティークラスを要素へ追加するなどで対応できます。
このライブラリを使うにあたって注意しなければいけない点があるとすれば、TailwindCSSの使い方とGsapの使い方についても多少知っておく必要があることだとは思いますがドキュメントをサラッと読む程度で問題ないと思いますのでとりあえず使ってみても良いと思います。
(ただしリリースされたばかりなのでバグ等は存在する可能性があります。)
最後に
Gsapなども組み込まれて、これについては不要な方も多いかもしれませんが使わないとしてもさまざまな機能がまとめて用意されているのは手軽で便利です。
まだ正式版が公開されて間もないので更新も非常に活発、今後も目が離せないライブラリです！
ちょっと株式会社（chot-inc.com）のエンジニアブログです。 フロントエンドエンジニア募集中！ カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion