Zenn
Open6

[3章]モダンWebフロントエンド

Next.js
React
TypeScript
Web
frontend
Shinya OkayamaShinya Okayama

こちらの続き。
https://zenn.dev/shinya_okayama/scraps/ee1d0a36e2c2a6
参考書籍
TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

3章途中のメモ

  • 仮想DOMの描画エンジン。
  • 導入からプロジェクトの開始と最序盤のコンポーネントの記述くらいまでは出来たものの、書籍の目的としてNext.jsに内容を割いているようで、JavaScript自体の応用的なものやReactの用語や概念の説明が省かれている箇所が頻出してきているため、合わせて信頼性の高いドキュメントを読んでいく。
  • https://ja.javascript.info/
  • https://ja.react.dev/learn
  • https://developer.mozilla.org/ja/

2024/12-12

  • 基本的なフックの記述例に触れることはできたが、今のところ具体的な使い方までは考えが及びにくい。useStateやuseReducerで状態を記録して、それを他のフックで応用というのが基本的な流れだとは思えた。
  • しかしそれらのフックの主にメモ化に関するものは、実際の環境や挙動を考慮しないと適正化の考え方が分からない。
  • 実践でかなり使いそうなのはuseEffectだろうなと思う。
  • フックがユーザー体験的に重要なのは、再描画のコストを設計時にかなり調整できるところだろう。
  • バックエンドにつながりそうな部分で考えれば、分かりやすく扱いやすいコンポーネントの構造を考えたり、フックによる状態の受け渡しとその動的な扱いを考慮するところだと思う。
  • しかし深いところまでいくと、例えばJavaScriptのDateオブジェクトを扱う部分があったが、引き出し方を変えたりするときにはオブジェクトの構造が分かってないと型定義も合わせた記述の仕方が分からない感じがあった（実際そこまでやるケースがどれだけあるかわからないけど）。
  • Reactはライブラリなので、当然JavaScriptの理解が深ければ出来ることも増えるだろうと思う。
Shinya OkayamaShinya Okayama

2024/12-13

  • Next.jsの項目に入った。
  • しょっぱな、create-next-appで導入してみると、当たり前だが、書籍のバージョンとほとんど違う環境が自動でインストールされたので、調整に手間取る。
  • 現在はApp-Routerが推奨されているっぽいが、本ではその環境以前なので、デフォルト設定で導入されたディレクトリ構造が全く違った。
  • Githubで書籍の環境のバージョンが分かったので、ちょっとマニュアルを混ぜてそれぞれのバージョンを合わせる。
  • 合ってるか分からないので、内容を進めるうちに問題が発生したらそのときに対処する。
Shinya OkayamaShinya Okayama

2024/12-16

  • Next.jsのレンダリング手法。

  • 静的サイト生成（SSG）、クライアントサイドレンダリング（CSR）、サーバーサイドレンダリング（SSR）、インクリメンタル静的再生成（ISR）など複数ある。

  • このあたりが理解しづらいというのを伺ったし、実際いまのところ具体的な使い分けが思い至らない。

  • 大雑把に分けると、静的か動的か、どのタイミングで行うか、といった違いがある。

  • 領域で分けると、CSR以外はほとんどサーバーサイドの働きであり、CSR自体はフロントエンドで常習的に行われる手法である（サーバーと連携しない、ユーザー入力に応じたページ可変とか、APIを使った出力とか）。

  • 基本となるのがSSGで、内容が変わらないページやページの一部（AboutとかFAQとか、たぶんヘッダーとか）を事前に出力して用意しておく。

  • SSRはページのアクセスごとに（リクエストごとに）サーバー側で描画してクライアントに渡す方法。変動しやすい価格表示などのリアルタイム性を保つために使われると考えられる。サーバーでの処理を逐次行う関係から、負荷や遅延のリスクがある。

  • ISRはイメージでいうとSSGとSSRを合わせたようなもの。

  • 「SSRと違ってリクエスト時にサーバー側での処理が無い」と説明されているのだが、たしかに間違った内容ではないっぽいのだが、正確にはリクエスト時にSSGで用意したページデータをクライアントに渡すが、そのデータに有効期限を設定してキャッシュしておき、有効期限が切れたあとにリクエストがあった場合は一旦用意したデータを渡した後、SSGでページデータを最新の情報に更新し、それをキャッシュしてから渡すということらしい。

  • あくまでも「リクエストごとの処理負荷」が必ず発生せず、リクエスト時に待たされないという意味で「リクエスト時にサーバー側での処理が無い」ということらしい。わかりづら。

「生成」と「レンダリング」って違うのか？

  • 最終的に「HTMLを作る」といった意味では同じ。
  • 「事前に」用意される。静的などの意味合いでは生成。事前にファイルとして存在している点も違う。
  • 「その場で」HTMLを作る。実行タイミングが「リクエストやクライアントイベントに依存」している。動的などの意味合いではレンダリング。
  • しかし先のISRなどの手法を考えると、このあたりはかなり曖昧になってくる可能性がある。
  • 静的・動的という意味合いやタイミングや領域での区別を付けるために分けて用いられてきた感じがするが、根本的にはWeb技術での事情が起点のような気がする。

歴史的な背景
レンダリング（Rendering）はもともとグラフィックやブラウザの表示プロセスに使われる用語です。
クライアントサイドJavaScriptの普及以前は、HTMLの生成はサーバーサイドの役割であり、主に「静的生成」と呼ばれるプロセスが中心でした。
クライアントサイドでHTMLを動的に生成する技術（CSR）の登場によって「レンダリング」という言葉がフロントエンドでも一般化。
この歴史的経緯から、生成とレンダリングという別々の用語が定着しました。
by ChatGPT

具体的な記述に関して。

  • いまのところ基本的な部分なので難しい部分は無いが、そこまでにやっている内容（TypeScriptとReact）の応用なので、ここまでを理解しきれていなかったら、かなりゴチャゴチャしてくるかもしれない。
  • TypeScript自体は本来のオブジェクト指向言語の仕組みをJavaScriptに多少搭載するみたいな奴っぽいので、ここまでで「TypeScriptいみわかんねえ🤪」ってなってるのは、たぶん仕方ない。
  • 実際、この基本的な部分というよりも、これを使って色々していく段階が複雑になってくると思うので、ここはしっかり押さえておきたい。
Shinya OkayamaShinya Okayama

[簡易]3章のまとめやメモ(React/Next.jsの基礎)

＊前提（バージョン）
└React - 18.2.0
└Next.js - 12.2.3
（書籍の環境と合わせた）
※Next.jsの13.4からApp Routerになっているが、本の内容と乖離してしまうので、ここではPages Routerでやっていきます。最新の内容は本の内容が終わった後にやるかもしれない。

＊要点

  • Next.jsとは何か？
  • ReactとNext.jsの関係性。

＊まとめ
└Reactの基本（コンポーネント、Context、React Hooks）
└Next.jsの基本（生成とレンダリング方法、表示やリンクの具体的方法など）

Shinya OkayamaShinya Okayama

Next.jsとは何か？

└Reactをベースとして、Reactの拡張が出来るフレームワーク。
└ReactのCSRに加えて、SSG、SSR、ISRといった生成・レンダリング機能をプラスすることにより、SEOに適したパフォーマンス、そしてアクセスとレスポンス性能を高めることが出来る。
└デフォルトでルーティング機能を持つ。ReactにもReact Routerというライブラリが存在するが、Next.jsのルーティング機能は簡易かつ自動化されている。
└APIの初期構築が容易。高度な機能でないAPIなら、すぐに実装できる。

ReactとNext.jsの関係性

└Reactが「フロントエンドをAtomic Design化するもの」なら、Next.jsは「WebサイトやWebアプリケーションをAtomic Design化させるもの」だといえるかもしれない。
└Reactを拡張させるライブラリなどはいくつかあるが、Next.jsはReactを拡張させるフルスタックフレームワークとして、かなり完成されている。

Shinya OkayamaShinya Okayama

Reactの基本

  • コンポーネントを基本としたUI構築ライブラリ。
  • 仮想DOMを使った変更と差分更新。
  • UIの状態（State）の記録と、その変化による更新。
  • 親から子へ一方向のデータフロー。
  • JavaScript内でHTMLのようなコードを書けるJSX（TSX）構文。

Reactの構築手順

１．コンポーネントを記述する。

export default function Sample() {
  return (
    <img
      src="https://sample.com/sample.jpg"
      alt="sample"
    />
  )
}

２．propsで親から子へ
＠途中