Pagelyzeの構築を通じて学んだReactについて

Translated for your language. 原文を読む.

AI-assisted draft.

What Building Pagelyze Taught Me About React

Pagelyzeを構築したことで、Reactに対する見方が変わりました。理論ではなく、プロダクトのアーキテクチャに目を向けるようになったのです。

Pagelyzeはウェブサイト監査ツールです。単なる小さな練習用アプリではありません。監査レポート、スコアリングロジック、ダッシュボードなどを扱います。そのため、私はある一つの問いに答えなければなりませんでした。

「プロダクトが成長しても、このコードはクリーンなままでいられるだろうか？」

useStateやuseEffectのようなHooksは重要です。しかし、それだけで全てが決まるわけではありません。モダンな構文を使っていたとしても、メンテナンスが困難なコードになってしまうことはあります。問題の多くは、通常「責務」にあります。

設計が悪い場合、一つのファイルがデータの読み込みから結果の表示まで全てを担ってしまいます。これはスケールするにつれて破綻します。

より良い方法は、目的に応じてコンポーネントを分割することです。

各パーツには一つの役割があります。データロジックを壊すことなく、カードのデザインを変更できます。

「Reduxを使うべきか、Contextを使うべきか」と問うのはやめましょう。「誰がそのステートを必要としているのか」を問うのです。

カスタムフックは「振る舞い」を表すべきです。単に汚いコードを別のファイルに移動させるためのものではありません。優れたフックはデータを取得する役割を担い、ページコンポーネントは画面の調整だけに専念できるようにします。

フォルダは機能ごとに構成しましょう。

ルーティングは単なるURLではありません。それはユーザーのジャーニーです。ユーザーはランディングページから無料監査へ、次にレポートへ、そして最終的にサービスへの問い合わせへと進みます。優れたルーティングは、ユーザーを次のステップへと導きます。

明確さを持って構築しましょう。ボトルネックを見つけ、その特定の箇所を修正するのです。

Reactのベストプラクティスとは、意思決定のことです。コンポーネントが何を所有するか、ステートをどこに置くか、そしてルートがユーザーの助けになるかどうかを、あなたが決めるのです。

Pagelyzeは私にとってのテストです。画面が作れるかどうかを試しているのではありません。プロダクトが成長しても、クリーンな状態を維持できるかどうかを試しているのです。

続きを読む