Next.jsに入門した＆最近のReact開発について調べたのでメモ

フロントはかなり経験が薄いが、業務で触るため必要に迫られて勉強した。実務上必要となる理解を優先したため、JavaScriptやReactのAPIの仕様など無視している点もあるかもしれない。 前提として、私が以前にReactを触ったのは4年ほど前で、Hooksも使用していなかったし、Reduxがよく使われていた気がする (うろ覚え)。つまりほぼ素人。

ざっくりNext.js is 何

ReactはインタラクティブなUIを提供するJavaScriptのライブラリ。Next.jsはReactを使ってアプリケーションを開発するためのフレームワーク。Next.jsはReactを使ってUIを構築し、その他のアプリ構築とパフォーマンス最適化をいい感じにできるような機能をビルトインで備えている。例えば、ReactではReact Routerを使ってルーティングをする必要があったが (どうもこれがめんどいとの噂)、Next.jsではディレクトリ構造で自動的に解決してくれたりする。 また、TypeScriptやESLintのインテグレーションとか、DXもいい感じにしてくれる。 どうでもいいけどコンパイラはRustで書かれてるらしい。

以下サバイバルTypeScriptより抜粋

Next.jsはルーティング時のプリフェッチや画像の最適化などのパフォーマンス最適化をフレームワーク内で内包しており、ゼロコンフィグで簡単にパフォーマンスの高いアプリケーションを構築することができます。ページ単位のサーバーサイドレンダリング(SSR)や静的サイト生成(SSG)の機能も提供しており、用途に合わせて柔軟にアーキテクチャを選択できるのも特徴

Reactはページ数が少なく小規模なウェブサイト開発に向いていて、ページ数が多いと読み込み速度が遅くなる。レンダリングするとJavaScriptが全部読み込まれるから。らしい。 一方でNextはReactをベースにしたHTMLテンプレート派のフレームワークで、最初にHTMLがレンダリングされて、必要なところだけをJSが読み込むため読み込み速度が速い。Reactはクライアントレンダリング(CSR, SPA)。Nextはサーバーサイドレンダリング (SSG, SSR) とクライアントレンダリングをコンポーネントごとに選択できる。だからReactでSSRを行いたい人の強い味方として存在しているそうだ。

Next.js入門

現時点では英語しかないけど、やっぱりNext.jsのチュートリアルをやってドキュメントを読むしかなさそう。Udemyにチュートリアルとほぼ同じ内容の日本語の講座があったので、興味がある方はそちらを聞いても良いかもしれない。 チュートリの最初はReactのプリミティブな感じの実装から始まるので、私は興味があるところだけ読んであとは実践のスタイルで行った。細かく最適化しないといけない業務でないのなら、機能だけ攫うだけであれば大して読むのに時間はかからないだろう(いつかちゃんと読まないとな...)。

Nextフレームワークとしての機能

ルーティングをWebページ、API共にいい感じにしてくれたり、ホットリロード機能を搭載(Fast Refresh)したりしている。 ReactではReact routerっていうライブラリ使ってルーティングしたり、webpack dev serverでホットリロードしたりが面倒だった様子。

JSXで使える組み込みコンポーネント

Linkタグを使えばクライアントサイドだけでページ遷移できる。SEO対策を気にする場合はaタグを中にネストできる。 Imageタグは画像の最適化のやり方の設定ができる。使ってみたが、それが逆にややハマった。

参考資料：Next.js API Reference

最近のReactによる開発についてキャッチアップ

Hooks

React16.8で追加された機能。最近はとにかくhooks使いまくってるっぽい。

state などの React の機能を、クラスを書かずに (関数コンポーネントを使って) 使えるようになる。いろんな種類があって、非同期通信の状態 (要はPromiseの結果) とか、コンポーネントのライフサイクルとか、それぞれ指定されたタイミングでトリガーされる。 クラスコンポーネントstateの初期値セットとかstateを更新する関数とかを、こんな感じ↓でシュッと書ける。

//const [状態変数, 状態を変更するための関数] = useState(状態の初期値);
const [count, setCount] = useState(initialState)

↑このコードの解説

• count => countという名前のstateの現在の値
• setCount => countを更新する関数
• initialState => stateの初期値

よく使われるHooks

• useState
  • 関数コンポーネントでstateを管理する
• useEffect
  • DOMのライフサイクルによって発火してくれるくん。つまりcomponentDidMountとかそういうの書かなくていい
  • 第2引数に取った変数が更新された後に動作する
  • 関数をreturnすると、componentWillMountとcomponentDidUpdateのタイミングで実行してくれる
• useContext
  • Context (参考：コンテクストとは) に格納されているグローバルデータを利用する
• useReducer
  • useContextと組み合わせてReduxパターンのReducerみたいなものを作れるので、Reduxは今後不要と言われているらしい
• useCallback
  • メモ化でパフォーマンス向上するくん
• カスタムフック (fetcher指定してフックを自作できる)
• 他にも色々あるみたい

参考資料：

• React hooksを基礎から理解する シリーズ ←ｵｽｽﾒ!!
• Reactの公式ドキュメント
  • フックの導入
    • 副作用フック(useEffect)の利用法
    • 独自フックの作成

SWR

SWR は、Next.js を作っているVercel 社が開発しているデータフェッチのための React Hooks ライブラリ。"SWR"と言う名前は、 stale-while-revalidate の頭文字をとって名付けられている。SSR / SSG に対応しており、非同期処理を簡単に扱えるようになる。ただ、これもReact18で追加された新機能のSuspenseを使うと不要になりそうな雰囲気らしい。

こんな感じ↓でカスタムフックを使う。

const { data, error } = useSWR("/api/user", fetcher);

↑のfetcherはfetch APIを使っているが、fetcherはPromiseを返す関数ならなんでも使える。依存フェッチという複数のフェッチを連携させる処理をシュッと書ける。

dataには fetcher が resolve した値(通信結果、Promise.resolve() した値)、もしくはundefined (ロード中の時) が入る。isLoading的なものはない。 個人的な話だが、APIのレスポンスでfalsyな値が返ってきた時にif (!data) とかでハンドルしててずっとロード中の処理になって最初ちょっとハマった。

また、useSWRから mutate 関数を取得し、そのAPIを使用しているコンポーネントに再検証する旨を伝えることもできる。 例えば、モーダルで何かデータを操作する処理をして、処理が終わったらモーダルの裏側にある一覧画面を更新するみたいな場面に使えそう。

参考資料：

• そうです。わたしがReactをシンプルにするSWRです。
• Fetchの使用
• React 18に備えるにはどうすればいいの？　5分で理解する
  • Suspense機能について説明がある
• SWR公式ドキュメント：ミューテーション

MUI(Material UI)

いい感じにスタイルされたReact componentを提供してくれる。コンポーネントにはそれぞれAPIが生えてて、それをタグからいじることでカスタマイズできる。 SVGのアイコンとかもある。 参考資料：MUI: The React component library you always wanted

ぱっと見ややこしいが、LinkタグとかImageタグとか、Next.jsが提供している組み込みコンポーネントを使うこともある。

storybook

Reactコンポーネントをプレビューできるサーバーを建てられる。 2022年現在、フロントエンド開発において必要不可欠らしい。公式ドキュメントは英語のみ。チュートリアル(日本語もあるけど更新はちょっと遅れてそう) やってもいいかもだけど、シュッとサーバーを立ち上げて動かしてみると理解できる。

UIのカタログを作るツールとよく言われるが、ﾅﾆﾓﾜｶﾗﾅｲ状態では一瞬どういうことやねんと思ってしまった。たとえば家の内装とかでも壁紙何種類か比べてみるみたいなシミュレーションをやるイメージで、コンポーネントをGUIでシュッといじって試せる＆コンポーネントの現状を管理できることからそう例えられるようだ。

コンポーネントディレクトリにストーリーと呼ばれる、Reactの状態をもたない関数コンポーネントのようなものを定義する(参考)。このストーリーをGUIで確認できることにより、ビジュアルテストの役割を果たす。

参考資料：

• Storybookについて調べてみました。
• 公式ドキュメント

テスト

これからがんばる...。ぱっと見RSpecっぽい書き方してた。

• React Testing Library
• JEST
• Mock Service Worker

余談

有名な同人誌↓。重い腰を上げてやっと読んだ。 Next.jsを使う場合は直接的に必要ない情報が多いが、実務的な観点で役立つ情報が多く、かつとてもわかりやすくて良かった。Reactがいかに進化してきたかもよくわかる。

oukayuka.booth.pm

最近読んだこの記事も面白かった。

eh-career.com

React界隈で聞いたことある単語を調べてると既に時代遅れになってることも多くて、進化の速さを実感した。 最初のうちは画面上のコンポーネントの状態と表示するデータの状態を同様に扱うことにどうしても抵抗があったが、最近やっとReactの世界観に少し慣れてきた気がする。