はじめに
株式会社Linc’well フロントエンド基盤チームです。弊社では web アプリケーションで利用するための共通コンポーネントを、デザイナーと共同で作成しています。共通コンポーネントにはまだ課題が多く、今回は Typography コンポーネントの作成経緯と設計について紹介します。
共通コンポーネントについて
主にデザイナーが管理する共通コンポーネントをコード上でも再利用可能な形にしたものです。Button や Select といった一般的な web UI から、アイコン・イラストなどドメイン固有の要素までstorybookで管理、再利用できるようにしています。
テキストの課題について
サービス開始当初から、デザイン側では共通のTypographyは存在していましたが、コードには共通のTypography コンポーネントなく、以下のような課題がありました。
似たようなテキストコードが大量に存在する
統一規格がなく、Figma で生成した CSS をコピペする運用が続いた結果、似たようなコードが大量に発生していました。
StyledComponent が乱立していた
スタイリングにはstyled-components を利用しているのですが、テキストのスタイルを当てただけのコンポーネントが多数存在し、コード量が増えて可読性も低下していました。
アプリケーション全体で調整できない
統一基準がないため、テキストのスタイルが新旧デザインで混在していました。結果として、アプリケーション全体で一括調整ができない状態でした。
Figma とコードの font-weight が一致しない
Figma はブラウザのフォントレンダリングを正確に再現しないため、和欧混植時に欧文が細く見えるケースがありました。
そのため Figma 上では 300 指定でも、実装時には 400 に修正する必要がありました。
これらの課題を解決するため、以下の要件を定義して実装を進めました。
- アプリケーション全体でトンマナを統一できる
- 重複した CSS・StyledComponent を削減し、コード量を抑える
- 新規作成や既存コードの置き換えをスムーズに行える
Typography コンポーネントの実装
テキストを扱うためのコンポーネントなので、できるだけシンプルかつ HTML ライクなインターフェースを意識しました。
新規作成だけでなく既存コードの置き換えやすさも重視しています。
import { Typography, typography } from 'ui/typography'
<Typography as="h2" type="heading" size="large">見出しテキスト</Typography>
<Typography as="p" type="text" size="small">本文テキスト</Typography>
Props
Props は Figma に定義されているデザインを再現できるよう設計しました。使用できる HTML タグは実装時点で必要なものに限定しています。
| プロパティ | 型 | 必須 | 説明 |
|---|---|---|---|
as |
h1~h6|section|div|p|span |
✓ | HTML タグ |
type |
'heading'|'text' |
✓ | タイポグラフィ種類 |
size |
string | ✓ | サイズ指定 |
color |
string | 色指定 | |
semiBold |
boolean | セミボールド適用 | |
hasUnderline |
boolean | アンダーライン（text のみ） |
styled-components 併用
Typography コンポーネントでは対応できないケースに備えて、インライン展開用の CSS も用意しています。
import { typography } from 'ui/typography'
const CustomTitle = styled.h1`
${typography.heading.xLarge}
`
新規作成・既存置き換えの工夫
移行コストを下げるため、Figma の変数にコメントを残し、実装のインターフェースを似せる工夫をしました。
新規作成時はコメントを参照することで、詳細を知らなくてもスタイルを再現できます。
/* Text/XXLarge-18_bold */ <- Figma 変数のコメント
font-family: var(--Hiragino-Sans, "Hiragino Sans");
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 140%; /* 25.2px */
既存コードの置き換えでは JSDoc を充実させ、font-size からTypographyのsizeを参照して、手軽に選択できるようにしました。
// before
const Common = styled.div`
> h1 {
font-weight: 600;
font-size: 22px;
line-height: 28px;
color: ${colors.gray800};
}
`
// after
<Typography type="heading" as="h1" size="xLarge" semiBold>
タイトル
</Typography>
sizeをhoverしています
このような工夫により、エンジニアにとって負担の少ない形で移行できるようになり、「使いやすそう」といった声も得られました。
おわりに
共通コンポーネントを作成することで、エンジニアとデザイナーが Typography という共通言語を持ち、アプリ全体の調整が可能になりました。
まだ導入から日が浅いため、今後の利用状況を見ながら必要に応じて機能拡張も検討していきます。
小話
Typography コンポーネントを実装しているときに、ふと「th タグって中に何を入れられるんだっけ？」と疑問に思う場面がありました。
普段は細かく意識していない仕様ですが、 MDN を読み直したところ、thタグではフローコンテンツが許可される一方で区分コンテンツは NG など、基本仕様を改めて確認する良い機会となりました。
共通コンポーネントづくりを通じて、実装やデザインの統一だけでなく、HTML の基本仕様を調べ直すちょっとしたきっかけになるのも楽しいところだなと感じました。
弊社ではフロントエンドエンジニアを積極的に採用しています。
現在はコードの負債解消などに取り組んでおり、非常にやりがいのある時期です。
ぜひ興味のある方は採用ページもご覧ください。
ありがとうございました。
Discussion