【JavaScript面接対策】頻出20問＋Macでの開発環境Tips🎁

こんにちは！技術面接シリーズ第2弾として、今回は JavaScriptの定番質問20問＋コードでの解説 をまとめました。最後には macOS 上で Docker を使わずに環境構築できる ServBay の実用Tips もあります。

面接直前に「そういえば…」と焦らないよう、サクッと確認できる内容になっています。
未経験からエンジニアを目指す方や、面接に備えたい方に向けた記事ですので、ぜひ一読ください✨

---

1. IIFE（Immediately Invoked Function Expression）とは？

即時実行関数の略で、定義後にすぐ実行される関数です。グローバルスコープを汚さず済むため重宝されます。

(function() {
  let msg = "Hello IIFE!";
  console.log(msg);
})();

アロー関数版もOK：

(() => console.log("Arrow IIFE"))();

---

2. JavaScript のループ構文一覧

• for（標準ループ）
• while
• do...while
• forEach
• for...in
• for...of

const nums = [10, 20, 30];
for (let i = 0; i < nums.length; i++) console.log(nums[i]);
nums.forEach(n => console.log(n));
for (let n of nums) console.log(n);

---

3. 変数の Hoisting とは？

変数宣言や関数宣言がスコープの先頭に「巻き上げ」られる挙動を指します。

console.log(greet()); // OK
function greet() { return "Hello"; }

console.log(a); // undefined
var a = 5;
console.log(b); // ReferenceError
let b = 10;

---

4. ES6 の主な新機能

• let / const
• アロー関数 () => {}
• テンプレート文字列 `Hello ${name}`
• 分割代入、Promise、import/export、class など

const person = { name: "Alice", age: 30 };
const { name } = person;
console.log(`こんにちは、${name}さん`);

---

5. JavaScript の基本データ型

• プリミティブ型：Number、String、Boolean、BigInt、Symbol、Null、Undefined
• 参照型：Object

console.log(typeof null); // "object"

---

6. イベントループの仕組み

JavaScript はシングルスレッドですが、イベントループと非同期キューで非同期処理を実現します。

console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
Promise.resolve().then(() => console.log("Promise"));
console.log("End");

【出力順】Start → End → Promise → Timeout

---

7. 閉包（Closure）の概要

関数が作られたスコープを覚えている仕組みです。

function outer() {
  let x = 10;
  return function inner() {
    console.log(x);
  };
}
const fn = outer();
fn(); // 10

---

8. var / let / const 違い表

宣言方法	スコープ	再定義	再代入
var	関数	可	可
let	ブロック	不可	可
const	ブロック	不可	不可（但し中のプロパティは変更可）

---

9. map, filter, reduce の使い方

const nums = [1, 2, 3, 4];
const doubles = nums.map(n => n * 2);
const evens = nums.filter(n => n % 2 === 0);
const sum = nums.reduce((acc, n) => acc + n, 0);

---

10. Prototype（プロトタイプ）の説明

JavaScript の継承モデルはプロトタイプチェーンで実現されます。

const obj = {};
console.log(obj.toString()); // Object.prototype 由来

---

11. Getter / Setter の使い方

const obj = {
  _x: 0,
  get x() { return this._x; },
  set x(v) { this._x = v; }
};
obj.x = 5;
console.log(obj.x); // 5

---

12. Callback と Promise の違い

Callback は関数を渡して非同期を制御し、Promise は状態管理とチェーンが可能です。

new Promise(resolve => {
  setTimeout(() => resolve("done"), 100);
}).then(console.log);

---

13. async / await の基本

Promise をより直感的に扱える文法糖です。

async function fetchData() {
  const res = await fetch("/api/data");
  const data = await res.json();
  console.log(data);
}

---

14. null / undefined / 未宣言変数 の違い

• null → 意図的に「空」
• undefined → 宣言済だが未代入
• 未宣言変数 → ReferenceError

---

15. Singleton（シングルトン）パターン

単一インスタンスを保持し、再利用可能なデザインパターンです。

const Singleton = (() => {
  let instance;
  return {
    getInstance: () => {
      if (!instance) instance = {};
      return instance;
    }
  };
})();

---

16. this の挙動説明

• 通常関数 → 呼び出し方次第で異なる
• アロー関数 → 定義時スコープの this を保持

const obj = { val: 1, print() { console.log(this.val); } };
obj.print(); // 1

---

17. OOP vs FP（面向对象 vs 関数式）

• OOP：状態と振る舞いをカプセル化
• FP：関数を第一級とし、不変性を重視

---

18. 高階関数とは？

関数を引数または戻り値とする関数のことです。

function twice(fn, x) { return fn(fn(x)); }

---

19. オブジェクトリテラルとクラスの違い

• リテラル → 単一オブジェクト
• クラス → 複数インスタンス生成向け

class Person {
  constructor(name) { this.name = name; }
  greet() { return `Hello, ${this.name}`;}
}

---

20. Bonus 🎁：Docker不要！Mac 開発環境は ServBay でラクラク

Mac で PHP・MySQL・Node.js 等の環境構築に時間がかかっていませんか？
そんなとき、ServBay が超便利です。

• macOSネイティブ、軽量で立ち上がりが速い
• GUIでクリック操作だけで環境構築
• SSL付きのローカル環境も簡単
• 複数のサービス／バージョンを手軽に切り替えられます

面接対策や個人開発、複数案件に関わるときに本当に助かりますよ🎯

---

🏁 おわりに

面接では予想外の質問で焦ることもありますが、事前準備があれば自信を持って答えられます。
この記事が、JavaScriptの基礎を整理したい方や本番に備えたい方のサポートになれば幸いです。

ご指摘・ご意見・「ここがもっと知りたい」などコメントいただけると嬉しいです🙏
最後までお読みいただき、ありがとうございました🍀

---

タグ：
#JavaScript #面接対策 #未経験エンジニア #Web開発 #macOS開発環境

---