今回は【モダンWebアプリ開発のための用語集】をお届けします!!
【Glossary】モダンWeb & AI用語辞典 (A-Z / 五十音)
📚 本ガイドブックは、***モダンWeb開発*** と ***AIエージェント活用*** において頻出する重要用語をまとめた辞典です。用語の概念を正しく理解し、AIエージェントへの指示（プロンプト）の解像度を上げることで、より高品質な成果物を効率的に生成することを目指します。---
目次
1. [本辞典の役割と使い方](#1-本辞典の役割と使い方)2. [モダンWeb & AI 用語辞典 (A-Z)](#2-モダンweb--ai-用語辞典-az)
3. [モダンWeb & AI 用語辞典 (五十音)](#3-モダンweb--ai-用語辞典-五十音)
4. [AIエージェントへの指示精度を上げるコツ](#4-aiエージェントへの指示精度を上げるコツ)
5. [まとめ](#5-まとめ)
---
1. 本辞典の役割と使い方
用語と「な・ど・し・り・さ」の関連
本プロジェクトの基盤である ***「な・ど・し・り・さ」*** のフレームワークに基づき、各用語がどの要素に深く関わるかを分類列（**分類**）で示しています。| 記号 | 意味 | 説明 |
|---|---|---|
| な | なぜ | 設計思想、導入のきっかけ、解決したい課題 |
| ど | どう | 具体的な実装方法、使用ツール、手順 |
| し | 書式 | データの形式、コードの書き方、出力ルール |
| り | 履歴 | 技術の変遷、過去の経緯、実績 |
| さ | 制約 | セキュリティ、禁止事項、守るべきルール |
辞典の活用方法
AIエージェントに指示を出す際、曖昧な言葉ではなく、本辞典にある ***専門用語*** を適切に織り交ぜることで、AIの理解が劇的に深まり、意図しない生成（ハルシネーション）を防ぐことができます。---
2. モダンWeb & AI 用語辞典 (A-Z)
| 用語名 | 分類 | 意味・解説 | AIに指示する際の活用例 |
|---|---|---|---|
| Agent | な・ど | 人間に代わり、目標達成のために自律的に考えてツール（検索、実行、出力）を使いこなすAIのこと。 | 「あなたは熟練のエンジニアエージェントとして、このコードのリファクタリングを行ってください。」 |
| API | ど | ソフトウェア同士が機能を共有するための窓口。モダンWebではJSON形式でのやり取りが一般的。 | 「バックエンドAPIの仕様書に基づき、フロントエンドのfetch処理を実装してください。」 |
| BOM | し | ファイルの先頭にある、文字コードを判定するための特殊な記号。UTF-8では「BOMなし」が標準的。 | 「出力するファイルは、必ずBOMなしUTF-8で保存してください。」 |
| Bundle | ど | 複数のJSファイルを1つ（または少数）にまとめる処理・成果物。Viteなどのビルドツールが担う。 | 「本番ビルド後のバンドルサイズを確認し、不要なライブラリを削除してください。」 |
| CI/CD | ど・さ | コードをPushすると自動的にテスト・ビルド・デプロイが走る仕組み。GitHub Actionsなどで実現。 | 「GitHub ActionsでCI/CDパイプラインを構築し、mainブランチへのマージ時に自動デプロイしてください。」 |
| Component | し・ど | UIを構成する再利用可能な部品単位。React等で `.jsx` / `.tsx` ファイルとして定義する。 | 「このフォームを独立した `SearchComponent` として切り出し、Propsで検索条件を受け取るようにしてください。」 |
| CORS | さ | 異なるドメイン（ポート）間でのリソース共有を制限するブラウザのセキュリティ機能。 | 「localhost:3000からAPIを叩くとCORSエラーが出るので、nginxでプロキシ設定をしてください。」 |
| CSR | り・ど | ブラウザ側でJavaScriptを実行して画面を組み立てる方式。SPA（後述）の基盤技術。 | 「SEOは重視しない管理画面なので、CSRメインの設計で提案してください。」 |
| DOM | し | HTML/XML文書をプログラム（JS）から操作するための仕組み。要素をツリー状に扱う。 | 「直接DOMを操作するのではなく、Reactのステート管理を通じて表示を切り替えてください。」 |
| ESModule | し・り | ブラウザ・Node.jsが標準サポートするJSのモジュール構文（`import` / `export`）。CommonJS（`require`）の後継。 | 「CommonJSのrequire構文をESModuleのimport構文に書き換えてください。」 |
| Framework | な・ど | アプリ開発の土台となる設計・仕組みのセット。React（UIライブラリ）やNext.js（フルスタックFW）などが代表。 | 「Next.jsフレームワークを使い、SSRとAPIルートを1つのプロジェクトにまとめてください。」 |
| Git | ど・り | ソースコードの変更履歴を管理する分散型バージョン管理システム。現代開発の必須インフラ。 | 「featureブランチを切ってから実装し、mainへはPull Request経由でマージしてください。」 |
| Hallucination | さ | AIが事実に基づかない、もっともらしい嘘（幻覚）をつく現象。 | 「ハルシネーションを防ぐため、必ずプロジェクト内の `instructions.md` を参照してください。」 |
| Hook | し・ど | Reactで状態管理（useState）や副作用（useEffect）などの機能を関数コンポーネントで使うための仕組み。 | 「useEffectフックを使って、コンポーネントのマウント時にAPIからデータを取得してください。」 |
| Hydration | ど | サーバーから届いた静的なHTMLに、JavaScriptが息を吹き込み、動的なページに変える工程。 | 「SSR環境でのHydrationエラーを防ぐため、windowオブジェクトの参照ポイントに注意して。」 |
| ISR | な・ど | Incremental Static Regeneration。ビルド時に生成した静的HTMLを、設定した間隔でサーバー側から自動再生成する仕組み（Next.js等）。 | 「商品一覧ページはISRで1時間ごとに再生成し、鮮度とパフォーマンスを両立させてください。」 |
| JSON | し | JavaScript Object Notation。APIとのデータ送受信に使われる軽量テキスト形式。 | 「APIのレスポンスはJSON形式で、`{ "id": 1, "status": "shipped" }` の構造で返してください。」 |
| LLM | り | 大規模言語モデル。GPTやClaudeなど、大量の情報から言葉の繋がりを学習したAI本体。 | 「このプロジェクトではLLMを文書要約エンジンとして活用する予定です。」 |
| Module | し・ど | 機能ごとに分割されたコードのまとまり。`import` / `export` で相互に利用する。 | 「日付変換ロジックを `dateUtils.ts` モジュールとして切り出してください。」 |
| npm | ど | JavaScriptのパッケージ（部品）を管理するツール集。ライブラリの導入・更新に必須。 | 「プロジェクト開始時に、必要なパッケージを `npm install` する手順をまとめてください。」 |
| Props | し・ど | コンポーネントが親から受け取る引数。Stateとの違いは「外から渡される読み取り専用のデータ」である点。 | 「`UserCard` コンポーネントはPropsで `name` と `role` を受け取り、表示するよう実装してください。」 |
| Prompt | な・ど | AIに与える指示文。文脈（Context）や制約（Constraint）を明示することが重要。 | 「このプロンプトに、不足している前提条件を1つ追加してブラッシュアップして。」 |
| RAG | ど | Retrieval-Augmented Generation。外部の知識（ファイルやDB）を検索し、その情報を元にAIが回答する技術。 | 「最新の技術情報をRAGで取得し、それに基づいた実装計画を立ててください。」 |
| Router | ど・し | URLとコンポーネントのマッピングを管理する仕組み。ページ遷移を制御する。 | 「Next.jsのApp Routerを使い、`/dashboard` 以下は認証必須のルートとして設定してください。」 |
| SPA | り・な | Single Page Application。単一のHTMLで構成され、ページ遷移なしで滑らかに動くWebアプリの形態。 | 「ユーザー体験を重視し、Next.jsを使ったSPA構成でプロジェクトを作成しましょう。」 |
| SSG | な・ど | Static Site Generation。ビルド時に全ページのHTMLをあらかじめ生成する方式。高速・SEO向き。 | 「更新頻度の低いランディングページはSSGで構築し、CDNから配信してください。」 |
| SSR | り・な | Server-Side Rendering。サーバー側でHTMLを組み立ててからブラウザに送る方式。初期表示が速くSEOに強い。 | 「SEO対策が必要なランディングページなので、SSRを採用する方針でお願いします。」 |
| TypeScript | し・さ | JavaScriptに静的型付けを追加したAltJS。コンパイル時にバグを検知でき、大規模開発での堅牢性を高める。 | 「JavaScriptファイルをTypeScriptに書き換え、関数の引数と戻り値に型を定義してください。」 |
| Vite | ど | 超高速な開発環境を提供するビルドツール。最新のモダンWeb開発における標準。 | 「create-react-appではなく、Viteを使ってReact環境を構築してください。」 |
| WebSocket | ど・な | サーバーとブラウザ間に持続的な双方向通信チャネルを確立するプロトコル。リアルタイム通知に不可欠。 | 「在庫数のリアルタイム同期にはWebSocketを使い、変更を即時ブロードキャストしてください。」 |
---
3. モダンWeb & AI 用語辞典 (五十音)
| 用語名 | 分類 | 意味・解説 | AIに指示する際の活用例 |
|---|---|---|---|
| 依存関係 | ど・さ | あるライブラリが動くために必要な他のライブラリのこと。`package.json` で管理される。 | 「依存関係を最新にアップデートし、脆弱性（npm audit）がないか確認してください。」 |
| 仮想DOM | ど | 実際のDOMを直接触らず、メモリ上の「仮のDOM」で差分計算してから反映する高速化技術。 | 「Reactの仮想DOMの仕組みを活かし、不必要な再レンダリングが発生しないよう修正して。」 |
| 型（型定義） | し・さ | TypeScriptで変数・関数の引数・戻り値に付けるデータ種別の宣言。 `string`, `number`, `boolean` など。 | 「このAPIレスポンスの型定義をTypeScriptの `interface` として作成してください。」 |
| コンポーネント | し | ヘッダーやボタンなど、UIを再利用可能な「部品」として分割した単位。 | 「このフォームの一部を、独立した `InputComponent` として切り出してください。」 |
| コンテキスト | ど・し | AIが対話の文脈を把握するための「共通認識」となる情報。履歴や前提ファイル。 | 「これまでの会話のコンテキストを維持したまま、今の指示を実行して。」 |
| デプロイ | ど | 開発したアプリを本番環境（サーバー・クラウド）に配備し、ユーザーが利用できる状態にすること。 | 「Vercelを使い、GitHubのmainブランチへのPushで自動デプロイされるよう設定してください。」 |
| な・ど・し・り・さ | 全て | 本プロジェクト独自の思考フレームワーク。なぜ・どう・書式・履歴・制約の略。 | 「この新しい要望を、な・ど・し・り・さ の観点で漏れなく整理して。」 |
| ビルド | ど | ソースコードを製品（本番用）として動く形に最適化・変換する工程。 | 「本番環境へデプロイする前に、`npm run build` を実行してエラーがないか確認して。」 |
| フック | し・ど | Reactで状態管理や副作用などの機能を扱うための特殊関数。`useState`, `useEffect`, `useContext` など。 | 「`useEffect` フックでコンポーネント初期表示時にデータを取得する処理を追加して。」 |
| フレームワーク | な・ど | アプリ開発の骨組みを提供するソフトウェア基盤。React, Next.js, Vue, Nuxtなどが代表例。 | 「このプロジェクトではNext.jsフレームワークを採用し、App Router構成で進めてください。」 |
| プロップス | し・ど | 親コンポーネントから子コンポーネントへ値を渡すための仕組み（Props）。子は変更できない読み取り専用の引数。 | 「`name` と `email` をプロップスで受け取り、ユーザーカードとして表示するコンポーネントを作って。」 |
| ルーター | ど・し | URLとページ（コンポーネント）の対応関係を管理する仕組み（Router）。 | 「Next.jsのApp Routerで、`/admin` 以下のページは認証済みユーザーのみアクセス可能にして。」 |
| ステート（状態） | し | コンポーネントが内部で持つ、値や表示フラグなどの動的なデータ。 | 「チェックボックスが押されたらステートを更新し、全体の表示に反映させてください。」 |
| トークン | ど | AIが単語を処理する際の最小単位。長い文章ほどトークンを多く消費し、コストや限界に関わる。 | 「コンテキストウィンドウが溢れないよう、不要なログを削除してトークンを節約して。」 |
| 副作用 | し・ど | コンポーネントの描画以外に発生する処理（APIコール・イベントリスナー登録等）。Reactでは `useEffect` で管理する。 | 「コンポーネントのアンマウント時にイベントリスナーを解除する副作用クリーンアップを追加して。」 |
---
4. AIエージェントへの指示精度を上げるコツ
AIエージェントを使いこなすには、単に願いを伝えるだけでなく、以下の ***指示の三要素*** を意識することが重要です。1. 役割（Role）の定義
「あなたはシニアフロントエンドエンジニアです」と定義することで、生成されるコードの専門性が上がります。2. 背景（Context）の提供
「なぜこれを作るのか（な）」「過去にどんな経緯があったか（り）」をファイル等で共有します。本プロジェクトでは `instructions.md` がこの役割を担います。3. 制約（Constraint）の明示
「このファイルは触らない（さ）」「書式はこれ（し）」と釘を刺すことで、期待通りの出力が得られます。指示文の改善例
| Before（曖昧） | After（解像度高） |
|---|---|
| 「ボタンを作って」 | 「`SubmitButton` コンポーネントを作成し、Propsで `label`（string）と `onClick`（関数）を受け取るようにしてください。TypeScriptで型定義も含めること。」 |
| 「エラーを直して」 | 「`useEffect` 内でのAPIコール時に発生するCORSエラーを解決してください。バックエンドはNode.js/Expressです。」 |
| 「いい感じにして」 | 「コードをリファクタリングし、ロジックとUIを分離したカスタムフック（`useOrderData`）を作成してください。」 |
---
5. まとめ
本辞典は、技術の進化やプロジェクトの進展に合わせて ***随時更新*** されるべき動的なドキュメントです。用語を正しく使うことは、人間同士のコミュニケーションだけでなく、AIとの協力関係においても ***最強の武器*** となります。もし分からない用語に出会ったときは、まずこの辞典を引き、必要であればAIに「さらに詳しく、な・ど・し・り・さ の観点で解説して」と尋ねてみてください。
---
参考リンク一覧
| リンク | 詳細 |
|---|---|
| [MDN Web Docs (日本語)](https://developer.mozilla.org/ja/) | Web開発全般の最も信頼できる辞書・ドキュメント |
| [Node.js 公式 (日本語)](https://nodejs.org/ja) | モダンWebの実行環境の総本山 |
| [React 公式ドキュメント](https://ja.react.dev/) | コンポーネント指向・Hook・Stateを学ぶための必読書 |
| [TypeScript 公式ドキュメント](https://www.typescriptlang.org/docs/) | 型システムの正式リファレンス |
--- ***このガイドブックが、あなたのモダンWeb & AI開発の第一歩を支える道標となれば幸いです。解像度の高い定義こそが、高い品質への最短距離です。***
**更新日時**：2026 年 03 月 21 日
***本ガイドブックは、初心者から中級者まで幅広にご利用いただけるよう、実践的かつ技術的な内容をバランスよく盛り込んでいます。ご不明な点やご質問がございましたら、いつでもお気軽にお声がけください。***
それではまた次の記事でお会いしましょう!!
