Javascript での開発スタイル
アイコンの利用
Typography について
Figma で文字が使われているところは必ず Typography が設定されています。
例：NORMAL/lg/Bold に対応するように t-normal_lg_bold と設定します。(Typographyの t-)
typescript
<div className="t-normal_lg_bold pt-4">{scenario.title}</div>TailwindCSS の apply機能で実現しています。
Chakra UIについて
WARNING
基本的に Chakra UI は利用しない
Figma と全くデザイン通りのコンポーネントが Chakra UI にあることは稀である。基本的なパーツはコンポーネントライブラリで揃っており、レイアウトの調整は TailwindCSSでやるべきである。
ただし、一部の動きについては自前で実装するのは難易度が高いので、以下のコンポーネントについては Chakra UI の利用をしても良い。 以下のコンポーネント以外を利用するときは、本当にChakra UI でやる必要かを確認し、必要な場合はこのリストに追加して下さい。
利用可能なChakra UIコンポーネント
Animation
- アニメーション系コンポーネント
Feedback
- フィードバック系コンポーネント
Skeleton
読み込み中のデザインはfigmaで規定がないことも多いので、Skeletonでよしなに実装する
OVERLAY系
- Modal（AlertDialogよりModalの方が高機能なのでModalを使う）
- ModalOverlay（Modalを使う際に、表示の制御の分岐のために必要）
- Tooltip
また、これらに付随して、useDisclosure を用いても良い。
Node Version アップデートの仕方
以下を対応していく
- Vercel のサポートバージョン
- GitHub Actions のサポートバージョンに左右されるので注意
ツール系
.tool-versionsの更新
GitHub Actionsのアプデ
node-version: "20.x"を検索して置換(20は適宜変更)using: node20を検索して置換
@types/node のアプデ
"@types/node":を検索して置換
INFO
漏れあるかも、注意！