Shopifyフロントエンドエンジニア面接体験記：React・パフォーマンス最適化・ECシナリオの完全評価

背景紹介

まず私の状況から話します。フロントエンド経験3年、以前は中規模EC企業でReact開発をしていました。主にC向けページとキャンペーンページを担当していました。昨年末から転職活動を始め、目標は明確でした——楽天のフロントエンドエンジニアリングチームです。なぜこの方向かというと、ECフロントエンドは最もコアなビジネスの一つであり、トラフィックが多く、シナリオが複雑で、技術的なチャレンジが多いからです。そして給与も確かに魅力的です。応募からオファー取得まで約3週間かかり、技術1次面接、技術2次面接、技術3次面接、HR面接を経験しました。各面接が印象深かったので、プロセスを振り返って、同様の面接を準備している方の参考になれば幸いです。

面接プロセスの振り返り

1次面接：React + TypeScript 基礎と実践

1次面接の面接官は若い男性で、おそらく私とあまり年齢が変わらないでしょう。まず自己紹介をして、すぐに技術的な質問に入りました。全体的に1次面接は基礎重視ですが、教科書的な暗記を問うものではなく、実際のシナリオと結びつけて聞かれます。本当に使った経験がないと答えられないタイプです。

最初の質問はReactについて：React Fiberアーキテクチャのコア思想は何ですか？以前のStack Reconcilerとの本質的な違いは何ですか？この質問は事前に準備していたので、中断可能なレンダリング、優先度スケジューリング、タイムスライシングの観点から回答しました。面接官はさらにFiberノードのeffectTagがどのようにマークされ収集されるかを深掘りしました。これはかなり細かい内容で、私はソースコードに基づいてcompleteWorkフェーズのバブルプロセスを説明し、満足そうでした。

次はTypeScriptの実践問題：バックエンドから返されるデータの型が不確定で、stringかもしれないしnumberやネストされたオブジェクトかもしれない場合、TypeScriptで型ガードをどう実装しますか？私はdiscriminated unionとカスタム型ガードを使ったソリューションを書きました。面接官はさらにinferキーワードを使って深い型抽出のユーティリティ型を実装するよう求め、私はその場でDeepPickを書きました。少し緊張しましたが完成しました。

そしてコーディング問題：リクエストキャンセルと自動リトライ付きのfetchラッパーを実装してください。私はAbortControllerでキャンセル、指数バックオフでリトライ、最大リトライ回数とタイムアウト制御を追加しました。コードを見た面接官は良いフォローアップ質問をしました：複数のコンポーネントが同時に同じリクエストを送信する場合、どうやってリクエストを重複排除しますか？私はMapでPromiseをキャッシュし、同じキーのリクエストで同じPromiseを再利用すると回答し、彼は頷きました。

1次面接は約50分で、最後に5分間質問タイムがありました。全体的な印象：面接官はプロフェッショナルで、質問に深みはあるが意地悪ではなく、答えられないところは思考を導いてくれました。

2次面接：パフォーマンス最適化 + ECシナリオ

2次面接の面接官は明らかによりシニアで、おそらくチームリーダーレベルでした。質問はアーキテクチャと実際のシナリオに偏っていました。まず以前のECプロジェクトについて聞かれ、全体的なページアーキテクチャ図を描くよう求められ、そこからECシナリオについて深掘りされました。

最初のコア質問：ECホームページには大量の商品カードがあり、各カードに画像、価格、タグ、カウントダウンなどの情報があります。初回画面のレンダリングパフォーマンスをどう確保しますか？私は複数のレイヤーから回答しました：仮想リストで可視領域のみレンダリング、画像の遅延読み込み+WebP形式+CDN、スケルトンスクリーンで体感待ち時間を短縮、React.memo+useMemoで不要な再レンダリングを回避、クリティカルCSSのインラインと非クリティカルCSSの非同期読み込み。面接官はさらに、商品データがリアルタイムで更新される場合（フラッシュセールのカウントダウンなど）、頻繁なsetStateによるパフォーマンス問題をどう回避するかと深掘りしました。私はrequestAnimationFrameで更新をバッチ化し、カウントダウンは各カードの独立したタイマーではなく単一タイマーで駆動すると回答し、彼は納得したようでした。

次にシステム設計問題：商品詳細ページのA/Bテストシステムを設計してください。複数実験の並行、トラフィックの排他制御、結果統計をサポートすること。これは事前に準備していませんでしたが、経験に基づいて階層型実験モデル、トラフィックバケットのハッシュ、実験グループの排他戦略、指標収集と統計的有意性の観点から回答しました。面接官はアプローチに問題ないと言い、トラフィックバケットのハッシュアルゴリズムの選択について詳しく説明するよう求めました。私は均一分布を保証するMurmurHashと回答しました。

2次面接では興味深い質問もありました：商品詳細ページで動画の自動再生をサポートする必要があります。動画とページのパフォーマンスのバランスをどう取りますか？私はIntersectionObserverで動画の可視性を制御、muted属性で自動再生をバイパス、動画のプリロード戦略（最初の数秒のみプリロード）、ビューポート離脱時に再生を一時停止してリソースを解放すると述べました。面接官は動画デコードがメインスレッドに与える影響も聞き、私はOffscreenCanvasとWebCodecsのアプローチを補足しました。

2次面接は約60分で、1次面接より頭を使いましたが、面接官はヒントをくれました。プレッシャー面接ではありませんでした。

3次面接：プロジェクトアーキテクチャ + HR面接

3次面接は技術の最終面接で、面接官はおそらく部門責任者で、よりマクロな質問をしました。まず最もチャレンジングだったプロジェクトを説明するよう求められ、私は以前のECキャンペーンページビルダーシステムを選び、技術選定、アーキテクチャ設計、パフォーマンス最適化、教訓まで説明しました。面接官はいくつかのポイントに焦点を当てました：マイクロフロントエンドでModule Federationではなくqiankunを選んだ理由は？コンポーネントのサンドボックス分離はどう実装したか？ローコードビルダーシステムのレンダリングエンジンはどう設計したか？

そしてオープンエンドの質問：ゼロからフロントエンドのエンジニアリング体系を構築するとしたら、どう設計しますか？私はmonorepo管理、CI/CDパイプライン、コンポーネントライブラリ構築、モニタリングとアラート、カナリアリリースの各次元から展開し、それぞれ具体的なツール選定と理由を説明しました。面接官はこの回答に満足し、ECシナリオでのRemote Componentの実現可能性についても議論しました。

HR面接はかなり標準的で、退職理由、キャリアプラン、希望給与、勤務地の希望などを聞かれました。印象的だったのは、HRが自ら働くペースについて言及したことです——確かに忙しいが、無意味な残業ではなく、ビジネスの急成長に伴う自然な忙しさだと言っていました。この率直さで好感度が上がりました。

実際の面接問題

面接で実際に聞かれた問題をカテゴリ別にまとめました：

React関連：Fiberアーキテクチャのコア概念とStack Reconcilerとの違い、effectTagのマークと収集メカニズム、React.memoとuseMemoの使用シーンの違い、Concurrent Mode下の更新優先度スケジューリング、Suspenseの実装原理

TypeScript関連：型ガードの複数の実装方法、inferキーワードの使用シーン、DeepPick/DeepPartialユーティリティ型の手書き実装、条件型と分散条件型の違い、TypeScriptのenumのコンパイル出力分析

パフォーマンス最適化：初回画面レンダリング最適化のフルチェーンソリューション、仮想リストの実装と長いリストの最適化、画像の遅延読み込みとフォーマット最適化戦略、スケルトンスクリーンの実装、Reactレンダリング最適化（memo/useMemo/useCallbackの適切な使用）

ECシナリオ：フラッシュセールカウントダウンのパフォーマンス最適化、商品カードのリアルタイム更新戦略、動画自動再生とパフォーマンスのバランス、A/Bテストシステムの設計、商品詳細ページのSSRソリューション

エンジニアリング：monorepo管理ソリューションの比較、マイクロフロントエンドソリューションの選定（qiankun vs Module Federation）、CI/CDパイプラインの設計、コンポーネントライブラリの構築とバージョン管理、フロントエンドモニタリングとアラートシステム

コーディング問題：キャンセルと自動リトライ付きfetchラッパー、簡単な仮想リストコンポーネントの実装、onceとoffをサポートするEventEmitterの実装、循環参照を処理するディープクローン

心得・アドバイス

第一に、Reactのソースコードは必ず読むべき。面接はAPIの使い方をテストするのではなく、原理を理解しているかをテストしています。Fiber、スケジューリング、更新メカニズム——ソースコードを読まないと答えにくいです。少なくともReactソースコードのreconcilerとschedulerの部分を一読することをお勧めします。すべての行を理解する必要はありませんが、コアフローは明確にしておきましょう。

第二に、パフォーマンス最適化は体系的な思考で。「仮想リストを使う」「遅延読み込みを使う」といった点状の回答だけでは不十分です。フルチェーンの観点から体系的に問題を解決できることが求められます。ネットワーク層、レンダリング層、ランタイム層、アーキテクチャ層の4つの次元で最適化プランを整理すると、面接官は非常に経験豊富だと評価するでしょう。

第三に、ECシナリオは事前に準備する。面接では必ずECシナリオと結びつけて聞かれます——フラッシュセール、在庫、商品表示、キャンペーンページなど。以前のEC経験がない場合は、少なくともEC関連のプロジェクトをいくつか練習として作ることをお勧めします。ビジネスコンテキストを理解してこそ、良い技術ソリューションを提案できます。

第四に、コーディング速度を練習する。面接のペースは速く、コーディング問題は通常15-20分しかありません。書く速度が足りないと、時間切れになる可能性があります。LeetCodeで時間制限付きの練習をして、迅速なコーディング能力を養うことをお勧めします。

第五に、面接では落ち着きを保つ。面接は確かに難しいですが、面接官はわざと困らせることはありません。分からない問題に遭遇しても慌てないでください。知っている部分から始め、推論を試みれば、面接官は通常ヒントをくれます。2次面接のA/Bテスト問題も面接官のヒントで完成させましたが、最終的に合格しました。

FAQ

Q：フロントエンドの技術スタックは何ですか？

主にReact + TypeScriptです。ビルドツールはViteに似た独自ツールを使用しています。状態管理は主にzustandとjotaiで、一部の古いプロジェクトはReduxを使用しています。スタイリングは主にCSS ModulesとTailwindです。テストはJest + React Testing Libraryを使用しています。

Q：アルゴリズムの問題は難しいですか？

チームによります。ECフロントエンドではアルゴリズムは重点ではなく、エンジニアリング能力とシナリオ理解がより重視されます。ただし、インフラやメインアプリの面接の場合、アルゴリズムはより難しくなります。少なくともLeetCode 200問、特にHot 100に重点を置くことをお勧めします。

Q：3年の経験でどのレベルになりますか？

一般的にミドルからシニアの間で、面接の出来によります。ミドルレベルの給与は約600-900万円、シニアは約800-1,200万円です。ボーナスとストックオプションを含めると、トータルパッケージは非常に競争力があります。

Q：残業は本当にひどいですか？

正直に言うと、かなり忙しいです。大きなセール時期（ブラックフライデーなど）は基本的に10時から22時まで、普段は10時から21時くらいです。でも無意味な残業ではなく、ビジネスの急成長に伴う自然な忙しさです。ECに興味があれば、この強度は受け入れられると思います。

Q：面接前にどんなプロジェクトを準備すべきですか？

複雑な問題を解決する能力を示せる、深みのあるプロジェクトを準備することをお勧めします。例えば、私が準備したECキャンペーンページビルダーシステムは、ローコード、マイクロフロントエンド、パフォーマンス最適化など複数の技術ポイントを含んでおり、面接官が何を聞いても対応できました。単純なCRUDプロジェクトでは面接官を感心させるのは難しいです。