フロントエンドのポジションに応募しようとすると、何から見ればいいのか分からなくなることがありますよね。ブラウザからJavaScript、React、CSSまで範囲が広くて、どこから手をつければいいのか見当がつかないんです。
そこで、以前応募の準備をしながら集めていたメモを、概念単位で整理し直してみました。説明が書いてあった概念は文章にして、キーワードだけ書いてあったテーマは自分で答えてみるためのチェックリストとして残しています。
ブラウザ#
ブラウザのレンダリングの仕組み#
ブラウザのレンダリングとは、HTML、CSS、JavaScriptといったリソースをブラウザが画面に描画する過程のことです。順序は大きく5つの段階に分けられます。
- DOMの生成 — HTML文書をパースしてタグをノードに変換し、ノード同士の階層関係を作ってDOMツリーを構築します。
- CSSOMの生成 — CSSをパースしてプロパティをノードに変換し、同じように階層関係を持つCSSOMツリーを構築します。
- レンダーツリーの生成 — DOMツリーとCSSOMを結合しますが、このとき実際に画面に表示される要素だけを選んでレンダーツリーを作ります。
- レイアウト — レンダーツリーをもとに、各要素のサイズと位置を計算します。
- ペインティング — 計算された位置に、要素の背景、枠線、文字などを実際に描画します。
ブラウザでさらに見ておきたいテーマ#
以下はメモにキーワードだけ残っていたテーマです。一文で説明できるかどうか、自分で確かめてみてください。
- ブラウザの動作の仕組み
- URLを入力したときに起こること
- データの暗号化通信
- XSSの防止
- フロントエンドにおけるブラウザ性能の測定方法と、改善点を見つけるために見るべきもの
JavaScript#
ホイスティング#
ホイスティングとは、変数や関数の宣言がスコープの先頭に引き上げられたかのように実行される現象です。そのため、宣言前に使うと意図しないエラーが起きることがあります。
==と===の違い#
==は等価演算子で、2つの値を比較するときに先に型変換(type coercion)を行います。データ型が違っても自動的に型を揃えてから比較するため、予想外の結果になることがあるんです。
===は厳密等価演算子で、データ型と値の両方が同じかどうかを比較します。型変換なしで正確に値を比較するので、より安全で結果を予測しやすいです。
クロージャ#
クロージャは、関数が宣言されるときに自動的に作られるレキシカル環境と関係しています。このレキシカル環境は、関数が宣言された時点のすべての変数と関数を含むレキシカルスコープを形成し、それがスコープチェーンへとつながります。
おかげで、外側の関数が実行を終えて戻った後も、内側の関数は外側の関数のスコープにある変数にアクセスし続けられます。主に情報の隠蔽のために使われます。
非同期関数とイベントループ#
非同期関数とは、実行結果がすぐには返らず、特定の条件が満たされるまで待つ関数です。通常はコールバック関数かPromiseオブジェクトを返します。
- コールバック関数 — 非同期処理が完了したときに呼び出される関数です。
- Promise — 非同期処理が成功したか失敗したかを表すオブジェクトです。
非同期関数はアプリケーションの性能を高め、ユーザーインターフェースの応答性を保つのに役立ちます。ただし、コールバック地獄のような問題を避けるには、適切なエラー処理とコード構成が必要です。
複数の非同期関数が実行されると、イベントループが呼び出しを処理し、各処理が完了したときにコールバックを呼び出します。つまり、非同期関数の実行順序はイベントループが制御しているわけです。
JavaScriptでさらに見ておきたいテーマ#
- var、let、constの違い
- イベントループの動作原理
- JavaScriptで最もよく使うデータ構造とアルゴリズム、それぞれの用途
イベント#
イベントバブリング#
イベントバブリングとは、HTMLでイベントが発生したとき、その要素で処理された後に上位の要素へイベントが伝播していく現象です。伝播している間、親要素でもイベントを検知できるのが利点です。
イベントデリゲーション#
バブリングを活用すると、親要素にハンドラを1つ登録するだけで、子要素で発生したイベントをすべて処理できます。複数の下位要素のイベントを1つのハンドラにまとめるこの手法をイベントデリゲーションと呼びます。
バブリングやキャプチャリングを止めたい場合は、イベントオブジェクトのstopPropagation()メソッドで伝播を止めるか、ハンドラの中でイベントが発生した要素を確認して処理すればいいです。
イベントでさらに見ておきたいテーマ#
- ユーザーとのインタラクション
CSS#
FlexとGridの違い#
Flexは主に1つの軸方向のレイアウトを組むときに使います。アイテムのサイズが自由で柔軟に変化できるので、レイアウトが流動的に変わる状況に向いています。
Gridは2次元のグリッドシステムを組むときに使います。水平方向と垂直方向の両方を整列でき、アイテムのサイズをあらかじめ定義して各セルのサイズを一定に保つので、レイアウトの変化が少ない場合に適しています。
CSSでさらに見ておきたいテーマ#
- Webページの構成方法
- CSSのスタイリング方法と、CSS宣言の構文・文法・各部分の呼び方
- HTML5とCSS3の主な機能と最新トレンド
Reactとアーキテクチャ#
クラスコンポーネントと関数コンポーネントの違い#
Reactでコンポーネントを作る方法には、クラスコンポーネントと関数コンポーネントがあります。クラスコンポーネントはES6のクラスで定義し、関数コンポーネントは関数で定義してフック(hook)APIと一緒に使うことが多いです。
最大の違いは、状態とライフサイクルの扱い方です。
- クラスコンポーネント — 状態を
this.stateで定義し、ライフサイクルメソッドをオーバーライドして処理を行います。状態やメソッドを参照するときはthisキーワードを使います。 - 関数コンポーネント — 状態は
useStateフックで定義し、ライフサイクルはuseEffectフックで扱います。thisキーワードは使いません。
この違いのおかげで、関数コンポーネントのほうが簡潔で読みやすくなります。テストやリファクタリングもしやすいです。
MVVMパターンとFluxパターンの違い#
MVVMは、データバインディングでViewとViewModelの間に双方向のデータフローを保ちます。ViewModelがViewとModelの間でデータを仲介する構造です。AngularやVue.jsなどのフレームワークで使われています。
Fluxは、Action → Dispatcher → Store → Viewという単方向のデータフローを使います。Storeがアプリケーションのデータとビジネスロジックを担当し、Dispatcherを通じてActionを処理します。主にReactで使われています。
テストの観点でも違いがあります。Fluxは単方向フローと単一責任の原則に従うのでテストしやすいコードを書きやすい一方、MVVMは双方向バインディングのためにテストが難しくなることがあります。
Reactでさらに見ておきたいテーマ#
- Reactの動作原理
- Reactのライフサイクル
- 状態管理の方法
- Reactの
useで始まる関数たち - マイクロフロントエンド
- React、Vue、Angularなど主要フレームワークの長所・短所と選び方
プロジェクト経験の伝え方#
概念と同じくらい大事なのが、プロジェクト経験を具体的に伝えることです。実際にどんな問題をどう解決したのか、どんな技術的な決定をなぜ下したのかを説明できる必要があります。
例えば、Next.jsで個人ブログを作ったとき、ローカルの画像パスが見つからないという問題がありました。個人ブログなので、静的サイトにするほうが管理やコストの面で安かったんです。
そこで、ビルドの過程でマークダウンに書かれた画像パスから画像を探し、その画像をbase64にエンコードして静的なHTMLに埋め込む方法で解決しました。このように問題 → 制約 → 決定 → 結果の流れで話せる経験を、あらかじめ整理しておくといいです。
これに加えて、LeetCodeやHackerRankのようなサイトで定期的にコーディング問題を解くのも並行するといいですよ。
自分で答えてみたい面接の質問#
実際の面接で受けたり、準備しながら集めたりした質問です。上の概念を整理したあと、声に出して答えてみてください。
ReactとNext.js#
- Functional ComponentsとClass Componentsの違いを説明してください。
- ReactのVirtual DOMは実際のDOMとどう違うのか、そしてなぜ重要なのかを説明してください。
- Next.jsにおけるStatic GenerationとServer-side Renderingの違いは何ですか?
- Reactで状態管理のために
useStateとuseEffectフックをどのように使いますか? - Next.jsの
getStaticProps、getStaticPaths、getServerSidePropsの用途と違いを説明してください。
SEOとパフォーマンス#
- Next.jsのpre-rendering機能はSEOにどんな利点をもたらしますか?
- Reactアプリケーションで動的コンテンツをSEOフレンドリーにするための戦略にはどんなものがありますか?
- Next.jsプロジェクトでメタタグとOpen Graphタグを動的に管理する方法を説明してください。
- 構造化データ(Structured Data)をReactまたはNext.jsアプリケーションに統合する方法と、その重要性を説明してください。
- Next.js / Reactベースのプロダクトでページの読み込み速度を最適化する方法と、それがSEOに与える影響を説明してください。
- Webパフォーマンス最適化のために使う方法とツールについて説明してください。
- Webサイトの読み込みが遅くてユーザー満足度が下がっています。どう解決しますか?
セキュリティとコラボレーション#
- Webセキュリティの脆弱性と攻撃手法を知っていますか? それを防ぐためにどんな対策を取るべきですか?
- Webアプリケーションでユーザー認証と権限管理の機能を実装する方法を説明してください。
- Webサイトがハッキング攻撃を受けたとき、どう対応すべきですか? 具体的な対応手順と予防策を説明してください。
- 複数の開発者が参加するフロントエンドプロジェクトで、効率的なバージョン管理とコードの共同作業のためにどんな方法を使いますか?
経験#
- 最近進めたフロントエンド開発プロジェクトを紹介してください。目標、使った技術、主な課題と解決策、結果を詳しく説明してください。
- レスポンシブWebデザインを実装するとき、どんな点を考慮すべきですか? 実際のプロジェクトで経験した事例を中心に答えてください。
さらに読んでおきたい資料#
Webサイトを作ったら、Front-End Checklistで抜けがないか一度確認してみてください。そのほか、準備しながら参考にした資料です。ほとんどは韓国語で書かれています。
- 就職準備のために勉強した内容をまとめたリポジトリ
- F-Lab修了生の履歴書
- 自律的に働く組織のための就業規則の無料公開
- バックエンド開発者の就職準備に関するすべて
- 就活生なら知っておきたいフロントエンド関連の知識
- フロントエンド技術面接のためのハンドブック作り
- 現役開発者がまとめるフロントエンド新卒技術面接の問題集20選
- 実際に受けたフロントエンド開発者の面接質問まとめ
- 便利な機能を1行のコードで作ったJavaScriptユーティリティ
すべてを一度に覚えようとするよりも、上のチェックリストの中で一文で説明できない概念から1つずつ埋めていくのが、いちばんいいスタートです。
All men who have achieved great things have been great dreamers.
— Orison Marden
