Zenn
株式会社ZOZOPublicationへの投稿
✨

[神教材] React公式ドキュメントで輪読会をやったら思いのほか良かった!!

ツチヤカイタ
2024/02/15に公開
React
Tips
frontend
輪読会
宣言的ui
idea

はじめに

この記事では、Reactの公式ドキュメント（React公式ドキュメント）の輪読会の感想とおすすめポイントを簡単にまとめていきます。

この輪読会を実施した背景ですが、私の所属するチームでは輪読会を行ったことがなかったため、手頃な教材でとりあえず進めてみたかったことと、Reactを使用した業務が多いことが主な理由です。（あとドキュメントが日本語でリニューアルして間もなかったというのも魅力でした）

輪読会の進め方

読書の為の時間と、ディスカッションの時間をスケジューリングし、各自が読んでおきます。
また要約を持ち周りで担当して、mtgで気づき,感想の共有と議論を行うというスタイルで進めました。

1回の輪読会で読み進める分量は大体1時間で読み終わる程度の量を目安に、その回の要約担当がslackで事前にアナウンスします。

今回のReact公式ドキュメントでは1回あたり、大体1章分 ~ ものによっては1章分をいくつかに分割という形になりました。（例: 1章分 = 小項目を含むUI の記述全て）

輪読回の範囲は UI の記述 ~ 避難ハッチまでを対象にしました。

参考にした資料:

輪読会から得た学び

輪読会からはReactに限らず、プログラミング全般への理解を深めることができました。特に印象的だったのは以下のポイントです。

プログラミングへの理解

  • 純関数：
    • 副作用が発生しない（自分の仕事に集中する）
    • 同じ入力に対して常に同じ出力を返す（参照透過性）
  • 宣言的UI：
    • 宣言型プログラミングとは、UI を細かく管理する（命令型）のではなく、視覚状態ごとに UI を記述することを意味する

    • 表示したいものを宣言することで、React が UI を更新する方法を考えてくれるのです。
      タクシーに乗ったとき、どこで曲がるかを正確に伝えるのではなく、どこに行きたいかを運転手に伝えることを思い浮かべてください。運転手はあなたをそこに連れていくのが仕事ですし、あなたが考えもしなかった近道も知っているかもしれません！

Reactの深掘り

  • インタラクティビティ・ファースト：Reactのコンセプト。インタラクションを主体として設計されたアプローチ
    • = すなわち React コンポーネントとは、マークアップを添えることができる JavaScript 関数となっている
  • コンポーネントの表示プロセス：注文を受けてから料理がテーブルに提供されるまでのプロセスに例えられています
    1. レンダーのトリガ（お客様の注文を厨房に伝える）
    2. コンポーネントのレンダー（厨房で注文の品を料理する）
    3. DOM へのコミット（テーブルに注文の品を提供する）

その他 Tips

  • keyの指定：リストのレンダーの際に key を指定しなかった場合、React はデフォルトでインデックスを使用する

    • つまり、keyにindexを指定するのはwornを黙らせているだけとも言えそう

  • Propsは分割代入が推奨されているっぽい: 例) function Avatar({ person, size }){}

    • 通常は props オブジェクト全体を必要とすることはないため、個々の props へと分割代入します。

  • JSXが単一のルート要素を返さないといけない理由: 関数から 2 つのobjectを返す時に配列でwrapしないといけないのと同じ理由

  • コンポーネントのhookを先頭で呼び出す理由: use で始まるフックは、コンポーネントのトップレベルまたはカスタムフック内でのみ呼び出すことができる

    • これは、ファイルの先頭でモジュールを “import” するのと同様に、コンポーネントの先頭で React の機能を “use” する と考える

  • state の更新はキューに入る: state 変数をセットすることで、新しいレンダーがキューに予約される

    • 同じタイミングでset関数を複数回発火しても、イベントハンドラ内のすべてのコードが実行されるまで、React は state の更新処理を待機する。

    • このため、再レンダーはそれらが終わった後で行われる（下記のケースで加算されるのは1のみ）

      <button onClick={() => {
  setNumber(number + 1);
  setNumber(number + 1);
  setNumber(number + 1);
}}>+3</button>

  • stateのグループ化：関連するstateは一つにまとめることが推奨される

  • UI ツリーとstate: UI ツリーの中で同じ位置の同じコンポーネントは state が保持される

    // isFancy が変わっても Counter の state は保持される
// ここでのポイントは、コンポーネントが同じ場所に存在し続けるため、その内部stateは保持されます。
return (
  <div>
    {isFancy ? (
      <Counter isFancy={true} />
    ) : (
      <Counter isFancy={false} />
    )}
  </div>
);

    • 見た目の位置は同じだけどUIツリーが違うパターン

      // isPlayerA が変わった場合 Counter の state は保持されない
return (
  <div>
    {isPlayerA &&
      <Counter person="Taylor" />
    }
    {!isPlayerA &&
      <Counter person="Sarah" />
    }
  </div>
);

  • 外部システムへの接続：useRefやuseEffectなどのフックを利用する方法は外部システムに接続するための避難ハッチであると説明される（=それ以外で利用するのはほとんどの場合で間違いである）

    • useRef は、React が管理しない、コンポーネントの秘密のポケットのようなもの

  • useEffectの依存値の比較: 依存値の比較には Object.is 関数が利用される

  • useEffectの実行タイミング: コミットの最後に画面が更新された後に実行される

  • useEffectの粒度: コード内の 1 つのエフェクトは、1 つの独立した同期の処理を表すべき

など...

チームにとって良かった点

輪読会を通じて特に下記の利点を感じました😊

  • チーム内での共通認識の形成
    • （ドキュメントを読む前後で）チームメンバーがどのような認識でReactを扱っていたかを知れる機会になった
    • PRレビュー時にドキュメントで学んだケースを引用できるようになった
  • 知識の向上
  • ディスカッションによるコミュニケーションの活性化

個人的には特にPRレビューの際に「ここドキュメントではこのように書いてなかったけ？」といったようなコミュニケーションが取れて意図が正確に伝わるというのが大きいと思いました。

まとめ

Reactの公式ドキュメント輪読会は、Reactの根幹となる概念から実践的なTipsまで、幅広い知識を学べました。また全体的にわかりやすくユーモアのある説明で、楽しんで読むことができます。

Reactを書いたことがない人はなんとなく考え方を知れると思いますし、Reactに慣れた人でも知らないような実践的なTipsも盛り込まれていてとてもバランスの良いドキュメントに感じました👏

株式会社ZOZO
株式会社ZOZOPublication

ファッションEC「ZOZOTOWN」、ファッションコーディネートアプリ「WEAR」などの各種サービスの企画・開発・運営や、「ZOZOSUIT」「ZOZOMAT」「ZOZOGLASS」などの計測テクノロジーの開発・活用をおこなっています。また、カスタマーサポート、物流拠点「ZOZOBASE」を運営しています。

Discussion