【JavaScript総合問題：全30問】

2025-07-28

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

演習問題

初級（1〜8）

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

表示例：動的な動作制御

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

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

number
string
object

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

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

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

表示例：こんにちは、太郎

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

表示例：ReferenceError: inner is not defined

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

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

中級（9〜24）

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

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

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

表示例：[2, 4]

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

表示例：
map() の場合：[2, 4, 6]

forEach() の場合：
forEach: 1
forEach: 2
forEach: 3

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

表示例：{“a”:1,”b”:2}

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

表示例：DOMから書き換えました

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

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

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

表示例：
項目1
項目2
新しい項目　←　追加される

問題17
onclickプロパティを使って、ボタンがクリックされたときに「クリック！」と表示するコードを書いてください。
※ ボタンをクリックするまで何も表示されません。

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

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

1文字目：a
→ コンソール：

次に ab と入力
→ コンソール：

a
ab

さらに abc
→ コンソール：

a
ab
abc

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

もし HTML がこうだった場合は以下のとおりです。

<ul>
  <li>A</li>
  <li>B</li>
</ul>

<li>B</li> をクリックすると、コンソールには例えばこんな感じで表示されます。

表示例：ulでclickを受け取りました: <li>B</li>

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

ul にイベントを仕込んでいるのでボタンがあとから追加されても反応（イベント委譲）します。
クリックした要素が <button> でなければ何も表示されません。

表示例：動的に追加されたボタンがクリックされました

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

// 呼び出し側

doSomething(() => {
   // 処理を記述
});

表示例：

前処理
これがコールバックです

問題23
配列の各要素は、ステータス名と**タイムスタンプ（ミリ秒）**がセットになったオブジェクトです。

const states = [
  { state: "pending", time: 120 },
  { state: "fulfilled", time: 300 },
  { state: "rejected", time: 180 },
  { state: "pending", time: 90 },
];

抽出したステータスを、time が大きい順にソートしてください。

// 表示例：

[
  { state: "fulfilled", time: 300 },
  { state: "rejected", time: 180 },
  { state: "pending", time: 120 },
  { state: "pending", time: 90 }
]

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

表示例：

処理1
処理3
処理2

上級（25〜30）

問題25
fetchData が非同期処理として 1 秒後に { id: 1, name: "Alice", role: "admin" } を返す仕組みと、main 関数内で await を用いてその返却値を受け取り出力結果をコンソールに表示するコードを書いてください。

取得したデータ: { id: 1, name: ‘Alice’, role: ‘admin’ }

問題26
run 関数内部でのasync/awaitを使った非同期処理の待機、成功時の値の取得とログ出力を行います。また処理の中でエラーが発生したときに、try...catchでエラー内容「”エラーが発生しました”」をコンソールに表示するコードを書いてください。成功時の表示データ（data）は任意です。

成功時 → console.log(data) が表示される
失敗時 → console.error("エラーが発生しました:", error) が表示される

問題27
ユーザー情報取得の非同期処理からその結果を利用した投稿データの追加取得、さらにそれら一連の Promise チェーンにおける戻り値の伝播と catch によるエラーハンドリングを作成します。ユーザー情報を取得したあとに、そのユーザーの投稿一覧も取得するという2段階の処理を、then()を複数回つないだPromiseチェーンで書いてください。

成功時表示例：

ユーザー取得 { id: 1, name: "Taro" }
投稿も取得 [
  { id: 10, title: "記事1" },
  { id: 11, title: "記事2" }
]

失敗時表示例：

ユーザー取得 { id: 1, name: "Taro" }
どこかで失敗したらここで処理 Error: 500

問題28
Webアプリで使う状態（ログインしているかどうか、カートの中身など）を 1 つのオブジェクト state で管理します。次のように、ボタンをクリックしたときに state が更新され、その更新結果が画面上にも反映されるようにしてください。

① 「ログイン」ボタンを押すと

state.isLoggedIn を true にする。
画面の <p id="loginStatus"> に「ログイン済み」と表示する。

② 「カートに追加」ボタンを押すと

引数として渡された商品名（例：「ItemA」）を state.cart に追加する。
画面の <ul id="cartList"> に、追加された商品を <li> として表示する。

③ state オブジェクトの更新は

以下は実行結果のイメージです。

▼ 最初の画面

未ログイン
（カートは空）

▼ 「ログイン」ボタンを押すと

ログイン済み

▼ 「カートに ItemA を追加」ボタンを押すたびに

1回目：

ログイン済み
ItemA

2回目：

ログイン済み
ItemA
ItemA

state.cart には：

["ItemA", "ItemA"]

問題29
createCounter が返す関数がどのようにして count の値を保持し続け、counter() を実行するたびに 1, 2 とインクリメントされた結果が返されるのかを、クロージャを使って、呼び出すたびに1ずつカウントアップして返す関数を作るコードを書いてください。以下作成におけるポイントです。

createCounterで定義したcount は、createCounter が終わった後でも消えない。
返された関数がcount を参照できるため。
createCounter() の戻り値は関数。
その関数（counter）を呼ぶと count が増える。
通常の関数は毎回同じ動きしかしないが、クロージャになると「前回の状態」を覚えている。
JavaScript には private がないが、クロージャを使うと実質的な private 変数が作れる。

表示例：

1
2

問題30
button 要素のクリックイベントを契機に実行される fetchUser 関数が、fetch による非同期リクエストの完了から JSON の解析、先頭要素の name 抽出、id="user-name" を持つ要素への textContent 代入に至るまでの一連の処理手順とそれぞれの DOM API がコード内で果たす役割を、コードの実行順序に従って正確に説明してください。次の条件を満たすコードを書いてください。

ボタンをクリックすると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 = [
  { state: "pending", time: 120 },
  { state: "fulfilled", time: 300 },
  { state: "rejected", time: 180 },
  { state: "pending", time: 90 },
];

const sorted = states.sort((a, b) => b.time - a.time);
console.log(sorted);

解説：降順にソートします。

問題24

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

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

問題25

async function fetchData() {
  // 非同期処理の例：1秒後に具体的なオブジェクトを返す
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        id: 1,
        name: "Alice",
        role: "admin",
      });
    }, 1000);
  });
}

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

<p id="loginStatus">未ログイン</p>
<button id="loginBtn">ログイン</button>

<ul id="cartList"></ul>
<button id="addItemBtn">カートに ItemA を追加</button>

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

  function login() {
    state.isLoggedIn = true;
    document.getElementById("loginStatus").textContent = "ログイン済み";
  }

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

    const li = document.createElement("li");
    li.textContent = item;
    document.getElementById("cartList").appendChild(li);
  }

  document.getElementById("loginBtn").addEventListener("click", () => {
    login();
  });

  document.getElementById("addItemBtn").addEventListener("click", () => {
    addToCart("ItemA");
  });
</script>

解説：アプリの状態を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で書いています。

同じカテゴリーの記事

【JavaScript総合問題：全30問】

演習問題

初級（1〜8）

中級（9〜24）

上級（25〜30）

【模範解答と解説】

同じカテゴリーの記事

変数とデータ型（let, const, プリミティブ型）

JavaScriptのオブジェクト：作成と操作

JavaScriptの関数：定義と呼び出し

DOM操作：要素の取得・変更・追加・削除