ジュニアフロントエンド開発者向け面接質問：HTML、CSS、JavaScriptの基礎

はじめに

この包括的なガイドには、フロントエンド開発の中核となる基礎知識、すなわちHTML、CSS、JavaScriptを網羅する32個の厳選された面接質問が収録されています。これらは、ジュニアフロントエンド開発者が2024年から2025年の面接で実際に出会う可能性のある質問です。各質問には、主要なテック企業やスタートアップでの数百件に及ぶ実際の面接の分析に基づいた、詳細な回答、レア度評価、難易度評価が含まれています。

これは、完全な面接ガイドのパート1です。React、ビルドツール、パフォーマンス最適化、デバッグ、アクセシビリティ、テスト、ソフトスキルに関する質問については、パート2：React、ツール、および高度なトピックをご覧ください。

HTMLの基礎 (7つの質問)

1. セマンティックHTML要素とは何ですか？また、なぜ重要ですか？

回答: セマンティックHTML要素は、ブラウザと開発者の両方に対して、その意味と目的を明確に記述します。例としては、<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>などがあります。これらが重要なのは、スクリーンリーダーや支援技術のアクセシビリティを向上させ、検索エンジンがコンテンツ構造を理解するのに役立つことでSEOを強化し、コードの保守性と可読性を高めるためです。コンテキストを提供しない汎用的な<div>や<span>要素とは異なり、セマンティック要素はコンテンツの役割と意味を伝えます。

レア度: 一般的 難易度: 簡単

2. インライン要素、ブロック要素、インラインブロック要素の違いを説明してください。

回答:

ブロック要素 は、新しい行から始まり、利用可能な幅全体を使用します（例：<div>、<p>、<h1>）。widthとheightプロパティを設定できます。
インライン要素 は、同じ行にとどまり、必要な幅のみを使用します（例：<span>、<a>、<strong>）。widthとheightを設定できません。
インラインブロック要素 は、インラインにとどまりますが、ブロック要素のようにwidthとheightを設定できます。これは、インラインのフローとブロックのサイズ調整機能を組み合わせたものです。

レア度: 一般的 難易度: 簡単

3. HTMLにおけるvoid（自己終了）要素とは何ですか？

回答: void要素とは、閉じタグがなく、コンテンツを含めることができないHTML要素のことです。一般的な例としては、<img>、<br>、<hr>、<input>、<meta>、<link>、<area>、<base>、<col>、<embed>、 <source>などがあります。これらの要素は、開始タグと属性のみで完結します。たとえば、<img src="photo.jpg" alt="description">は、閉じ</img>タグを必要としません。

レア度: 一般的 難易度: 簡単

4. ウェブサイトをアクセシブルにするにはどうすればよいですか？アクセシビリティを向上させるHTML属性は何ですか？

回答: ウェブサイトをアクセシブルにするには：

セマンティックHTML要素を使用する（<nav>、<main>、<header>、<footer>）
すべての画像に、コンテンツを説明するalt属性を提供する
レベルをスキップせずに、適切な見出し階層（H1-H6）を維持する
for属性を使用して、<label>要素でフォーム入力をラベル付けする
適切なタブ順序でキーボードアクセシビリティを確保する
セマンティックHTMLが不十分な場合は、ARIA属性を使用する：aria-label、aria-describedby、aria-hidden、aria-live
複雑なウィジェットにrole属性を追加する
十分な色のコントラストを確保する（通常のテキストで4.5：1）
インタラクティブな要素をフォーカス可能にし、目に見えるフォーカスインジケーターを提供する

レア度: 一般的 難易度: 中

5. フォームにおけるGETメソッドとPOSTメソッドの違いを説明してください。

回答:

GET: フォームデータをURLにクエリパラメータとして追加し、ブラウザにデータが表示されるようにします。長さ制限（〜2000文字）があり、キャッシュおよびブックマーク可能で、機密データには安全ではありません。リクエストがサーバーの状態を変更しないデータの取得に使用されます（検索、フィルタ）。
POST: データをURLに表示せずに、リクエスト本文で送信します。長さ制限はなく、デフォルトではキャッシュできず、機密情報に対してより安全です。サーバーの状態を変更するデータの送信に使用されます（ログインフォーム、ファイルのアップロード、レコードの作成）。

例：検索フォームは通常、結果をブックマークできるようにGETを使用しますが、ログインフォームは資格情報を隠すためにPOSTを使用します。

レア度: 一般的 難易度: 簡単-中

6. `<meta>`タグの目的は何ですか？

回答: <meta>タグは、HTMLドキュメントに関するメタデータを提供します。これは、ページに表示されませんが、ブラウザ、検索エンジン、およびその他のWebサービスで使用されます。一般的な用途は次のとおりです。

文字エンコーディング：<meta charset="UTF-8">
レスポンシブデザインのviewport設定：<meta name="viewport" content="width=device-width, initial-scale=1.0">
SEOの説明：<meta name="description" content="ページの説明">
作成者情報：<meta name="author" content="名前">
キーワード（現在では関連性が低い）：<meta name="keywords" content="keyword1, keyword2">

レア度: 一般的 難易度: 簡単

7. `<script>`、`<script async>`、`<script defer>`の違いは何ですか？

回答:

通常の<script>: スクリプトのダウンロードと実行中にHTMLの解析をブロックします。スクリプトが完了するまで、ページのレンダリングは停止します。
<script async>: HTMLの解析と並行してスクリプトをダウンロードしますが、準備が整うとすぐに実行します（解析をブロックする可能性があります）。実行順序は保証されません。分析などの独立したスクリプトに適しています。
<script defer>: 並行してダウンロードしますが、HTMLの解析が完了した後にのみ実行し、スクリプトの順序を維持します。DOMまたは他のスクリプトに依存するスクリプトに最適です。

ベストプラクティス：適切な実行順序を確保しながら、最適なパフォーマンスを得るには、<head>に<script defer>を配置します。

レア度: あまり一般的ではない 難易度: 中

CSSの基礎 (10個の質問)

8. CSSボックスモデルについて説明してください。

回答: CSSボックスモデルは、要素が4つのコンポーネント（内側から外側へ）でレンダリングされる方法を記述します。

コンテンツ: 実際のコンテンツ（テキスト、画像）
パディング: コンテンツとボーダーの間のスペース（内側）
ボーダー: パディングを囲むボーダー
マージン: ボーダーの外側のスペース（要素間）

box-sizingプロパティは計算に影響します。

box-sizing: content-box（デフォルト）：width/heightはコンテンツにのみ適用されます。パディングとボーダーが追加されます。
box-sizing: border-box: width/heightには、コンテンツ+パディング+ボーダーが含まれます（より直感的）。

例：box-sizing: border-boxの場合、width: 100px; padding: 10px; border: 2px;の要素は、正確に100px幅のままです。

レア度: 一般的 難易度: 簡単-中

9. CSSの特異性とそれがどのように機能するかを説明してください。

回答: CSSの特異性は、複数のルールが同じ要素をターゲットにしている場合に、どのスタイルが適用されるかを決定します。特異性は、セレクターをカウントすることによって計算されます。

インラインスタイル: 1000ポイント
ID: 各100ポイント
クラス、属性、疑似クラス: 各10ポイント
要素、疑似要素: 各1ポイント

例：

#nav .button = 110（1 ID + 1クラス）
.header .nav a = 21（2クラス+ 1要素）
div p = 2（2要素）

特異性が等しい場合、最後のルールが優先されます（カスケード）。!importantはすべてをオーバーライドしますが、避けるべきです。ベストプラクティス：スタイリングにはクラスを使用し、IDと!importantは避けてください。

レア度: 一般的 難易度: 中

10. Flexboxとは何ですか？また、いつ使用しますか？

回答: Flexboxは、単一の軸（行または列）に沿ってアイテムを配置するための1次元レイアウトシステムです。

親（フレキシブルコンテナ）プロパティ:

display: flex - Flexboxを有効にする
flex-direction - 行、列、行反転、列反転
justify-content - 主軸に沿った配置（中央、スペースビトウィーン、スペースアラウンド）
align-items - 交差軸に沿った配置（中央、フレックススタート、フレックスエンド、ストレッチ）
flex-wrap - ラッピングを制御する（ノーラップ、ラップ）

子（フレキシブルアイテム）プロパティ:

flex-grow - 他のアイテムと比較して、アイテムがどれだけ成長するか
flex-shrink - アイテムがどれだけ縮小するか
flex-basis - 成長/縮小前の初期サイズ
align-self - 個々のアイテムのalign-itemsをオーバーライドする

Flexboxの使用例: ナビゲーションバー、カードレイアウト、要素の中央揃え、スペースの均等な分散、コンテナ内のアイテムの配置。

レア度: 一般的 難易度: 中

11. CSS Gridとは何ですか？また、Flexboxとどのように異なりますか？

回答: CSS Gridは、行と列を同時に使用して複雑なレイアウトを作成するための2次元レイアウトシステムです。

主な違い:

Grid: 2次元（行+列）、ページレイアウトに最適
Flexbox: 1次元（単一軸）、コンポーネントに最適

Gridプロパティ:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3列 */
  grid-template-rows: 100px auto 50px;
  grid-gap: 20px; /* または gap */
}

いつ使うか:

Grid: 全体的なページレイアウト、雑誌スタイルのデザイン、複雑なグリッド構造
Flexbox: ナビゲーションバー、カード、グリッドセル内のコンポーネント
両方を一緒に: マクロレイアウトにはGrid、ミクロレイアウトにはFlexbox

レア度: 一般的 難易度: 中

12. divを水平方向と垂直方向の中央に配置するにはどうすればよいですか？

回答:

最新のアプローチ（推奨）：

/* Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid */
.parent {
  display: grid;
  place-items: center;
}

レガシーアプローチ:

/* 絶対位置 */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* マージンオート（水平方向のみ、幅が必要） */
.child {
  margin: 0 auto;
  width: 300px;
}

FlexboxとGridは、よりクリーンで柔軟性があるため、現在では標準的なソリューションです。

レア度: 一般的 難易度: 簡単-中

13. CSSの配置について説明してください：static、relative、absolute、fixed、sticky

回答:

Static（デフォルト）： 通常のドキュメントフロー、特別な配置なし
Relative: top/right/bottom/leftを使用して、通常の配置を基準にして配置されます。ドキュメントフローの元のスペースは保持されます。絶対的な子要素の配置コンテキストとしてよく使用されます。
Absolute: フローから削除され、最も近い配置された祖先（または存在しない場合はviewport）を基準にして配置されます。他の要素には影響しません。
Fixed: フローから削除され、viewportを基準にして配置されます。スクロールしても所定の位置にとどまります。
Sticky: relativeとfixedのハイブリッド。スクロールしきい値までは相対的に動作し、その後fixedになります。インフローで始まるスティッキーヘッダーに役立ちます。

例：スクロール後に固定されるナビゲーションは、position: sticky; top: 0;を使用します。

レア度: 一般的 難易度: 中

14. `display: none`、`visibility: hidden`、`opacity: 0`の違いは何ですか？

回答:

display: none: 要素はドキュメントフローから完全に削除され、スペースを取りません。スクリーンリーダーからアクセスできず、ポインターイベントもありません。
visibility: hidden: 要素は見えませんが、レイアウト内のスペースは維持されます。DOMに存在し、スクリーンリーダーからアクセスできず、ポインターイベントもありません。
opacity: 0: 要素は見えませんが、スペースは維持されます。DOMに存在し、スクリーンリーダーからアクセスでき、ポインターイベントも受信します。

使用例:

display: none - 可視性の切り替え（モーダル、ドロップダウン）
visibility: hidden - 非表示にしながらレイアウトを維持する
opacity: 0 - フェードアニメーション、要素のインタラクティブ性を維持する

レア度: 一般的 難易度: 簡単-中

15. CSSの疑似クラスと疑似要素とは何ですか？例を挙げてください。

回答:

疑似クラス（単一コロン） - 状態または位置に基づいて要素を選択します。

a:hover { color: blue; }          /* マウスオーバー */
input:focus { border: 2px solid blue; }  /* キーボードフォーカス */
li:nth-child(odd) { background: #eee; }  /* 奇数番目のリストアイテム */
button:disabled { opacity: 0.5; }  /* 無効状態 */

その他の例：:active、:checked、:first-child、:last-child、:nth-of-type()

疑似要素（二重コロン） - 特定の部分をスタイルしたり、コンテンツを挿入したりします。

p::first-line { font-weight: bold; }  /* 段落の最初の行 */
p::first-letter { font-size: 2em; }   /* ドロップキャップ */
.icon::before { content: "→"; }        /* コンテンツを挿入 */
input::placeholder { color: gray; }    /* プレースホルダーテキスト */

疑似要素は、HTMLを追加せずに装飾的な要素を作成するのに最適です。

レア度: 一般的 難易度: 中

16. レスポンシブレイアウトを作成するにはどうすればよいですか？メディアクエリについて説明してください。

回答: レスポンシブレイアウトは、以下を使用してさまざまな画面サイズに適応します。

メディアクエリ:

/* モバイルファーストアプローチ（推奨） */
.container { width: 100%; }

@media screen and (min-width: 768px) {
  .container { width: 750px; }  /* タブレット */
}

@media screen and (min-width: 1024px) {
  .container { width: 960px; }  /* デスクトップ */
}

一般的なブレークポイント:

320px：小型モバイル
768px：タブレット
1024px：デスクトップ
1440px：大型デスクトップ

その他のレスポンシブテクニック:

流動的なレイアウト（パーセンテージ、vw/vhユニット）
柔軟なFlexboxとGrid
レスポンシブ画像（max-width: 100%、srcset属性）
min-widthクエリ（モバイルファースト）対max-width（デスクトップファースト）

レア度: 一般的 難易度: 中

17. `z-index`とは何ですか？また、どのように機能しますか？

回答: z-indexは、z軸（前後）に沿った配置された要素（relative、absolute、fixed、sticky）のスタッキング順序を制御します。

重要なポイント:

配置された要素でのみ機能します（staticではありません）
値が高いほど前に表示されます
負の値を使用できます
デフォルト値はautoです（事実上0）
子要素のスタッキング方法に影響する「スタッキングコンテキスト」を作成します

よくある落とし穴:

.parent { position: relative; z-index: 1; }
.child { position: absolute; z-index: 9999; }

z-indexが9999の子要素は、親のスタッキングコンテキストの外にあるz-indexが2の別の要素よりも上に表示できません。

レア度: 一般的 難易度: 中

JavaScriptの基礎 (15個の質問)

18. `var`、`let`、`const`の違いを説明してください。

回答:

var: 関数スコープ、巻き上げられ、undefinedで初期化されます。再宣言できます。現代のコードではほとんど推奨されていません。
let: ブロックスコープ、巻き上げられますが、宣言されるまで一時的なデッドゾーン（TDZ）にあります。同じスコープ内で再宣言することはできません。
const: ブロックスコープ、巻き上げられますが、TDZにあります。宣言時に初期化する必要があり、再割り当てできません（ただし、オブジェクト/配列の内容は変更できます）。

ベストプラクティス:

デフォルトでconstを使用する
再割り当てする必要がある場合はletを使用する
最新のJavaScriptではvarを絶対に使用しない

例：

const name = "Alice";     // 再割り当てできません
let count = 0;            // 再割り当てできます
count = 1;                // OK
name = "Bob";             // エラー！

const user = { age: 25 };
user.age = 26;            // OK - オブジェクトプロパティの変更
user = {};                // エラー - 再割り当て

レア度: 一般的 難易度: 簡単

19. クロージャーとは何ですか？また、実用的な例を挙げてください。

回答: クロージャーとは、内側の関数が外側の（囲んでいる）関数のスコープから変数にアクセスできる状態のことです。これは、外側の関数が返された後でもアクセス可能です。内側の関数はこれらの変数を「クローズオーバー」します。

例:

function createCounter() {
  let count = 0;  // プライベート変数
  
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

内側の関数は、createCounterの実行が終了した後でもcountへのアクセスを維持します。これにより、データのプライバシーが可能になります。countは外部から直接アクセスできません。

使用例: データのプライバシー、関数ファクトリ、コールバック、モジュールパターン、イベントハンドラー

レア度: 一般的 難易度: 中

20. JavaScriptにおける`==`と`===`の違いを説明してください。

回答:

==（緩い等価性）： 比較前に型強制を実行し、型を一致するように変換します。
===（厳密な等価性）： 値と型の両方をチェックします。型強制は行いません。

例:

5 == '5'       // true（文字列が数値に強制変換される）
5 === '5'      // false（型が異なる）

null == undefined   // true（特別なケース）
null === undefined  // false（型が異なる）

0 == false     // true（両方とも強制変換される）
0 === false    // false（数値とブール値）

ベストプラクティス: 型強制による予期しないバグを避けるために、常に===と!==を使用してください。

レア度: 一般的 難易度: 簡単

21. JavaScriptにおける巻き上げ（ホイスティング）とは何ですか？

回答: 巻き上げとは、JavaScriptが変数と関数の宣言を、コードの実行前であるコンパイルフェーズ中に、それらのスコープの先頭に移動する動作のことです。

巻き上げのさまざまな動作:

console.log(x);  // undefined（巻き上げられ、初期化される）
var x = 5;

console.log(y);  // ReferenceError（巻き上げられるが、TDZにある）
let y = 5;

sayHello();      // "Hello!"（関数が完全に巻き上げられる）
function sayHello() {
  console.log("Hello!");
}

sayHi();         // TypeError（関数ではない）
var sayHi = function() {
  console.log("Hi!");
};

重要なポイント:

var宣言は巻き上げられ、undefinedで初期化されます。
let/constは巻き上げられますが、初期化されません（一時的なデッドゾーン）。
関数の宣言は完全に巻き上げられます（実装を含む）。
関数式は完全に巻き上げられません。

レア度: 一般的 難易度: 中

22. `this`キーワードについて説明し、アロー関数での違いを説明してください。

回答: thisは、関数が実行されるコンテキストを指します。その値は、関数の呼び出し方に依存します。

通常の関数:

const obj = {
  name: "John",
  greet: function() {
    console.log(this.name);  // "John"
  }
};
obj.greet();  // this = obj

const greet = obj.greet;
greet();  // this = undefined（厳密モード）またはwindow

アロー関数:

const obj = {
  name: "John",
  greet: () => {
    console.log(this.name);  // undefined
  }
};
obj.greet();  // this = 字句スコープ（囲んでいるコンテキスト）

主な違い:

通常の関数：thisは呼び出しサイトによって決定されます
アロー関数：thisは囲んでいるスコープから字句的に継承されます
アロー関数には、独自のthis、arguments、またはsuperはありません

使用例: 外側のthisを保持したいコールバックには、アロー関数が最適です。

class Timer {
  start() {
    setTimeout(() => {
      console.log(this);  // Timerインスタンス（字句）
    }, 1000);
  }
}

レア度: 一般的 難易度: 中-難

23. テンプレートリテラルとその利点とは何ですか？

回答: テンプレートリテラルは、バッククォート（`）を使用する文字列リテラルで、文字列の挿入と複数行の文字列をサポートします。

特徴:

const name = "Alice";
const age = 25;

// 文字列の挿入
const message = `Hello, my name is ${name} and I'm ${age} years old.`;

// 複数行の文字列
const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

// 式の評価
const price = `Total: $${(quantity * unitPrice).toFixed(2)}`;

利点:

文字列の連結よりもクリーンな構文
改行に\nは不要
${}で任意のJavaScript式を埋め込むことができます
HTML/CSSの生成に適しています

レア度: 一般的 難易度: 簡単

24. Promiseとその3つの状態について説明してください。

回答: Promiseは、非同期操作の最終的な完了（または失敗）とその結果の値を表します。

3つの状態:

Pending（保留中）： 初期状態、操作が完了していません
Fulfilled（履行済み）： 操作が正常に完了しました
Rejected（拒否済み）： 操作が失敗しました

例:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve({ data: "User info" });
    } else {
      reject(new Error("Failed to fetch"));
    }
  }, 1000);
});

fetchData
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log("Done"));

コールバックに対する利点:

コールバック地獄を回避する
.then()でチェーン可能
.catch()でより優れたエラー処理
並列操作にはPromise.all()を使用できます

レア度: 一般的 難易度: 中

25. async/awaitとは何ですか？また、どのようにコードの可読性を向上させますか？

回答: async/awaitは、Promiseの上に構築された構文糖衣で、非同期コードを同期コードのように見せ、動作させます。

例:

// Promiseを使用した場合（読みにくい）
function fetchUserData() {
  return fetch('/api/user')
    .then(response => response.json())
    .then(data => {
      return fetch(`/api/posts/${data.id}`);
    })
    .then(response => response.json())
    .catch(error => console.error(error));
}

// async/awaitを使用した場合（よりクリーン）
async function fetchUserData() {
  try {
    const response = await fetch('/api/user');
    const user = await response.json();
    
    const postsResponse = await fetch(`/api/posts/${user.id}`);
    const posts = await postsResponse.json();
    
    return posts;
  } catch (error) {
    console.error(error);
  }
}

重要なポイント:

async関数は常にPromiseを返します
awaitはPromiseが解決されるまで実行を一時停止します
エラー処理にはtry/catchを使用します
順次操作をより明確にします
.catch()よりも自然なエラー処理

レア度: 一般的 難易度: 中

26. イベントループについて説明し、JavaScriptがどのように非同期操作を処理するかを説明してください。

回答: JavaScriptはシングルスレッドですが、イベントループメカニズムを通じて非同期操作を処理します。

コンポーネント:

コールスタック: 同期コードを実行します（LIFO）
Web API: 非同期操作を処理します（setTimeout、fetch、DOMイベント）
コールバックキュー（タスクキュー）： Web APIからのコールバックを保持します
マイクロタスクキュー: Promiseコールバックを保持します（優先度が高い）
イベントループ: スタックが空の場合、キューからコールスタックにタスクを移動します

実行順序:

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// 出力：1、4、3、2
// 説明：
// - 同期コード（1、4）が最初に実行されます
// - マイクロタスク（Promise）はマクロタスクの前に実行されます
// - マクロタスク（setTimeout）は最後に実行されます

実行順序: コールスタック→マイクロタスクキュー→コールバックキュー（マクロタスク）

レア度: 一般的 難易度: 難

27. DOM要素を選択して操作するにはどうすればよいですか？

回答:

選択方法:

// 最新（推奨）
const element = document.querySelector('#myId');
const elements = document.querySelectorAll('.myClass');
const firstItem = document.querySelector('.list-item');

// レガシー（まだ有効）
const elem = document.getElementById('myId');
const elems = document.getElementsByClassName('myClass');
const tags = document.getElementsByTagName('div');

操作:

// コンテンツ
element.textContent = 'New text';
element.innerHTML = '<span>HTML content</span>';

// スタイリング
element.style.color = 'blue';
element.style.backgroundColor = '#eee';

// クラス
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('visible');
element.classList.contains('active');

// 属性
element.setAttribute('data-id', '123');
element.getAttribute('data-id');

// 要素の作成
const newDiv = document.createElement('div');
newDiv.textContent = 'Hello';
document.body.appendChild(newDiv);

レア度: 一般的 難易度: 簡単

28. イベント委譲について説明し、その有用性について説明してください。

回答: イベント委譲とは、イベントバブリングを利用して、複数のリスナーを子要素にアタッチするのではなく、単一のイベントリスナーを親要素にアタッチすることです。

委譲なし（非効率）：

document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleClick);
});

委譲あり（効率的）：

document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    handleClick(e);
  }
});

利点:

パフォーマンスの向上: 多くのリスナーではなく、単一のリスナー
動的な要素で動作: 後で追加されたアイテムを自動的に処理します
メモリ使用量の削減: イベントリスナーが少ない
よりクリーンなコード: イベント処理の一元化

使用例: アイテムを動的に追加/削除できるリスト（TODOリスト、ショッピングカート、コメントセクション）

レア度: 一般的 難易度: 中

29. イベントバブリングとは何ですか？伝播を停止するにはどうすればよいですか？

回答: イベントバブリングとは、子要素でトリガーされたイベントが、その祖先を通ってドキュメントルートまで「バブルアップ」することです。

3つのフェーズ:

キャプチャフェーズ: イベントは、ウィンドウからターゲットに移動します
ターゲットフェーズ: イベントはターゲット要素に到達します
バブリングフェーズ: イベントは、ターゲットからウィンドウにバブルアップします（デフォルト）

例:

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
document.getElementById('parent').addEventListener('click', () => {
  console.log('Parent clicked');
});

document.getElementById('child').addEventListener('click', (e) => {
  console.log('Child clicked');
  // イベントは親にバブルアップします
});
// ボタンをクリックすると、「Child clicked」と「Parent clicked」が記録されます
</script>

伝播の停止:

element.addEventListener('click', (e) => {
  e.stopPropagation();  // バブリングを停止します
  e.preventDefault();    // デフォルトの動作を防止します（フォームの送信、リンクのナビゲーション）
});

レア度: 一般的 難易度: 中

30. オブジェクトと配列の分割代入について説明してください。

回答: 分割代入は、配列から値、またはオブジェクトからプロパティを、個別の変数に抽出します。

配列の分割代入:

const colors = ['red', 'green', 'blue', 'yellow'];

const [first, second, ...rest] = colors;
// first = 'red'
// second = 'green'
// rest = ['blue', 'yellow']

// 要素をスキップ
const [primary, , tertiary] = colors;
// primary = 'red', tertiary = 'blue'

オブジェクトの分割代入:

const user = {
  name: 'Alice',
  age: 25,
  email: '[email protected]'
};

const { name, age, city = 'NYC' } = user;
// name = 'Alice'
// age = 25
// city = 'NYC' (デフォルト値)

// 変数の名前を変更
const { name: userName, age: userAge } = user;

// ネストされた分割代入
const { address: { street, zip } } = person;

関数のパラメータ:

function greet({ name, age = 18 }) {
  console.log(`Hello ${name}, age ${age}`);
}

greet({ name: 'Bob', age: 25 });

レア度: 一般的 難易度: 簡単-中

31. スプレッド演算子とレストパラメータについて説明してください。

回答:

スプレッド演算子（...） - イテラブルを展開します：

// 配列
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];  // [1, 2, 3, 4, 5]
const combined = [...arr1, ...arr2];

// オブジェクト（浅いコピー）
const user = { name: 'Alice', age: 25 };

目次

はじめに

HTMLの基礎 (7つの質問)

1. セマンティックHTML要素とは何ですか？また、なぜ重要ですか？

2. インライン要素、ブロック要素、インラインブロック要素の違いを説明してください。

3. HTMLにおけるvoid（自己終了）要素とは何ですか？

4. ウェブサイトをアクセシブルにするにはどうすればよいですか？アクセシビリティを向上させるHTML属性は何ですか？

5. フォームにおけるGETメソッドとPOSTメソッドの違いを説明してください。

6. <meta>タグの目的は何ですか？

7. <script>、<script async>、<script defer>の違いは何ですか？

CSSの基礎 (10個の質問)

8. CSSボックスモデルについて説明してください。

9. CSSの特異性とそれがどのように機能するかを説明してください。

10. Flexboxとは何ですか？また、いつ使用しますか？

11. CSS Gridとは何ですか？また、Flexboxとどのように異なりますか？

12. divを水平方向と垂直方向の中央に配置するにはどうすればよいですか？

13. CSSの配置について説明してください：static、relative、absolute、fixed、sticky

14. display: none、visibility: hidden、opacity: 0の違いは何ですか？

15. CSSの疑似クラスと疑似要素とは何ですか？例を挙げてください。

16. レスポンシブレイアウトを作成するにはどうすればよいですか？メディアクエリについて説明してください。

17. z-indexとは何ですか？また、どのように機能しますか？

JavaScriptの基礎 (15個の質問)

18. var、let、constの違いを説明してください。

19. クロージャーとは何ですか？また、実用的な例を挙げてください。

20. JavaScriptにおける==と===の違いを説明してください。

21. JavaScriptにおける巻き上げ（ホイスティング）とは何ですか？

22. thisキーワードについて説明し、アロー関数での違いを説明してください。

23. テンプレートリテラルとその利点とは何ですか？

24. Promiseとその3つの状態について説明してください。

25. async/awaitとは何ですか？また、どのようにコードの可読性を向上させますか？

26. イベントループについて説明し、JavaScriptがどのように非同期操作を処理するかを説明してください。

27. DOM要素を選択して操作するにはどうすればよいですか？

28. イベント委譲について説明し、その有用性について説明してください。

29. イベントバブリングとは何ですか？伝播を停止するにはどうすればよいですか？

30. オブジェクトと配列の分割代入について説明してください。

31. スプレッド演算子とレストパラメータについて説明してください。

次の面接は履歴書一つで決まる

この投稿を共有

実際に機能する週次のキャリアのヒント

実際に機能する週次のキャリアのヒント

関連投稿

ジュニアフロントエンド開発者向け面接質問：React、ツール、および高度なトピック

Node.js バックエンド開発者（ジュニア）面接対策：完全ガイド

ジュニアバックエンド開発者（Python）面接対策：完全ガイド

次の面接は履歴書一つで決まる

この投稿を共有

履歴書作成時間を90%短縮

6. `<meta>`タグの目的は何ですか？

7. `<script>`、`<script async>`、`<script defer>`の違いは何ですか？

14. `display: none`、`visibility: hidden`、`opacity: 0`の違いは何ですか？

17. `z-index`とは何ですか？また、どのように機能しますか？

18. `var`、`let`、`const`の違いを説明してください。

20. JavaScriptにおける`==`と`===`の違いを説明してください。

22. `this`キーワードについて説明し、アロー関数での違いを説明してください。