JavaScript無料練習問題｜初心者向け基礎から応用まで20問解説付き

目次

1. JavaScript 練習問題でスキルアップする理由とは？
   • JavaScriptを効率よく学習するために練習問題が必要な理由を解説します。
2. 【初級編】JavaScriptの基本文法をマスターする練習問題
   • 変数、演算子、条件分岐など、基礎中の基礎を固める問題集です。
3. 【中級編】条件分岐とループを使った実践問題
   • if文やfor文、while文を駆使して、ロジックを組み立てる問題に挑戦しましょう。
4. 【上級編】関数・オブジェクト操作で理解を深める応用問題
   • 関数の作成やオブジェクトの操作を通して、JavaScriptの応用力を高めます。
5. 解答例と詳しい解説｜コードの理解を深めよう
   • 問題ごとに解答と解説を掲載。なぜこの書き方なのか？を理解できます。
6. JavaScript練習問題を効果的に解く3つのコツ
   • 学習効率を高めるための「手を動かす」「コードを繰り返す」などのコツを紹介。
7. まとめ｜次に挑戦すべきJavaScriptの学習ステップ
   • 次のステップとして「DOM操作」や「非同期処理」への学習をおすすめします。

1. JavaScript 練習問題の目的と必要性

JavaScriptを学び始めた初心者の方は、実際に手を動かしてコードを書くことが最も効果的な学習方法です。本記事では、基礎から応用まで練習問題を通じてJavaScriptの理解を深めるサポートをします。

初級編：基本文法 (1〜7問)

1. 変数の宣言

「変数 message に “Hello, JavaScript!” を代入し、コンソールに表示してください。」

let message = "Hello, JavaScript!";
console.log(message);

問題2: 四則演算

「2つの変数 a と b に数値を代入し、足し算・引き算・掛け算・割り算の結果をコンソールに表示してください。」

let a = 10;
let b = 2;
console.log(a + b, a - b, a * b, a / b);

3. データ型の確認

「変数 num に数値 5、text に文字列 “JavaScript” を代入し、各データ型を確認してください。」

let num = 5;
let text = "JavaScript";
console.log(typeof num, typeof text);

4. 条件分岐 (if文)

「score が80以上なら “合格”、それ未満なら “不合格” と表示してください。」

let score = 85;
if (score >= 80) {
  console.log("合格");
} else {
  console.log("不合格");
}

5. 繰り返し処理 (for文)

「1から5までの数値を順に表示してください。」

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

6. 配列の操作

「配列 fruits に “apple”, “banana”, “grape” を追加し、すべて表示してください。」

let fruits = ["apple", "banana", "grape"];
console.log(fruits);

7. 関数の作成

「引数に渡した数値を2倍にして返す関数 double を作成してください。」

function double(x) {
  return x * 2;
}
console.log(double(5));

中級編：条件分岐とループ (8〜14問)

8. 奇数・偶数の判定

「数値が奇数なら “奇数”、偶数なら “偶数” と表示してください。」

let num = 4;
if (num % 2 === 0) {
  console.log("偶数");
} else {
  console.log("奇数");
}

9. while文の利用

「1から5までの数値を while文を使って表示してください。」

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

10. 配列のループ処理

「配列 numbers = [1, 2, 3, 4, 5] をループで順番に表示してください。」

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num));

11. 三項演算子の利用

「age が20以上なら “大人”、それ未満なら “子供” と表示してください。」

let age = 18;
console.log(age >= 20 ? "大人" : "子供");

12. 配列から最大値を探す

「配列 numbers = [10, 20, 30, 5, 25] の最大値を表示してください。」

let numbers = [10, 20, 30, 5, 25];
console.log(Math.max(...numbers));

13. オブジェクトの利用

「オブジェクト person に name と age を追加し、表示してください。」

let person = { name: "Taro", age: 25 };
console.log(person);

14. フィルタリング処理

「配列 numbers = [1, 2, 3, 4, 5] から偶数だけを取り出して表示してください。」

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);

上級編：関数とオブジェクト応用 (15〜20問)

15. 配列の合計値

「配列 numbers = [1, 2, 3, 4, 5] の合計値を求めてください。」

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);

17. 関数を返す関数

「関数 createMultiplier を作成し、引数に渡した数値で掛け算する関数を返してください。」

function createMultiplier(factor) {
  return function(x) {
    return x * factor;
  };
}
let double = createMultiplier(2);
console.log(double(5));

18. オブジェクトのメソッド

「オブジェクト calculator に add メソッドを作成し、2つの数値を足し算してください。」

let calculator = {
  add: function(a, b) {
    return a + b;
  }
};
console.log(calculator.add(3, 5));

19. 配列の並び替え

「配列 numbers = [5, 2, 8, 1, 3] を昇順に並び替えて表示してください。」

let numbers = [5, 2, 8, 1, 3];
console.log(numbers.sort((a, b) => a - b));

20. クラスの利用

「Person クラスを作成し、name プロパティと greet メソッドを追加してください。」

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}
let person = new Person("Taro");
person.greet();

練習問題を効果的に解くコツ

1. エディタを使って実際に書く（VSCodeやCodePenを活用）
2. エラーが出たらすぐに解消する
3. 反復して解くことで記憶に定着させる

まとめと次のステップ

この記事で学んだ内容を基に、次は「JavaScript DOM操作」や「非同期処理（Promise, async/await）」に挑戦しましょう。さらに実践的なコードを書いて、JavaScriptスキルを磨いてください！

関連リンク：

• JavaScript チュートリアル 初心者向け
• HTMLとCSSを組み合わせた練習問題