React / Next.js プロジェクトのセキュリティを守る CLI ツールを作った話

はじめに

この記事は、Qiita 全国学生対抗戦 10 日目の記事です

React や Next.js を使った開発で、RSC (React Server Components) の誤った使用や脆弱性のある依存関係に気づかず本番環境にデプロイしてしまう問題に直面したことはありませんか？

そんな課題を解決するために、静的解析ツール React Scan を開発し、npm パッケージとして公開しました！

React Scan とは

React Scan は、React や Next.js プロジェクトを非侵襲的に静的検査する CLI ツールです
コードを変更せずにプロジェクトの構造やセキュリティリスクを分析できます

主な特徴

• プロジェクトスキャン: React / Next.js の検出と RSC 使用状況の分析
• リモート検証: 本番環境の RSC マーカーを安全に検出（読み取り専用）
• 依存関係チェック: リスクのあるバージョンの組み合わせを特定
• CVE スキャン: 既知の脆弱性を検出（CVE-2025-55182 など）
• プラグインシステム: カスタムチェックの追加が可能
• MCP サーバー: Model Context Protocol 経由でツールを公開

インストールと基本的な使い方

npm install -g @minagishl/reactscan

scan コマンド - プロジェクト検出

React / Next.js プロジェクトを検出し、RSC の使用状況を確認します

reactscan scan

実行結果の例

reactscan results:
[info] [framework] React: yes
[info] [framework] Next.js: yes
[info] [version] react: 19.1.0
[info] [version] next: 15.5.7
[info] [version] react-server-dom-webpack: not found
[info] [version] react-server-dom-turbopack: not found
[warn] RSC usage not detected. If you use the App Router, ensure server components are configured correctly.
[info] 
[elapsed] 2ms

rsc コマンド - RSC 診断

ローカルまたはリモートの RSC 使用状況を診断します

# ローカルプロジェクトの検査
reactscan rsc

# リモートサイトの検査（読み取り専用）
reactscan rsc https://example.com

リモート検査の結果例

Remote RSC signals for https://minagishl.com/
[info] [status] 200
[info] [header] X-React-Flight: missing
[info] [header] Content-Type text/x-component: missing
[ok] Body markers detected: Next.js markers detected, __next_f
[info] 
[elapsed] 13644ms

deps コマンド - 依存関係チェック

React や RSC 関連パッケージのバージョンを検査し、危険な組み合わせを警告します

reactscan deps

結果例

Warnings:
[warn]   react 19.1.0 is behind latest 19.2.1.
[ok] No known risky dependency combinations detected.
[warn] react appears outdated compared to registry.
[info] 
[elapsed] 358ms

cve コマンド - 脆弱性スキャン

既知の CVE に対してローカルまたはリモートでスキャンを実行します

# ローカルスキャン
reactscan cve

# リモートプローブ
reactscan cve --url https://example.com

技術的な特徴

プラグインシステム

プロジェクト固有のチェックを追加できるプラグインシステムを実装しました！

// plugins/my-plugin.js
export default {
  name: "my-custom-check",
  run: async (context) => {
    const warnings = [];
    const errors = [];

    // カスタムチェックロジック
    if (/* 条件 */) {
      warnings.push("カスタム警告メッセージ");
    }

    return {
      ok: errors.length === 0,
      warnings,
      errors,
      meta: {
        customData: "...",
      },
    };
  },
};

キャッシュ機構

大規模プロジェクトでのパフォーマンス向上のため、キャッシュ機能を実装しました
.reactscan/cache/ ディレクトリに結果を保存し、2 回目以降の実行を高速化します

# キャッシュを使用（デフォルト）
reactscan scan

# キャッシュを無効化
reactscan scan --no-cache

エラー分類

エラーを種類ごとに分類して表示します

• [Network Error]: HTTP リクエストとタイムアウト
• [Filesystem Error]: ファイル読み取りとアクセス権限
• [Parse Error]: JSON や HTML のパース失敗
• [Config Error]: 設定ファイルの問題

設定ファイル

複数の形式で設定ファイルをサポートしています

// .reactscanrc.json
{
  "ignore": ["node_modules", "dist", ".next"],
  "pluginsDir": "plugins",
  "cache": {
    "enabled": true,
    "ttl": 1800000
  },
  "performance": {
    "ignoreLargeDirs": true
  },
  "remote": {
    "timeout": 8000
  }
}

CI / CD への統合

GitHub Actions での使用例

# .github/workflows/check.yml
name: React/Next.js Check
on: [push, pull_request]

jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm install -g @minagishl/reactscan
      - run: reactscan scan
      - run: reactscan deps

開発で工夫した点

esbuild の採用

ビルドプロセスに esbuild を採用し、高速なビルドと小さなバンドルサイズを実現しました
TypeScript のコンパイルも含めて数秒で完了します

husky による品質管理

Git フックを使って、コミット前に自動でリンターとフォーマッターを実行し、プッシュ前にビルドを確認する仕組みを導入しました

• pre-commit: リンターとフォーマッターのチェック
• pre-push: プロジェクトのビルド確認

bun install
# husky が自動的にセットアップされる

TypeScript による型安全性

全てのコードを TypeScript で記述し、型安全性を確保しています
プラグイン API も型定義を提供しているため、プラグイン開発時の補完が効きます

まとめ

React Scan は、React や Next.js プロジェクトのセキュリティと品質を向上させる CLI ツールです

主な利点

• コードを変更せずに静的検査が可能
• ローカルとリモートの両方に対応
• プラグインによる拡張性
• CI / CD への簡単な統合
• MIT ライセンスで OSS として公開

興味がある方は、ぜひ試してみてください！

• GitHub: https://github.com/minagishl/reactscan
• npm: https://www.npmjs.com/package/@minagishl/reactscan