bulletproof-react 写経してみた 2023/02/21 ReactについてLT！ TechDLT Vol.8

自己紹介 TK @_takuyakikuchi フロントエンドエンジニア そろそろ 3 年目 貿易スタートアップ Shippio 普段の業務はReact

今日話すこと・話さないこと 🙅 学べたベストプラクティスの詳細 🙆 bulletproof-react とはなんぞや 🙆 bulletproof-react の写経、なぜ、なに 🙆 bulletproof-react の写経してみての感想

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翻訳）

ベストプラクティスの宝庫 Reactベストプラクティスの宝庫！「 bulletproof-react」が勉強になりすぎる件 本気で考えるReactのベストプラクティス！ bulletproof-react2022

ベストプラクティスの宝庫 ● ディレクトリ構成 ● コンポーネントの設計 ● エラーハンドリング ● ルーティング ● テスト ● モックサーバー

なんで写経しようと思ったか 新規でアプリケーションを立ち上げる機会があり、 フロントエンドのアーキテクチャの話に興味がでてきた。

フロントエンドアーキテクチャの記事たち microCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【前編】 フロントエンドアーキテクチャの話 : Resource Setの紹介

でも、、、 クリーンアーキテクチャわからん😱 DDDわからん😱 理解不足なのに、ただ良いとされているから記事の事例をマネして、システム設計をす るのは事故りそう。 （アーキテクチャを知ることは大事だとは思うので、勉強します。）

bulletproof-react 良いかも 動いているアプリだから、机上の空論で終わらず、理解できるかも💡 https://bulletproof-react-app.netlify.app/

クローンアプリを作り出した https://github.com/takuyakikuchi/bulletproof-react-clone 絶賛開発中！！

気をつけたこと 脳死状態で写経しない ● 機能ベースで作っていく ○ ファイルごと丸写しでなく、実装したい機能に必要な単位でコードを写していく ● 理解できなかったところは、調べて、調べた結果をコメント残していく

気をつけたこと リポジトリが 2 年前に作られている ● 基本的には同じパッケージの最新バージョンを採用 ● いくつかアレンジ ○ create-react-app => Vite ○ Jest => Vitest ○ Chromatic

結果 めちゃくちゃ勉強になっている。 ディレクトリ構成は、シンプルで、責務の分離を意識できる構成になっている。 UIコンポーネントの作り方、フォームライブラリの設計なども 👍 これなら普段の業務にそのまま活かせそう 🙌

結果 サイドプロジェクトとして神プロジェクトだと気づいた 神かよ… - ブルーロック | アル

bulletproof-react の機能 最低限の基本的な機能を網羅 ● Authentication（認証） ○ ログイン・ログアウト ○ ユーザー登録 ● Authorization（権限） ○ 権限による機能制限 ● データ操作 ○ CRUD ○ フォーム ● ルーティング

bulletproof-react の機能 さらに ● ステート管理 ○ サーバキャッシュ ○ グローバルステート ○ フォームステート ○ コロケーション ● フロントエンドテスト ○ 静的テスト ○ ユニットテスト ○ インテグレーションテスト ○ E2E ○ API のモック ● Storybook

システム構成

気になるツールを試す

まとめ - bulletproof-react はサイドプロジェクトとして持っておくと、最高の遊び場になる神 プロジェクトであった - ベストプラクティスの宝庫

以上です 👋