JavaScript無料練習問題集｜初心者から中級者まで学べる実践課題

JavaScript練習問題でスキルを磨こう

JavaScriptは、ウェブ開発において欠かせないプログラミング言語です。しかし、書籍やオンライン講座で学んだ内容を実際に使うには、手を動かして練習することが重要です。本記事では、初心者から中級者までを対象としたJavaScript練習問題を用意しました。これらの問題を通じて、基礎知識を確認し、実践力を養うことができます。

JavaScriptの練習問題に挑戦してスキルアップ！

JavaScriptはWeb開発の根底を支える重要なプログラミング言語です。しかし、学習を始めたばかりの人にとっては、どこから覚えていいかはっきりしないことも多いでしょう。

この記事では、実際に手を動かしながらJavaScriptを学ぶための「練習問題」を紹介します。初心者の方から、中継者までが楽しめる問題集ですので、ぜひ挑戦してみてください。

なぜ練習問題が大切か

JavaScriptを覚えるときに、単に文法や構文を学習するだけでは不十分です。実際に問題を解く事で、言語の機能や実用性を深く理解できます。また、問題解決力やロジックを導く力が養われます。そして、何度も挑戦することで、自分の実力に自信が持てるようになります。

このページでは、そんなJavaScriptの力を上げるための練習問題を一覧にしています。言語を始めて学ぶ人にとっても、中継者にとっても有益な内容を提供しています。

この練習問題集は、以下のような方に役立ちます：

• JavaScriptの基礎を復習したい初心者
• 実践的なスキルを磨きたい中級者
• コーディング面接の準備をしている方

練習問題 1: FizzBuzz判定関数を作成する

問題内容

入力された数値が以下の条件に基づいて判定されるJavaScriptの関数を作成してください。

条件

1. 数値が3の倍数の場合、”Fizz”と出力する。
2. 数値が5の倍数の場合、”Buzz”と出力する。
3. 数値が3と5の両方の倍数の場合、”FizzBuzz”と出力する。
4. 上記のいずれにも該当しない場合、その数値自体を出力する。
5. 1から100までの数値を判定して出力するには、forループとFizzBuzz関数を組み合わせて実装してください。

ヒント

• モジュロ演算子（%）を使用して、数値が特定の数で割り切れるかどうかを判定します。
• 条件を複数組み合わせる際には、&&（論理AND演算子）を使用します。

練習問題2: フィボナッチ数列の生成

問題内容

指定された項数までのフィボナッチ数列を配列で返す関数を作成してください。

ヒント

• 配列を用いて数列を格納します。
• 初期値として[0, 1]を用意してください。

練習問題3: 配列内の重複要素を取り除く

問題内容

与えられた配列から重複する要素を取り除き、重複のない配列を返す関数を作成してください。

ヒント

• Setオブジェクトを使用します。
• ES6以降のスプレッド構文を利用すると便利です。

練習問題4: タイマー機能の実装

問題内容

3秒ごとにコンソールに”Hello, JavaScript!”と表示するタイマーを作成してください。ただし、10秒後にタイマーを停止させます。

ヒント

• setIntervalとclearIntervalを使用します。

練習問題5: DOM操作の基礎

問題内容

HTMLのボタンをクリックしたときに、背景色をランダムに変更する機能を実装してください。

ヒント

• JavaScriptでイベントリスナーを設定します。
• 背景色のランダム化にはMath.random()を使用します。

まとめ

JavaScriptを学ぶ上で、練習問題に取り組むことは欠かせません。本記事で紹介した問題を通じて、自信を持ってコードを書けるようになりましょう！また、他の問題に挑戦したい場合は、以下のリンクから関連するトピックをご覧ください。

解答例

function fizzBuzz(number) {
  if (number % 3 === 0 && number % 5 === 0) {
    console.log("FizzBuzz");
  } else if (number % 3 === 0) {
    console.log("Fizz");
  } else if (number % 5 === 0) {
    console.log("Buzz");
  } else {
    console.log(number);
  }
}

// 1から100までの数をFizzBuzzで判定して出力
for (let i = 1; i <= 100; i++) {
  fizzBuzz(i);
}

function generateFibonacci(n) {
  const fib = [0, 1];
  for (let i = 2; i < n; i++) {
    fib.push(fib[i - 1] + fib[i - 2]);
  }
  return fib;
}
console.log(generateFibonacci(10)); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

function removeDuplicates(arr) {
  return [...new Set(arr)];
}
console.log(removeDuplicates([1, 2, 2, 3, 4, 4, 5])); // [1, 2, 3, 4, 5]

const timer = setInterval(() => {
  console.log("Hello, JavaScript!");
}, 3000);

setTimeout(() => {
  clearInterval(timer);
  console.log("タイマーを停止しました");
}, 10000);

document.querySelector("button").addEventListener("click", () => {
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  document.body.style.backgroundColor = randomColor;
});

関連リンク：

• JavaScript 練習問題｜初心者向け基礎から応用まで20問解説付き
• HTMLとCSSを組み合わせた練習問題