relic-20220420-lt-makino

Transcript

1. ChakraUI の魅力 © Copyright 2022 Relic Inc. All rights reserved. 牧野 新
2. 目次 1 自己紹介 2 ChakraUI って何？ 3 実際の導入事例 4 推しポイント まとめ 5 おわりに
3. １ 自己紹介 牧野 新（まきの あらた） 株式会社Relic プロダクトイノベーション事業本部 サービスデザイン事業部 所属 フロントエンドエンジニア 2021年11月入社 趣味：楽器演奏、筋トレ、映画鑑賞 https://qiita.com/mackie0122
4. 2 ChakraUIって何？
5. 2 ChakraUIって何？ → CSSフレームワーク / UIライブラリ です。 いい感じにデザインが組まれたUIコンポーネントを組み合わせることで CSSを1から記述することなく、効率的にサイト・アプリケーションを構築することができます。 スタイルに一貫性を持たせたUIを楽に実装できるのが、 CSSフレームワークを使用するメリットです。 ChakraUIの特徴 デフォルトデザインが汎用的、カスタマイズしやすい スタイルの指定方法が直感的で分かりやすい・入力補完してくれる Utility Firstな設計なので、CSSのクラス名に悩まなくていい レイアウトに便利な機能が備わっている
6. 2 ChakraUIって何？ ▼ メニュー ▼ フォーム ▼ アコーディオン デフォルトデザインが汎用的、カスタマイズしやすい
7. 2 ChakraUIって何？ ▼ フォーム デフォルトデザインが汎用的、カスタマイズしやすい
8. 2 ChakraUIって何？ ▼ フォーム UIコンポーネントの調整が直感的にできる デフォルトデザインが汎用的、カスタマイズしやすい
9. 2 ChakraUIって何？ コンポーネントにpropsでCSSスタイルを記述していく形です。 また、コンポーネントにスタイルを記述する際、当てられるスタイルの入力補完が出るため
 開発者体験GOODです。 スタイル指定が直感的で分かりやすい・入力補完してくれる
10. 2 ChakraUIって何？ 一般的には以下のように、CSSのクラス名をつけて そのスタイルをHTMLに当てていきます。 対して、ChakraUIのコンポーネントにpropsとしてスタイルを記述していきます。 Utility Firstな設計なので、CSSのクラス名に悩まない
11. 2 ChakraUIって何？ ↑ 通常の HTML / CSS ← ChakraUI での書き方 Utility Firstな設計なので、CSSのクラス名に悩まない 直接スタイルを適用していくので、 クラス名を考える必要がない。 コンポーネント化は必須。
12. 2 ChakraUIって何？ 例えば、以下なようなレイアウトも簡単に調整できます。 ChakraUIには stack というレイアウトに便利な機能があり、 横並び・縦並びとそのスペースをコントロールできます。 Stack：縦並び / 左寄せ VStack：縦並び / 横中央寄せ HStack：横並び / 横中央寄せ レイアウトに便利な機能が備わっている
13. 2 ChakraUIって何？ レイアウトに便利な機能が備わっている
14. 2 ChakraUIって何？ レイアウトに便利な機能が備わっている
15. 2 ChakraUIって何？ レイアウトに便利な機能が備わっている
16. 3 実際の導入事例
17. 3 実際の導入事例 RTK Query ー データ取得・キャッシュ管理ツール Redux + Redux Toolkit ー 状態管理ツール/フレームワーク ChakraUI ー CSSフレームワーク/UIライブラリ Next.js ー Reactフレームワーク とあるプロジェクトでのフロントエンド技術スタック
18. 3 実際の導入事例 RTK Query ー データ取得・キャッシュ管理ツール Redux + Redux Toolkit ー 状態管理ツール/フレームワーク ChakraUI ー CSSフレームワーク/UIライブラリ Next.js ー Reactフレームワーク とあるプロジェクトでのフロントエンド技術スタック ChakraUIはReactの環境上で使われることを前提としています。 Next.jsとの相性はとても良いです。
19. 3 実際の導入事例 RTK Query ー データ取得・キャッシュ管理ツール Redux + Redux Toolkit ー 状態管理ツール/フレームワーク ChakraUI ー CSSフレームワーク/UIライブラリ Next.js ー Reactフレームワーク とあるプロジェクトでのフロントエンド技術スタック SPAを実装する上で大変なコンポーネント間のデータのやりとりや キャッシュ管理を楽にしてくれます。
20. 3 実際の導入事例 プロジェクト構成から見た、ChakraUI のメリット フロントエンドエンジニアが多い時で9人体制 開発期間・工数の関係で内部レビューを満足に入れられなかった 人数が多いとその分コーディングルールを準拠してキレイなコードに保つハードルも高くなる。 ChakraUIは UtilityFirst なため、CSSに関しては設計を気にする必要がなくなる。 0 → 1 の新規開発 デザインと並行してマークアップを進めるプラン デザインの一貫性を保ちやすいので、デザイナーさんとの共通認識が取りやすい。 部分的に既存デザインが使われているところはマークアップ工数が削減された。
21. 3 実際の導入事例 ChakraUI の デメリット 学習コストがそれなりにかかる 独自のモジュール・メソッドなどもあるので、習熟にはそれなりに時間がかかる。 ・DrawerやModal、Toastなどの機能付きコンポーネント ・文書構造に則してマークアップする際の適切なコンポーネント選び ・paginationなど、用意されていないものは独自で作成する必要がある コンポーネント設計をきちんとしないと同じようなコードがどんどん増えていく Utility-Firstでスタイルを指定していくため、同じ見た目のコンポーネントは きちんと設計して切り出していかないと、コードが増えていく一方となる。
22. 4 推しポイント まとめ
23. 4 推しポイント まとめ Class名を考えなくてよい 人数が多いとその分コーディングルールを準拠してキレイなコードに保つハードルも高くなる。 ChakraUIは UtilityFirst なため、CSSに関しては設計を気にする必要がなくなる。 デザイナーさんとの共通認識が取りやすい Figmaでは ChakraUI のテンプレートを使用したデザインも可能なので、 既存デザインを活かせば、実装の際にもエンジニア・デザイナー間で連携が取りやすい。 開発者体験が中々よい レイアウトのための機能が備わっていたり、使えるスタイル指定のサジェストが効くため 開発を進める上でのストレスが軽減される。
24. 5 おわりに 今回ご紹介した他にも・・・ ダークモードが導入されている アクセシビリティが考慮されたコンポーネントになっている 便利なHooksが用意されている Theme機能で、コンポーネント自体のデザインのカスタマイズも可能 Pure TypeScript なので、TypeScriptでの開発の相性が良い
25. 5 おわりに 今回ご紹介した他にも・・・ ＼ ぜひ使ってみてください！ ／ ダークモードが導入されている アクセシビリティが考慮されたコンポーネントになっている 便利なHooksが用意されている Theme機能で、コンポーネント自体のデザインのカスタマイズも可能 Pure TypeScript なので、TypeScriptでの開発の相性が良い
26. © C o p y r i g h t 2 0 2 2 R e l i c I n c . A l l r i g h t s r e s e r v e d . ご清聴ありがとうございました。