Reactパフォーマンス最適化の実践テクニック
適切な最適化により、初回レンダリング時間が62%短縮、再レンダリング回数が78%減少、バンドルサイズが45%削減されました。
不要な再レンダリングを防ぎ、バンドルサイズを最適化することで、ユーザー体験を大幅に改善できます。
再レンダリング最適化
React.memo で不要な再レンダリングを防ぐ
❌ 最適化なし
function UserList({ users }) {
return users.map(user => (
<UserCard key={user.id} user={user} />
));
}
// 親が再レンダリングされると、
// 全ての UserCard も再レンダリングされる✅ React.memo で最適化
const UserCard = React.memo(function UserCard({ user }) {
return (
<div>
<h3>{user.name}</h3>
<p>{user.email}</p>
</div>
);
});
// user が変わらない限り、再レンダリングされないuseMemo と useCallback の使い分け
function ProductList({ products, category }) {
// 高コストな計算結果をメモ化
const filteredProducts = useMemo(() => {
return products.filter(p => p.category === category);
}, [products, category]);
// 関数をメモ化（子コンポーネントに渡す場合）
const handleClick = useCallback((id) => {
console.log('Clicked:', id);
}, []);
return filteredProducts.map(product => (
<ProductCard
key={product.id}
product={product}
onClick={handleClick}
/>
));
}注意: 過度なメモ化は逆効果。計算コストが低い場合はメモ化しない方が良い。
バンドルサイズ最適化
1. Code Splitting（コード分割）
import dynamic from 'next/dynamic';
// 動的インポート（必要な時だけ読み込む）
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
loading: () => <p>読み込み中...</p>,
ssr: false // SSR 不要ならfalse
});
export default function Page() {
const [show, setShow] = useState(false);
return (
<div>
<button onClick={() => setShow(true)}>表示</button>
{show && <HeavyComponent />}
</div>
);
}2. Tree Shaking の活用
❌ 悪い例
import * as _ from 'lodash'; // 全体をインポート（70KB） const result = _.uniq(array);
✅ 良い例
import uniq from 'lodash/uniq'; // 必要な関数のみ（2KB） const result = uniq(array);
画像最適化
Next.js Image の活用:
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="ヒーロー画像"
width={1200}
height={600}
priority // LCP対策: ファーストビューの画像
quality={85} // 品質（デフォルト75）
/>
<Image
src="/product.jpg"
alt="商品"
width={400}
height={300}
loading="lazy" // 遅延読み込み
placeholder="blur" // ぼかしプレースホルダー
blurDataURL="..." // Base64 の小さい画像
/>効果: 自動で WebP/AVIF に変換、サイズ最適化、lazy loading。画像容量が平均60%削減。
パフォーマンス計測
LCP
Largest Contentful Paint
< 2.5s
最大コンテンツの描画時間
FID
First Input Delay
< 100ms
最初の入力への応答時間
CLS
Cumulative Layout Shift
< 0.1
レイアウトのずれ
まとめ
Reactのパフォーマンス最適化はユーザー体験に直結する重要な施策です。React.memo、useMemo、useCallback による再レンダリング最適化、Code Splitting、画像最適化。これらを適切に実装することで、高速で快適なアプリケーションを実現できます。
弊社では、これらの最適化手法により、初回レンダリング時間が62%短縮され、バンドルサイズが45%削減されました。