Chakra UI v3にバージョンアップしてほぼ別物になった件

Update Award 2024 ~個人的にアツかったアップデートを語るLT大会~

2025/01/20

https://toranomon-tech-hub.connpass.com/event/337629/

Transcript

1. Chakra UI v3に 
 バージョンアップして 
 ほぼ別物になった件 
 
 
 
 三海 純(ミカイジュン)

2. ミカイ ジュン ( 三海 純)
 • フリーランスエンジニア 
 • 趣味: もくもく会、アニメ、ネット麻雀(雀魂) 
 • 好きな有名人 
 ◦ 後藤 ひとり 
 ◦ 陸八魔アル 
 ◦ 千早 愛音
 ◦ 八木 唯

3. キャリア 
 • 2020年 ~ 2022年: 受託企業 
 ◦ フロントエンドエンジニア 
 • 2022年 ~ 2023年: 自社開発企業 
 ◦ フロントエンド&バックエンドエンジニア 
 • 2024年: フリーランス 
 ◦ Typescriptでリプレース(技術選定)&開発 
 • 2025年2月 
 ◦ 株式会社 ゆめみ 正社員 

4. Chakra UI v2とv3 
 両方使ったけど 
 別物だった 
 今回のテーマ 

5. お伝えしたいこと 
 技術選定の際に、慣れた技術を 
 そのまま採用することが、 
 果たして本当に開発効率の向上に 
 つながるのか？ 

6. UIコンポーネントライブラリの一つ。 
 UIコンポーネントライブラリとは 
 1からCSSを記述することなく 
 ハイクオリティのUIをすぐに 
 使えること 
 Chakra UI とは？

7. 引用元: https://www.chakra-ui.com/ 

8. 余談: 元ネタ 

9. Chakra UIのv3のメリットは? 
 色々あるけど・・・ 

10. // v2(importして終わり) import { Button } from '@chakra-ui/react' // v3(コンポーネント生成してそれを読み込 む)npx @chakra-ui/cli snippet add button import { Button } from '..components/ui/button'
11. npx @chakra-ui/cli snippet add button ; import { Button } from '..components/ui/button' 
 ↑の方法により以下のようなメリットがある 
 • Chakra UIのバージョンに依存しない 
 • コードのブラックボックス化が少なくなる 

12. npx @chakra-ui/cli snippet add button ; import { Button } from '..components/ui/button' 
 ↑裏を返せばv2と全く違うやり方になっている 
 つまり、0からキャッチアップが必要 

13. 今回の件で思ったこと 
 フロントエンド技術の 
 移り変わりが早い 

14. イメージとして・・・ 
 カードゲームの制限改定 

15. お伝えしたいこと( 再掲載)
 技術選定の際に、慣れた技術を 
 そのまま採用することが、 
 果たして本当に開発効率の向上に 
 つながるのか？ 

16. おまけ(本編？) 
 今あなたは 
 Chakra UI 
 おすすめしますか？ 

17. 結論・・・
 条件を満たせばおすすめ 

18. Chakra UIはこんな人におすすめ！ 
 • 見た目をGoogle風(MUI)にしない 
 • Tailwindやcssを使わない 
 • 0からの実装に拘らない 

19. Chakra UIはこんな人におすすめ！ 
 • 見た目をGoogle風(MUI)にしない 
 • Tailwindやcssを使わない 
 • 0からの実装に拘らない 

20. 引用元: https://mui.com/material-ui/react-text-field/ 

21. 素直にMUI(Material UI) 
 使いましょう 

22. Chakra UIはこんな人におすすめ！ 
 • 見た目をGoogle風(MUI)にしない 
 • Tailwindやcssを使わない 
 • 0からの実装に拘らない 

23. import { Text } from "@chakra-ui/react" // font-size of `theme.fontSizes.md` <Text fontSize="md" /> // font-size `32px` <Text fontSize={32} /> // font-size `'2em'` <Text fontSize='2em' /> // text-align `left` on all viewports and `center` from the first breakpoint and up <Text textAlign={[ 'left', 'center' ]} /> 

24. 基本的にpropsを渡すので・・・ 
 tailwindやcssでスタイル実装したい方は 
 別のライブラリの方がおすすめ 

25. Chakra UIはこんな人におすすめ！ 
 • 見た目をGoogle風(MUI)にしない 
 • Tailwindやcssを使わない 
 • 0からの実装に拘らない 

26. デフォルトでスタイルがついている 
 引用元: https://www.chakra-ui.com/ 

27. 0からスタイル実装したい場合は・・・ 
 何も色がついてない別のライブラリが 
 おすすめ。ヘッドレスUIなど・・・ 

28. Chakra UIはこんな人におすすめ！ (まとめ)
 • 見た目をGoogle風(MUI)にしない 
 • Tailwindやcssを使わない 
 • 0からの実装に拘らない 

29. お伝えしたいこと( 再々掲載)
 技術選定の際に、慣れた技術を 
 そのまま採用することが、 
 果たして本当に開発効率の向上に 
 つながるのか？ 

30. UIライブラリ困ったら・・・ 
 迷ったらChakra UIいいぞ 

31. ご清聴ありがとうござ います！