bulletproof-react 写経してみた

ベストプラクティスの宝庫と呼ばれている bulletproof-react のクローンアプリを作ってみた感想について発表したスライド。

ReactについてLT！ TechDLT Vol.8 で発表。
https://techdmeetup.connpass.com/event/272796/

Transcript

1. bulletproof-react 写経してみた 2023/02/21 ReactについてLT！ TechDLT Vol.8
2. 自己紹介 TK @_takuyakikuchi フロントエンドエンジニア そろそろ 3 年目 貿易スタートアップ Shippio 普段の業務はReact
3. 今日話すこと・話さないこと 🙅 学べたベストプラクティスの詳細 🙆 bulletproof-react とはなんぞや 🙆 bulletproof-react の写経、なぜ、なに 🙆 bulletproof-react の写経してみての感想
4. bulletproof-react って何？ https://github.com/alan2207/bulletproof-react ”The goal here is to serve as a collection of resources and best practices when developing React applications. ” Reactアプリケーションを開発する際のリソースやベストプラクティスの集合体として機能 することを目的としています。（Deepl翻訳）
5. ベストプラクティスの宝庫 Reactベストプラクティスの宝庫！「 bulletproof-react」が勉強になりすぎる件 本気で考えるReactのベストプラクティス！ bulletproof-react2022
6. ベストプラクティスの宝庫 • ディレクトリ構成 • コンポーネントの設計 • エラーハンドリング • ルーティング • テスト • モックサーバー
7. なんで写経しようと思ったか 新規でアプリケーションを立ち上げる機会があり、 フロントエンドのアーキテクチャの話に興味がでてきた。
8. フロントエンドアーキテクチャの記事たち microCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【前編】 フロントエンドアーキテクチャの話 : Resource Setの紹介
9. でも、、、 クリーンアーキテクチャわからん😱 DDDわからん😱 理解不足なのに、ただ良いとされているから記事の事例をマネして、システム設計をす るのは事故りそう。 （アーキテクチャを知ることは大事だとは思うので、勉強します。）
10. bulletproof-react 良いかも 動いているアプリだから、机上の空論で終わらず、理解できるかも💡 https://bulletproof-react-app.netlify.app/
11. クローンアプリを作り出した https://github.com/takuyakikuchi/bulletproof-react-clone 絶賛開発中！！
12. 気をつけたこと 脳死状態で写経しない • 機能ベースで作っていく ◦ ファイルごと丸写しでなく、実装したい機能に必要な単位でコードを写していく • 理解できなかったところは、調べて、調べた結果をコメント残していく
13. 気をつけたこと リポジトリが 2 年前に作られている • 基本的には同じパッケージの最新バージョンを採用 • いくつかアレンジ ◦ create-react-app => Vite ◦ Jest => Vitest ◦ Chromatic
14. 結果 めちゃくちゃ勉強になっている。 ディレクトリ構成は、シンプルで、責務の分離を意識できる構成になっている。 UIコンポーネントの作り方、フォームライブラリの設計なども 👍 これなら普段の業務にそのまま活かせそう 🙌
15. 結果 サイドプロジェクトとして神プロジェクトだと気づいた 神かよ… - ブルーロック | アル
16. bulletproof-react の機能 最低限の基本的な機能を網羅 • Authentication（認証） ◦ ログイン・ログアウト ◦ ユーザー登録 • Authorization（権限） ◦ 権限による機能制限 • データ操作 ◦ CRUD ◦ フォーム • ルーティング
17. bulletproof-react の機能 さらに • ステート管理 ◦ サーバキャッシュ ◦ グローバルステート ◦ フォームステート ◦ コロケーション • フロントエンドテスト ◦ 静的テスト ◦ ユニットテスト ◦ インテグレーションテスト ◦ E2E ◦ API のモック • Storybook
18. システム構成
19. 気になるツールを試す
20. まとめ - bulletproof-react はサイドプロジェクトとして持っておくと、最高の遊び場になる神 プロジェクトであった - ベストプラクティスの宝庫
21. 以上です 👋