第1章から読む →

用語集

用語集

本教材に出てくる用語を、分野別にまとめました。各用語の最後のリンクから、詳しく説明している章に移動できます。ブラウザの検索機能（Macは ⌘+F、Windowsは Ctrl+F）で探すと便利です。

基本

ブラウザBrowser
Chrome、Safari、Edgeなど、Webサイトを見るためのソフト。サーバーから届いたファイルを画面として表示する「客席」。第1章
サーバーServer
サイトのデータやプログラムを持ち、ブラウザの依頼に応えて結果を返すコンピューター。「厨房」。第1章
HTML・CSS・JavaScript
Webページを形づくる3種類のファイル。HTMLは中身と骨組み、CSSは見た目、JavaScriptは動きを担当する。第1章
Reactリアクト
Meta社が開発した、画面を部品の組み合わせで作るためのライブラリ。Next.jsの土台。第1章
Next.jsネクスト・ジェイエス
Reactを土台に、ページの道案内・サーバー処理・高速化などをそろえたフレームワーク。Vercel社が開発し、無料で使える。第1章
ライブラリ／フレームワーク
ライブラリは必要なときに呼び出す「道具箱」。フレームワークは全体の型や決まりごとが用意された「標準仕様一式」。第1章
TypeScriptタイプスクリプト
JavaScriptに「型（データの種類）のルール」を足した言語。入力ミスを事前に見つけやすい。ファイル名は .ts や .tsx。第2章

ページと部品

ルーティングRouting
URLに応じて、どのページを表示するかを決める道案内の仕組み。第2章
App Routerアップ・ルーター
app フォルダの中のフォルダ構成がそのままURLになる、現在標準のページの作り方。旧来の方式は Pages Router（pages フォルダ）。第2章
page.tsx
そのフォルダのページ本体を表すファイル。第2章
layout.tsx
複数ページで共通する枠（ヘッダー・フッター・サイドメニューなど）を定義するファイル。入れ子にできる。第2章
動的ルート[id] など
フォルダ名を角かっこで囲み、中身が変わる多数のページ（商品詳細など）を1つのファイルで受け持つ仕組み。第2章
Link
ページ間を移動するリンクの部品。画面全体を読み直さず、リンク先を先読みして素早く切り替える。第2章
コンポーネントComponent
画面を構成する部品。ヘッダー、ボタン、商品カードなど。名前は大文字で始まる。第3章
JSX
プログラムの中にHTMLに似た書き方で画面を書く記法。第3章
propsプロップス
部品の外から渡す値。差し込み印刷の「差し込み項目」にあたる。第3章
stateステート
部品の中で、利用者の操作に応じて変化していく値。カートの個数、開閉状態など。第3章
Tailwind CSSテイルウィンド
短いクラス名（px-4、bg-blue-600 など）を並べて見た目を指定する仕組み。第3章

画面の作り方

レンダリングRendering
部品とデータを組み合わせて、最終的な画面（HTML）を作ること。料理でいう「調理」。第4章
SSG静的サイト生成
公開前のビルド時にページを作り置きしておく方式。最も速い。第4章
ISR／再検証revalidate
作り置きしたページを、一定時間ごとや更新時に自動で作り直す方式。第4章
SSRサーバーサイド・レンダリング
アクセスのたびにサーバーでページを作る方式。常に最新の内容になる。第4章
CSRクライアントサイド・レンダリング
ブラウザの中で画面を組み立てる方式。第4章
サーバーコンポーネント
サーバーで動く部品。App Routerでは何も書かなければこれになる。データの取り出しや秘密情報の利用に向く。第4章
クライアントコンポーネント／"use client"
ブラウザでも動き、クリックや入力に反応できる部品。ファイルの先頭に "use client" と書く。第4章
ハイドレーションHydration
サーバーで作られたHTMLに、ブラウザ側でJavaScriptの動きを結び付ける作業。第4章
キャッシュCache
一度作ったものや取り出したデータを保存して再利用する仕組み。16系では "use cache" で明示する。第4章
ストリーミングStreaming
準備できた部分から先に表示し、遅い部分を後から差し込む仕組み。第4章

データ

データベース
大量のデータを表の形で整理して、速く安全に保管する仕組み。PostgreSQL、Supabase など。第5章
CMSコンテンツ管理システム
お知らせや記事を管理画面から更新できる仕組み。microCMS、Contentful など。第5章
APIエーピーアイ
プログラム同士がデータをやり取りするための「窓口」。第5章
Server Actions／"use server"
フォームの送信などから、サーバー側の処理（保存など）を直接呼び出せる仕組み。第5章
Route Handlerroute.ts
画面ではなく、データだけをやり取りする窓口（API）を作るファイル。Webhookの受け口などに使う。第5章
Webhookウェブフック
外部サービスが、出来事（支払い完了など）を自動で知らせてくる仕組み。第5章
環境変数／.env.local
APIキーやパスワードなどの秘密を、プログラムとは別に保管する仕組み。開発中は .env.local に書く。第5章
NEXT_PUBLIC_
この名前で始まる環境変数はブラウザから見える。秘密の情報には絶対に付けない。第5章
認証
利用者が誰かを確かめる仕組み（ログイン）。専用のサービスや部品を使うのが一般的。第5章
proxy.ts旧 middleware.ts
ページに入る前にチェックを行う「受付係」のファイル。ログインしていない人を案内し直すなど。第5章

速さと検索

Core Web Vitals
Googleが定めた表示品質の指標。LCP（見えるまでの時間）、INP（反応の速さ）、CLS（画面のズレ）の3つが中心。第6章
next/image
画像の縮小・形式変換・遅延読み込み・ズレ防止を自動で行う画像部品。第6章
next/font
Webフォントを効率よく読み込み、文字の表示のちらつきやズレを抑える仕組み。第6章
SEO検索エンジン最適化
検索結果で見つけてもらいやすくするための工夫。第6章
メタデータmetadata
ページのタイトル、説明文、OGP画像など、ブラウザや検索エンジン、SNSに伝える「ページの名札」。第6章
OGP
SNSやチャットでURLを共有したときに表示される、タイトルや画像のカードの設定。第6章

公開と運用

localhostローカルホスト
「自分のパソコン自身」を指す特別な住所。開発中は localhost:3000 でサイトを確認する。第7章
npm／package.json
npm は公開されているプログラムの部品を取り込む道具。package.json は使っている部品とバージョンの一覧。第7章
GitHubギットハブ
プログラムを変更履歴つきで保管・共有するサービス。第7章
ブランチBranch
本番に影響を与えずに作業するための「作業用の枝」。第7章
ビルドnpm run build
プログラムを本番で速く動く形に変換・圧縮し、作り置きのページを作る作業。第7章
デプロイDeploy
ビルドしたものをサーバーに配置し、インターネットから見られるようにすること。第7章
Vercelバーセル
Next.jsの開発元が提供するホスティング（公開用）サービス。GitHubと連携して自動で公開できる。第7章
プレビューデプロイ
本番前に、変更内容を確認用のURLで見られるVercelの機能。第7章
Turbopackターボパック
Next.js 16系で標準になった、開発中の更新やビルドを高速に行う内部の道具。第7章
脆弱性ぜいじゃくせい
プログラムのセキュリティ上の弱点。修正版が出たら速やかに更新する。第7章
ロールバック
問題が起きたときに、1つ前の正常な公開状態に戻すこと。第7章