Next.js開発における用語解説集
こんにちは。6月が終わり、今年も半分が過ぎました。
今年の夏も暑くなりそうです。
1990年代後半、くるりのデビュー曲「東京」の歌詞の景色のように
「今年の夏は暑くなさそう」なんて気配を感じることは、もう二度とないのかもしれません。
クーラーの風の下でそんなことを考えます。
あい変わらず季節に敏感にいたくあります。
さて、今回はNext.js開発における用語解説集です。
WordPressを主に使用していますが、弊社としては徐々にNext.jsでの開発にも移行していくことも理想としてあるので、触れる機会がたまにあります。
とはいえ、私自身経験がないものでしたので最初用語が全く分からず、？が多かったので備忘録も兼ねて簡単に用語をイメージベースでまとめていきたいと思います。
Next.jsとは
一言で分かりやすく表現するなら
「見た目が自由で、表示が速いモダンなホームページやアプリを作るための道具」。
「React」という機能を拡張した、モダンで高速なWebサイトを作りやすくするフレームワーク（Webを作るための便利な仕組み）。
Reactを使いやすく進化させたパワーアップキットのような存在。
Reactとは
Webサイトやアプリの「見た目（UI）」を作るためのJavaScriptの道具箱（ライブラリ）。
部品（コンポーネント）を組み立ててUIを作る。
変化に強く、再利用しやすく、大規模でも管理しやすいのが特徴。
イメージで…従来のHTML/CSS/JSが「紙に直接描く感じ」だとすると、Reactは「レゴブロックで部品を作って組み立てる」感じ。
SSR
Server Side Renderingの略で、サーバー側でページをレンダリング（データやコードから画面を作ること）し、アクセスされるたびにサーバーがページを動的に生成して返す仕組み。
WordPressのサイト表示も基本的にはSSR。
毎回ページを作るため、レスポンス速度は状況によって遅くなることがある。
SSG
Static Site Generatorの略で、ビルド（開発中のコードを動く形に変換する作業）時に、あらかじめHTMLファイルを生成しておく仕組み。
アクセス時は用意された静的ファイルをそのまま返すので、表示が非常に高速。
ブログやコーポレートサイトなど、更新頻度がそれほど高くないページに向いている。
GitとGitHub
Gitは、コードの変更履歴を記録・管理するツール。
GitHubは、その履歴をオンラインで保存・共有できるサービス。
チーム開発では、VS Codeからadd（staging） → commit → pushでGitHubにアップして連携する。
add（staging）・commit・push
add（staging）【追加】→ 変更したファイルを「記録の対象にするよ」と指定する段階。
commit【記録】→ どんな変更をしたかを「履歴として保存」する。メモ（コメント）もここで残す。
push【アップロード】→ 保存した履歴を「GitHubにアップして共有」する。
branch（ブランチ）
「作業の分岐（枝）」を作る機能。
本流（mainやmaster）を保ったまま、別の場所で新しい作業や修正ができる仕組み。
本体に影響を与えずに開発できたり、複数人が同時に別々の作業を進められるという利点がある。
マージ（merge）
別のブランチで行った作業（変更）を、元のブランチに取り込むこと。
複数人で作業した後に、最終的に main に統合する時によく使う。
コンフリクト
「複数人（または複数ブランチ）が同じ場所を編集していて、どれが正しいかわからない状態」のこと。発生したら、手動でどの内容を残すかを決めて解決する。
Pull Request（プルリクエスト）
自分が作業した内容をチームに見せて、「この変更を本体にマージしていいですか？」と確認お願いする仕組み。よく略して「プルリク」と呼ばれる。
Node.js
JavaScriptをパソコンやサーバーで動かせるようにする仕組み。もともとJavaScriptはブラウザの中だけで動く言語。でも「もっといろんな場所で使いたい！」ということでJavaScriptを「ブラウザの外」でも使えるようにした技術。
npm（Node Package Manager）
Node.jsで使う便利な部品（パッケージ）を管理するためのツール。
必要なライブラリ（部品）をインストールしたり、プロジェクト全体を管理したりするための仕組み。
Node.js をインストールすると npm も最初から付属されていて一緒に使えるようになる。
localhost
自分のPCの中にある開発用サーバーのこと。
本番公開する前に、まずローカルでテスト・開発する時に使用する。
build
開発中のファイルを、本番公開できる完成版に変換すること。
軽く・速く・安全に動くように最適化される。
Page Router と App Router
Next.jsのルーティング（どのURLで、どのページやデータを表示するかを決める仕組み）の世代の違い。
Page Router⇀従来のルーティング。pages/ ディレクトリを使ってルーティングする方式。
App Router⇀Next.js 13〜で導入された新方式。app/ ディレクトリを使い、柔軟で構造的なルーティングが可能。
Page Router は従来型で分かりやすいが、柔軟性に限界があり、App Router は新世代の Next.js 向け設計で、モダンな構成（SSR/SSG/SPA混合）に強い。
TypeScript
TypeScript は JavaScript に「型（type）」を加えた、より安全なプログラミング言語。
「型」とは、「このデータは何なのか？」をあらかじめ決めておくルールのこと。
型を使うと、プログラムがわかりやすくなり、間違いを防ぎやすくなる。
JSX
JavaScriptの中にHTMLっぽい見た目のコードを書ける仕組み。
特にReactで、見た目をわかりやすく書くために使われる。
.tsxファイル
型付きでReactコンポーネントを書くファイル。
TypeScriptとJSXを同時に使うときに必要になる。
デプロイ（deploy）
開発したWebサイトやアプリを、実際に人がアクセスできる場所（本番環境）に公開すること。
まとめ
今回はNext.js開発における用語解説をまとめてみました。分からないの用語の解説の中に、また分からない用語があったりして、なかなかとっつきづらいものではありますが、徐々に慣れていければと思います。また、分からない用語が増えたりしましたら第二弾など書くかもしれません。それでは。
