mottox2 blog

ReactのUIコンポーネントライブラリに「Sancho UI」はいかが?

devemotionreact

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.com_.png (603.4 kB)

https://sancho-ui.com/

Sancho UIは Emotion と TypeScript で書かれたUIコンポーネントライブラリです。
CSS in JSライブラリのEmotionで書かれていることが重要で、自分のよく使うライブラリでほとんどのアプリケーションに導入しているので設定が必要ありません。
導入していなくても、emotionをインストールすれば利用が可能になります。
(2系は先日リリースされたばっかりで、まだ安定していないので1系を指定しています。)

shell
$ 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の強みです。ぜひ、次のプロジェクトに使ってみてはどうでしょうか?
利用者を増やして、作者のやる気スイッチを一緒に押しましょう!

B!
event

技術書典7で『Slack App開発レシピ』を頒布します

技術書典7で『Slack App開発レシピ』という技術同人誌を頒布します。(サークルページ) この本は、技術書同人誌博覧会で頒布した『Slack App開発ガイド』の続編になります。 開発ガイド

tip

Node.jsでファイルを直接実行した際にしか動かない処理を書く

Node.jsで他のファイルから呼び出すためのファイルを書いた時に、その関数をいい感じに実行したいと思ったことはないだろうか?具体的にはテストから呼び出すほどでもない用途でnode index.jsを

event

フロントエンドNightで『JSXでつくるDSL』というLTをしてきた

gifteeさんのオフィスで開催された『フロントエンド Night #1』というイベントでLT枠を頂き『JSXでつくるDSL』というLTをしてきました。 > 話したこと話したこと JSXから

lt