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

by ミカイ

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

余談: 元ネタ  

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

// v2(importして終わり) import { Button } from '@chakra-ui/react' // v3(コンポーネント生成してそれを読み込む)npx @chakra-ui/cli snippet add button import { Button } from '..components/ui/button'

Slide 11

Slide 11 text

npx @chakra-ui/cli snippet add button ; import { Button } from '..components/ui/button'   ↑の方法により以下のようなメリットがある   ● Chakra UIのバージョンに依存しない   ● コードのブラックボックス化が少なくなる  

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text