パフォーマンスと最適化

パフォーマンスと最適化は、ユーザー体験を向上させるために重要な側面です。SolidJS は、効率的なリアクティブシステムとファイングレインドなリアクティビティを提供することで、高いパフォーマンスを実現します。しかし、アプリケーションのスケールが大きくなるにつれて、パフォーマンスを意識した開発が必要になります。このセクションでは、SolidJS アプリケーションにおけるパフォーマンスと最適化のための具体的な戦略を、例を交えて紹介します。

パフォーマンス最適化の戦略

  1. 不要なリレンダリングの削減
    SolidJS では、コンポーネントの状態が変更されたときのみ、そのコンポーネントが再レンダリングされます。しかし、不要なリレンダリングを防ぐためには、適切な状態管理と効率的なコンポーネント構造が重要です。
    • メモ化されたコンポーネント: memo関数を使用して、プロパティが変更されたときにのみコンポーネントを再レンダリングします。
    • 不変のデータ構造: 不変のデータを使用することで、参照の比較による変更検出が容易になり、パフォーマンスが向上します。
  2. リソースの遅延読み込み
    アプリケーションの初回読み込み時間を短縮するために、画像やコンポーネントなどのリソースの遅延読み込み（Lazy Loading）を実装します。
    • 画像の遅延読み込み: IntersectionObserver API を使用して、画像がビューポートに入るまで読み込みを遅延させます。
    • コードスプリッティング: SolidJS の動的インポートを使用して、必要なときにのみコンポーネントやモジュールを読み込みます。
  3. Web Workers の使用
    重い処理やデータのフェッチをメインスレッドから分離するために、Web Workers を使用します。これにより、UI の応答性を保ちながら、バックグラウンドでのデータ処理が可能になります。

具体例: パフォーマンス最適化の実装

メモ化されたコンポーネントの実装

import { memo } from 'solid-js';

const MemoizedComponent = memo((props) => {
  // 重い計算やレンダリングを含むコンポーネント
  return <div>{/* コンテンツ */}</div>;
});

画像の遅延読み込みの実装

import { onMount } from 'solid-js';

function LazyImage({ src, alt }) {
  let imgRef;

  onMount(() => {
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          imgRef.src = src;
          observer.unobserve(imgRef);
        }
      });
    });

    observer.observe(imgRef);
  });

  return <img ref={imgRef} alt={alt} style={{ width: '100%' }} />;
}

Web Workers の使用

Web Workers を使用することで、メインスレッドとは別のバックグラウンドスレッドで JavaScript の実行が可能になり、UI の応答性を維持しながら重い計算処理やデータの取り扱いを行うことができます。これは、特にデータの処理や計算が重いアプリケーションにおいて、パフォーマンスの向上に寄与します。

以下の例では、Web Worker を使用して、バックグラウンドで簡単な数値計算を行い、その結果をメインスレッドに送り返す方法を示します。

ステップ 1: Web Worker のスクリプトを作成

worker.jsという名前の新しい JavaScript ファイルをプロジェクトに追加し、以下のコードを記述します。このスクリプトでは、メインスレッドからメッセージを受信し、受け取った数値に対して計算を行い、結果をメインスレッドに送り返します。

// worker.js
self.addEventListener('message', (e) => {
  const { data } = e;
  const result = data.number * 2; // 簡単な計算例
  self.postMessage({ result });
});

ステップ 2: Web Worker をメインスレッドから使用

SolidJS コンポーネント内で、作成した Web Worker を使用します。以下のコンポーネントでは、ユーザーから数値を入力してもらい、その数値を Web Worker に送信し、計算結果を受け取って表示します。

import { createSignal, createEffect } from 'solid-js';

function App() {
  const [number, setNumber] = createSignal(0);
  const [result, setResult] = createSignal(undefined);

  // Web Workerのインスタンスを作成
  const worker = new Worker('worker.js');

  // Web Workerからメッセージを受け取ったときの処理
  worker.addEventListener('message', (e) => {
    setResult(e.data.result);
  });

  const calculate = () => {
    // 入力された数値をWeb Workerに送信
    worker.postMessage({ number: number() });
  };

  return (
    <div>
      <input
        type='number'
        value={number()}
        onInput={(e) => setNumber(e.currentTarget.value)}
      />
      <button onClick={calculate}>Calculate</button>
      <div>Result: {result()}</div>
    </div>
  );
}

export default App;