第3章エンジニア向け ── 開発・コードレビュー・デバッグの武器

2026/04/26

第3章エンジニア向け ── 開発・コードレビュー・デバッグの武器

エンジニアにとってのブラウザ上のトイル

エンジニアのブラウザは「GitHubが開いたまま、Jiraが開いたまま、本番ダッシュボードが開いたまま、ドキュメントが20タブ」という状態が常態化している。

ここから生まれるトイルは3種類だ。

GitHub上の操作コスト：PRレビュー・Issue確認・コードナビゲーション
デバッグ・検証コスト：APIレスポンス確認・HTTPモック・技術調査
ツール間連携コスト：PRリンクをSlackに貼る・Issueにコメントを追加するなど

GitHub強化系拡張機能

Refined GitHub

解決するトイル：GitHubのUIには「あると便利なのにない機能」が多すぎる。

Refined GitHubは200以上のUIの改善をGitHubに追加する拡張機能だ。ユーザーが機能の有効/無効を個別に切り替えられる。

主要な改善例：

PR一覧
  → PRのCI状態（✅/❌）を一覧上に表示
  → 「自分がレビューを依頼されているPR」を優先表示
  → レビュー完了を既読に近い状態で管理

コードビュー
  → コードブロックの折りたたみ
  → クリックでコード行のURLをコピー
  → スペースの可視化

Issueビュー
  → Markdownのレンダリングをインライン編集で変更
  → キーボードショートカットの拡張

Octotree

解決するトイル：GitHubのリポジトリをコードを読む際、ファイルツリーが存在せず毎回ナビゲーションが必要。

効果：
  Octotree を有効にすると、GitHub の左側に
  VSCode ライクなファイルツリーパネルが追加される。

  ファイルをクリックするとそのファイルの表示に遷移。
  ブレッドクラム+バックボタンの繰り返しがなくなる。

  大規模リポジトリのコードリーディングで特に効果的。

GitHub PR自作拡張（社内事例）

事例：PRレビュー時の指摘漏れを防ぐ自作拡張（ライトコード社）

問題：
  PRが大きくなると、指摘コメントへの対応漏れが発生する。
  全コメントが解決済みかどうかを目視確認するのが煩雑。

解決策（自作Chrome拡張）：
  ・ページ上の指摘コメント数をカウント
  ・解決済みコメント数をカウント
  ・未解決のコメントが残っている場合、背景を赤く表示

実装：
  GitHubはTurboを使っているため、
  window.addEventListener('turbo:load', handler) でページ遷移を検知
  querySelectorAll('.comment-holder') で指摘数を取得

PR→Slack連携自作拡張（社内事例）

事例：PRレビュー依頼の共有作業自動化（フォースタートアップス社）

問題：
  PRレビュー時に、SlackでPRのURLとチケットURLを
  1つずつ手動でコピー・貼り付けして共有していた。
  「ブラウザ→Slack→ブラウザ」の切り替えが煩雑。

解決策（自作Chrome拡張）：
  ・GitHub PRページでコンテキストメニューから実行
  ・PRのURL・タイトル・チケット情報を自動取得
  ・Slack のハイパーリンク形式に変換してクリップボードにコピー

成果：
  「選択→クリック→ペースト」の3ステップで完了
  「また手動で入力するのか…という憂鬱が消えた」（開発者コメント）

デバッグ・検証系拡張機能

JSON Formatter / JSON Viewer

解決するトイル：APIのレスポンスを確認する際、生のJSONはほぼ読めない。

Before（拡張なし）：
  {"user":{"id":123,"name":"Alice","roles":["admin","user"],"created_at":"2025-01-15T09:00:00Z"}}

After（JSON Formatter有効）：
  {
    "user": {
      "id": 123,
      "name": "Alice",
      "roles": [
        "admin",
        "user"
      ],
      "created_at": "2025-01-15T09:00:00Z"
    }
  }

  + シンタックスハイライト
  + キーワード検索
  + 折りたたみ/展開
  + ワンクリックコピー

Requestly

解決するトイル：フロントエンド開発時、バックエンドAPIがまだ完成していないのにUIの動作確認が必要なケースが多い。

主要ユースケース：

1. URLリダイレクト
   本番APIのエンドポイントをローカルにリダイレクトして開発

2. レスポンスのモック
   APIが返すレスポンスを任意のJSONに差し替える
   → エラーケース・エッジケースのUIテストが容易

3. ヘッダーの追加・変更
   認証ヘッダーを自動付加して手動コピーを不要にする

4. 遅延シミュレーション
   APIレスポンスに遅延を追加してローディングUIをテスト

実装例：
  Rule: モックAPI
  IF URL contains "api.production.com/users"
  THEN Return Response Body:
  {
    "users": [{"id": 1, "name": "Test User"}]
  }

Wappalyzer

解決するトイル：競合サイトや参考サイトの技術スタックを調べるのに時間がかかる。

確認できる情報：
  フレームワーク：React / Next.js / Vue / Nuxt
  CMS：WordPress / Contentful / Sanity
  分析ツール：Google Analytics / Segment / Mixpanel
  CDN：Cloudflare / Fastly
  決済：Stripe / Braintree
  マーケティング：HubSpot / Marketo / Intercom

1クリックでHTMLのmetaタグ・script タグを解析して表示。
手動でソースを読む作業が不要になる。

React / Vue DevTools

解決するトイル：Reactコンポーネントのデバッグで console.log を埋め込んでは削除するサイクルを繰り返す。

React Developer Tools：
  Components パネル
    → コンポーネントツリーの視覚化
    → props・state をリアルタイムで確認・編集
    → コンポーネントのレンダリング回数のハイライト

  Profiler パネル
    → どのコンポーネントが何ms かかったか計測
    → 不要な再レンダリングの特定

実用：
  「このコンポーネントが何度も再レンダリングされているのはなぜか」
  → Profiler で即座に特定
  → useMemo / useCallback の適用箇所を判断

ドキュメント・情報収集系

Sider AI（コード説明・技術調査）

解決するトイル：英語の技術ドキュメントや、難解なコードを読むのに時間がかかる。

ユースケース：

1. ページ上のコードを選択 → 右クリック → "Explain with AI"
   → コードの意図・動作をその場で説明

2. 英語ドキュメントを右クリック → "Translate Page"
   → ページ全体を日本語に翻訳しながらレイアウトを保持

3. 長文のRFC/設計ドキュメントを開く → サイドバーで"Summarize"
   → 要点を3〜5行で把握

対応モデル：GPT-4o / Claude Sonnet / Gemini 等

エンジニア向け拡張機能マップ

graph TD
    subgraph "GitHub操作"
        RG[Refined GitHub<br/>UIの200+改善]
        OT[Octotree<br/>ファイルツリー]
        CUSTOM_GH[自作拡張<br/>PR/Issue連携]
    end

    subgraph "デバッグ"
        JSON[JSON Formatter<br/>APIレスポンス可視化]
        REQ[Requestly<br/>HTTPモック]
        REACT[React DevTools<br/>コンポーネント検査]
        WAP[Wappalyzer<br/>技術スタック確認]
    end

    subgraph "AI・調査"
        SIDER[Sider AI<br/>コード説明・翻訳]
        DEEPLR[DeepL<br/>技術文書翻訳]
    end

    DEV[エンジニアのブラウザトイル] --> GitHub操作
    DEV --> デバッグ
    DEV --> AI・調査

導入優先度の目安

拡張機能	効果の即効性	対象者
JSON Formatter	★★★★★	API開発者全員
Refined GitHub	★★★★★	GitHub利用者全員
Octotree	★★★★☆	OSS読者・大規模リポジトリ
React DevTools	★★★★☆	Reactエンジニア
Requestly	★★★☆☆	フロントエンド・APIテスト
Wappalyzer	★★★☆☆	技術選定・競合調査をする人
Sider AI	★★★☆☆	英語ドキュメントを読む人

第3章 エンジニア向け ── 開発・コードレビュー・デバッグの武器

エンジニアにとってのブラウザ上のトイル

GitHub強化系拡張機能

Refined GitHub

Octotree

GitHub PR自作拡張（社内事例）

PR→Slack連携自作拡張（社内事例）

デバッグ・検証系拡張機能

JSON Formatter / JSON Viewer

Requestly

Wappalyzer

React / Vue DevTools

ドキュメント・情報収集系

Sider AI（コード説明・技術調査）

エンジニア向け拡張機能マップ

導入優先度の目安

第3章エンジニア向け ── 開発・コードレビュー・デバッグの武器