SolidJS のパフォーマンス計測＆プロファイリング

2025年8月26日

SolidJS

SolidJS は、その軽量性と高いパフォーマンスで注目を集めているモダンな JavaScript フレームワークです。しかし、どれほど優秀なフレームワークを使用していても、適切なパフォーマンス計測とプロファイリングを行わなければ、真の性能を引き出すことは困難です。

本記事では、SolidJS アプリケーションの性能を最大限に活用するための実践的なパフォーマンス計測手法とプロファイリングテクニックをご紹介いたします。開発環境から本番環境まで、一貫した性能管理の方法論を習得していただけることでしょう。

背景

SolidJS のパフォーマンス特性

SolidJS は「真の reactive」なアプローチを採用し、仮想 DOM を使わない独自の仕組みで高いパフォーマンスを実現しています。

mermaidflowchart TD
    A[State変更] --> B[Signal更新]
    B --> C[Effect実行]
    C --> D[DOM直接更新]
    D --> E[完了]

    style B fill:#e1f5fe
    style D fill:#f3e5f5

この図は、SolidJS の Reactive システムの基本的な流れを示しています。State の変更が Signal を通じて Effect を実行し、DOM を直接更新する効率的な処理フローとなっています。

SolidJS の主な特徴は以下の通りです：

特徴	詳細	パフォーマンスへの影響
仮想 DOM 不使用	リアル DOM を直接操作	メモリ使用量削減、更新速度向上
細粒度リアクティビティ	変更箇所のみ更新	不要な再レンダリング回避
コンパイル時最適化	静的解析による最適化	ランタイムオーバーヘッド削減

これらの特性により、SolidJS は他のフレームワークと比較して優秀なパフォーマンスを発揮しますが、その性能を正確に測定し最適化するためには、適切な計測手法が不可欠です。

他フレームワークとの性能比較

パフォーマンス計測を行う前に、SolidJS が他のフレームワークと比較してどのような位置にあるかを理解することが重要です。

mermaidgraph LR
    A[React] --> B[仮想DOM<br/>差分計算]
    C[Vue] --> D[仮想DOM<br/>リアクティビティ]
    E[SolidJS] --> F[直接DOM操作<br/>Signal駆動]

    B --> G[レンダリング]
    D --> G
    F --> G

    G --> H[パフォーマンス結果]

    style E fill:#4fc3f7
    style F fill:#4fc3f7

一般的なベンチマークでは、SolidJS は以下のような優位性を示しています：

初期レンダリング: React より約 50-70%高速
更新処理: Vue.js より約 30-40%高速
メモリ使用量: 他フレームワークより約 20-30%少ない
バンドルサイズ: 圧縮後約 13KB と軽量

ただし、これらの数値は理論値であり、実際のアプリケーションでは使い方や実装方法によって大きく変動します。そのため、自分のプロジェクトに特化した計測が必要となります。

パフォーマンス計測が必要な理由

どれほど優秀なフレームワークを使用していても、以下の理由からパフォーマンス計測は必須です：

ユーザー体験の向上 ページ読み込み時間が 1 秒遅くなるごとに、コンバージョン率が約 7%低下するという調査結果があります。特に、モバイル環境では性能の影響がより顕著に現れます。

SEO への影響 Google は Core Web Vitals をランキング要因として採用しており、パフォーマンス指標が検索順位に直接影響するようになりました。

リソース効率化 サーバーリソースや CDN 帯域の使用量を最適化し、運用コストの削減に繋がります。

問題の早期発見 定期的な計測により、性能劣化を早期に発見し、大きな問題となる前に対処することが可能です。

課題

よくあるパフォーマンス問題

SolidJS アプリケーションでよく発生するパフォーマンス問題をご紹介いたします。

過度な Signal 作成 不適切な Signal の使い方により、予期しないリアクティビティチェーンが発生することがあります。

typescript// 問題のあるコード例
const [count, setCount] = createSignal(0);
const [derived1, setDerived1] = createSignal(
  () => count() * 2
);
const [derived2, setDerived2] = createSignal(
  () => derived1() + 10
);

上記のコードでは、不要な Signal を作成しており、メモリ使用量と処理負荷が増大します。

適切な実装例

typescript// 改善されたコード
const [count, setCount] = createSignal(0);
const derived1 = createMemo(() => count() * 2);
const derived2 = createMemo(() => derived1() + 10);

createMemo を使用することで、値の変更時のみ再計算が行われ、性能が向上します。

メモリリークの発生 Effect の適切なクリーンアップを行わない場合、メモリリークが発生する可能性があります。

typescript// リスク要因となるコード
createEffect(() => {
  const handleResize = () => console.log('resize');
  window.addEventListener('resize', handleResize);
  // クリーンアップが欠如
});

改善版

typescript// 適切なクリーンアップ
createEffect(() => {
  const handleResize = () => console.log('resize');
  window.addEventListener('resize', handleResize);

  onCleanup(() => {
    window.removeEventListener('resize', handleResize);
  });
});

計測なしに最適化を行うリスク

パフォーマンス計測を行わずに最適化を進めることには、以下のようなリスクがあります：

推測による最適化の失敗 開発者の直感や経験だけに頼った最適化は、実際の問題箇所とは異なる部分を改善してしまう可能性があります。

mermaidstateDiagram-v2
    [*] --> 推測
    推測 --> 最適化実装
    最適化実装 --> 結果確認
    結果確認 --> 効果なし: 推測が外れ
    結果確認 --> 改善: 推測が的中
    効果なし --> 推測: 別の問題箇所を探す
    改善 --> [*]

    note right of 効果なし : 時間とリソースの浪費

この図は、推測ベースの最適化がいかに非効率的かを表しています。計測データがない場合、効果のない最適化を繰り返すループに陥りがちです。

過剰な最適化 必要以上の最適化により、コードの複雑性が増し、保守性が低下する問題があります。

パフォーマンス劣化の見逃し 新機能の追加やライブラリの更新により性能が劣化しても、継続的な計測がなければ気づくことができません。

SolidJS 特有の性能ボトルネック

SolidJS 固有のパフォーマンス問題として、以下の点に注意が必要です：

Store の不適切な使用 Store の深いネストや頻繁な更新は、予期しないパフォーマンス低下を招く可能性があります。

typescript// 非効率な Store 更新
const [store, setStore] = createStore({
  users: [
    {
      id: 1,
      profile: {
        name: 'Alice',
        settings: { theme: 'dark' },
      },
    },
  ],
});

// 毎回全体を更新してしまう例
setStore('users', 0, 'profile', 'settings', {
  theme: 'light',
  lang: 'en',
});

効率的な更新方法

typescript// 必要な部分のみ更新
setStore(
  'users',
  0,
  'profile',
  'settings',
  'theme',
  'light'
);
setStore('users', 0, 'profile', 'settings', 'lang', 'en');

コンポーネント境界の問題 コンポーネントの粒度が適切でない場合、不要な再描画が発生する可能性があります。

これらの課題を解決するためには、適切な計測手法とプロファイリング技術が不可欠です。

解決策

パフォーマンス計測ツールの選定

SolidJS アプリケーションの性能を効果的に測定するため、以下のツール群を活用いたします。

mermaidflowchart TB
    A[パフォーマンス計測] --> B[開発時計測]
    A --> C[本番環境計測]

    B --> D[Chrome DevTools]
    B --> E[SolidJS DevTools]
    B --> F[Lighthouse]

    C --> G[Web Vitals]
    C --> H[Performance API]
    C --> I[カスタム計測]

    style B fill:#e8f5e8
    style C fill:#fff3e0

この図で示したように、開発環境と本番環境でそれぞれ異なるツールセットを使い分けることが重要です。

開発環境向けツール

ツール名	用途	特徴
Chrome DevTools	メモリ、CPU 使用率分析	リアルタイム計測、詳細なプロファイル
SolidJS DevTools	Signal、Effect の状態監視	SolidJS 専用、リアクティビティの可視化
Lighthouse	総合的なパフォーマンス評価	自動化可能、CI/CD 統合

Chrome DevTools の設定

javascript// Performance タブでの計測用コード
performance.mark('solidjs-render-start');

// SolidJS コンポーネントのレンダリング
render(() => <App />, document.getElementById('root'));

performance.mark('solidjs-render-end');
performance.measure(
  'solidjs-render-time',
  'solidjs-render-start',
  'solidjs-render-end'
);

// 結果の取得
const measures = performance.getEntriesByType('measure');
console.log(
  'レンダリング時間:',
  measures[0].duration + 'ms'
);

このコードでは、Performance API を使用してレンダリング時間を精密に測定しています。

SolidJS DevTools の活用

typescript// 開発環境でのSignal監視設定
import { createSignal, createEffect } from 'solid-js';

const [state, setState] = createSignal(0, {
  name: 'counterState',
});

createEffect(
  () => {
    console.log('State updated:', state());
  },
  undefined,
  { name: 'counterEffect' }
);

Signal と Effect に名前を付けることで、DevTools での識別が容易になります。

プロファイリング手法の確立

効果的なプロファイリングを行うための手法を段階的にご紹介いたします。

ベースライン測定 最適化を行う前に、現在の性能を正確に測定し、ベースラインを確立します。

typescript// ベースライン測定用のユーティリティ
class PerformanceMeasurer {
  private measurements: Map<string, number[]> = new Map();

  start(label: string): void {
    performance.mark(`${label}-start`);
  }

  end(label: string): number {
    performance.mark(`${label}-end`);
    performance.measure(
      label,
      `${label}-start`,
      `${label}-end`
    );

    const measure = performance.getEntriesByName(label)[0];
    const duration = measure.duration;

    if (!this.measurements.has(label)) {
      this.measurements.set(label, []);
    }
    this.measurements.get(label)!.push(duration);

    return duration;
  }

  getAverage(label: string): number {
    const values = this.measurements.get(label) || [];
    return (
      values.reduce((a, b) => a + b, 0) / values.length
    );
  }
}

const measurer = new PerformanceMeasurer();

メモリ使用量の監視

typescript// メモリ使用量監視
function measureMemoryUsage(): void {
  if ('memory' in performance) {
    const memory = (performance as any).memory;
    console.log({
      usedJSHeapSize:
        Math.round(memory.usedJSHeapSize / 1024 / 1024) +
        'MB',
      totalJSHeapSize:
        Math.round(memory.totalJSHeapSize / 1024 / 1024) +
        'MB',
      jsHeapSizeLimit:
        Math.round(memory.jsHeapSizeLimit / 1024 / 1024) +
        'MB',
    });
  }
}

// 定期実行
setInterval(measureMemoryUsage, 5000);

リアクティビティの監視

typescript// Signal の更新頻度を追跡
function createTrackedSignal<T>(
  initialValue: T,
  name?: string
) {
  let updateCount = 0;
  const [signal, setSetter] = createSignal(initialValue);

  const trackedSetter = (value: T | ((prev: T) => T)) => {
    updateCount++;
    console.log(
      `Signal ${name} updated (${updateCount} times)`
    );
    setSetter(value);
  };

  return [
    signal,
    trackedSetter,
    () => updateCount,
  ] as const;
}

継続的なモニタリング体制

開発チーム全体でパフォーマンス管理を行うための体制を構築します。

CI/CD パイプラインへの組み込み

yaml# GitHub Actions での性能テスト例
name: Performance Tests

on: [push, pull_request]

jobs:
  performance:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: yarn install

      - name: Build application
        run: yarn build

      - name: Run Lighthouse CI
        run: |
          yarn global add @lhci/cli
          lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

パフォーマンス予算の設定

javascript// lighthouse-ci.js 設定ファイル
module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'yarn preview',
    },
    assert: {
      assertions: {
        'categories:performance': [
          'warn',
          { minScore: 0.8 },
        ],
        'categories:accessibility': [
          'error',
          { minScore: 0.9 },
        ],
        'first-contentful-paint': [
          'warn',
          { maxNumericValue: 2000 },
        ],
        'largest-contentful-paint': [
          'error',
          { maxNumericValue: 3000 },
        ],
        'cumulative-layout-shift': [
          'error',
          { maxNumericValue: 0.1 },
        ],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

この設定により、性能基準を下回った場合は自動的にビルドが失敗し、問題の早期発見が可能になります。

具体例

開発環境でのプロファイリング実装

実際の SolidJS プロジェクトでプロファイリングを実装する具体的な手順をご紹介いたします。

プロジェクト初期設定

bash# 必要なパッケージのインストール
yarn add -D @solidjs/devtools vite-plugin-pwa
yarn add web-vitals

開発用プロファイリングコンポーネント作成

typescript// components/PerformanceProfiler.tsx
import {
  createSignal,
  createEffect,
  onMount,
  JSX,
} from 'solid-js';

interface ProfilerProps {
  name: string;
  children: JSX.Element;
}

export function PerformanceProfiler(props: ProfilerProps) {
  const [renderTime, setRenderTime] =
    createSignal<number>(0);
  const [updateCount, setUpdateCount] =
    createSignal<number>(0);

  onMount(() => {
    const startTime = performance.now();

    // 初期レンダリング時間の測定
    requestAnimationFrame(() => {
      const endTime = performance.now();
      setRenderTime(endTime - startTime);
      console.log(
        `${props.name} 初期レンダリング: ${
          endTime - startTime
        }ms`
      );
    });
  });

  createEffect(() => {
    // 更新回数の追跡
    setUpdateCount((prev) => prev + 1);
    if (updateCount() > 1) {
      console.log(
        `${props.name} 更新回数: ${updateCount() - 1}`
      );
    }
  });

  return (
    <div data-profiler={props.name}>
      {import.meta.env.DEV && (
        <div style='position: fixed; top: 10px; right: 10px; background: rgba(0,0,0,0.8); color: white; padding: 8px; font-size: 12px; z-index: 9999;'>
          {props.name}: {renderTime().toFixed(2)}ms (更新:{' '}
          {updateCount() - 1}回)
        </div>
      )}
      {props.children}
    </div>
  );
}

使用例

typescript// App.tsx での使用
import { PerformanceProfiler } from './components/PerformanceProfiler';
import { TodoList } from './components/TodoList';

function App() {
  return (
    <PerformanceProfiler name='App'>
      <div class='app'>
        <PerformanceProfiler name='TodoList'>
          <TodoList />
        </PerformanceProfiler>
      </div>
    </PerformanceProfiler>
  );
}

詳細な Signal トラッキング

typescript// utils/signalTracker.ts
type SignalTracker = {
  name: string;
  updates: number;
  lastUpdate: number;
  averageUpdateTime: number;
};

const signalTrackers = new Map<string, SignalTracker>();

export function createTrackedSignal<T>(
  initialValue: T,
  name: string = 'anonymous'
) {
  const tracker: SignalTracker = {
    name,
    updates: 0,
    lastUpdate: Date.now(),
    averageUpdateTime: 0,
  };

  signalTrackers.set(name, tracker);

  const [signal, setSetter] = createSignal(initialValue);

  const trackedSetter = (value: T | ((prev: T) => T)) => {
    const startTime = performance.now();
    setSetter(value);
    const endTime = performance.now();

    tracker.updates++;
    const currentTime = Date.now();
    tracker.averageUpdateTime =
      (tracker.averageUpdateTime * (tracker.updates - 1) +
        (endTime - startTime)) /
      tracker.updates;
    tracker.lastUpdate = currentTime;

    console.log(
      `Signal "${name}" updated (${endTime - startTime}ms)`
    );
  };

  return [signal, trackedSetter] as const;
}

export function getSignalTrackerStats() {
  return Array.from(signalTrackers.entries()).map(
    ([name, tracker]) => ({
      name,
      updates: tracker.updates,
      averageUpdateTime: tracker.averageUpdateTime,
      timeSinceLastUpdate: Date.now() - tracker.lastUpdate,
    })
  );
}

本番環境での性能監視設定

本番環境では、ユーザー体験に影響を与えずに性能データを収集する仕組みが必要です。

Web Vitals の実装

typescript// utils/webVitals.ts
import {
  getCLS,
  getFID,
  getFCP,
  getLCP,
  getTTFB,
  Metric,
} from 'web-vitals';

type VitalMetric = {
  name: string;
  value: number;
  rating: 'good' | 'needs-improvement' | 'poor';
  timestamp: number;
};

class VitalsCollector {
  private metrics: VitalMetric[] = [];

  constructor() {
    this.initializeVitals();
  }

  private initializeVitals() {
    const sendToAnalytics = (metric: Metric) => {
      const vitalMetric: VitalMetric = {
        name: metric.name,
        value: metric.value,
        rating: metric.rating,
        timestamp: Date.now(),
      };

      this.metrics.push(vitalMetric);
      this.sendMetric(vitalMetric);
    };

    getCLS(sendToAnalytics);
    getFID(sendToAnalytics);
    getFCP(sendToAnalytics);
    getLCP(sendToAnalytics);
    getTTFB(sendToAnalytics);
  }

  private async sendMetric(metric: VitalMetric) {
    try {
      await fetch('/api/analytics/vitals', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(metric),
      });
    } catch (error) {
      console.warn('Failed to send vital metric:', error);
    }
  }

  getMetrics(): VitalMetric[] {
    return [...this.metrics];
  }
}

export const vitalsCollector = new VitalsCollector();

リアルユーザーモニタリング（RUM）実装

typescript// utils/rumCollector.ts
interface RUMData {
  pageLoad: number;
  routeChange: number;
  componentRender: number;
  userInteraction: number;
  errorCount: number;
  sessionId: string;
}

class RUMCollector {
  private data: Partial<RUMData> = {};
  private sessionId: string;

  constructor() {
    this.sessionId = this.generateSessionId();
    this.setupPerformanceObserver();
    this.trackPageLoad();
    this.trackUserInteractions();
  }

  private generateSessionId(): string {
    return (
      Date.now().toString(36) +
      Math.random().toString(36).substr(2)
    );
  }

  private setupPerformanceObserver() {
    if ('PerformanceObserver' in window) {
      const observer = new PerformanceObserver((list) => {
        const entries = list.getEntries();
        entries.forEach((entry) => {
          if (entry.entryType === 'navigation') {
            this.data.pageLoad = entry.duration;
          }
        });
      });

      observer.observe({
        entryTypes: ['navigation', 'measure'],
      });
    }
  }

  private trackPageLoad() {
    window.addEventListener('load', () => {
      setTimeout(() => {
        const navigation = performance.getEntriesByType(
          'navigation'
        )[0] as PerformanceNavigationTiming;
        this.data.pageLoad =
          navigation.loadEventEnd -
          navigation.navigationStart;
        this.sendData();
      }, 0);
    });
  }

  private trackUserInteractions() {
    let interactionCount = 0;
    const interactionEvents = [
      'click',
      'scroll',
      'keydown',
    ];

    interactionEvents.forEach((eventType) => {
      document.addEventListener(
        eventType,
        () => {
          interactionCount++;
          this.data.userInteraction = interactionCount;
        },
        { passive: true }
      );
    });
  }

  trackComponentRender(
    componentName: string,
    duration: number
  ) {
    console.log(
      `Component ${componentName} rendered in ${duration}ms`
    );
    // 重要なコンポーネントの場合のみ記録
    if (duration > 16) {
      // 60FPS 基準
      this.data.componentRender = duration;
    }
  }

  private async sendData() {
    const payload = {
      ...this.data,
      sessionId: this.sessionId,
      timestamp: Date.now(),
      userAgent: navigator.userAgent,
      url: window.location.href,
    };

    try {
      await fetch('/api/analytics/rum', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
    } catch (error) {
      console.warn('Failed to send RUM data:', error);
    }
  }
}

export const rumCollector = new RUMCollector();

実際のボトルネック発見と改善事例

実際のプロジェクトで発生したパフォーマンス問題とその解決事例をご紹介いたします。

事例 1: 大量データ表示の最適化

問題のあるコード：10,000 件のアイテムを一度に表示しようとして、初期レンダリングに 3 秒以上かかっていました。

typescript// 問題のあったコード
function ItemList() {
  const [items] = createResource(() => fetchItems()); // 10,000件のデータ

  return (
    <div>
      <For each={items()}>
        {(item) => <ItemCard item={item} />}
      </For>
    </div>
  );
}

解決策: 仮想スクロール実装

typescript// 改善後のコード
import { createSignal, createMemo, For } from 'solid-js';

interface VirtualScrollProps {
  items: any[];
  itemHeight: number;
  containerHeight: number;
  renderItem: (item: any, index: number) => JSX.Element;
}

function VirtualScroll(props: VirtualScrollProps) {
  const [scrollTop, setScrollTop] = createSignal(0);

  const visibleRange = createMemo(() => {
    const start = Math.floor(
      scrollTop() / props.itemHeight
    );
    const end = Math.min(
      start +
        Math.ceil(
          props.containerHeight / props.itemHeight
        ) +
        1,
      props.items.length
    );
    return { start, end };
  });

  const visibleItems = createMemo(() => {
    const range = visibleRange();
    return props.items
      .slice(range.start, range.end)
      .map((item, index) => ({
        item,
        index: range.start + index,
      }));
  });

  const totalHeight = () =>
    props.items.length * props.itemHeight;
  const offsetY = () =>
    visibleRange().start * props.itemHeight;

  return (
    <div
      style={`height: ${props.containerHeight}px; overflow-y: auto;`}
      onScroll={(e) => setScrollTop(e.target.scrollTop)}
    >
      <div
        style={`height: ${totalHeight()}px; position: relative;`}
      >
        <div
          style={`transform: translateY(${offsetY()}px);`}
        >
          <For each={visibleItems()}>
            {({ item, index }) =>
              props.renderItem(item, index)
            }
          </For>
        </div>
      </div>
    </div>
  );
}

// 使用例
function OptimizedItemList() {
  const [items] = createResource(() => fetchItems());

  return (
    <VirtualScroll
      items={items() || []}
      itemHeight={60}
      containerHeight={400}
      renderItem={(item, index) => <ItemCard item={item} />}
    />
  );
}

結果: 初期レンダリング時間が 3 秒から 50ms に短縮され、メモリ使用量も 95%削減されました。

事例 2: Store 更新の最適化

問題：ネストした Store の頻繁な更新により、UI が反応しなくなる問題が発生していました。

typescript// 問題のあったコード
const [store, setStore] = createStore({
  users: [],
  filters: { search: '', category: 'all' },
  ui: { loading: false, selectedIds: [] },
});

// 毎回全体を更新していた
function updateUserSelection(
  userId: number,
  selected: boolean
) {
  const newSelectedIds = selected
    ? [...store.ui.selectedIds, userId]
    : store.ui.selectedIds.filter((id) => id !== userId);

  setStore('ui', {
    ...store.ui,
    selectedIds: newSelectedIds,
  });
}

最適化後のコード

typescript// produce を使用した効率的な更新
import { produce } from 'solid-js/store';

function updateUserSelection(
  userId: number,
  selected: boolean
) {
  setStore(
    'ui',
    'selectedIds',
    produce((selectedIds) => {
      if (selected) {
        selectedIds.push(userId);
      } else {
        const index = selectedIds.indexOf(userId);
        if (index > -1) {
          selectedIds.splice(index, 1);
        }
      }
    })
  );
}

// さらなる最適化：バッチ更新
function batchUpdateSelections(
  updates: Array<{ userId: number; selected: boolean }>
) {
  batch(() => {
    updates.forEach(({ userId, selected }) => {
      updateUserSelection(userId, selected);
    });
  });
}