フロント開発でよく使われるライブラリの紹介

Transcript

1. フロント開発で よく使われるライブラリ Frontend Meetup Okinawa
2. UIコンポーネント MUI (旧Material UI) Ant Design React Bootstrap Chakra UI
3. MUI (Materi UI)
4. Ant Design
5. React Bootstrap
6. Chakra UI
7. Chakra UI
8. ヘッドレスUIコンポーネント Tailwind Headless UI Radix UI UIを「見た目」と「振る舞い」で分離し、「振る舞い」のみを提供する
9. Tailwind Headless UI
10. Tailwind Headless UI
11. Radix UI
12. Radix UI
13. スタイリング手法 Styled Components JSS Emotion CSS Modules Tailwind CSS
14. Emotion
15. CSS Modules
16. Tailwind CSS
17. 状態管理 (全般) useReducer / useContext Redux Recoil
18. useReducer / useContext 長くなるので割愛します。。。
19. Redux (OLD)
20. Redux + Redux Toolkit (New)
21. Recoil
22. 状態管理 (フォーム) React Hook Form Formik フォームの「入力内容」、「バリデーションエラー」などの状態を管理する
23. React Hook Form
24. 状態管理 (APIリクエスト) TanStack Query (旧React Query) SWR APIリクエスト時の「エラー」、「ローディング」、「レスポンス」、「キャッシュ」などを管理する
25. TanStack Query
26. テスト Jest Vitest React Testing Library Storyshots Cypress TestCafe
27. React Testing Library
28. StoryShots
29. Cypress
30. モジュールバンドラー Webpack Vite (Rollup + esbuild) Turbopack
31. Bundling Speed
32. その他1 Storybook 言わずもがな、UIカタログ OpenAPI Generator OpenAPIのSpecからコードを生成 Prism OpenAPIのSpecからモックサーバーを起動
33. その他2 joi, zod バリデーションライブラリ、React Hook Formなどと一緒に使う Git Hooks コミット時にテストの実行やコミットメッセージのチェックを行う。 React Router ルーティングライブラリ
34. その他3 dayjs 日付を扱うライブラリ(JSのDateつらい) TanStack Table テーブルUI周りの振る舞いを提供してくれる JSON Server JSONファイルを作るだけで、RESTfulなAPIサーバーを起動できる デモアプリに便利
35. MUI (旧Material UI) Ant Design React Bootstrap Chakra UI Tailwind Headless UI Radix UI Styled Components JSS Emotion CSS Modules Tailwind CSS useReducer / useContext Redux Recoil React Hook Form Formik TanStack Query (旧React Query) SWR Jest Vitest React Testing Library Storyshots Cypress TestCafe Webpack Vite (Rollup + esbuild) Turbopack Storybook OpenAPI Generator Prism joi, zod Git Hooks React Router dayjs TanStack Table JSON Server THANK YOU!
36. THANK YOU!