ジュニアフルスタック開発者の面接質問：準備すべき内容
Milad Bonakdar
著者
HTML、CSS、JavaScript、React、Node.js、API、SQL、Git、デバッグを中心に、ジュニアフルスタック面接で問われやすい内容を整理します。
まず全スタックの基礎から押さえる
ジュニアフルスタック開発者の面接では、シンプルなWebアプリがブラウザからデータベースまでどう動くかを説明できるかがよく見られます。HTMLとCSSでページを構成し、JavaScriptで動きを加え、ReactでUIの状態を扱い、Node.jsでサーバー側の処理を行い、APIで各層をつなぎ、SQLでデータを保存し、Gitで変更を管理します。
このガイドでは、まず短く明確な回答を練習してください。そのうえで、自分が作った小さなプロジェクトに結び付けて説明できるようにします。ジュニアレベルでは高度な設計よりも、基礎の理解、デバッグの進め方、トレードオフを正直に説明できることが重要です。
準備の進め方
- UIイベントからAPIリクエスト、データベースクエリまで、1つのプロジェクトの流れを説明できるようにする。
- 作った機能だけでなく、直した不具合についても話せるようにする。
- 回答は実践的にする。定義、短い例、よくあるミスをセットで答える。
HTML & CSS
1. CSSのボックスモデルについて説明してください。
回答: CSSのボックスモデルは、Webレイアウトの基礎です。すべての要素は、長方形のボックスとして表現されます。
- コンテンツ: 実際のテキストや画像。
- パディング: コンテンツの周りの透明な領域（ボーダーの内側）。
- ボーダー: パディングとコンテンツを囲む境界線。
- マージン: ボーダーの外側の透明な領域（要素間のスペースを作成）。
希少度: 非常に一般的 難易度: 簡単
2. display: block、inline、inline-blockの違いは何ですか？
回答:
- Block: 新しい行から始まり、利用可能な幅全体を占有します（例：
<div>、<p>）。 - Inline: 新しい行から始まらず、必要な幅だけを占有します。
widthとheightプロパティは効果がありません（例：<span>、<a>）。 - Inline-block: インライン要素に似ていますが、
widthとheightを設定できます。グリッドやナビゲーションメニューに便利です。
希少度: 一般的 難易度: 簡単
3. セマンティックHTMLとは何ですか？また、なぜ重要ですか？
回答: セマンティックHTMLとは、コンテンツの意味を伝えるタグを使用することであり、単に見た目だけではありません。
- 例: 単なる
<div>の代わりに、<header>、<nav>、<article>、<footer>を使用します。 - 重要性:
- アクセシビリティ: スクリーンリーダーは、これらのタグを使用して、視覚障碍のあるユーザーがナビゲートするのを支援します。
- SEO: 検索エンジンは、コンテンツの構造と重要性をより良く理解します。
- 可読性: コードは開発者にとって理解しやすくなります。
希少度: 一般的 難易度: 簡単
4. FlexboxとCSS Gridの違いについて説明してください。
回答:
- Flexbox: 1次元レイアウトモデル（行または列）。コンテナ内のアイテムの配置やスペースの分配に最適です（例：ナビゲーションバー）。
- CSS Grid: 2次元レイアウトモデル（行と列）。ページの全体的なレイアウトを定義するのに最適です（例：ヘッダー、サイドバー、メインコンテンツ、フッター）。
希少度: 一般的 難易度: 中程度
JavaScript
5. var、let、constの違いは何ですか？
回答:
var: 関数スコープ（またはグローバルスコープ）。再宣言および更新が可能です。スコープの先頭にホイスティングされます。let: ブロックスコープ（{}内でのみ存在します）。更新はできますが、同じスコープ内で再宣言することはできません。const: ブロックスコープ。更新または再宣言することはできません。宣言時に初期化する必要があります。再割り当てが必要な場合を除き、デフォルトで使用します。
希少度: 非常に一般的 難易度: 簡単
6. asyncとawaitについて説明してください。
回答:
asyncとawait（ES2017で導入）を使用すると、非同期コードが同期コードのように見え、動作するようになります。
async: 関数の前に配置され、関数がPromiseを返すことを保証します。await:async関数内で使用され、Promiseが解決されるまで実行を一時停止します。- 利点:
.then()と.catch()をチェーンするよりもクリーンで読みやすくなります。
希少度: 一般的 難易度: 中程度
7. DOMとは何ですか？
回答: DOM（Document Object Model）は、Webドキュメントのプログラミングインターフェースです。プログラム（JavaScript）がドキュメントの構造、スタイル、コンテンツを変更できるように、ページを表現します。DOMは、ドキュメントをノードとオブジェクトとして表現します。
希少度: 一般的 難易度: 簡単
8. ==と===の違いは何ですか？
回答:
==（緩い等価性）： 型強制（共通の型に変換）を行った後、値を比較します。例：5 == "5"はtrueです。===（厳密な等価性）： 値と型の両方を比較します。型強制はありません。例：5 === "5"はfalseです。- ベストプラクティス: 予期しないバグを避けるために、常に
===を使用してください。
希少度: 一般的 難易度: 簡単
React
9. Virtual DOMとは何ですか？
回答: Virtual DOMは、メモリ上に保持される実際のDOMの軽量なコピーです。
- プロセス: 状態が変化すると、Reactは最初にVirtual DOMを更新します。次に、新しいVirtual DOMを以前のVirtual DOMと比較し（差分）、実際のDOMを更新する最も効率的な方法を計算します（リコンシリエーション）。
- 利点: 遅い実際のDOMの直接操作を最小限に抑え、パフォーマンスを向上させます。
希少度: 一般的 難易度: 中程度
10. PropsとStateとは何ですか？
回答:
- Props（プロパティ）： 親コンポーネントから子コンポーネントに渡される読み取り専用のデータ。コンポーネントを再利用可能で動的にすることができます。
- State: コンポーネント内で管理されるデータ。時間の経過とともに変化する可能性があります（例：ユーザー入力、APIレスポンス）。状態が変化すると、コンポーネントが再レンダリングされます。
希少度: 非常に一般的 難易度: 簡単
11. React Hooksとは何ですか？一般的なものをいくつか挙げてください。
回答: Hooksは、関数コンポーネントでstate、context、ref、effectなどのReact機能を使うための関数です。
useState: フォーム入力や選択中のタブなど、コンポーネント内のローカルstateを保存します。useEffect: データ取得やイベント購読など、Reactの外側にあるものとコンポーネントを同期します。すべての計算に使うものではありません。useContext: propsを何階層も渡さずに共有contextを読み取ります。- 面接でのポイント: Hooksのルールも説明します。hooksはReactコンポーネントまたはcustom hookのトップレベルで呼び出し、ループや条件分岐の中では呼び出しません。
希少度: 一般的 難易度: 中程度
Node.js & バックエンド
12. Node.jsとは何ですか？また、なぜシングルスレッドなのですか？
回答: Node.jsはV8エンジン上で動くJavaScriptランタイムです。JavaScriptは主に1つのメインスレッドで実行されますが、event loopが非同期処理を調整するため、多くのI/O中心の処理を扱えます。
- メインスレッド: JavaScriptのコールバックを実行します。
- 非ブロッキングI/O: ファイル、ネットワーク、データベース処理をOSやlibuvに任せ、結果が準備できたら処理を再開できます。
- 重要な制限: CPU負荷の高いJavaScriptはevent loopをブロックします。重い処理にはworker thread、ジョブキュー、またはリクエスト処理外への分離を検討します。
- よい例: 多くのDB呼び出しやネットワーク呼び出しを待つAPIサーバー。
希少度: 一般的 難易度: 中程度
13. NPMとpackage.jsonとは何ですか？
回答:
- NPM（Node Package Manager）： Node.jsのデフォルトのパッケージマネージャー。ライブラリ（依存関係）をインストールおよび管理できます。
package.json: Node.jsプロジェクトのマニフェストファイル。メタデータ（名前、バージョン）と依存関係（アプリを実行するために必要なライブラリ）をリストします。
希少度: 一般的 難易度: 簡単
14. GETとPOSTの違いについて説明してください。
回答:
- GET: リソースを取得します。サーバー状態を意図的に変更しないsafeなメソッドであり、同じリクエストを繰り返しても同じ効果になるidempotentなメソッドです。
- POST: サーバーに処理してほしいデータを送ります。リソース作成やアクション実行に使われることが多く、idempotentである保証はありません。そのため、API側で対策しないと重複作成が起きる可能性があります。
- 実例: 商品一覧の取得にはGET、注文送信やコメント作成にはPOSTを使います。
希少度: 一般的 難易度: 簡単
データベース (SQL)
15. 主キーと外部キーとは何ですか？
回答:
- 主キー: テーブル内の各行を一意に識別する列（または列のセット）。
NULLにすることはできません。 - 外部キー: 別のテーブルの主キーにリンクする列。2つのテーブル間の関係を確立します。
希少度: 一般的 難易度: 簡単
16. INNER JOINとLEFT JOINの違いについて説明してください。
回答:
- INNER JOIN: 両方のテーブルに一致する値を持つレコードを返します。
- LEFT JOIN（またはLEFT OUTER JOIN）： 左側のテーブルからすべてのレコードを返し、右側のテーブルから一致するレコードを返します。一致するものがない場合、結果は右側で
NULLになります。
希少度: 非常に一般的 難易度: 中程度
17. 正規化とは何ですか？
回答: 正規化とは、データベース内のデータの冗長性を減らし、データの整合性を向上させるためにデータを整理するプロセスです。
- 目標: より大きなテーブルをより小さなテーブルに分割し、関係を使用してリンクします。
- 形式: 1NF、2NF、3NF（ほとんどのアプリケーションでは、第3正規形（3NF）で十分です）。
希少度: まれ（ジュニア向け） 難易度: 中程度
一般
18. Gitとは何ですか？また、なぜ使用するのですか？
回答: Gitは、分散型バージョン管理システムです。
- 使用法: ソフトウェア開発中にソースコードの変更を追跡します。
- 利点: 複数の開発者が協力して作業でき（コラボレーション）、変更の履歴を保持し（バージョン管理）、問題が発生した場合に以前の状態に戻すことができます。
希少度: 一般的 難易度: 簡単
19. APIとは何ですか？
回答: APIは、Application Programming Interfaceの略です。これは、異なるソフトウェアアプリケーションが互いに通信できるようにする一連のルールです。Web開発では、通常、フロントエンド（クライアント）がバックエンド（サーバー）からデータを要求するREST APIを指します。
希少度: 一般的 難易度: 簡単
20. Webアプリケーションをどのようにデバッグしますか？
回答: まず問題を再現し、どこで起きているかを切り分けます。ブラウザ、ネットワークリクエスト、バックエンド処理、データベースのどこかを確認します。
- フロントエンド: ブラウザDevToolsを使います。Consoleでエラー、NetworkでAPIのステータスとpayload、ElementsでHTML/CSSを確認し、必要ならReact DevToolsも使います。
- バックエンド: 構造化ログ、request ID、stack trace、環境変数、データベースクエリを確認します。処理の流れが不明な場合はデバッガを使います。
- よい面接回答: 実際に直したバグ、最初に確認したこと、修正をどう検証したかを説明します。
希少度: 一般的 難易度: 簡単
