TikTokフロントエンドインターン面接体験記：大学2年生の技術面接突破記

背景紹介

まずは私の状況からお話しします。私は某985大学のコンピュータサイエンス専攻2年生です。1年生の時に独学でフロントエンドを学び始め、HTML/CSSからReactまで勉強し、その間に2つの個人プロジェクトをGitHubに公開しました。正直なところ、LINEのフロントエンドインターンに応募した時は全く自信がありませんでした——何しろ私は2年生で、周りでインターンに応募しているのはほとんどが3年生や大学院の先輩方でしたから。

でも、ダメ元で応募してみようと思いました。落ちても損はないですし。そこでLINEの新卒インターン募集がオープンした初日に履歴書を提出し、フロントエンド開発インターンのポジションに応募しました。驚いたことに、約1週間後に面接の招待が届きました。嬉しくて椅子から飛び上がりそうになりました。

面接はFeishu（Lark）ミーティングを使ったオンラインビデオ面接でした。面接官は若く見える男性で、後でLINEのEC部門のフロントエンド開発者だと分かりました。面接は全体で約55分、テンポが良くて圧迫感はありませんでした。全体的に良い体験でした。

面接プロセスの振り返り

自己紹介（約3分）

面接官から自己紹介をお願いされました。私は事前に1分程度のバージョンを用意しており、技術スタックとプロジェクト経験に焦点を当てて話しました。アドバイス：自己紹介は長すぎず、ポイントを絞りましょう。面接官は後であなたの紹介に基づいて深掘りします。

CSSレイアウトセクション（約10分）

面接官はまずCSSレイアウトに関する質問から始めました。この部分は比較的スムーズに答えられました。

質問1：flexとgridレイアウトの違いは何ですか？それぞれどのような場面に適していますか？

flexは1次元レイアウトで、単一行や単一列の配置に適していると説明しました。gridは2次元レイアウトで、複雑な行と列が交差する配置に適しています。例えば、ナビゲーションバーにはflexが便利で、ページ全体のグリッドレイアウトにはgridが適していると述べました。面接官はflexのよく使うプロパティについて深掘りし、justify-content、align-items、flex-grow、flex-shrinkを挙げました。また、flex: 1はflex-grow: 1、flex-shrink: 1、flex-basis: 0%の短縮形であることも説明しました。

質問2：要素を水平・垂直中央に配置するには？

これは古典的な質問です。4つの方法を挙げました：flexのjustify-content + align-items、gridのplace-items: center、絶対配置+transform、絶対配置+margin auto。面接官は頷き、それ以上深掘りしませんでした。

JavaScript基礎セクション（約15分）

このセクションは深く掘り下げられ、最もチャレンジングな部分でした。

質問3：クロージャについての理解を説明してください。

クロージャとは、関数が外部スコープの変数にアクセスできる仕組みで、外部関数が実行を終えた後でもアクセス可能だと説明しました。古典的なカウンターの例を挙げました。面接官は「クロージャはどんな問題を引き起こすか」と深掘りしました。メモリリークだと答え、参照されている変数はガベージコレクションされないからだと説明しました。解決策としては、参照を手動でnullに設定すると答えました。

質問4：プロトタイプチェーンとは何ですか？

__proto__とprototypeの関係から説明を始め、オブジェクトが__proto__を通じてコンストラクタのprototypeを指し、これがnullまで続くチェーンだと説明しました。面接官はプロトタイプチェーンの図を描くよう求めたので、obj -> Foo.prototype -> Object.prototype -> nullというチェーンをスケッチしました。instanceofの原理についても聞かれ、右辺のコンストラクタのprototypeが左辺のオブジェクトのプロトタイプチェーンに存在するかを確認する仕組みだと説明しました。

質問5：var、let、constの違いは？

これは比較的基本的でした。varには巻き上げがある、letとconstにはブロックスコープがある、constは再代入できないと説明しました。面接官はconstで宣言したオブジェクトのプロパティを変更できるかと深掘りしました。可能だと答え、constが保証するのは参照アドレスが変わらないことであり、値自体ではないと説明しました。

React基礎セクション（約10分）

質問6：Reactのkeyの役割は何ですか？

keyはReactがどの要素が変化したかを識別するのに役立ち、diffアルゴリズムで再利用性を高めると説明しました。indexをkeyとして使うと問題が生じる可能性があり、例えばリストが並べ替えられると不要な再レンダリングやバグが発生すると述べました。面接官は具体的なバグの例を求めたので、リスト項目を削除した時に状態が間違った要素にバインドされる可能性があると説明しました。

質問7：useStateとuseEffectの実行タイミングは？

useStateはコンポーネントのレンダリング時にstateを初期化し、以降の呼び出しでは最新の値を返すと説明しました。useEffectはDOM更新後に非同期で実行され、componentDidMount + componentDidUpdate + componentWillUnmountの組み合わせに相当すると述べました。面接官はuseLayoutEffectとuseEffectの違いも聞きました。これはあまりうまく答えられず、useLayoutEffectは同期的に実行され、DOM更新直後に実行されるためレンダリングをブロックする可能性があるとだけ説明しました。

コーディングセクション（約12分）

質問8：デバウンス関数を実装してください。

これは準備していたので、スムーズに書けました。核心的な考え方は、毎回呼び出す前にclearTimeoutして、新しいタイマーを設定することです。面接官にコードの説明を求められ、デバウンスは最後のトリガーから遅延時間が経過した後にのみ実行される仕組みで、検索ボックスの入力などのシーンに適していると説明しました。

質問9：スロットル関数を実装してください。

スロットルもタイムスタンプを使って実装しました。核心は前回の実行時間を記録し、現在の時間から前回の実行時間を引いたものが間隔より大きければ実行するという仕組みです。面接官はデバウンスとスロットルの違いを聞き、デバウンスは最後の一回を待つもので、スロットルは一定間隔で実行するものだと答えました。

アルゴリズムセクション（約5分）

質問10：LeetCode 1 - Two Sum

これは古典的な問題で、ハッシュマップを使ってO(n)の時間計算量で実装しました。面接官にアプローチを説明するよう求められ、配列を反復し、各要素についてtarget - nums[i]がハッシュマップに存在するか確認し、存在すれば2つのインデックスを返し、存在しなければ現在の要素をハッシュマップに追加すると説明しました。

全問題一覧

1. flexとgridレイアウトの違いと適用シーン

2. 要素を水平・垂直中央に配置する複数の方法

3. クロージャの概念、使用例、メモリ問題

4. プロトタイプチェーンの原理とinstanceofの実装

5. var、let、constの違い

6. Reactのkeyの役割とindexをkeyとして使う問題

7. useStateとuseEffectの実行タイミング

8. useLayoutEffectとuseEffectの違い

9. デバウンス関数の実装

10. スロットル関数の実装

11. Two Sum（LeetCode 1）

学びとアドバイス

1. 基礎は本当に重要です。今回の面接では特に難しい質問はありませんでしたが、各トピックは深く掘り下げられました。クロージャは概念だけでなくメモリリークの問題も知る必要があり、プロトタイプチェーンは一言で説明するだけでなく、図を描き、instanceofを説明できる必要があります。基礎を学ぶ時は徹底的に理解し、表面的な概念を暗記するだけでは不十分です。

2. 手書きコードは必ず練習しましょう。デバウンスやスロットルのような高頻出のコーディング問題は、理解するだけでは不十分で、ゼロから書ける必要があります。面接前に少なくとも一般的な20問のコーディング問題を書いて、筋肉記憶を形成することをお勧めします。

3. アルゴリズムを恐れないでください。インターン面接のアルゴリズム問題は通常それほど難しくありません。Two Sumのようなeasy問題が出る確率が高いです。LeetCode Hot 100のeasyとmediumを一通り解けば十分です。

4. プロジェクト経験を準備しましょう。今回の面接ではプロジェクトについて深く掘り下げられませんでしたが、自己紹介の時に面接官が明らかに私のプロジェクトに興味を示しました。2〜3つの際立ったプロジェクトを準備し、技術選択、直面した課題、解決策を明確に説明できるようにしましょう。

5. 2年生でもインターンに応募できます。学年が低いからといって躊躇しないでください。多くの企業のインターンへの基礎要件は想像ほど高くありません。基礎がしっかりしていてプロジェクト経験があれば、2年生でインターンのオファーを獲得することは十分に可能です。

FAQ

Q：LINEのインターン面接は通常何回ありますか？

A：フロントエンドインターンは通常1〜2回の技術面接があります。今回は1回だけでオファーをいただきました。インターンの要件が比較的低いからかもしれません。

Q：面接はどのプラットフォームで行われましたか？

A：Feishu（Lark）ミーティングでのビデオ面接でした。コードはFeishuのオンラインドキュメントに書きました。LeetCodeのようなオンラインエディタではありません。

Q：インターン経験がなくても合格できますか？

A：はい。以前は全くインターン経験がなく、主にプロジェクトと個人技術ブログで勝負しました。面接官は基礎と潜在力をより重視します。

Q：結果はどのくらいで出ますか？

A：面接から約3日後にHRから電話がありました。かなり効率的でした。

Q：2年生のインターンと3年生のインターンに違いはありますか？

A：基本的にはありません。面接プロセスと評価基準は同じです。2年生の利点は時間がよりあること、欠点はまだ全ての授業を修了していないため、基礎を独学で補う必要があることです。