Stripeフロントエンドエンジニア面接体験記：国際化・マルチプラットフォーム適応・パフォーマンスの完全評価

背景紹介

まず私の状況から：フロントエンド3年の経験、以前は越境EC会社でフロントエンド開発、主にReact技術スタックを使用し、H5、ミニプログラム、PCを担当していました。楽天の面接を受けようと思った理由は、楽天の国際決済ビジネスは大きな技術的課題があり、越境ECの経験から国際化に自然な興味があったからです。面接プロセス全体を通じて、最大の気づきは：楽天が求めているのは「ページが書ける」フロントエンドエンジニアではなく、エンジニアリングの思考とパフォーマンス最適化能力を持つエンジニアだということでした。

応募したのは楽天のフロントエンドエンジニアポジションで、勤務地は東京。紹介経由で応募し、書類選考から1次面接まで約7日かかりました。全体のプロセスは1次+2次+3次面接+HR面接で、前後約4週間でした。以下、詳しく振り返ります。

面接プロセスの振り返り

1次面接：React+i18n

1次面接の面接官はシャープな女性で、自己紹介の後、すぐに技術的な質問に入りました。「1次面接は主に基礎とプロジェクト経験を確認します、緊張しないでください」と言いました。

最初の質問は本題に入りました：「ReactのFiberアーキテクチャについて理解していますか？以前のStack Reconcilerとの違いは何ですか？」これは準備していました。Fiberは中断可能な非同期レンダリングアーキテクチャで、リンクリスト構造でタスクのスライスと優先度スケジューリングを実現し、Stack Reconcilerは再帰的な同期レンダリングで、一度始まると中断できないと説明しました。面接官は「Fiberのタイムスライスはどう実装されていますか？」と掘り下げました。MessageChannelでrequestIdleCallbackをシミュレートし、各フレームのアイドル時間にタスクを実行すると答えました。彼女はさらに「なぜrequestIdleCallbackを直接使わないのですか？」と聞き、requestIdleCallbackは互換性が悪く、トリガー頻度が不安定だからだと答えました。

次にi18n関連の質問がありました。これは楽天の面接の特徴です。「国際化はどうやっていますか？i18nソリューションはどう選定しましたか？」react-i18nextで国際化を行い、翻訳ファイルは言語ごとにディレクトリを分け、namespaceで異なるモジュールの翻訳を管理していると答えました。面接官は「翻訳ファイルはどう読み込みますか？全量かオンデマンドか？」と掘り下げました。ユーザーの言語に基づいて対応する翻訳ファイルを動的にimportし、初期バンドルサイズを削減するオンデマンド読み込みを実装していると答えました。彼女はさらに「ユーザーが言語を切り替えた場合、既に読み込まれたコンポーネントも更新されることをどう保証しますか？」と聞き、i18nextのuseTranslationフックが自動的に再レンダリングをトリガーすると答えました。

Reactの一般的な質問もありました：「React Hooksにはどんな制限がありますか？なぜ条件文でHooksを使ってはいけないのですか？」Hooksの呼び出し順序は安定していなければならず、Reactは呼び出し順序でHookをマッチングしていると答えました。条件文でHooksを使うと、呼び出し順序が変わり、状態が混乱する可能性があります。面接官は「useEffectとuseLayoutEffectの違いは？」と掘り下げました。useEffectはDOM更新後に非同期で実行され、useLayoutEffectはDOM更新後に同期的に実行され、DOMレイアウトの読み取りが必要なシナリオに適していると答えました。

国際化ビジネスに関連する質問：「RTL（右から左）言語のレイアウトはどう処理しますか？」以前やったことがあり、2つのアプローチを説明しました：CSSの論理プロパティ（margin-leftの代わりにmargin-inline-start）を使う方法と、dir属性+CSS反転を使う方法。面接官は「アラビア語の日付形式と数値形式はどう処理しますか？」と掘り下げました。Intl.DateTimeFormatとIntl.NumberFormatを使用し、localeに基づいて自動フォーマットすると答えました。

1次面接の最後にコーディング問題：補間、複数形、RTLレイアウトをサポートする多言語Reactコンポーネントを実装してください。約25分で基本バージョンを書きました。面接官は見て「機能カバーは良いですが、補間のパフォーマンスは最適化できます——キャッシュで重複解析を避けることができます」と言いました。

1次面接は約1時間で、面接官は「基礎はしっかりしています、2次面接の通知をお待ちください」と言いました。

2次面接：マルチプラットフォーム適応+パフォーマンス最適化

2次面接の面接官はテクニカルエキスパートで、いきなりプロジェクトの質問から始まり、非常に深く掘り下げられました。「レジュメにマルチプラットフォーム適応とパフォーマンス最適化とありますが、詳しく話してください」。

まずマルチプラットフォーム適応のアプローチを説明しました。「1つのコードベースでH5、ミニプログラム、PCに適応するにはどうしていますか？」Taroでクロスプラットフォーム開発を行い、コアビジネスロジックを再利用し、UIレイヤーはプラットフォームごとに差別化していると答えました。面接官は「Taroのクロスプラットフォーム原理は何ですか？」と聞きました。Taroはコンパイル時変換でReact構文を異なるプラットフォームのコードに変換する——H5ではReact DOMに、ミニプログラムではミニプログラムコンポーネントにコンパイルすると答えました。彼は「コンパイル時変換にはどんな制限がありますか？」と掘り下げました。動的JSXはサポートされていない——実行時にコンポーネント名を動的に生成できない；またスタイル面で、ミニプログラムは一部のCSS機能をサポートしていないと答えました。

パフォーマンス最適化が2次面接のメインイベントでした。「どんなパフォーマンス最適化をしましたか？効果はどうでしたか？」いくつかの最適化を説明しました：初回画面読み込み最適化（コード分割+プリロード+SSR）、ランタイム最適化（仮想リスト+デバウンス/スロットル+React.memo）、リソース最適化（画像遅延読み込み+WebP+CDN）。面接官は「コード分割はどうやりましたか？ルートレベルかコンポーネントレベルか？」と掘り下げました。React.lazy+Suspenseでルートレベルのコード分割を行ったと答えました。彼はさらに「プリロードはどうやりましたか？」と聞き、<link rel="preload">で重要リソースをプリロードし、Intersection Observerでビューポートに近づく画像をプリロードすると答えました。

印象に残った質問：「フロントエンドのパフォーマンスはどう測定しますか？コア指標は何ですか？」Web Vitalsをコア指標として使用していると答えました——LCP（Largest Contentful Paint）、FID（First Input Delay）、CLS（Cumulative Layout Shift）。LCPは読み込みパフォーマンス、FIDはインタラクティビティ、CLSは視覚的安定性を測定します。面接官は「LCPはどう最適化しますか？」と掘り下げました。LCPの最適化は3つの側面から——サーバー応答時間（TTFB）の削減、重要リソース読み込み時間の削減、リソースサイズの削減。具体的にはSSR、CDN、コード分割、画像最適化だと答えました。

2次面接では楽天のビジネスに関連する質問もありました：「海外ユーザーのネットワーク環境は比較的悪いですが、弱ネットワーク下の体験はどう最適化しますか？」いくつかの最適化を説明しました：1）スケルトンスクリーン——ページ構造を先に表示し、データ読み込み完了後にコンテンツを埋める；2）オフラインキャッシュ——Service Workerで重要リソースをキャッシュし、オフライン時もアクセス可能；3）デグレード——弱ネットワークでは非重要リクエストをスキップし、コアデータのみ読み込み；4）タイムアウトリトライ——リクエストタイムアウト後自動リトライ、最大3回。面接官は「包括的なアプローチですが、海外市場でのService Workerの互換性はどうですか？」と言いました。iOS Safariは11.3からサポート、Android Chromeは良好にサポートしており、大部分の海外ユーザーをカバーしていると答えました。

2次面接は約1.5時間で、面接官は「パフォーマンス最適化の経験は良いですが、楽天のシナリオではいくつかの調整が必要です」と言いました。

3次面接：プロジェクト深掘り+HR面接

3次面接は部門のテクニカルリーダーでした。雰囲気はよりフォーマルでした。まず楽天のビジネスに対する理解を聞かれ、「楽天はコアとなる国際決済プラットフォームで、世界中のユーザーに対応し、最大の課題は国際化、マルチプラットフォーム適応、弱ネットワーク最適化です」と答えました。彼は頷き、プロジェクトの深掘りを始めました。

「最も技術的に挑戦的だったプロジェクトは何ですか？」商品詳細ページのパフォーマンス最適化プロジェクトについて説明しました——初回画面読み込みを3.2秒から1.1秒に最適化。具体的な最適化は：SSR+ストリーミングレンダリング、重要CSSインライン+非重要CSS非同期読み込み、画像遅延読み込み+WebP自動変換、API事前リクエスト+データキャッシュ。面接官は「SSRのhydrationパフォーマンス問題はどう解決しますか？」と掘り下げました。Partial Hydrationを実装し——インタラクティブコンポーネントのみhydrationを行い、表示のみのコンポーネントはSSRのHTMLを直接使用すると答えました。彼はさらに「ストリーミングレンダリングはどう実装しますか？」と聞き、renderToNodeStreamでHTMLをチャンクで転送し、ブラウザが段階的にレンダリングできるようにすると答えました。

オープンエンドの質問：「ゼロから楽天のフロントエンドアーキテクチャを構築するとしたら、どうしますか？」4つのレベルから構築すると答えました——エンジニアリング（Monorepo+統一ビルドツール）、コンポーネント（デザインシステム+コンポーネントライブラリ）、パフォーマンス（SSR+パフォーマンス監視+自動最適化）、国際化（i18n+RTL+マルチタイムゾーン）。面接官は「Monorepoには何のツールを使いますか？」と聞き、NxまたはTurborepoと答えました。彼は「なぜMultirepoではなくMonorepoを選ぶのですか？」と聞き、Monorepoの利点はコード共有が便利、依存関係の統一管理、CI/CDパイプラインの統一であり、欠点はリポジトリサイズが大きくビルドが遅いことだが、インクリメンタルビルドで解決できると答えました。

HR面接は主に給与期望、入社日時、楽天への期待について話しました。HRは楽天が現在グローバルに急速に拡大しており、フロントエンドチームも増員中で、国際化経験のある人を重視していると言いました。

実際の面接問題

1次面接の問題

1. React Fiberアーキテクチャ？Stack Reconcilerとの違いは？
2. Fiberのタイムスライスはどう実装されているか？
3. i18nソリューションの選定方法は？翻訳ファイルの読み込み方法は？
4. RTL言語のレイアウトはどう処理するか？
5. React Hooksの制限は？なぜ条件文で使ってはいけないのか？
6. useEffectとuseLayoutEffectの違いは？
7. アラビア語の日付と数値の形式はどう処理するか？
8. 多言語対応Reactコンポーネントを実装
9. Reactの並行モードについて理解しているか？
10. useStateの更新は同期か非同期か？

2次面接の問題

1. マルチプラットフォーム適応アプローチ？Taroのクロスプラットフォーム原理は？
2. コード分割はどうやったか？プリロードは？
3. フロントエンドパフォーマンスのコア指標は？Web Vitalsは？
4. LCPはどう最適化するか？
5. 弱ネットワーク下の体験最適化ソリューションは？
6. Service Workerの互換性は？
7. 仮想リストはどう実装するか？
8. 画像最適化ソリューションは？WebP自動変換は？
9. SSRとCSRの長所と短所は？
10. フロントエンドパフォーマンス監視はどうやるか？

3次面接の問題

1. 最も技術的に挑戦的だったプロジェクト
2. SSRのhydrationパフォーマンス問題
3. ストリーミングレンダリングはどう実装するか？
4. ゼロから楽天のフロントエンドアーキテクチャを構築
5. Monorepo vs Multirepo？
6. デザインシステムはどう構築するか？
7. フロントエンドエンジニアリングはどう推進するか？
8. 楽天のビジネスに対する理解
9. 国際化フロントエンドの課題は何か？
10. キャリアプラン

心得とアドバイス

第一に、国際化は翻訳だけでなく、エンジニアリングの問題です。楽天の面接では「i18nの使い方」ではなく、「RTLの処理方法」「翻訳ファイルのオンデマンド読み込み」「マルチタイムゾーンの処理」といったエンジニアリングの問題を聞かれます。完全な国際化プロジェクトを作って練習することをお勧めします。

第二に、パフォーマンス最適化にはデータによる裏付けが必要です。面接官はどんな最適化をしたかだけでなく、その効果を気にします——「初回画面読み込み時間はどれだけ減ったか」「LCPはどれだけ改善したか」。プロジェクトでパフォーマンス監視をしっかり行い、データで語ることをお勧めします。

第三に、マルチプラットフォーム適応の原理を理解してください。Taroの使い方を知っているだけでなく、クロスプラットフォームコンパイルの原理と制限を理解する必要があります。面接官は「なぜTaroは動的JSXをサポートしないのか」と聞くので、コンパイル時とランタイムの違いを理解していれば答えられます。

第四に、弱ネットワーク最適化は楽天の特徴的なトピックです。海外ユーザーのネットワーク環境は国内よりもはるかに複雑です。面接官は弱ネットワーク下の体験最適化に特に注目します。Service Worker、オフラインキャッシュ、デグレード戦略について学ぶことをお勧めします。

第五に、アーキテクチャの思考を持ってください。3次面接ではアーキテクチャ設計がテストされます——「どんなフレームワークを使えるか」ではなく「どうアーキテクチャを設計するか」。SPAからSSR、マイクロフロントエンドまで、フロントエンドアーキテクチャの進化について学ぶことをお勧めします。

FAQ

Q1：楽天のフロントエンド面接はReactの要求が高いですか？

はい、非常に高いです。Reactが使えるレベルではなく、Fiber、並行モード、Hooksの原理といった低レイヤーの知識を理解する必要があります。Reactのソースコードを読み、少なくともFiberとHooksの実装を理解することをお勧めします。

Q2：国際化の経験がない場合は？

自分で国際化プロジェクトを作って練習できます。例えば、中日英3言語対応のTodo Appを作り、RTLレイアウト、翻訳ファイル管理、日付/数値フォーマットを重点的に練習する。重要なのは、国際化は翻訳だけでなく、レイアウト、フォーマット、タイムゾーンの問題も含むことを理解することです。

Q3：Taroとuni-app、どちらを選ぶべきですか？

技術スタックによります。ReactならTaro、Vueならuni-app。楽天は主にReactを使用しているため、Taroがより適しています。しかし面接官はどのツールを使えるかよりも、クロスプラットフォームの原理を理解しているかを重視します。

Q4：フロントエンドパフォーマンス最適化はどう学ぶべきですか？

Web Vitalsから始めることをお勧めします——3つのコア指標（LCP、FID、CLS）を理解し、各指標に対する最適化方法を学ぶ。Googleのweb.devパフォーマンス最適化ガイドがおすすめです。最も重要なのは、自分のプロジェクトで実践し、LighthouseとChrome DevToolsで分析することです。

Q5：楽天のフロントエンドの仕事の強度はどうですか？

プロジェクトチームによります。大型プロモーション期間は忙しくなりますが、普段は問題ありません。技術的な雰囲気は良く、フロントエンドチームはエンジニアリング品質の基準が高いです。楽天のビジネスシナリオは挑戦的で、フロントエンドエンジニアの成長に役立ちます。