ホーム

プログラミング学習公開 2026.09.23

JavaScript練習問題10問（初心者向け）｜解答・実行結果つき、受講ログで詰まりやすい単元を多めに出題

執筆・監修: 徐聖博／株式会社シンシア代表取締役社長

JavaScriptの練習問題10問。全問に期待する出力と解答例つき。ナミノリの受講ログで再挑戦が多かった型変換（70%）と繰り返し（75%）に多めに配分し、間違えた問題ごとに戻る先を示します。確認テストで見つかった設問の不備と、その訂正も載せています。

JavaScript練習問題10問｜詰まりやすい単元に多めに配分しました

変数、条件分岐、繰り返しを読み終えたら、次は手を動かす番です。ここでは10問を用意しました。すべてに期待する出力と解答例を付けています。解答を見るのに会員登録は要りません。

解き方はひとつだけ決めてください。実行する前に、出力を予測して1行書く。 当たったら次へ。外れたら、なぜ外れたかを一文で書く。それだけです。

問題の配分は、受講ログの再挑戦率で決めた

10問を均等に並べてはいません。どこに何問置くかは、ナミノリの受講ログを見て決めました。

ナミノリの初級講座は各レクチャーに確認テストがあり、何回目で合格したかが記録に残ります。Ruby初級とJavaScript初級で同じ単元を扱う回を合算すると、次のようになりました。

単元	完了した人	2回以上かかった人	この記事の問題
四則演算	26人	10人（38%）	問1・問4
型変換	23人	16人（70%）	問2・問10
変数と条件分岐	24人	7人（29%）	問3
繰り返し	20人	15人（75%）	問5〜問9
関数（定義と呼び出し）	21人	4人（19%）	問8〜問10
関数（後半：余り・長さ・比較）	26人	11人（42%）	問4

全レクチャーの平均は30.1%（完了901件中271件が2回以上）です。

数字が高いのは型変換と繰り返しでした。そこで10問のうち半分の5問を、繰り返しを使う問題にしています。

関数は見方が分かれます。関数を定義して呼ぶ回は19%で、平均より低い数字でした。一方、後半の回は42%に上がります。後半の確認テストには、15 % 4 の余り、文字列の長さ、>= を使った比較が出てきます。変数の記事やif文の記事で見たのと同じく、単体の文法より、組み合わさったところで数字が上がっています。

繰り返しの75%について、ひとつ訂正があります

この記事を作るために確認テストを読み直したところ、繰り返しの回に設問の不備が見つかりました。

Ruby初級の「繰り返し」の回で、3問のうち1問は、正解とされていた選択肢が実際の動作と違っていました。ループの中で変数が増えないため、本当は同じ値を出し続けて終わらないコードだったのです。JavaScript初級の「様々な繰り返し」の回にも、同じ種類の不備が1問ありました。

どちらも2026年9月23日に修正しています。75%という数字には、この不備のせいで不合格になった分が含まれている可能性があります。繰り返しが難しい単元であること自体は変わりませんが、数字をそのまま「難しさ」と読むことはできません。for文と配列の記事にも同じ注記を加えました。

ひとつ言えるのは、教材を作る側でも、ループ変数の更新は書き忘れるということです。問5〜問9を解くときは、そこを必ず見てください。

※ 集計は2026年9月23日時点。完了したレクチャーのみが対象で、母数は各20〜26人と小さい数字です。分かるのは「どこで再挑戦が多いか」までで、「なぜか」は分かりません。

解く前の準備

ブラウザで開発者ツールを開き（Windowsは F12、Macは option + command + I）、「Console」タブに貼り付けて Enter で実行します。

各問題のコードは { } で囲んでいます。同じ名前の変数を別の問題で使っても、ぶつからないようにするためです。囲まずに2問続けて貼ると、const の二重宣言でエラーになります。

問1：合計を求める（四則演算）

問題：単価120円の商品を3個買ったときの合計を表示してください。続けて、10 / 2 + 3 * 2 の結果を予測してから実行してください。

期待する出力：360、11

解答例

{
  const price = 120;
  const count = 3;
  console.log(price * count);
  console.log(10 / 2 + 3 * 2);
}

10 / 2 + 3 * 2 は、左から順に計算すると16になりそうに見えます。実際は掛け算と割り算が先なので、5 + 6 で11です。これは四則演算の回の確認テストにそのまま出てくる式です。左から計算したいときは (10 / 2 + 3) * 2 と括弧を付けます（結果は16）。

間違えたら：演算の順番は数学と同じです。括弧で意図をはっきりさせる癖をつけてください。

問2：文字列の数字を足す（型変換）

問題：const input = "20"; があります。input に5を足して、数値の25を表示してください。

期待する出力：25

解答例

{
  const input = "20";
  console.log(input + 5);
  console.log(Number(input) + 5);
}

1行目の出力は 205 です。文字列に + を使うと、足し算ではなく連結になります。入力欄から受け取った値は、見た目が数字でも文字列です。Number() で変換してから計算します。

間違えたら：変数とデータ型の記事に戻ってください。型変換は再挑戦70%で、繰り返しと並んで数字の高い単元です。

問3：送料を判定する（条件分岐）

問題：合計が5000円以上なら送料0円、それ未満なら500円を返す関数 shippingFee を作り、4999・5000・5001で試してください。

期待する出力：500、0、0

解答例

{
  function shippingFee(total) {
    if (total >= 5000) {
      return 0;
    }
    return 500;
  }
  console.log(shippingFee(4999));
  console.log(shippingFee(5000));
  console.log(shippingFee(5001));
}

境目（5000）とその前後の3つを試すのが要点です。>= を > と書き間違えると、5000のときだけ 500 になります。4999と5001だけを試していると、この誤りには気づけません。

間違えたら：if文の記事の「境界を必ず3つ試す」に戻ってください。

問4：偶数か調べる（余りの計算）

問題：整数を受け取り、偶数なら true、奇数なら false を返す関数 isEven を作り、8と7で試してください。

期待する出力：true、false

解答例

{
  function isEven(value) {
    return value % 2 === 0;
  }
  console.log(isEven(8));
  console.log(isEven(7));
}

% は割り算の余りを求めます。2で割って余りが0なら偶数です。10 % 3 は 1、15 % 4 は 3 になります。

関数の後半の回（再挑戦42%）と四則演算の回（38%）の確認テストには、どちらもこの % が出てきます。

間違えたら：% の前後の数を変えて、余りを5回ほど手で計算してから実行してください。

問5：学習時間の合計を求める（繰り返し）

問題：1週間の学習時間 [10, 20, 15]（分）の合計を、for...of で求めてください。配列を空 [] にしたときの結果も予測してください。

期待する出力：45（空配列なら 0）

解答例

{
  const minutes = [10, 20, 15];
  let total = 0;
  for (const m of minutes) {
    total += m;
  }
  console.log(total);
}

let total = 0; をループの外に置くのが要点です。中に置くと、毎回0に戻ってしまいます。空配列ではループが一度も回らないので、初期値の 0 がそのまま出ます。

間違えたら：for文と配列の記事に戻ってください。

問6：条件に合う件数を数える（繰り返し＋条件）

問題：テストの点数 [40, 80, 65, 90] のうち、80点以上の人数を数えてください。

期待する出力：2

解答例

{
  const scores = [40, 80, 65, 90];
  let count = 0;
  for (const s of scores) {
    if (s >= 80) {
      count += 1;
    }
  }
  console.log(count);
}

よくある間違いは count += s; と書くことです。これだと80点以上の点数の合計（170）になります。数えるときは1を足す、合計するときは値を足す。足しているものが違います。

80ちょうどを数えているかも確かめてください。> にすると結果は 1 になります。問3と同じ境界の話です。

間違えたら：ループの中で console.log(s, count); を書いて、1周ごとの値を見てください。

問7：条件に合う値だけを取り出す（繰り返し＋配列）

問題：[5, 12, 3, 18] から10以上の値だけを取り出した新しい配列を作ってください。元の配列は変えないこと。

期待する出力：[12, 18]

解答例

{
  const values = [5, 12, 3, 18];
  const result = [];
  for (const v of values) {
    if (v >= 10) {
      result.push(v);
    }
  }
  console.log(result);
  console.log(values);
}

2行目の出力は [5, 12, 3, 18] のままです。元を変えずに、新しい配列に push で追加しています。同じことは values.filter((v) => v >= 10) の1行でも書けます。まず for で書けるようになってから、filter に置き換えると理解が崩れません。

間違えたら：for文と配列の記事の「件数を数える・絞り込む」に戻ってください。

問8：平均を求め、空の配列も扱う（繰り返し＋関数）

問題：数値の配列を受け取り、平均を返す関数 average を作ってください。空の配列のときは null を返すこととします。

期待する出力：average([10, 20, 30]) は 20、average([]) は null

解答例

{
  function average(values) {
    if (values.length === 0) {
      return null;
    }
    let total = 0;
    for (const v of values) {
      total += v;
    }
    return total / values.length;
  }
  console.log(average([10, 20, 30]));
  console.log(average([]));
}

空の配列のチェックを外すと、0 / 0 で NaN が返ります。空の配列は例外ではなく、普通に起こります。まだ1件も記録がない、検索結果が0件、などです。

ここで0ではなく null にしたのは、「0点」と「データなし」を区別するためです。何を返すかは用途で決めます。

間違えたら：関数の最初で「こういう入力は扱わない」を先に return する書き方に慣れてください。

問9：いちばん長い学習時間を求める（繰り返し＋比較）

問題：数値の配列から最大値を返す関数 maximum を作ってください。空の配列は null とします。[-5, -2] のときも正しく動くこと。

期待する出力：maximum([10, 35, 20]) は 35、maximum([]) は null、maximum([-5, -2]) は -2

解答例

{
  function maximum(values) {
    if (values.length === 0) {
      return null;
    }
    let largest = values[0];
    for (const v of values) {
      if (v > largest) {
        largest = v;
      }
    }
    return largest;
  }
  console.log(maximum([10, 35, 20]));
  console.log(maximum([]));
  console.log(maximum([-5, -2]));
}

let largest = 0; から始めると、[-5, -2] の結果が 0 になります。配列に存在しない値です。最初の要素から始めるのが正解です。

間違えたら：問5と同じく、1周ごとに console.log(v, largest); で値を確かめてください。

問10：入力欄の値を確かめる（型変換＋条件＋関数）

問題：入力欄から受け取った文字列を、学習時間（分）として受け付ける関数 parseMinutes を作ってください。空欄でなく、0以上の整数ならその数値を返し、それ以外は null を返します。

期待する出力："15" → 15、"" → null、"-1" → null、"2.5" → null、"abc" → null

解答例

{
  function parseMinutes(raw) {
    if (raw.trim() === "") {
      return null;
    }
    const value = Number(raw);
    if (!Number.isInteger(value) || value < 0) {
      return null;
    }
    return value;
  }
  console.log(parseMinutes("15"));
  console.log(parseMinutes(""));
  console.log(parseMinutes("-1"));
  console.log(parseMinutes("2.5"));
  console.log(parseMinutes("abc"));
}

最初の空欄チェックが要る理由は、Number("") がエラーではなく 0 になるからです。チェックを外すと、何も入力していないのに「0分」として受け付けてしまいます。

"abc" は Number() で NaN になり、Number.isInteger(NaN) が false なので弾かれます。

一方で、"1e2" のような書き方は100として受け付けます。数字だけに制限したいなら、条件を追加する必要があります。書いた条件で防げることと、防げないことを分けて説明できるのが、この問題のゴールです。

間違えたら：型変換（問2）と条件分岐（問3）が同時に出てくる問題です。どちらで詰まったかを分けて、先にそちらへ戻ってください。

解き終わったら：戻る先の一覧

外れた問題	戻る先
問1・問4	演算の順番と余り。数を変えて手で計算してみる
問2・問10	変数とデータ型の記事
問3・問6	if文の記事（境界値テスト）
問5〜問9	for文と配列の記事