Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@hamachi4708(はまちよ)

Reactアーキテクチャーの検討メモ（React×SSR=Nex.js）

Posted at

はじめに

書いといてなんだけど、これQiitaに書くやつじゃない気がしてる。（もうちょっとまとまったノウハウをアップするところという印象。でもアップしちゃう。）

Reactのアーキテクチャーを検討することになったので、軽くまとめてみる。
前提として、Reactは聞いたことあるレベル。（チュートリアルは少し触った程度）
基本はJavaやってた人です。

苦しんだ結果を残すために書いてるので、結論だけ教えろ！みたいな人には合わないかも。（まぁ結論はタイトルに書いてるけど）
あと、当然だけど、システム特性に応じて、ベストなアーキテクチャーは変わるから、ここに書くのがベストなアーキテクチャーという話ではない。

「SSRなシステムを検討する」「Reactを選ぶ」場合の検討メモ。

1.ググる

「React アーキテクチャー」でひとまずググってみる。

  • 2021/7/8：新しい！
  • 概要：おすすめライブラリ集って感じ。特定のアーキテクチャーを想定してるわけではなさそう。よく使うライブラリって感じかな。
    • Redux ... React における最適な設計パターンの実現
    • React Router Dom .. ルーティング
    • React Hook Form ... フォームバリデーション
    • Material UI React ... 基本的なコンポーネントの提供
    • Styled Components ... 保守性の高いスタイルの管理
    • React Virtualized ... パフォーマンスの改善
    • Jest & Enzyme ... テストライブラリ

  • 2019/3/28：許容範囲かな
  • 概要：SPAのチャットアプリを実際に作った内容。参考にできる部分はそれなりに多そう。（今回SPAじゃないからそこは違うけど）
    • React、Redux、Element UI、Ant Design、redux-saga、React Router、ESLint
    • コンポーネント設計はAtomic Designを参考にして４分類にした

  • 2021/1/23：新しい！
  • 概要：文化的に合わないところに無理矢理導入するのは避けたほうが良い。特にエンタープライズ開発でのReactは大変。
    • Reactの言語思想に合わせて設計すべき（お前の経験を押し付けるな
    • エンタープライズでのライブラリ選択は承認プロセスまで交えると全然決まらない
    • ライブラリを選んでも新しいライブラリが出てくる（選択したライブラリにない新しい思想を入れてしまうエンジニアが出てくる
    • 依存関係が肥大化しすぎてビルドが死ぬ
    • React自体は下位互換性があるが、それ以外のライブラリは基本新しいバージョンしかサポートしない。（メンテ負荷やばー

  • 2015年11月27日：古い扱いで良い気がする。状態管理にフォーカスして別のを調べたほうが良さそう。

  • 2021/9/7：新しい！
  • 概要：DEV Communityに2021年9月2日に投稿され、現在反響を巻き起こしているフロントエンドにおけるクリーンアーキテクチャの実装についてのAlexさんの記事。とのこと。参考になる部分は多そう。
    • 一通り読んだけど、クリーンアーキテクチャーの説明なだけで、フロントエンド要素として特化してる風には見えなかった。（自分が読み取れなかっただけの可能性が大きいけど・・・
    • Reactのディレクトリサンプルがあるってのがポイントなのかな・・・？

  • 2015年11月27日：ちょっと古いなー：Fluxも状況変わってるだろうし、読むなら別の記事だなー。

  • Posted on 2020年9月22日 • Updated on 2021年7月18日：最近更新されてるので、まだ生きてる？
  • 概要：著者的なベストプラクティスっぽい。参考にできそう。

  • 2021-12-01：最近
  • 概要：ReactのuseStateフックの内部実装読み解く。ちょっとピンポイントすぎるので、今回求めてるやつじゃない気配。

現状認識

  • ライブラリ
    • 基礎知識
      • ライブラリは下位互換性がないのが基本。選択は慎重に。（今回は関連システムと足並み揃える部分もあるので、関連システムが使ってるライブラリを洗っても良さそうだ。）
      • ライブラリのバージョンアップ対応は前提になることを改めて警告したほうが良さそうだ。（ライブラリを使わずに自作する手もあるけど・・・あんまり賢い選択とは思い難い・・・
    • 推奨ライブラリ
  • アーキテクチャーとしては以下あたりが参考になりそう

2.公式ドキュメントを読む

本来は先にこっちだとは思うけど、ついググって全体イメージ沸かせるところから入っちゃうタイプ。

React

  • 一通り読んで、関係ありそうなところに飛んで読む。

  • 推奨するツールチェイン：今回はサーバサイドレンダリングを想定してるので、Next.jsが推奨されてるっぽいな。
    • ただ、Next.jsって、Vueとよく比較で出てきたような・・・古い情報かしら・・・
      • 比較はされてるっぽい。正確にはReact由来のNextか、Vue由来のNuxtか。みたいな感じだった。なるほど。
      • Nuxt.jsとNext.jsを比較して、表とグラフにまとめてみた!
        • 興味深かったので、リンク貼っておく。淡々と比較してるあたり素晴らしい。（自分はつい私見とか書いちゃってたけど、WEB情報として参照する分にはこういう形式のが良いなって思った。
  • あとは自作？う〜ん・・・

Next.jsの公式ドキュメントは後で読む。

  • ここを読んで、そういえば、昔チュートリアルやったなと思って、だいぶ思い出したので、飛ばす。
  • 今回、状態管理すらリッチな感じなんだよなぁ・・・複雑になりやすいし、今回のPJの技術レベルだとちょっと厳しい予感もあるなぁ。

  • う〜ん・・・このインタラクティブさいらねぇんだよな・・・ぶっちゃけ・・・
  • なんでReact選んでんねんってのは正直感じてる・・・う〜ん・・・

Next.js

  • 印象：All in oneというほど全部を入れてるわけじゃないけど、ある程度のガイドラインに沿ってSSRなシステムをReactで開発するためのベストプラクティスに近い印象。
  • 当然フィットしないケースもあるかもしれないが、多くのライブラリを触れたことがあって、自分で取捨選択できる人なら自分でフレームワーク考えれるだろうけど、今の自分にはできない。
  • 最高！とはならないかもしれないけど、「悪くはない」には最低限持っていけそうな予感があるので、せっかくだから俺はこのNext.jsを選ぶぜ！

リリースノートチェック

最新：
09 Feb 2022:v12.0.11-canary.9

メジャーバージョンアップ：
27 Oct 2021:v12.0.0
16 Jun 2021:v11.0.0
28 Oct 2020:v10.0.0
08 Jul 2019: v9.0.0

2019/01→(1y9m)→2020/1０→(8m)→2021/06→(4m)→2021/10
v11→v12の4ヶ月でメジャーバージョンアップは早すぎませんかねぇ？？？
力入れてくれるのは良いんだけどさぁ！！
というか、このスピード感だとそろそろ次のメジャーバージョンアップあるのでは・・・？
ブログ見るか・・・

blog

Next.js 12
Wednesday, October 27th 2021 (4 months ago)
As we announced at Next.js Conf, Next.js 12 is our biggest release ever:

「v12はこれまでで最大のリリースです！（キリッ！」って感じだけど、それv11リリースした時にどんな気持ちだったんだろう・・・
すぐにv12来るのにな・・・とかおもっとったんかな・・・

Next.js 11.1
Thursday, August 12th 2021 (6 months ago)
We're improving build performance across the entire stack with Next.js 11.1, featuring:

記事の中身見たけど、v12は特に匂わされてるとかも無かったなぁ・・・

v12で一旦落ち着くと良いんだけど、こればっかりはわからんなぁ・・・というか、そういうもんだしなぁ・・・
むむむvup対応チームが常時いる感じになりそうだな。そこまでする？

使えそうな記事

Next.jsを選んだ上でのライブラリ選定や開発方針はここら辺を参考にすると良さそう。

個人的な結論

そもそも、インタラクティブなWEB画面でないなら、あまりReactにこだわる必要はない気がしてる。
SSR前提なら、他の選択肢もありそう。
ただ、ReactでSSRをやるなら、Next.jsは比較的ましな選択肢として存在してる。

悩ましい話としては、そもそもSSRじゃないよねってところまで到達し始めてるらしい。う〜むむむ。
→ SSRはおまいらには早すぎた 〜Next.jsのgetServerSidePropsの登場が何を意味するか〜

なんにせよ、Reactを選ぶなら、高頻度のバージョンアップ対応をする覚悟が必要（それくらい投資する覚悟を持つべき）
そうじゃないなら、もうちょっと長期間サポートされるようなモノを考えたほうが良い気がする。（実際問題として）
今回、本当にReact選ぶかは一度見直しだなー。

なお、Next.jsを選んだ場合でも、ライブラリは追加する必要がありそう。いくつか参考になりそうなものはあるので、そこら辺を参照しよう。

あと、やっぱり公式ドキュメントから入るべきだった。ググったのは完全に周り道だった感じある。

以上。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?