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!
dev

WordPressをSifterでホスティングする際の検討メモ

Shifterは株式会社デジタルキューブ が運営する「Serverless Static WordPress ホスティング」と銘打っているサービスです。 通常用途でWordPressをする際は常

shifterwordpress
tips

Production modeでもVue.js Devtoolsを有効にする方法

今年のWWDCは熱かったですね!その中でもSwiftでReactのように宣言的にUIを記述できるSwiftUIの発表はこれからのiOSアプリに変革をもたらす存在だと思います。 そのSwiftUIの

chromevue
event

『初夏のJavaScript祭』でSPAのSSR, SSGについて話してきました

メンバーズキャリアさんのオフィスで開催された『初夏のJavaScript祭 in メンバーズキャリア』で登壇の枠を頂いたのでSPAをリリースする際によく検討されるSSR(Server Side Red