🎉

実例で見るStitches

2022/06/15に公開

https://stitches.dev/

概要

Stitchesのみを使用してイメージビューアを作成しました。

技術要素はこちらからご確認ください。

見た目はこちらから確認できます。

これを題材にStitchesの紹介をしたいと思います。

対象・目的

CSS in JSを使用したことがある方を対象としております。CSSの説明等は致しません。

また、紹介程度にStitchesの機能をお見せすることが本記事の目的です。「とりあえずこんなことができるよ!」という情報を伝えることを優先しているので細かい説明は省いています。

詳細な情報は公式ドキュメントやこちらの情報を参照してください。

CSS in TS

こちらで使われている表現です。

Stitchesを使うと、型の恩恵を存分に受けることができるので、補完がバチバチ効きます。おすすめポイントです。

設定

stitches.configファイル内でcreateStitchesを使用して設定を行います。

こちらを参考にしました。

スタイリング

styledを用いてスタイリングを行います。

カスタムコンポーネントのスタイリングも同様です。

HStackはBoxにスタイルを当てることで作成しました。

css

レイアウトに使用するHStack・VStack・Gridコンポーネントを見てみましょう。

共通のスタイルflexStylesはcssを用いて作成しました。

flexStylesを適用します。

因みに、styledには複数のスタイルを渡すことができます。

variant

バリアントを使うことで、可変のスタイルが実装できます。styled-componentの実装に比べて、可変のスタイルが管理しやすくなると思います。

Text・Headingの共通のスタイルtextStyleには、色とフォントサイズのバリアントを指定しています('$'で始まる文字列はstitches.configで設定したthemeの変数です)。

defaultVariantsでデフォルトのバリアントを指定できます。

見出しの「Image Viewer」には、variantバリアントの"violet"を指定しています。

ここでは紹介しませんが、compoundVariantsが便利です。どんなものかは、こちらを参照ください。

コンポーネント

`css`prop

styledで作成したコンポーネントはcsspropを持ちます。レイアウトに使用するコンポーネントでは特にお世話になりますね。

`as`prop

styledで作成したコンポーネントはaspropを持ちます。カードのコンテナとして使用したGridコンポーネントは、ulとして機能しています。

レスポンシブ対応

こちらも先ほどのGridが題材です。

こちらをご覧ください。

columns={{ '@initial': '1', '@md': '2', '@lg': '3' }}

stitches.configで定義したmediaの変数を用いることで、ウィンドサイズに応じた振る舞いを持たせています。

各数字はグリッドレイアウトの列の数に対応しているので、ウィンドサイズに変化に応じて、Cardコンポーネントの列方向の表示数を変えています。

まとめ

Stitchesの紹介でした。

CSS in JSの現状を劇的に変える要素はありませんが、欲しい機能は一通り揃えています。ただ、そのうえで補完がよく効くので、開発効率の向上は期待できるのではないでしょうか。

ここでは伝えきれなかった情報もあります。特に、設定は完全に説明を飛ばしているので、興味を持たれた方は公式ドキュメントやこちらの情報を参照してみてください。

概要