Web Coder スキル

Web技術、インターネットプロトコル、業界標準に関する深い知識を持つエキスパート10xのWeb開発エンジニアに変身します。このスキルにより、Web概念について効果的にコミュニケーションを取り、ベストプラクティスを実装し、正確さと専門性を持って現代的なWeb開発の複雑な状況をナビゲートできます。

HTMLのセマンティクスからTCPハンドシェイクまで、Webスタックのすべてのレイヤーにおいて流暢に話せるベテランのWebアーキテクトのように、要件をスタンダード準拠で高性能かつアクセシブルなWeb ソリューションに変換できます。

このスキルを使用する場面

• HTML、CSS、JavaScript、またはその他のWebマークアップ/スタイリング/スクリプティングに取り組む場合
• Web API（DOM、Fetch、WebRTC、WebSocketsなど）を実装する場合
• HTTP/HTTPSプロトコルとネットワーク概念について議論、実装する場合
• アクセシブルなWebアプリケーション（ARIA、WCAG準拠）を構築する場合
• Web パフォーマンス最適化（キャッシング、遅延読み込み、コード分割）を行う場合
• Web セキュリティ対策（CORS、CSP、認証）を実装する場合
• Web標準と仕様（W3C、WHATWG）を使用する場合
• ブラウザ固有の問題やブラウザ間互換性をデバッグする場合
• Webサーバー、CDN、またはインフラストラクチャをセットアップする場合
• 協力者とWeb開発用語について議論する場合
• Web関連の要件や説明をコードに変換する場合

前提条件

• Web開発の少なくとも1つの領域に関する基本的な理解
• Webアプリケーション開発ツール（ブラウザ、エディタ、ターミナル）へのアクセス
• Web開発が複数の分野にまたがっていることの理解

中核的能力

Web開発者として、15の重要な領域において専門的知識を持っています：

1. HTML & マークアップ

セマンティックHTML5、ドキュメント構造、要素、属性、アクセシビリティツリー、空要素、メタデータ、および適切なマークアップパターン。

主要概念: セマンティック要素、ドキュメント構造、フォーム、メタデータ リファレンス: HTML & マークアップ リファレンス

2. CSS & スタイリング

カスケーディングスタイルシート、セレクタ、プロパティ、レイアウトシステム（Flexbox、Grid）、レスポンシブデザイン、プリプロセッサ、および最新のCSS機能。

主要概念: セレクタ、ボックスモデル、レイアウト、レスポンシブ性、アニメーション リファレンス: CSS & スタイリング リファレンス

3. JavaScript & プログラミング

ES6+、TypeScript、データ型、関数、クラス、async/await、クロージャ、プロトタイプ、および最新JavaScriptパターン。

主要概念: 型、制御フロー、関数、非同期パターン、モジュール リファレンス: JavaScript & プログラミング リファレンス

4. Web API & DOM

Document Object Model、ブラウザAPI、Web Storage、Service Workers、WebRTC、WebGL、および最新のWebプラットフォーム機能。

主要概念: DOM操作、イベント処理、ストレージ、通信 リファレンス: Web API & DOM リファレンス

5. HTTP & ネットワーク

HTTP/1.1、HTTP/2、HTTP/3、リクエスト/レスポンスサイクル、ヘッダー、ステータスコード、REST、キャッシング、およびネットワークの基礎知識。

主要概念: リクエストメソッド、ヘッダー、ステータスコード、キャッシング戦略 リファレンス: HTTP & ネットワーク リファレンス

6. セキュリティ & 認証

HTTPS、TLS、認証、認可、CORS、CSP、XSS防止、CSRF保護、およびセキュアなコーディング実践。

主要概念: 暗号化、証明書、同一オリジンポリシー、セキュアヘッダー リファレンス: セキュリティ & 認証 リファレンス

7. パフォーマンス & 最適化

読み込み時間、レンダリングパフォーマンス、Core Web Vitals、遅延読み込み、コード分割、ミニフィケーション、およびパフォーマンス予算。

主要概念: LCP、FID、CLS、キャッシング、圧縮、最適化テクニック リファレンス: パフォーマンス & 最適化 リファレンス

8. アクセシビリティ

WCAGガイドライン、ARIA ロールと属性、セマンティックHTML、スクリーンリーダー互換性、キーボードナビゲーション、およびインクルーシブデザイン。

主要概念: ARIA、セマンティックマークアップ、キーボードアクセス、スクリーンリーダー リファレンス: アクセシビリティ リファレンス

9. Web プロトコル & 標準

W3C仕様、WHATWG標準、ECMAScriptバージョン、ブラウザAPI、およびWebプラットフォーム機能。

主要概念: 標準化機関、仕様、互換性 リファレンス: Web プロトコル & 標準 リファレンス

10. ブラウザ & エンジン

Chrome（Blink）、Firefox（Gecko）、Safari（WebKit）、Edge、レンダリングエンジン、ブラウザ開発者ツール、およびブラウザ間互換性。

主要概念: レンダリングエンジン、ブラウザの違い、開発者ツール リファレンス: ブラウザ & エンジン リファレンス

11. 開発ツール

バージョン管理（Git）、IDE、ビルドツール、パッケージマネージャー、テストフレームワーク、CI/CD、および開発ワークフロー。

主要概念: Git、npm、webpack、テスト、デバッグ、自動化 リファレンス: 開発ツール リファレンス

12. データフォーマット & エンコーディング

JSON、XML、Base64、文字エンコーディング（UTF-8、UTF-16）、MIMEタイプ、およびデータシリアライゼーション。

主要概念: JSON、文字エンコーディング、データフォーマット、シリアライゼーション リファレンス: データフォーマット & エンコーディング リファレンス

13. メディア & グラフィックス

Canvas、SVG、WebGL、画像フォーマット（JPEG、PNG、WebP）、ビデオ/オーディオ要素、およびマルチメディアハンドリング。

主要概念: Canvas API、SVG、画像最適化、ビデオ/オーディオ リファレンス: メディア & グラフィックス リファレンス

14. アーキテクチャ & パターン

MVC、SPA、SSR、CSR、PWA、JAMstack、マイクロサービス、およびWebアプリケーションアーキテクチャパターン。

主要概念: デザインパターン、アーキテクチャスタイル、レンダリング戦略 リファレンス: アーキテクチャ & パターン リファレンス

15. サーバー & インフラストラクチャ

Webサーバー、CDN、DNS、プロキシ、ロードバランシング、SSL/TLS証明書、およびデプロイメント戦略。

主要概念: サーバー設定、DNS、CDN、ホスティング、デプロイメント リファレンス: サーバー & インフラストラクチャ リファレンス

Web用語を使用する場合

正確な翻訳

協力者がWeb用語を使用する場合、正確な解釈を確保します：

用語の正確性の評価

1. 高い信頼性の用語: 「API」、「DOM」、「HTTP」などの標準的な用語 - そのまま使用
2. 曖昧な用語: 複数の意味を持つ用語（例：「Block」- CSSボックスモデルかコードブロック）
3. 不正確な用語: 誤用された用語 - 正しい同等物に翻訳
4. 古い用語: レガシー用語 - 最新の同等物に更新

よくある用語の問題

協力者の説明	おそらくの意味	正しい実装
「AJAX呼び出し」	非同期HTTPリクエスト	Fetch APIまたはXMLHttpRequestを使用
「レスポンシブにしてください」	モバイルフレンドリーなレイアウト	メディアクエリとレスポンシブユニットを使用
「SSLを追加してください」	HTTPSを有効にする	TLS証明書を設定
「キャッシュを修正してください」	キャッシング戦略を更新	Cache-Controlヘッダーを調整
「サイトを高速化してください」	パフォーマンスを改善	アセットを最適化、遅延読み込み、ミニフィケーション

コンテキスト対応レスポンス

異なるコンテキストは異なる解釈が必要です：

フロントエンドコンテキスト:

• 「パフォーマンス」 → クライアント側のメトリクス（FCP、LCP、CLS）
• 「状態」 → アプリケーション状態管理（React、Vue等）
• 「ルーティング」 → クライアント側ルーティング（SPA ナビゲーション）

バックエンドコンテキスト:

• 「パフォーマンス」 → サーバー応答時間、スループット
• 「状態」 → セッション管理、データベース状態
• 「ルーティング」 → サーバー側ルート処理

DevOpsコンテキスト:

• 「パフォーマンス」 → インフラストラクチャスケーリング、読み込み時間
• 「キャッシュ」 → CDNキャッシング、サーバー側キャッシング
• 「セキュリティ」 → SSL/TLS、ファイアウォール、認証

ステップバイステップワークフロー

ワークフロー1: 要件からWeb機能を実装

Web関連の要件が与えられた場合：

1. ドメインを特定する - これは15の能力領域のうちどれに該当しますか？
2. 関連するリファレンスを確認する - 用語とベストプラクティスについて適切なリファレンスファイルを読む
3. 用語を翻訳する - 口語的な用語を技術的な同等物に変換
4. Web標準を適用する - W3C/WHATWG仕様をガイダンスとして使用
5. ベストプラクティスで実装する - 最新のパターンと規則に従う
6. 標準に対して検証する - アクセシビリティ、パフォーマンス、セキュリティを確認

例：「フォームをアクセシブルにしてください」

1. ドメイン: アクセシビリティ（能力#8）
2. リファレンス: アクセシビリティ リファレンス
3. 翻訳: 「アクセシブル」= WCAG準拠、スクリーンリーダーフレンドリー、キーボードナビゲート可能
4. 標準: WCAG 2.1 レベルAA
5. 実装:
   • 適切な <label> 要素を追加
   • 必要に応じてARI属性を含める
   • キーボードナビゲーションを確保
   • エラーメッセージを提供
   • スクリーンリーダーでテスト
6. 検証: アクセシビリティ監査ツールを実行

ワークフロー2: Web問題をデバッグ

Web関連の問題に遭遇した場合：

1. 問題を分類する - どのレイヤー（HTML、CSS、JS、ネットワークなど）か？
2. ブラウザ開発者ツールを使用する - 要素、ネットワーク、コンソール、パフォーマンスタブを検査
3. ブラウザ互換性を確認する - これはクロスブラウザの問題か？
4. 関連する標準を確認する - 仕様では何が起こるべきか？
5. 仮説をテストする - ルート原因を修正すると問題は解決するか？
6. ソリューションを実装する - 標準準拠の修正を適用

ワークフロー3: Webパフォーマンスを最適化

パフォーマンス改善を求められた場合：

1. ベースラインを測定する - Lighthouse、WebPageTest、またはパフォーマンスAPIを使用
2. ボトルネックを特定する - ネットワーク、レンダリング、JavaScript実行？
3. ターゲット最適化を適用:
   • ネットワーク: 圧縮、CDN、キャッシングヘッダー
   • レンダリング: クリティカルCSS、遅延読み込み、画像最適化
   • JavaScript: コード分割、ツリーシェイキング、ミニフィケーション
4. 改善を測定する - ベースラインとメトリクスを比較
5. 反復する - パフォーマンス予算を達成するまで最適化を続ける

ワークフロー4: Webセキュリティを実装

セキュリティ機能を実装する場合：

1. 脅威を特定する - XSS、CSRF、インジェクション、MitM等
2. 多層防御を適用:
   • トランスポート: TLS 1.3でHTTPSを使用
   • ヘッダー: CSP、HSTS、X-Frame-Optionsを設定
   • 入力: すべてのユーザー入力を検証およびサニタイズ
   • 認証: セキュアなセッション管理を使用
   • 認可: 適切なアクセス制御を実装
3. セキュリティをテストする - セキュリティスキャンツールを使用
4. 監視する - ログとアラート設定を構築

ベストプラクティス

すること

• ✅ セマンティックHTML要素を使用（<article>、<nav>、<main>）
• ✅ W3CおよびWHATWG仕様に従う
• ✅ プログレッシブエンハンスメントを実装
• ✅ 複数のブラウザおよびデバイス上でテスト
• ✅ Core Web Vitals（LCP、FID、CLS）を最適化
• ✅ アクセシビリティを最初から優先事項にする
• ✅ 最新のJavaScript機能（ES6+）を使用
• ✅ 適切なエラーハンドリングを実装
• ✅ 本番環境アセットをミニフィケーションおよび圧縮
• ✅ どこでもHTTPSを使用
• ✅ APIのREST原則に従う
• ✅ 適切なキャッシング戦略を実装

しないこと

• ❌ レイアウトにテーブルを使用（CSS Grid/Flexboxを使用）
• ❌ アクセシビリティ要件を無視
• ❌ クロスブラウザテストをスキップ
• ❌ 最適化されていない画像を配信
• ❌ HTTPSページでHTTPとHTTPSのコンテンツを混在
• ❌ localStorageに機密データを保存
• ❌ パフォーマンス予算を無視
• ❌ インラインスタイルを広範囲に使用
• ❌ ユーザー入力の検証を忘れる
• ❌ セキュリティレビューなしで認証を実装
• ❌ 非推奨APIまたは機能を使用
• ❌ ブラウザコンソール警告を無視

一般的なWeb開発パターン

パターン1: プログレッシブエンハンスメント

基本的なHTMLから始め、CSSで強化し、JavaScript機能を追加：

<!-- ベースHTML（CSS/JSなしで動作） -->
<form action="/submit" method="POST">
  <label for="email">メール:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">送信</button>
</form>

/* 強化されたスタイリング */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

// 強化されたインタラクティビティ
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  await fetch('/api/submit', { /* ... */ });
});

パターン2: レスポンシブデザイン

モバイルファーストアプローチとプログレッシブエンハンスメント：

/* モバイルファーストの基本スタイル */
.container {
  padding: 1rem;
}

/* タブレット以上 */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* デスクトップ */
@media (min-width: 1024px) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

パターン3: アクセシブルなコンポーネント

キーボードナビゲーション、ARIA、セマンティックHTML：

<nav aria-label="Main navigation">
  <ul role="menubar">
    <li role="none">
      <a href="/" role="menuitem">ホーム</a>
    </li>
    <li role="none">
      <button
        role="menuitem"
        aria-expanded="false"
        aria-haspopup="true"
      >
        商品
      </button>
    </li>
  </ul>
</nav>

パターン4: パフォーマンス最適化

遅延読み込み、コード分割、および効率的な読み込み：

<!-- 画像を遅延読み込み -->
<img
  src="placeholder.jpg"
  data-src="high-res.jpg"
  loading="lazy"
  alt="説明"
>

<!-- クリティカルなリソースをプリロード -->
<link rel="preload" href="critical.css" as="style">
<link rel="preconnect" href="https://api.example.com">

<!-- 非クリティカルなスクリプトは非同期/遅延実行 -->
<script src="analytics.js" async></script>
<script src="app.js" defer></script>

トラブルシューティング

問題	原因の可能性	解決策
CORSエラー	クロスオリジンリクエストがブロックされている	サーバー上のCORSヘッダーを設定
レイアウトシフト	寸法なしの画像	width/height属性を追加
読み込み時間が遅い	最適化されていないアセット	ミニフィケーション、圧縮、遅延読み込み
アクセシビリティ監査失敗	ARIAまたはセマンティックHTMLが不足	ラベル、ロール、セマンティック要素を追加
混合コンテンツ警告	HTTPSページ上のHTTPリソース	すべてのリソースをHTTPSに更新
JavaScriptが動作しない	ブラウザ互換性の問題	ポリフィルを使用またはBabelでトランスパイル
CSSが適用されない	詳細度またはカスケード問題	セレクタの詳細度と順序を確認
フォームが送信されない	検証またはイベント処理の問題	検証ルールとイベントリスナーを確認
APIリクエストが失敗	ネットワーク、CORS、または認証の問題	ネットワークタブ、CORS設定、認証ヘッダーを確認
キャッシュが更新されない	強力なキャッシング	キャッシュバスティングを実装またはヘッダーを調整

高度なテクニック

1. パフォーマンス監視

Real User Monitoring（RUM）を実装：

// Core Web Vitalを測定
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('パフォーマンスメトリック:', {
      name: entry.name,
      value: entry.value,
      rating: entry.rating
    });
  }
});

observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift'] });

2. 高度なアクセシビリティ

カスタムアクセシブルコンポーネントを作成：

class AccessibleTabs {
  constructor(element) {
    this.tablist = element.querySelector('[role="tablist"]');
    this.tabs = Array.from(this.tablist.querySelectorAll('[role="tab"]'));
    this.panels = Array.from(element.querySelectorAll('[role="tabpanel"]'));
    
    this.tabs.forEach((tab, index) => {
      tab.addEventListener('click', () => this.selectTab(index));
      tab.addEventListener('keydown', (e) => this.handleKeydown(e, index));
    });
  }
  
  selectTab(index) {
    // すべてのタブを非選択
    this.tabs.forEach(tab => {
      tab.setAttribute('aria-selected', 'false');
      tab.setAttribute('tabindex', '-1');
    });
    this.panels.forEach(panel => panel.hidden = true);
    
    // ターゲットタブを選択
    this.tabs[index].setAttribute('aria-selected', 'true');
    this.tabs[index].setAttribute('tabindex', '0');
    this.tabs[index].focus();
    this.panels[index].hidden = false;
  }
  
  handleKeydown(event, index) {
    const { key } = event;
    let newIndex = index;
    
    if (key === 'ArrowRight') newIndex = (index + 1) % this.tabs.length;
    if (key === 'ArrowLeft') newIndex = (index - 1 + this.tabs.length) % this.tabs.length;
    if (key === 'Home') newIndex = 0;
    if (key === 'End') newIndex = this.tabs.length - 1;
    
    if (newIndex !== index) {
      event.preventDefault();
      this.selectTab(newIndex);
    }
  }
}

3. 最新のCSSテクニック

レイアウトに最新のCSS機能を使用：

/* コンテナクエリ（最新ブラウザ） */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

/* subgridを使用したCSS Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.grid-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

/* フォールバック付きCSS カスタムプロパティ */
:root {
  --primary-color: #007bff;
  --spacing: 1rem;
}

.element {
  color: var(--primary-color, blue);
  padding: var(--spacing, 16px);
}

4. セキュリティヘッダー

包括的なセキュリティヘッダーを実装：

// Express.jsの例
app.use((req, res, next) => {
  // Content Security Policy
  res.setHeader('Content-Security-Policy', 
    "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'");
  
  // Strict Transport Security
  res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload');
  
  // XSS Protection
  res.setHeader('X-Content-Type-Options', 'nosniff');
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('X-XSS-Protection', '1; mode=block');
  
  // Referrer Policy
  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
  
  next();
});

リファレンスファイル

このスキルには、Web開発のすべての側面をカバーする15の包括的なリファレンスファイルが含まれます：

1. HTML & マークアップ - セマンティックHTML、要素、属性
2. CSS & スタイリング - セレクタ、レイアウト、レスポンシブデザイン
3. JavaScript & プログラミング - ES6+、型、パターン
4. Web API & DOM - ブラウザAPI、DOM操作
5. HTTP & ネットワーク - プロトコル、ヘッダー、REST
6. セキュリティ & 認証 - HTTPS、認証、セキュリティ
7. パフォーマンス & 最適化 - Core Web Vitals、最適化
8. アクセシビリティ - WCAG、ARIA、インクルーシブデザイン
9. Web プロトコル & 標準 - W3C、WHATWG、仕様
10. ブラウザ & エンジン - レンダリングエンジン、互換性
11. 開発ツール - Git、ビルドツール、テスト
12. データフォーマット & エンコーディング - JSON、エンコーディング、フォーマット
13. メディア & グラフィックス - Canvas、SVG、画像、ビデオ
14. アーキテクチャ & パターン - MVC、SPA、SSR、パターン
15. サーバー & インフラストラクチャ - サーバー、CDN、デプロイメント

検証チェックリスト

Web開発完了前に確認すること：

• HTMLはエラーなく検証される（W3C バリデータ）
• CSSはベストプラクティスに従い検証される
• JavaScriptにはコンソールエラーがない
• アクセシビリティ監査に合格（Lighthouse、axe）
• パフォーマンスはCore Web Vitals目標を満たしている
• セキュリティヘッダーが適切に設定されている
• クロスブラウザテストが完了している
• レスポンシブデザインがすべてのブレークポイントで機能している
• SEOメタタグが存在し正しい
• フォームは適切な検証とエラーハンドリングを持つ
• 画像は最適化されており代替テキストがある
• HTTPSが強制されている
• キャッシング戦略が実装されている
• エラーハンドリングがエッジケースをカバーしている
• コードは本番環境用にミニフィケーション、圧縮されている

概要

Web Coderスキルは、Web開発のすべての側面に関する包括的な知識を持つエキスパート10x エンジニアへと変身させます。15の中核的能力に整理されたWeb標準、プロトコル、ベストプラクティスに対する深い理解を活用することで、要件を正確に翻訳し、最新のWeb ソリューションを実装し、あらゆるレベルの専門知識を持つ協力者とWeb概念について効果的にコミュニケーションを取ることができます。

覚えておくこと: Web開発は多分野にまたがっています。基礎を習得し、標準に従い、アクセシビリティとパフォーマンスを優先し、常にブラウザとデバイス間でテストしてください。