Agent skill

browser-and-web-platform

View SKILL.md on GitHub Repository
Stars 5
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/Gaku52/claude-code-skills/tree/main/ja/04-web-and-network/browser-and-web-platform

SKILL.md

ブラウザとWebプラットフォーム 完全ガイド

ブラウザの内部動作を深く理解する。レンダリングエンジン、JavaScript実行環境、Web API、ストレージ、セキュリティモデルまで、Web開発者に必須のブラウザ知識を網羅。

このSkillの対象者

  • ブラウザの仕組みを基礎から学びたいWeb開発者
  • パフォーマンス最適化に取り組むフロントエンドエンジニア
  • Web APIを深く理解したい開発者

前提知識

  • HTML/CSS/JavaScriptの基本
  • HTTPの基本 → 参照: ネットワーク基礎

ガイド一覧

00-browser-engine（ブラウザエンジン）

ファイル テーマ 概要
00-browser-architecture.md ブラウザアーキテクチャ マルチプロセス構造、主要コンポーネント
01-navigation-and-loading.md ナビゲーションとローディング URL入力からページ表示までの流れ
02-parsing-html-css.md HTML/CSSパーシング DOM/CSSOM構築、パーサーの動作
03-browser-security-model.md ブラウザセキュリティモデル サンドボックス、CSP、サイト分離

01-rendering（レンダリング）

ファイル テーマ 概要
00-rendering-pipeline.md レンダリングパイプライン Layout, Paint, Composite の流れ
01-css-layout-engine.md CSSレイアウトエンジン Box Model, Flexbox, Grid の内部動作
02-paint-and-compositing.md Paint と Compositing レイヤー、GPU合成、will-change
03-animation-performance.md アニメーションパフォーマンス 60fps、requestAnimationFrame、CSS vs JS

02-javascript-runtime（JavaScript実行環境）

ファイル テーマ 概要
00-v8-engine.md V8エンジン JIT、Hidden Class、ガベージコレクション
01-event-loop-browser.md ブラウザのイベントループ タスクキュー、マイクロタスク、rAF
02-web-workers.md Web Workers Worker, SharedWorker, ServiceWorker
03-memory-management.md メモリ管理 メモリリーク検出、プロファイリング

03-web-apis（Web API）

ファイル テーマ 概要
00-dom-api.md DOM API DOM操作、MutationObserver、Shadow DOM
01-fetch-and-streams.md Fetch と Streams Fetch API, ReadableStream, AbortController
02-intersection-resize-observer.md Observer API IntersectionObserver, ResizeObserver

04-storage-and-caching（ストレージとキャッシュ）

ファイル テーマ 概要
00-web-storage.md Webストレージ localStorage, sessionStorage, IndexedDB, Cookie
01-service-worker-cache.md Service Worker キャッシュ戦略、オフライン対応、PWA
02-performance-api.md Performance API Navigation Timing, Resource Timing, PerformanceObserver

学習パス

基礎:     00-browser-engine → 01-rendering
実行環境:  02-javascript-runtime
API活用:   03-web-apis → 04-storage-and-caching

関連Skills

  • ネットワーク基礎 — ネットワーク基礎
  • Webアプリケーション開発 — Webアプリケーション開発
  • APIガイド — API・ライブラリ設計

FAQ

Q1: このSkillはフロントエンドフレームワーク（React、Vueなど）の知識がなくても学べますか?

はい、本Skillはブラウザのネイティブな仕組みに焦点を当てています。フレームワークの知識は前提としません。むしろ、ここで学ぶレンダリングパイプラインやイベントループ、DOM API の理解は、フレームワークの内部動作を把握する上でも非常に有益です。フレームワークを使う前にブラウザの基盤技術を理解しておくことで、パフォーマンス問題のデバッグやアーキテクチャ設計の精度が格段に向上します。

Q2: 学習の順番は厳密に守る必要がありますか?

推奨の学習パス（00-browser-engine → 01-rendering → 02-javascript-runtime → 03-web-apis → 04-storage-and-caching）に沿って進めるのが最も効率的ですが、すでに特定分野の知識がある場合は興味のあるセクションから始めても構いません。ただし、レンダリングパイプラインの理解はほぼ全てのセクションの前提知識となるため、01-rendering は早い段階で読むことを推奨します。

Q3: このSkillで学んだ知識はどのような実務場面で役立ちますか?

パフォーマンス最適化（Core Web Vitals の改善、レンダリングボトルネックの特定）、メモリリークの調査と修正、セキュリティ対策（CSP設定、XSS防御）、オフライン対応（Service Worker、Cache API）など、フロントエンド開発の幅広い場面で直接活用できます。特にDevToolsを使ったプロファイリングやデバッグの能力は、日常的な開発業務の生産性を大きく向上させます。

まとめ

このSkillでは以下を学びました:

  • ブラウザのマルチプロセスアーキテクチャとセキュリティモデルの多層防御構造
  • レンダリングパイプライン（DOM構築からCompositeまで）の6段階とパフォーマンス最適化手法
  • JavaScriptのイベントループ、V8エンジンの内部構造、メモリ管理とGCアルゴリズム
  • DOM API、Fetch API、Observer API などの Web API の効率的な活用方法
  • Cookie、localStorage、IndexedDB、Cache API、Service Worker によるストレージとキャッシュ戦略

参考文献

  • Chrome Developers - Google Chrome チームによるWeb開発者向け公式ドキュメント
  • MDN Web Docs - Mozilla が運営するWeb技術の包括的なリファレンス
  • web.dev - Google が提供するWebパフォーマンスとベストプラクティスのガイド
  • WHATWG HTML Living Standard - HTML仕様の公式ドキュメント（イベントループ、パーサー等を含む）
  • W3C CSS Specifications - CSS関連仕様の公式ドキュメント群

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

Gaku52/claude-code-skills

computer-science-fundamentals

A comprehensive guide covering the fundamentals of computer science. From hardware internals and data representation to algorithms, data structures, computation theory, programming paradigms, and software engineering basics — a systematic guide to all the CS foundations every engineer needs.

5 0
Explore
Gaku52/claude-code-skills

operating-system-guide

5 0
Explore
Gaku52/claude-code-skills

programming-language-fundamentals

5 0
Explore
Gaku52/claude-code-skills

algorithm-and-data-structures

5 0
Explore
Gaku52/claude-code-skills

linux-cli-mastery

5 0
Explore
Gaku52/claude-code-skills

aws-cloud-guide

5 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results