chot Inc.

ちょっと株式会社 社員ブログ
Blog
  • ホーム
  • ブログ
  • Xtend UI A11y規格、アクセシビリティにも配慮されているフロントエンドライブラリ

Xtend UI A11y規格、アクセシビリティにも配慮されているフロントエンドライブラリ

ナレッジ・ノウハウ
Xtend UI A11y規格、アクセシビリティにも配慮されているフロントエンドライブラリ

SHARE

こんにちわ!フロントエンドエンジニアのしまむーです!
今回は先月末(2022年1月末)にv1.0が公開されたばかりのフロントエンドライブラリXtend UIについてご紹介したいと思います。

Xtend UIとは

Xtend UIはシンプルでカスタマイズ性の高いUI設計をサポートするフロントエンドライブラリです。UIライブラリと呼ばれるものに比べてスクロール連動のアニメーションなどフロントエンドの広範囲をサポートするライブラリになっています。内部的にはTailwind.css、vanilla.js、Gsapで構成されています。
Webサイトやアプリケーション等の構築の際に必要となるUIのデザインに必要な初期工程をある程度担ってくれるようなライブラリになります。
A11y規格にも準拠しており、アクセシビリティにも配慮されているので注目しています。
Vanilla JS、Reactで利用するためのドキュメントも用意されています。

どんなコンポーネントや機能が用意されているのか

まずコンポーネントとしては下記のような基本的なものが用意されています。

Button

https://xtendui.com/components/button

Card

https://xtendui.com/components/card

Icon

https://xtendui.com/components/icon


Link

https://xtendui.com/components/link

List

https://xtendui.com/components/list

Loader

https://xtendui.com/components/loader

Media

https://xtendui.com/components/media/content

Row

https://xtendui.com/components/row

Table

https://xtendui.com/components/table

Form

ラジオボタン、チェックボックス、複数選択などフォームで頻繁に使うものは一通り用意されていますね。
https://xtendui.com/components/form

上記に合わせて、ドロップダウンメニュースクロールナビゲーションスライダートグルボタンモーダルなども用意されています、おおよそのことは用意されているコンポーネントで出来そうです。




スタイルのカスタマイズなどはtailwind.config.js の設定の変更や、tailwindのユーティリティークラスを要素へ追加するなどで対応できます。

このライブラリを使うにあたって注意しなければいけない点があるとすれば、TailwindCSSの使い方とGsapの使い方についても多少知っておく必要があることだとは思いますがドキュメントをサラッと読む程度で問題ないと思いますのでとりあえず使ってみても良いと思います。
(ただしリリースされたばかりなのでバグ等は存在する可能性があります。)

最後に

Gsapなども組み込まれて、これについては不要な方も多いかもしれませんが使わないとしてもさまざまな機能がまとめて用意されているのは手軽で便利です。
まだ正式版が公開されて間もないので更新も非常に活発、今後も目が離せないライブラリです!

しまむー

フロントエンドエンジニア

静岡県からリモートで勤務しています。 ちょっと株式会社ではフロントエンドを主に担当していてReact, Gatsby等の周辺技術に触れています。 HTML, CSSのコーディングからキャリアをスタートし、EC-cubeやWordpressのカスタマイズ、プラグインの制作・改修なども担当していました。 ネットでは主に「かこなーる」という名義で活動しています。

関連記事

Copyright © 2022, chot inc.