こんにちは、エンジニアのみほです！
キッチハイクでは定期的に社内勉強会を開催しています。
私も先日「React コンポーネントのスタイリング手法 これまでとこれから」というタイトルで発表をいたしました。 今回は発表スライドの共有とともに、発表の背景と個人的な考えを補足したいと思います。
スライドはこちらです。
発表の背景
「デザインシステム」という言葉が浸透して久しいですが、よし、デザインシステムやるぞ！と意気込んだところで、技術選定をすんなり進めることはなかなか難しいと言えるのではないでしょうか。最近では Utility First (CSS) を掲げたライブラリも評価され、選択肢は決して少ないとはいえません。
時に様々な粒度で語られる「デザインシステム」ですが、そこに一貫している関心事は以下だと考えています。
- コンポーネント指向にマッチした手段を採用したい
- 多くの場合、デザイナーも含めた問題である
＊ キッチハイクは React, React Native を用いて開発しているという前提に基づいています
私自身、プロジェクトにおいてデザイナーを開発者を繋ぐ役割になることも多いため、兼ねてからこのドメインには非常に興味がありました。そこで、自分たちを含めてこれからスタイリング手法を見直し / 新規導入する人達をターゲットに、以下をまとめることにしました。
- 最近の動向
- 技術選定の観点
- 実際にアプローチを試してみての評価
個人的まとめ
いくつかのアプローチを辿ってみて、感じたことは以下です。詳細は、ぜひスライドをご覧ください。
- どれも「スタイルをどうローカルスコープにするか」が軸になっていて、基本的にコンポーネント指向とマッチしている
- どんなフレームワークを使用するにしても、生 CSS の知識は必要
- チームの開発体制と技術選定は切っても切り離せない
- 手法だけが解決手段じゃない。デザインシステムを包括的にみる視座と複数の視点が必要
We're Hiring!
キッチハイクでは、デザインへの理解と関心があり、これからいい感じのユーティリティを導入・運用することに興味があるエンジニアを募集しています！
