Open13

UIライブラリめも

lowzzylowzzy

スタイルエンジン
https://qiita.com/chika_hoge/items/4efcacb3aee34307076c

# styled-components
return (
  <BaseText>基本のスタイリング</BaseText>
)

const BaseText = styled.p`
  background-color: #eee;
  font-size: 20px;
  padding: 15px;
`;

# emotion
return (
    <p css={base}>CSS Props（オブジェクト記法）</p>
);

const base = css({
  backgroundColor: "#eee",
  fontSize: "20px",
  padding: "15px"
});

styled-cpmponents: おそらく一番使われている CSS in JS のライブラリで、情報量が多い

lowzzylowzzy

参照元: https://tayori.com/blog/material-design/

マテリアルデザイン

2014年にGoogleが提唱したデザインのこと。明確なガイドラインが定められたデザインであり、「見やすく、直感的に操作できるWebページ・サービス」を作ることを目的としています。

5つの特徴

  1. 現実世界の物理的法則を取り入れる
  2. 紙とインクの要素で組み立てる
  3. 色の数を少なく配色する
  4. 影を活用して立体感を作る
  5. 連続性のあるアニメーション
lowzzylowzzy

インラインスタイル

<p style="color: blue; font-size: 16px;">このテキストは青色で、フォントサイズが16pxです。</p>
lowzzylowzzy

css modules

/* styles.module.css */
.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
}

// MyComponent.js
import React from 'react';
import styles from './styles.module.css';

const MyComponent = () => {
  return (
    <button className={styles.button}>Click Me</button>
  );
}

export default MyComponent;

コンポーネントぽい、部品化されたcss

lowzzylowzzy

chakra, mantinなど、reactに依存したcss フレームワークはreactが何か変更が起きた時に弱い。
一方でtailwindはchakraやmantineなどと比較してreactに依存しておらず、reactが大きな変更を行った時に影響を受けにくいため、フレームワークとして息が長い可能性が高い。

https://blog.uhy.ooo/entry/2022-10-01/tailwind/

tailwindを採用する2パターン

  • デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジェクトなど、デザイン上の細かな要求が無いがとりあえず整えておきたいという場合は採用してもよいかもしれません。Bootstrap的な立ち位置のものが欲しい場合です。
  • 逆に、デザインシステムをしっかりと整備しそれからの逸脱を防ぎたい場合。ただデザインがあるだけでなく、フロントエンドエンジニアまで巻き込んでデザインシステムを整備したいということが重要です。このようなユースケースではTailwind CSSのアプローチが適している可能性があります。
    tailwindでcssつけられるようにしてコンポーネント欲しいならtailwind component framework的なの使えばいい説
    tailwindがデザインシステム作ってガッツリやる時に使われるとあるけど、そういう時でもコンポーネントがあった方が楽だなあと思う時ありそうだけどなあ
    逆にchakraやmantineが採用されるのはなあぜなあぜ？
lowzzylowzzy

ワシはUtility Propsが好きっぽい

https://zenn.dev/poteboy/articles/ed97328b568acd

Utility Propsという考え方

上記問題を解決したUIコンポーネントライブラリの１つにChakra UIがあります。

Chakra UIではスタイリングをUtility Propsとして直接渡すことができます。例えば先ほど例に挙げた> MenuBoxは以下の様に書くことができます。

<Box
  display="flex"
  flexDir="column"
  justifyContent="center"
  w={["340px", "600px"]}
/>

これであればいちいちコンポーネントの定義元に移動することなくスタイリングを確認することができるので快適に開発を進めることができます。Tailwind CSSにおけるUtility-Firstな思想と同じ様なものですね。

lowzzylowzzy

utility first
.text-center { text-align: center;}みたいなクラスを用いてhtml書くこと
BEMぽくセマンティックなクラスつけるのではなくutility classつけて開発して、同じutility classがついたらコンポーネント化する。つまり、utility first, component second with no semantic class的な

https://qiita.com/Takazudo/items/5180f5eb6d798a52074f