初心者でもわかるウェブ技術 完全ガイド

まず迷ったらここを見る

Web技術は名前が多いですが、最初は「画面」「通信」「保存」「公開」の4つに分けるとかなり見通しがよくなります。

1. ウェブアプリの全体像

ウェブアプリは「ブラウザで動く画面」と「サーバー側の処理」と「データを保存する場所」が、HTTPという約束で会話する仕組みです。

flowchart LR
  U["ユーザー"] --> B["ブラウザ"]
  B -->|"HTTPリクエスト"| W["Webサーバー / CDN"]
  W --> A["アプリサーバー / API"]
  A --> D[("データベース")]
  A --> S["外部サービス\n決済・メール・AI・認証"]
  A -->|"JSON / HTML"| B
  B -->|"HTML + CSS + JavaScriptを解釈"| UI["画面"]

2. HTML・CSS・JavaScript

ブラウザで動くウェブの三大基礎です。まずここが地面です。

同じボタンを三層で見る

まずは、1つのボタンをHTML、CSS、JavaScriptに分けて見るのが一番わかりやすいです。

<button id="saveButton" class="save-button">保存</button>

HTMLは「これは保存ボタンです」という意味と構造を作ります。

.save-button {
  background: #146c68;
  color: white;
  padding: 10px 16px;
}

CSSは色、余白、文字色など、画面上でどう見えるかを決めます。

document.querySelector("#saveButton").addEventListener("click", () => {
  alert("保存しました");
});

JavaScriptは「押したら何が起きるか」を決めます。つまり、HTMLが骨組み、CSSが見た目、JavaScriptが振る舞いです。

3. ブラウザ・DOM・HTTP

ウェブ技術はブラウザの中で動き、ネットワーク越しにHTTPで会話します。

sequenceDiagram
  participant User as ユーザー
  participant Browser as ブラウザ
  participant Server as サーバー
  participant DB as データベース
  User->>Browser: URLを開く / ボタンを押す
  Browser->>Server: GET / POST / PATCH / DELETE
  Server->>DB: 必要なデータを読む・書く
  DB-->>Server: 結果
  Server-->>Browser: HTML または JSON
  Browser-->>User: 画面を表示・更新

ブラウザが画面を描くまで

flowchart LR
  HTML["HTMLを読む"] --> DOM["DOMツリー"]
  CSS["CSSを読む"] --> CSSOM["CSSOM"]
  DOM --> Render["レンダーツリー"]
  CSSOM --> Render
  Render --> Layout["レイアウト\n位置とサイズ"]
  Layout --> Paint["ペイント\n色・画像・文字"]
  Paint --> Composite["合成\n画面に表示"]
  JS["JavaScript"] --> DOM
  JS --> CSSOM

DevToolsのElements、Console、Network、Performanceは、この流れを観察するための道具です。表示崩れはElements、通信エラーはNetwork、JavaScriptエラーはConsole、重さはPerformanceで見ると切り分けやすくなります。

URL・JSON・Cookie・CORS

4. SVG・Mermaid・画像・Canvas

画面に出るものはHTMLテキストだけではありません。図、アイコン、写真、動画、グラフも重要な構成要素です。

Mermaidは設計の会話に強い

flowchart TD
  A["要件"] --> B["画面設計"]
  B --> C["API設計"]
  C --> D["DB設計"]
  D --> E["実装"]
  E --> F["テストとデプロイ"]

コードとして差分管理できるので、設計の変更履歴も追いやすくなります。

5. JavaScript系スタックの関係性

Next.js、TypeScript、React、Node.js、Vite、npmは同じ階層の競合ではありません。役割が違います。

flowchart TB
  JS["JavaScript\n言語そのもの"] --> TS["TypeScript\n型を足したJavaScript"]
  JS --> Browser["ブラウザ実行環境"]
  JS --> Node["Node.js\nサーバー・CLIでJSを動かす実行環境"]
  Node --> NPM["npm / pnpm / yarn\nパッケージ管理"]
  NPM --> Vite["Vite\n開発サーバー・ビルドツール"]
  NPM --> Next["Next.js\nReactベースのフルスタックフレームワーク"]
  JS --> React["React\nUIを部品で作るライブラリ"]
  TS --> React
  React --> Next
  Vite --> ReactApp["React SPA\nブラウザ中心のアプリ"]

Reactだけ、Next.js、Viteの違い

6. フロントエンドの作り方

フロントエンドは、ユーザーが直接触る部分です。見た目だけでなく、状態、入力、アクセシビリティ、API通信まで含みます。

レンダリング方式

7. バックエンドとAPI

バックエンドは、ユーザーに見せるべきでない処理や、信頼できる場所で行うべき処理を担当します。

flowchart LR
  UI["フロントエンド"] --> API["API"]
  API --> Auth["認証・認可"]
  API --> Logic["業務ロジック"]
  API --> DB[("DB")]
  API --> Queue["キュー / バッチ"]
  API --> External["外部API\n決済・メール・AI"]

ブラウザからAPIを呼ぶ最小例

async function loadPosts() {
  const response = await fetch("/api/posts");
  const posts = await response.json();
  console.log(posts);
}

fetch はブラウザからAPIへHTTPリクエストを送るための代表的な方法です。実際のアプリでは、失敗時の表示、読み込み中の表示、ログイン権限の確認も一緒に考えます。

8. データベース・ストレージ・状態

「いま画面で覚える状態」と「長く保存するデータ」は別物です。

DBの大まかな分類

9. デプロイ・クラウド・運用

作ったものを他人が使える状態に公開し、壊れたときに直せるようにする領域です。

ホスティングの選び方

10. 品質: テスト・アクセシビリティ・パフォーマンス

動くだけでなく、壊れにくく、速く、誰でも使えることがプロダクトの品質です。

11. セキュリティの基本

セキュリティは後付けではなく、入力、認証、権限、依存関係、ログのすべてに関わります。

12. 技術スタックの選び方

流行ではなく、作りたいものの性質から選ぶと迷いにくくなります。

flowchart TD
  A["何を作る？"] --> B{"公開ページ中心？"}
  B -- "はい" --> C{"更新頻度は低い？"}
  C -- "はい" --> SSG["Astro / Next.js SSG / 静的HTML"]
  C -- "いいえ" --> NEXT["Next.js / Nuxt / SvelteKit"]
  B -- "いいえ" --> D{"アプリ操作が中心？"}
  D -- "はい" --> SPA["Vite + React / Vue / Svelte"]
  D -- "いいえ" --> SIMPLE["まずHTML + CSS + JS"]
  SPA --> E{"サーバー処理が多い？"}
  E -- "はい" --> FULL["Next.jsなどフルスタック"]
  E -- "いいえ" --> API["外部BaaS / 軽量API"]

目的別の初期構成

13. 学習ロードマップ

全部を同時に覚える必要はありません。作りながら、層を一枚ずつ増やすのが近道です。

バイブコーディング用プロンプトの型

目的:
作りたいユーザー体験:
必要な画面:
保存するデータ:
使いたい技術スタック:
避けたいこと:
セキュリティ上の注意:
完成条件:
検証してほしいこと:

技術名だけで依頼するより、「何を保存するか」「誰が何をできるか」「完成条件」を書くと、生成される設計がかなり安定します。

14. ざっくり用語集

• ライブラリ: 部品として使う道具
• フレームワーク: 作り方の型ごと提供する道具
• ランタイム: コードを実行する環境
• ビルド: 開発用コードを本番用に変換すること
• バンドル: 複数ファイルを配信用にまとめること
• トランスパイル: TSや新しいJSを別のJSへ変換すること
• ルーティング: URLと画面・処理を結びつけること
• SSR: サーバーでHTMLを作ること
• CSR: ブラウザで画面を作ること
• API: ソフトウェア同士の窓口
• ORM: DB操作をコードで扱いやすくする道具
• CDN: 静的ファイルを世界中から速く配る仕組み
• CI/CD: テストやデプロイを自動化する流れ
• 環境変数: 環境ごとに変わる設定や秘密情報
• オリジン: スキーム、ホスト、ポートの組み合わせ
• CORS: 別オリジン通信のブラウザ側安全ルール
• Cookie: ブラウザが保存してサーバーへ送る小さなデータ
• OpenAPI: API仕様を文書化・共有するための標準的な形式

15. 参考ソース

内容作成時に確認した公式・信頼性の高い資料です。確認日: 2026-05-10。

• MDN: HTML
• MDN: CSS
• WHATWG: HTML Standard
• W3C: CSS Snapshot 2025
• MDN: SVG
• W3C: SVG 2
• MDN: HTTP Overview
• IETF RFC 9110: HTTP Semantics
• WHATWG: URL Standard
• IETF RFC 8259: JSON
• MDN: Learn web development
• MDN: How browsers work
• MDN: Web APIs
• React: Start a New React Project
• React: Server Components
• Next.js Docs
• Next.js: Server and Client Components
• TypeScript Handbook
• Vite: Why Vite
• Node.js Learn
• npm Docs: About npm
• Mermaid Docs
• OpenAPI Specification
• W3C WAI: WCAG Overview
• W3C: WCAG 2.2
• web.dev: Core Web Vitals
• web.dev: Learn Accessibility
• MDN: Web Security
• OWASP Top 10
• PostgreSQL Tutorial
• NIST: Cloud Computing Definition
• Docker Docs: Overview