web-coder

Web Coder Skill

Web 技術、インターネットプロトコル、業界標準に関する深い知識を備えた、熟練の 10 倍速 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

ドキュメントオブジェクトモデル、ブラウザー 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 call」	非同期 HTTP リクエスト	Fetch API または XMLHttpRequest を使用する
「Make it responsive」	モバイル向けレイアウト	メディアクエリとレスポンシブな単位を使用する
「Add SSL」	HTTPS を有効にする	TLS 証明書を設定する
「Fix the cache」	キャッシュ戦略を更新する	Cache-Control ヘッダーを調整する
「Speed up the site」	パフォーマンスを改善する	アセットを最適化し、遅延読み込みを行い、縮小する

コンテキストに応じた応答

コンテキストによって解釈を変える必要があります。

フロントエンドのコンテキスト：

• 「パフォーマンス」→ クライアント側の指標（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> 要素を追加します
   • 必要に応じて ARIA 属性を含めます
   • キーボード操作に対応します
   • エラーメッセージを提供します
   • スクリーンリーダーでテストします
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 を使います）
• ❌ アクセシビリティ要件を無視する
• ❌ クロスブラウザテストを省略する
• ❌ 最適化されていない画像を配信する
• ❌ HTTP と HTTPS のコンテンツを混在させる
• ❌ 機密データを localStorage に保存する
• ❌ パフォーマンス予算を無視する
• ❌ インラインスタイルを多用する
• ❌ ユーザー入力の検証を忘れる
• ❌ セキュリティレビューなしで認証を実装する
• ❌ 非推奨の API や機能を使う
• ❌ ブラウザーのコンソール警告を無視する

Web 開発でよく使われるパターン

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

基本的な HTML から始め、CSS で拡張し、JavaScript の機能を追加します：

<form action="/submit" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Submit</button>
</form>

/* Enhanced styling */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

// Enhanced interactivity
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  await fetch('/api/submit', { /* ... */ });
});

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

プログレッシブエンハンスメントを取り入れたモバイルファーストのアプローチ：

/* Mobile-first base styles */
.container {
  padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Desktop */
@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">Home</a>
    </li>
    <li role="none">
      <button
        role="menuitem"
        aria-expanded="false"
        aria-haspopup="true"
      >
        Products
      </button>
    </li>
  </ul>
</nav>

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

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

<img
  src="placeholder.jpg"
  data-src="high-res.jpg"
  loading="lazy"
  alt="Description"
>


<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、または認証の問題	Network タブ、CORS 設定、認証ヘッダーを確認する
キャッシュが更新されない	キャッシュが強すぎる	キャッシュバスティングを実装するか、ヘッダーを調整する

高度なテクニック

1. パフォーマンスのモニタリング

リアルユーザーモニタリング（RUM）を実装します：

// Measure Core Web Vitals
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Performance metric:', {
      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) {
    // Deselect all tabs
    this.tabs.forEach(tab => {
      tab.setAttribute('aria-selected', 'false');
      tab.setAttribute('tabindex', '-1');
    });
    this.panels.forEach(panel => panel.hidden = true);
    
    // Select target tab
    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 queries (modern browsers) */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

/* CSS Grid with subgrid */
.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 custom properties with fallbacks */
:root {
  --primary-color: #007bff;
  --spacing: 1rem;
}

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

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

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

// Express.js example
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();
});

参考ファイル

このスキルには、ウェブ開発のあらゆる側面を網羅する 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、デプロイ

検証チェックリスト

ウェブ開発の完了と判断する前に、次の項目を確認します：

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

概要

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

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