【JavaScript総合問題：全30問】

Javascriptの総合問題を30問用意しました。

演習問題

初級（1〜8）

問題1
id=”target” の要素のテキストを「動的な動作制御」に書き換えるJavaScriptコードを書いてください。

問題2
再代入できず、ブロックスコープを持つ変数 message を宣言して、「Hello」を代入するコードを書いてください。

問題3
Number・String・Objectを1つずつ変数に代入し、それぞれのtypeof結果をコンソールに表示するコードを書いてください。

問題4
if文で「xが10以上なら”OK”」と表示するコードを書いてください。

問題5
for文を使って1から5までの数字を順に出力するコードを書いてください。

問題6
引数nameを受け取り、「こんにちは、name」と表示する関数を定義してください。

問題7
関数の中で宣言した変数を関数の外から参照しようとするとエラーになることを確認できるコードを書いてください。

問題8
次の関数をアロー関数に書き換えてください。

function add(a, b) {
  return a + b;
}

中級（9〜24）

問題9
次のオブジェクトuserからnameを取り出して表示するコードを書いてください。

const user = { name: "太郎", age: 20 };

問題10
配列 [1, 2, 3, 4, 5] の中から偶数だけを抽出して表示するコードを書いてください。

問題11
同じ配列に対してmap()とforEach()をそれぞれ使い、両者の違いが分かるようなコードを書いてください（変換して新しい配列を作る処理と、ループするだけの処理）。

問題12
オブジェクト{ a: 1, b: 2 }をJSON文字列に変換してコンソールに表示するコードを書いてください。

問題13
DOMを使ってid=”title”の要素を取得し、そのテキストを「DOMから書き換えました」に変更するコードを書いてください。

問題14
クラス名「btn-primary」を持つ要素を取得するコードを書いてください。

問題15
idがtitleの要素の中身を「こんにちは」に書き換えるコードを書いてください。

問題16
新しいli要素を作り、ul要素（id=”menu”）に追加するコードを書いてください。

問題17
ボタンがクリックされたときに「クリック！」と表示するコードを書いてください。

問題18
addEventListenerを使って、ボタンがクリックされたときに「クリック！」と表示するコードを書いてください。

問題19
フォームに文字が入力されたとき、その内容をリアルタイムでコンソールに表示する処理を書いてください。

問題20
ul要素に1つだけclickイベントを登録し、その中でクリックされたli要素を判定してログを出すことで「イベントバブリング」を確認できるコードを書いてください。

問題21
動的に追加されたbutton要素のクリックを、親要素1つに登録したイベントで処理できるようにする（イベントデリゲーションを使う）コードを書いてください。

問題22
コールバック関数を受け取る関数doSomethingを定義し、呼び出し側で無名関数を渡して実行するコードを書いてください。

問題23
Promiseの3つの状態「pending」「fulfilled」「rejected」を配列に入れてコンソールに表示するコードを書いてください。

問題24
setTimeoutを使って「処理1」「処理2」「処理3」の実行順が分かるようにログを出すコードを書いてください。

上級（25〜30）

問題25
Promiseを返す関数fetchData()をawaitで実行し、取得した結果をコンソールに表示するコードを書いてください。

問題26
async/awaitを使った処理の中でエラーが発生したときに、try...catchでエラー内容をコンソールに表示するコードを書いてください。

問題27
ユーザー情報を取得したあとに、そのユーザーの投稿一覧も取得するという2段階の処理を、then()を複数回つないだPromiseチェーンで書いてください。

問題28
Webアプリで使う状態（ログインしているかどうか、カートの中身など）を1つのオブジェクトstateで管理し、関数からその状態を更新するコードを書いてください。

問題29
クロージャを使って、呼び出すたびに1ずつカウントアップして返す関数を作るコードを書いてください。

問題30
次の条件を満たすコードを書いてください。

• ボタンをクリックするとAPI（https://jsonplaceholder.typicode.com/users）からデータを取得
• 最初のユーザー名を画面に表示
• async/awaitを使用

---

【模範解答と解説】

問題1

document.getElementById("target").textContent = "動的な動作制御";

解説：DOM操作でテキストを書き換えることで「動的な動作制御」を示しています。

問題2

const message = "Hello";

解説：constは再代入不可でブロックスコープを持つ宣言方法です。

問題3

const num = 1;
const str = "text";
const obj = { key: "value" };

console.log(typeof num); // "number"
console.log(typeof str); // "string"
console.log(typeof obj); // "object"

解説：Objectだけが参照型で、他はプリミティブです。

問題4

if (x >= 10) {
  console.log("OK");
}

解説：条件がtrueのときだけ実行されます。

問題5

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

解説：1〜5を順に出力しています。

問題6

function greet(name) {
  console.log(`こんにちは、${name}`);
}

解説：テンプレートリテラルを使うと文字列結合が読みやすくなります。

問題7

function sample() {
  const inner = 123;
  console.log(inner);
}
sample();

// 関数の外からは参照できないことを確認
// console.log(inner); // ReferenceError

解説：関数スコープの変数は外から見えません。

問題8

const add = (a, b) => a + b;

解説：アロー関数なら短く書けます。

問題9

console.log(user.name);

解説：ドット記法でプロパティにアクセスしています。

問題10

const arr = [1, 2, 3, 4, 5];
const even = arr.filter((n) => n % 2 === 0);
console.log(even); // [2, 4]

解説：filter()で条件に合う要素だけ抽出しています。

問題11

const base = [1, 2, 3];

// mapは新しい配列を返す
const doubled = base.map((n) => n * 2);
console.log(doubled);

// forEachは返さずに処理するだけ
base.forEach((n) => {
  console.log("forEach:", n);
});

解説：mapは変換して返す、forEachは処理だけです。

問題12

const obj = { a: 1, b: 2 };
const json = JSON.stringify(obj);
console.log(json);

解説：オブジェクトをJSON文字列に変換しています。

問題13

const title = document.getElementById("title");
title.textContent = "DOMから書き換えました";

解説：DOMを「操作できるオブジェクト」として扱っています。

問題14

document.querySelector(".btn-primary");

解説：CSSセレクタで1件取得できます。

問題15

document.getElementById("title").textContent = "こんにちは";

解説：文字列だけならtextContentが安全です。

問題16

const li = document.createElement("li");
li.textContent = "新しい項目";
document.getElementById("menu").appendChild(li);

解説：作成→中身を入れる→親に追加、の順です。

問題17

const button = document.querySelector("button");
button.onclick = function () {
  console.log("クリック！");
};

解説：onclickプロパティでイベントを登録しています。

問題18

document.querySelector("button").addEventListener("click", () => {
  console.log("クリック！");
});

解説：addEventListenerなら複数登録も可能です。

問題19

const input = document.querySelector("input");
input.addEventListener("input", () => {
  console.log(input.value);
});

解説：入力のたびに現在値を取得しています。

問題20

const list = document.querySelector("ul");
list.addEventListener("click", (event) => {
  console.log("ulでclickを受け取りました:", event.target);
});

解説：子のクリックが親に伝わる＝バブリングです。

問題21

document.querySelector("ul").addEventListener("click", (e) => {
  if (e.target.matches("button")) {
    console.log("動的に追加されたボタンがクリックされました");
  }
});

解説：親に1つだけイベントを付ける「イベントデリゲーション」です。

問題22

function doSomething(callback) {
  console.log("前処理");
  callback();
}

doSomething(() => {
  console.log("これがコールバックです");
});

解説：あとから実行させたい処理を引数で渡します。

問題23

const states = ["pending", "fulfilled", "rejected"];
console.log(states);

解説：Promiseはこの3状態で管理されます。

問題24

console.log("処理1");
setTimeout(() => console.log("処理2"), 1000);
console.log("処理3");

解説：非同期なので「1→3→2」の順になります。

問題25

async function main() {
  const data = await fetchData();
  console.log(data);
}
main();

解説：awaitでPromiseの完了を待っています。

問題26

async function run() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error("エラーが発生しました:", error);
  }
}
run();

解説：async/awaitでもtry…catchで例外が書けます。

問題27

fetch("/api/user")
  .then((res) => res.json())
  .then((user) => {
    console.log("ユーザー取得", user);
    return fetch(`/api/post?user=${user.id}`);
  })
  .then((res) => res.json())
  .then((posts) => {
    console.log("投稿も取得", posts);
  })
  .catch((err) => {
    console.error("どこかで失敗したらここで処理", err);
  });

解説：前のthenの結果を次のthenに渡すためにチェーンします。

問題28

const state = {
  isLoggedIn: false,
  cart: [],
};

function login() {
  state.isLoggedIn = true;
}

function addToCart(item) {
  state.cart.push(item);
}

解説：アプリの状態を1か所で管理するイメージです。

問題29

function createCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

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

解説：外側の変数を内側の関数が覚えている=クロージャです。

問題30

async function fetchUser() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await res.json();
  const firstUserName = users[0].name;

  const nameEl = document.getElementById("user-name");
  nameEl.textContent = firstUserName;
}

document.querySelector("button").addEventListener("click", fetchUser);

解説：ボタンクリック→API取得→DOM表示の流れをasync/awaitで書いています。