Yard 編集部

⌨️

フロントエンドエンジニア採用面接対策：パフォーマンス最適化とReactの実装例

公開

2025-02-07

文章量

約4189字

Yard 編集部

フォロー

Yardの編集部が、テック業界の最新トレンドや知見について発信します。

なぜパフォーマンス最適化が重要なのか

パフォーマンス最適化の基本指標

First Contentful Paint (FCP)

Largest Contentful Paint (LCP)

Time to Interactive (TTI)

Total Blocking Time (TBT)

パフォーマンス改善の具体的アプローチ

画像やリソースの最適化

コード分割と遅延読み込み

キャッシュ戦略の活用

JavaScript実行の最適化

Reactでの実装例

useMemoとuseCallback

React.memo

SuspenseやReact.lazy

面接でよく聞かれるポイント

まとめ

React フロントエンド

Insight

フロントエンドエンジニアの面接では、「パフォーマンスの最適化」をどう考えて実装してきたかを聞かれることが少なくありません。

ユーザー体験を向上させるためにも、パフォーマンスは重要な要素の一つですよね。

そこでこの記事では、パフォーマンス最適化のポイントとReactを使った具体的な実装例についてわかりやすく解説していきます。

自分の経験を交えながら、面接の際にどうアピールすると良いのかにも触れていきますので、ぜひ最後までチェックしてみてください。

なぜパフォーマンス最適化が重要なのか

まず大前提として、パフォーマンスが悪いアプリケーションはユーザーにストレスを与えます。

表示速度が遅い、操作に対するレスポンスが悪いとなると、ユーザーはあっという間に離脱してしまいます。

特にモバイル環境では通信環境が不安定だったり、端末のスペックが限られていたりするため、パフォーマンス対策はウェブサービスの優劣を分ける大きな要因です。

さらに、検索エンジンもページの読み込み速度をランキング要因の一つとして考慮しています。

パフォーマンスが高いサイトはSEO的にもプラスになる可能性が高いんです。

そのため、面接でも「ユーザー体験を意識した設計ができているか」「サイト全体のパフォーマンスをどう管理しているか」などが問われやすいわけですね。

パフォーマンス最適化の基本指標

パフォーマンスと言っても、具体的に何を見ればいいのかが曖昧だと、ただ漠然と「速い・遅い」で終わってしまいがちです。

そこで、まずは以下のような主要指標を押さえておきましょう。

First Contentful Paint (FCP)

ページを読み込んだときに、最初にテキストや画像などのコンテンツが表示されるまでの時間を測定します。

ユーザーが「お、何か表示されたぞ」と感じる瞬間ですね。

Largest Contentful Paint (LCP)

ページのメインとなる大きな要素（ヒーロー画像やヘッダーテキストなど）が読み込まれるまでの時間です。

ユーザーが体感的に「ページのメインが表示された」と思うタイミングが重要視されます。

Time to Interactive (TTI)

ページがインタラクション可能になるまでの時間です。

ボタンなどが表示されても、実際に操作できる状態になるまで時間がかかる場合がありますよね。

そこを正確に把握しておく必要があります。

Total Blocking Time (TBT)

JavaScriptの実行などによってメインスレッドがブロックされる時間です。

ユーザーが操作したくても応答しない「もっさり感」の原因となるので、あなどれません。

パフォーマンス改善の具体的アプローチ

パフォーマンス最適化にはさまざまなアプローチがありますが、面接では「どのように分析し、どのように対策したか」を問われることが多いです。

自分の経験談やプロジェクトで実践した内容を交えながら話すと説得力が増します。

画像やリソースの最適化

画像サイズが大きいと読み込みが遅くなり、FCPやLCPにも悪影響を及ぼします。

面接では「WebPやAVIFなどの形式を利用して容量を削減した」「srcset属性やレスポンシブ画像を活用して最適なサイズを配信した」といった具体例を出すと良いでしょう。

また、CSS・JSファイルの圧縮（minify）やGzip/圧縮配信の設定を行った経験もアピールポイントになります。

コード分割と遅延読み込み

Reactなど、SPAフレームワークを利用しているとbundleが肥大化しがちです。

そのため、複数のエントリーポイントに分割したり、ページごとに必要なスクリプトだけ読み込む仕組みを導入したりします。

たとえばWebpackのDynamic Importを使って遅延読み込みを行い、「最初に読み込むリソースを最小化した」などの事例があると評価されやすいです。

キャッシュ戦略の活用

リソースに適切なキャッシュヘッダーを設定し、再読み込みをなるべく減らすのも大切です。

面接では、キャッシュポリシー（Cache-ControlやETagなど）をどう設計したか、あるいはService Workerを使ってオフラインキャッシュを実装した経験などを話すと、実務で役立つ知識を持っていると思ってもらえます。

JavaScript実行の最適化

不要な計算や、同じ処理を繰り返し呼び出しているコードがないかをチェックします。

また、ライブラリをむやみに使いすぎていないかも要確認。

Reactにおいては、再レンダリングを最小限に抑えるテクニックも重要です。

次のセクションでは、Reactでの実装例を紹介します。

Reactでの実装例

Reactのアプリケーションでパフォーマンスを最適化する際に、よく登場するアプローチをいくつか挙げます。

面接でも「Reactのパフォーマンス最適化といえば何をしますか？」といった質問は定番ですよね。

useMemoとuseCallback

コンポーネントが再レンダリングされるたびに、高コストな処理や不必要な関数の再生成を行わないようにするフックです。

たとえば、重たい計算処理を行う関数をuseMemoでメモ化したり、コンポーネントに渡すコールバック関数をuseCallbackで固定したりします。

import React, { useState, useMemo, useCallback } from 'react';

function HeavyCalculationComponent() {
  const [count, setCount] = useState(0);

  const heavyCalculation = useMemo(() => {
    // 複雑な計算など
    let total = 0;
    for (let i = 0; i < 100000000; i++) {
      total += i;
    }
    return total;
  }, []);

  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  return (
    <div>
      <p>Heavy Calculation Result: {heavyCalculation}</p>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

この例のポイントは、heavyCalculationの計算やhandleClickの関数生成が必要以上に毎回走らないようにしている点です。

React.memo

コンポーネント自身が受け取るpropsが変化しない限り再レンダリングしないようにする高階コンポーネント（HOC）です。

propsが大きく変わらない状態で頻繁に再レンダリングが発生している場合、React.memoでラップすることで無駄なレンダリングを抑えられます。

const ChildComponent = React.memo(({ data }) => {
  console.log('ChildComponent re-rendered');
  return <div>{data}</div>;
});

ただし、React.memoを過度に使いすぎると、かえってメモ化の比較コストが増えたり、コードが複雑になりすぎたりするので、適切なバランスを考えることが大切です。

SuspenseやReact.lazy

コード分割の遅延読み込みをReactで簡単に実現するための機能です。

大きなコンポーネントを初期表示で全て読み込むのではなく、必要なタイミングでロードすることで初期描画を早めます。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}