ReactのUIコンポーネントライブラリに「Sancho UI」はいかが？
GW満喫していますか？私はNext.jsとCloud Functionsを組み合わせたり、FirebaseをバックエンドとしたSPAの検証や、SwiftでiOSアプリを書いて満喫しています。
こういった検証にありがちなのですが、「実現可能か？」という観点で作っているアプリケーションであっても、UIがショボいとやる気が削がれませんか？ 自分はUI寄りのJSerなので、UIに気合が入ってないと、実装の気合も入りません。
とはいえ、ReactのUIコンポーネントライブラリにありがちなのですが、ライブラリを入れるためにwebpackの設定が必要なものもあります。
そういった理由から、いままで自分はCSSフルスクラッチ派でした。しかし、このGWにそれなりに見栄えがよく、設定がほとんど必要のない「Sancho UI」というUIコンポーネントライブラリを見つけて心変わりする程度には気に入ったので紹介します。
Sancho UIの紹介と強み
Sancho UIは Emotion と TypeScript で書かれたUIコンポーネントライブラリです。 CSS in JSライブラリのEmotionで書かれていることが重要で、自分のよく使うライブラリでほとんどのアプリケーションに導入しているので設定が必要ありません。 導入していなくても、emotionをインストールすれば利用が可能になります。 （2系は先日リリースされたばっかりで、まだ安定していないので1系を指定しています。）
$ npm install sancho@1.2.3 @emotion/core @emotion/cssまた、TypeScriptで書かれていることもあり、型定義もバッチリです。ドキュメントを見ずとも、型定義ファイルを見に行くだけで、どういったプロパティを渡せばいいかわかるのもポイントです。
コンポーネント例とサンプル
実際にUIコンポーネントとしてどういったものが使えるのか、自分のオススメコンポーネントとともに紹介します。
まずはTabです。次の例はToolbarとTabを組み合わせたものです。 コードを見るとわかるのですが、50行以下の記述でアプリライクなツールバーとタブが実装できます。
もう一つ、推したいのがSheetです。上の例の「Open Sheet」ボタンを押すと左からViewが登場します。 いわゆるモーダルの亜種なコンポーネントですが、Matterial DesignのSheets:sideとして定義されているようなものです。
モーダルでは表現できないモードを表現できたり、propsとしてpositionに”buttom”を渡すことで表示する方向も制御できます。
他にもForm系のコンポーネントも充実しており、フォーム系ライブラリと組み合わせることで爆速でフォーム系のページを構築することもできます。
こういったコンポーネントを用いてSPAををサクッと実装できるのがSancho UIの強みです。ぜひ、次のプロジェクトに使ってみてはどうでしょうか？ 利用者を増やして、作者のやる気スイッチを一緒に押しましょう！