Next.js世代が Reactを学び直して気づいた価値
この記事はApplibot Advent Calendar 2024 の10日目の記事です。
最近、業務で使う技術の公式ドキュメントを全て読むことに時間を使うことを決めました！
そこでこの記事では、公式ドキュメントを読んでおくことの大切さと、特にReactの公式ドキュメントを読んで感じたメリットなどについてまとめます。
Reactの公式ドキュメントを読み直すきっかけ
業務で使っている技術の中でも、最初にReactを選んだ理由をいくつか紹介していきます。
-
複雑な要件 & UIに立ち向かう
普段は要件が複雑な開発をしていて、画面の取りうる状態や扱うデータも多いため、設計が悪いと後から手戻りが発生することになります。また取りうる状態がたくさんあるということは、簡単に非効率な実装が出来上がってしまうということもありました。 -
今のフロントの中心はReactなので、最もコスパがいい
タイトルにもある通り、Next.jsを通してReactを学んでいると、Next.jsが拡張した新しい書き方を学んで、その利点を理解するという、どこか表面上の理解しかできていない感覚がありました。書けるし動くけど、そこには意図がない感覚。
Reactという基盤の理解度を上げることで拡張技術である、Next.jsやRemixの理解の助けにもなるだろうと考えました。
また、どこからが各フレームワークがやってくれていることなのか理解しておかないと、とりあえずNext.jsを選ぶみたいなことになり、余計な複雑性を受け入れることにも繋がりそうと考えています。 -
ライブラリの作者の意図した使い方ができるようになりたい
これはReactに限らずですが、ライブラリの作者が意図した使い方をできるようになると、以下のようなメリットがあると考えています。- 意図しないエラーを減らせる
- アップデートへの対応のコストを減らせる
- コードに意図を込められるようになる
-
日本語版のドキュメントがとても充実している & 読みやすい
日本語訳が本当に自然で、とても理解しやすいです。また、イラストや例えが含まれているため楽しく学ぶことができます。また、APIの仕様書だけでなく、ベストプラクティスが学べるポイントも非常に大きいです。これがあるおかげで何が意図した使い方なのかがすぐに理解できます。
素敵なドキュメントすぎて、自分も貢献してみたいなと思いました！
公式ドキュメントを読み始めて感じたメリット
-
設計力の向上
読み直すきっかけのところでも紹介した、複雑な要件に立ち向かうという一つの目的の助けになりました。詳しくは次の章で話しますが、高品質なコードが今までよりも早く作成できるようになった感覚があります。非常に幸福感が高いです。 -
なぜいいのか、なぜ悪いのかが分かるようになってきた
例えば、eslintで「hookの呼び出しはコンポーネントまたはhookのトップレベルでしかできません」というような警告に遭遇したことがあるかもしれません。今まではとりあえずできないからということで別の書き方をしていたところ、これの背景が分かるようになりました。(詳しくはこちら)
また、複雑な実装になった時にも、なぜそうなったかが分からないということが減りました。 -
2次情報に疑いを持てるようになってきた
単純に知識が増えるだけでなく、今までNext.jsを通してなんとなく理解していたことが本物の自信へと変わってきたことにより、バイアスが減ってきました。
設計力を向上させてくれた話の深掘り
この章では、公式ドキュメントを読み始めて感じたメリットのところで紹介した、設計力の向上について深掘りします。特に参考になったドキュメントの章を参考にどう実践で役に立ったのかをまとめます。
UIをツリーとして理解する
この章から受けたインスピレーションは、「レンダーツリーを頭の中に思い浮かべることができたら、再レンダリングのタイミングやデータの流れを整理できる」ということでした。
ということで、新機能の作成の初期段階で設計資料を作成してみました。
内容としては mermaid の状態遷移図の記法を使いレンダーツリーを描きました。どのコンポーネントでデータ取得をして、どこで状態を切り替えるかなど画面全体の設計をします。
この全体設計の段階では、詳細なコンポーネントの設計はしません。画面全体でのデータや状態の依存関係が分かれば、詳細は大きなコンポーネントの中に閉じることができます。
全体設計をしておくことで、再レンダリングの範囲やキャッシュの設定など、画面全体のデータの流れやパターンを把握することができます。
state構造の選択
先ほどの章は画面全体の設計に役に立ちました。この章は各コンポーネントを設計していく時に非常に役立ちます。この章から受けたインスピレーションは「stateを正規化する」ということです。データベースの正規化は聞いたことがあるかもしれませんが、satteにも応用できるのはとてもおもしろかったです。
stateを正規化しておくことのメリット
- stateの矛盾(データの不整合的な)を防げる
- state内の重複を避けられる
- 深くネストされたstateが減る
stateが増えると再レンダリングや矛盾した状態が出来上がる可能性に繋がります。そのため、計算によって導けるものはstateには持たせないということも大切です。正規化と計算によって導くを使うことで、stateの更新がシンプルにできるようになりました。
このstateは本当に必要なのか？というのを疑ってみるといいかもしれません。
感想
公式ドキュメントを読むと成果物の質が上がり、仕事の満足度が向上します。まずは、自分が普段業務で使っている技術から学ぶと実践の機会がすぐ近くにあるので学習効率も上がって、より継続しやすくなりそうです！
Discussion