【挫折しない】JavaScript練習問題30選 - 初心者向け基礎固め

みなさん、JavaScript学習を進めていて「理論は理解したけど、実際にコードを書く練習がしたい」と思っていませんか？

「どんな問題から始めればいいの？」 「難しすぎて挫折しそう」

こんな悩みを持ったことはありませんか？

プログラミングの上達には、理論だけでなく実際にコードを書く練習が欠かせません。 でも大丈夫です！

この記事では、JavaScript初心者向けの練習問題30選を難易度別に紹介します。 基礎文法から実践的な問題まで、段階的にスキルアップできる問題と解答例を詳しく解説します。

練習問題を解く前の準備

まず、効果的に練習するための準備をしましょう。

必要な環境設定

練習問題を解くために必要な環境を整えます。

以下のツールがあれば、すぐに練習を始められます。

• Webブラウザ: Chrome、Firefox、Safariなど
• テキストエディタ: Visual Studio Code、Atom、Sublime Textなど
• 開発者ツール: ブラウザに内蔵されているツール

どれも無料で使えるので、心配いりません。

練習の進め方

効果的な練習のためのコツをご紹介します。

段階的な取り組み方法をまとめました。

1. まず自分で考えて解いてみる
2. 解答例と比較する
3. 理解できない部分を調べる
4. コードを少し変更して実行してみる

このような手順で進めることで、確実にスキルが向上します。

難易度★（超基礎）- 文法の基本

まずは、JavaScriptの基本的な文法を確認する問題から始めましょう。

問題1: 変数の宣言と代入

変数の基本的な使い方を練習してみましょう。

// 問題: 以下の変数を宣言し、値を代入してください
// 1. userName という変数に "田中太郎" を代入
// 2. age という変数に 25 を代入
// 3. isActive という変数に true を代入

解答例をご紹介します。

let userName = "田中太郎";
let age = 25;
let isActive = true;

console.log(userName);
console.log(age);
console.log(isActive);

letを使って変数を宣言し、等号（=）で値を代入します。

変数の宣言と代入は最も基本的な操作です。 文字列は"で囲み、数値はそのまま、真偽値はtrueやfalseを使います。

問題2: 文字列の結合

文字列を組み合わせる方法を練習してみましょう。

// 問題: firstName と lastName を結合して、
// "こんにちは、田中太郎さん" という文字列を作成してください
let firstName = "太郎";
let lastName = "田中";

解答例をご紹介します。

let firstName = "太郎";
let lastName = "田中";
let greeting = "こんにちは、" + lastName + firstName + "さん";

console.log(greeting); // "こんにちは、田中太郎さん"

// テンプレートリテラルを使う方法
let greeting2 = `こんにちは、${lastName}${firstName}さん`;
console.log(greeting2);

+記号を使って文字列を結合できます。

テンプレートリテラル（バッククォート）を使うと、${}の中に変数を入れられて便利です。 文字列の結合は、Webサイトでよく使われる操作なんです。

問題3: 基本的な計算

四則演算の基本を確認してみましょう。

// 問題: 以下の計算を行って結果を表示してください
// 1. 10 + 5
// 2. 20 - 8
// 3. 6 * 7
// 4. 15 / 3

解答例をご紹介します。

console.log(10 + 5); // 15
console.log(20 - 8); // 12
console.log(6 * 7);  // 42
console.log(15 / 3); // 5

// 変数を使った計算
let a = 10;
let b = 5;
console.log(a + b); // 15

JavaScriptでは、数学と同じ記号で計算ができます。

掛け算は*、割り算は/を使います。 基本的な四則演算は、あらゆるプログラムで使用されます。

問題4: 配列の作成

複数のデータをまとめて管理する配列を作ってみましょう。

// 問題: 以下の配列を作成してください
// 1. fruits という名前で、["りんご", "バナナ", "オレンジ"] を格納
// 2. numbers という名前で、[1, 2, 3, 4, 5] を格納

解答例をご紹介します。

let fruits = ["りんご", "バナナ", "オレンジ"];
let numbers = [1, 2, 3, 4, 5];

console.log(fruits);
console.log(numbers);
console.log(fruits[0]); // "りんご"
console.log(numbers.length); // 5

配列は[]で囲んで、要素を,で区切って作成します。

配列の要素は[0]のように番号（インデックス）でアクセスできます。 lengthプロパティで配列の長さが分かります。

問題5: オブジェクトの作成

関連するデータをまとめて管理するオブジェクトを作ってみましょう。

// 問題: 以下のプロパティを持つオブジェクトを作成してください
// name: "田中太郎"
// age: 25
// city: "東京"

解答例をご紹介します。

let person = {
    name: "田中太郎",
    age: 25,
    city: "東京"
};

console.log(person);
console.log(person.name); // "田中太郎"
console.log(person["age"]); // 25

オブジェクトは{}で囲んで、キー: 値の形で作成します。

値へのアクセスはオブジェクト.キーまたはオブジェクト["キー"]で行います。 オブジェクトは、関連するデータをまとめて管理するのに便利です。

難易度★★（基礎応用）- 制御構造

次に、条件分岐や繰り返しを使った問題に挑戦してみましょう。

問題6: 条件分岐の基本

条件によって処理を分ける方法を練習してみましょう。

// 問題: 年齢によって以下のメッセージを表示してください
// 18歳未満: "未成年です"
// 18歳以上65歳未満: "成人です"
// 65歳以上: "高齢者です"
let age = 25;

解答例をご紹介します。

let age = 25;

if (age < 18) {
    console.log("未成年です");
} else if (age < 65) {
    console.log("成人です");
} else {
    console.log("高齢者です");
}

if文を使って条件に応じて処理を分けます。

else ifで複数の条件を、elseで他の全ての場合を処理できます。 条件分岐は、プログラムの流れを制御する重要な仕組みです。

問題7: 繰り返しの基本

同じ処理を何度も実行する方法を練習してみましょう。

// 問題: 1から10までの数字を順番に表示してください

解答例をご紹介します。

// for文を使った方法
for (let i = 1; i <= 10; i++) {
    console.log(i);
}

// while文を使った方法
let j = 1;
while (j <= 10) {
    console.log(j);
    j++;
}

for文は繰り返し回数が決まっている場合に便利です。

while文は条件が満たされている間、繰り返し処理を実行します。 繰り返し処理は、同じ処理を効率的に実行するために使われます。

問題8: 配列の要素を表示

配列の中身を一つずつ処理する方法を練習してみましょう。

// 問題: 以下の配列の全ての要素を表示してください
let colors = ["赤", "青", "緑", "黄色", "紫"];

解答例をご紹介します。

let colors = ["赤", "青", "緑", "黄色", "紫"];

// for文を使った方法
for (let i = 0; i < colors.length; i++) {
    console.log(colors[i]);
}

// for...of文を使った方法
for (let color of colors) {
    console.log(color);
}

配列の長さ（length）を使って、全ての要素にアクセスできます。

for...of文を使うと、より簡潔に配列の要素を処理できます。 配列の要素を処理することは、よくある操作です。

問題9: 偶数と奇数の判定

数値の性質を判定する方法を練習してみましょう。

// 問題: 1から20までの数字について、偶数か奇数かを判定してください
// 例: "1は奇数です", "2は偶数です"

解答例をご紹介します。

for (let i = 1; i <= 20; i++) {
    if (i % 2 === 0) {
        console.log(i + "は偶数です");
    } else {
        console.log(i + "は奇数です");
    }
}

剰余演算子（%）を使って、2で割った余りを計算します。

余りが0なら偶数、1なら奇数と判定できます。 剰余演算子は、数値の性質を調べるのによく使われます。

問題10: 最大値を見つける

配列から特定の値を見つける方法を練習してみましょう。

// 問題: 以下の配列から最大値を見つけて表示してください
let numbers = [23, 45, 12, 67, 34, 89, 56];

解答例をご紹介します。

let numbers = [23, 45, 12, 67, 34, 89, 56];

let max = numbers[0];
for (let i = 1; i < numbers.length; i++) {
    if (numbers[i] > max) {
        max = numbers[i];
    }
}

console.log("最大値: " + max); // 最大値: 89

// Math.maxを使った方法
let max2 = Math.max(...numbers);
console.log("最大値: " + max2);

最初の要素を最大値の候補として、順番に比較していきます。

Math.max(...numbers)を使うと、もっと簡単に最大値を求められます。 配列から特定の値を見つけることは、データ処理でよく使われます。

難易度★★★（実践基礎）- 関数とアルゴリズム

関数を使った問題と、基本的なアルゴリズムに挑戦してみましょう。

問題11: 関数の基本

処理をまとめて再利用する関数を作ってみましょう。

// 問題: 2つの数字を受け取って、その合計を返す関数を作成してください
// 関数名: add

解答例をご紹介します。

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

console.log(add(5, 3)); // 8
console.log(add(10, 20)); // 30

// アロー関数を使った方法
const add2 = (a, b) => a + b;
console.log(add2(5, 3)); // 8

functionキーワードで関数を定義し、returnで結果を返します。

アロー関数（=>）を使うと、より短く書けます。 関数は、処理をまとめて再利用するための重要な機能です。

問題12: 配列の合計を計算

配列のデータを処理する関数を作ってみましょう。

// 問題: 配列の全ての要素の合計を計算する関数を作成してください
// 関数名: sum
let numbers = [1, 2, 3, 4, 5];

解答例をご紹介します。

function sum(arr) {
    let total = 0;
    for (let i = 0; i < arr.length; i++) {
        total += arr[i];
    }
    return total;
}

let numbers = [1, 2, 3, 4, 5];
console.log(sum(numbers)); // 15

// reduce()を使った方法
const sum2 = (arr) => arr.reduce((total, num) => total + num, 0);
console.log(sum2(numbers)); // 15

total変数に各要素を順番に足していきます。

reduce()メソッドを使うと、もっと簡潔に書けます。 配列の処理は、データ分析などでよく使われます。

問題13: 文字列の反転

文字列を操作する関数を作ってみましょう。

// 問題: 文字列を反転する関数を作成してください
// 例: "hello" → "olleh"

解答例をご紹介します。

function reverseString(str) {
    let reversed = "";
    for (let i = str.length - 1; i >= 0; i--) {
        reversed += str[i];
    }
    return reversed;
}

console.log(reverseString("hello")); // "olleh"
console.log(reverseString("JavaScript")); // "tpircSavaJ"

// 配列メソッドを使った方法
const reverseString2 = (str) => str.split("").reverse().join("");
console.log(reverseString2("hello")); // "olleh"

文字列の最後から最初に向かって、一文字ずつ取り出します。

split("")で文字列を配列に変換し、reverse()で反転、join("")で文字列に戻します。 文字列の操作は、テキスト処理でよく使われます。

問題14: 重複の除去

配列から重複するデータを取り除く関数を作ってみましょう。

// 問題: 配列から重複する要素を除去する関数を作成してください
let numbers = [1, 2, 2, 3, 3, 3, 4, 5];

解答例をご紹介します。

function removeDuplicates(arr) {
    let unique = [];
    for (let i = 0; i < arr.length; i++) {
        if (unique.indexOf(arr[i]) === -1) {
            unique.push(arr[i]);
        }
    }
    return unique;
}

let numbers = [1, 2, 2, 3, 3, 3, 4, 5];
console.log(removeDuplicates(numbers)); // [1, 2, 3, 4, 5]

// Setを使った方法
const removeDuplicates2 = (arr) => [...new Set(arr)];
console.log(removeDuplicates2(numbers)); // [1, 2, 3, 4, 5]

indexOf()で要素が既に存在するかチェックします。

Setオブジェクトを使うと、自動的に重複が除去されます。 重複の除去は、データ処理でよく必要になる操作です。

問題15: 平均値の計算

統計的な処理をする関数を作ってみましょう。

// 問題: 配列の平均値を計算する関数を作成してください
let scores = [85, 92, 78, 96, 87];

解答例をご紹介します。

function average(arr) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    return sum / arr.length;
}

let scores = [85, 92, 78, 96, 87];
console.log(average(scores)); // 87.6

// 小数点以下を四捨五入
console.log(Math.round(average(scores))); // 88

全ての要素の合計を配列の長さで割ります。

Math.round()を使うと、小数点以下を四捨五入できます。 平均値の計算は、統計処理でよく使われます。

難易度★★★★（実践応用）- 実用的な問題

より実用的な問題に挑戦してみましょう。

問題16: カウントダウン

時間を扱うプログラムを作ってみましょう。

// 問題: 指定した数字からカウントダウンを行う関数を作成してください
// 例: countDown(5) → 5, 4, 3, 2, 1, 0

解答例をご紹介します。

function countDown(num) {
    for (let i = num; i >= 0; i--) {
        console.log(i);
    }
}

countDown(5);

// 再帰関数を使った方法
function countDownRecursive(num) {
    if (num < 0) return;
    console.log(num);
    countDownRecursive(num - 1);
}

countDownRecursive(5);

指定した数字から0まで、1ずつ減らしながら表示します。

再帰関数（自分自身を呼び出す関数）でも実現できます。 カウントダウンは、ゲームやタイマーでよく使われます。

問題17: 配列のソート

データを並び替えるアルゴリズムを作ってみましょう。

// 問題: 配列を昇順（小さい順）にソートする関数を作成してください
let numbers = [64, 34, 25, 12, 22, 11, 90];

解答例をご紹介します。

function bubbleSort(arr) {
    let n = arr.length;
    for (let i = 0; i < n - 1; i++) {
        for (let j = 0; j < n - i - 1; j++) {
            if (arr[j] > arr[j + 1]) {
                // 要素を交換
                let temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}

let numbers = [64, 34, 25, 12, 22, 11, 90];
console.log(bubbleSort([...numbers])); // [11, 12, 22, 25, 34, 64, 90]

// 組み込みメソッドを使った方法
console.log(numbers.sort((a, b) => a - b));

隣接する要素を比較して、大きい方を右に移動させます。

sort()メソッドを使うと、簡単にソートできます。 ソートは、データの整理でよく使われるアルゴリズムです。

問題18: パスワードの強度チェック

セキュリティ機能を作ってみましょう。

// 問題: パスワードの強度をチェックする関数を作成してください
// 条件: 8文字以上、数字を含む、英字を含む

解答例をご紹介します。

function checkPasswordStrength(password) {
    let hasLength = password.length >= 8;
    let hasNumber = /\d/.test(password);
    let hasLetter = /[a-zA-Z]/.test(password);
    
    if (hasLength && hasNumber && hasLetter) {
        return "強いパスワードです";
    } else {
        return "弱いパスワードです";
    }
}

console.log(checkPasswordStrength("password123")); // "強いパスワードです"
console.log(checkPasswordStrength("password"));    // "弱いパスワードです"
console.log(checkPasswordStrength("12345678"));    // "弱いパスワードです"

各条件をチェックして、すべて満たしているか確認します。

正規表現（/\d/など）を使って、文字の種類をチェックできます。 パスワードチェックは、セキュリティ機能でよく使われます。

問題19: 配列の検索

データから特定の情報を見つける機能を作ってみましょう。

// 問題: 配列から特定の値を検索して、その位置を返す関数を作成してください
// 見つからない場合は -1 を返す

解答例をご紹介します。

function findIndex(arr, target) {
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] === target) {
            return i;
        }
    }
    return -1;
}

let fruits = ["りんご", "バナナ", "オレンジ", "ぶどう"];
console.log(findIndex(fruits, "オレンジ")); // 2
console.log(findIndex(fruits, "みかん"));   // -1

// 組み込みメソッドを使った方法
console.log(fruits.indexOf("オレンジ")); // 2

配列を順番に調べて、目的の値を見つけたらその位置を返します。

indexOf()メソッドを使うと、同じことができます。 配列の検索は、データ処理で頻繁に使われる操作です。

問題20: 単語の出現回数

テキストデータを分析する機能を作ってみましょう。

// 問題: 文字列内の各単語の出現回数をカウントする関数を作成してください

解答例をご紹介します。

function countWords(text) {
    let words = text.toLowerCase().split(/\s+/);
    let count = {};
    
    for (let word of words) {
        if (word) {
            count[word] = (count[word] || 0) + 1;
        }
    }
    
    return count;
}

let text = "apple banana apple orange banana apple";
console.log(countWords(text)); 
// { apple: 3, banana: 2, orange: 1 }

文字列を単語に分割して、オブジェクトで出現回数を管理します。

split(/\s+/)で空白文字を基準に分割できます。 単語のカウントは、テキスト分析でよく使われます。

難易度★★★★★（応用発展）- 発展的な問題

最後に、より発展的な問題に挑戦してみましょう。

問題21: フィボナッチ数列

有名な数学的パターンを実装してみましょう。

// 問題: フィボナッチ数列のn番目の値を求める関数を作成してください
// フィボナッチ数列: 0, 1, 1, 2, 3, 5, 8, 13, 21, ...

解答例をご紹介します。

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)); // 55

// 効率的な方法
function fibonacciEfficient(n) {
    if (n <= 1) return n;
    let a = 0, b = 1;
    for (let i = 2; i <= n; i++) {
        let temp = a + b;
        a = b;
        b = temp;
    }
    return b;
}

console.log(fibonacciEfficient(10)); // 55

前の2つの数の和が次の数になる数列です。

再帰関数で実装できますが、ループの方が効率的です。 フィボナッチ数列は、アルゴリズムの練習でよく使われます。

問題22: 階乗の計算

数学的な計算を実装してみましょう。

// 問題: 階乗を計算する関数を作成してください
// 階乗: 5! = 5 × 4 × 3 × 2 × 1 = 120

解答例をご紹介します。

function factorial(n) {
    if (n <= 1) return 1;
    return n * factorial(n - 1);
}

console.log(factorial(5)); // 120

// 繰り返しを使った方法
function factorialIterative(n) {
    let result = 1;
    for (let i = 2; i <= n; i++) {
        result *= i;
    }
    return result;
}

console.log(factorialIterative(5)); // 120

1からnまでの数をすべて掛け合わせます。

再帰とループ、どちらでも実装できます。 階乗は、組み合わせ計算などでよく使われます。

問題23: 回文の判定

文字列の特殊なパターンを判定してみましょう。

// 問題: 文字列が回文かどうかを判定する関数を作成してください
// 回文: 前から読んでも後ろから読んでも同じ文字列

解答例をご紹介します。

function isPalindrome(str) {
    let cleaned = str.toLowerCase().replace(/[^a-z0-9]/g, '');
    let left = 0;
    let right = cleaned.length - 1;
    
    while (left < right) {
        if (cleaned[left] !== cleaned[right]) {
            return false;
        }
        left++;
        right--;
    }
    return true;
}

console.log(isPalindrome("racecar")); // true
console.log(isPalindrome("hello"));   // false
console.log(isPalindrome("A man, a plan, a canal: Panama")); // true

文字列の両端から中央に向かって比較します。

不要な文字（空白や記号）を除去してから判定します。 回文の判定は、文字列処理の応用問題です。

問題24: 二分探索

効率的な検索アルゴリズムを実装してみましょう。

// 問題: ソート済み配列から特定の値を二分探索で見つける関数を作成してください

解答例をご紹介します。

function binarySearch(arr, target) {
    let left = 0;
    let right = arr.length - 1;
    
    while (left <= right) {
        let mid = Math.floor((left + right) / 2);
        
        if (arr[mid] === target) {
            return mid;
        } else if (arr[mid] < target) {
            left = mid + 1;
        } else {
            right = mid - 1;
        }
    }
    
    return -1;
}

let sortedArray = [1, 3, 5, 7, 9, 11, 13, 15];
console.log(binarySearch(sortedArray, 7));  // 3
console.log(binarySearch(sortedArray, 6));  // -1

配列の中央から検索を始めて、範囲を半分ずつ絞り込みます。

ソート済み配列でのみ使える効率的な検索方法です。 二分探索は、効率的な検索アルゴリズムです。

問題25: 深いコピー

オブジェクトを安全にコピーする機能を作ってみましょう。

// 問題: オブジェクトの深いコピーを作成する関数を作成してください

解答例をご紹介します。

function deepCopy(obj) {
    if (obj === null || typeof obj !== "object") {
        return obj;
    }
    
    if (obj instanceof Date) {
        return new Date(obj.getTime());
    }
    
    if (obj instanceof Array) {
        return obj.map(item => deepCopy(item));
    }
    
    if (typeof obj === "object") {
        let copy = {};
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                copy[key] = deepCopy(obj[key]);
            }
        }
        return copy;
    }
}

let original = {
    name: "田中",
    age: 25,
    hobbies: ["読書", "映画"],
    address: {
        city: "東京",
        zip: "100-0001"
    }
};

let copied = deepCopy(original);
console.log(copied);

オブジェクトの中にオブジェクトがある場合も、すべてコピーします。

再帰的に処理することで、深い階層まで対応できます。 深いコピーは、オブジェクト操作で重要な概念です。

実践的な応用問題

実際のWebアプリケーションで使われそうな問題に挑戦してみましょう。

問題26: ToDoリストの管理

実用的なアプリケーション機能を作ってみましょう。

// 問題: ToDoリストを管理するクラスを作成してください
// 機能: 追加、削除、完了マーク、一覧表示

解答例をご紹介します。

class TodoList {
    constructor() {
        this.todos = [];
        this.nextId = 1;
    }
    
    add(task) {
        this.todos.push({
            id: this.nextId++,
            task: task,
            completed: false
        });
    }
    
    remove(id) {
        this.todos = this.todos.filter(todo => todo.id !== id);
    }
    
    complete(id) {
        let todo = this.todos.find(todo => todo.id === id);
        if (todo) {
            todo.completed = true;
        }
    }
    
    list() {
        return this.todos;
    }
}

let myTodos = new TodoList();
myTodos.add("買い物");
myTodos.add("洗濯");
myTodos.complete(1);
console.log(myTodos.list());

クラスを使って、関連する機能をまとめて管理します。

各ToDoアイテムには、ID、内容、完了状態を持たせます。 ToDoリストは、実際のアプリケーションでよく使われる機能です。

問題27: 電卓の実装

計算機能を持つクラスを作ってみましょう。

// 問題: 簡単な電卓クラスを作成してください
// 機能: 加算、減算、乗算、除算、クリア

解答例をご紹介します。

class Calculator {
    constructor() {
        this.result = 0;
    }
    
    add(num) {
        this.result += num;
        return this;
    }
    
    subtract(num) {
        this.result -= num;
        return this;
    }
    
    multiply(num) {
        this.result *= num;
        return this;
    }
    
    divide(num) {
        if (num !== 0) {
            this.result /= num;
        }
        return this;
    }
    
    clear() {
        this.result = 0;
        return this;
    }
    
    getResult() {
        return this.result;
    }
}

let calc = new Calculator();
let result = calc.add(10).multiply(2).subtract(5).getResult();
console.log(result); // 15

メソッドがthisを返すことで、連続して操作できます。

これをメソッドチェーンと呼びます。 電卓は、メソッドチェーンの練習にも適しています。

問題28: データの並び替え

複雑なデータを操作する機能を作ってみましょう。

// 問題: オブジェクトの配列を特定のプロパティで並び替える関数を作成してください

解答例をご紹介します。

function sortBy(arr, property) {
    return arr.sort((a, b) => {
        if (a[property] < b[property]) return -1;
        if (a[property] > b[property]) return 1;
        return 0;
    });
}

let students = [
    { name: "田中", score: 85 },
    { name: "佐藤", score: 92 },
    { name: "鈴木", score: 78 }
];

console.log(sortBy(students, "score"));
// スコア順に並び替え

console.log(sortBy(students, "name"));
// 名前順に並び替え

sort()メソッドにカスタム比較関数を渡します。

プロパティ名を指定することで、柔軟に並び替えできます。 データの並び替えは、表示機能でよく使われます。

問題29: イベント管理システム

イベント駆動型のプログラムを作ってみましょう。

// 問題: 簡単なイベント管理システムを作成してください
// 機能: イベントの登録、削除、発火

解答例をご紹介します。

class EventManager {
    constructor() {
        this.events = {};
    }
    
    on(eventName, callback) {
        if (!this.events[eventName]) {
            this.events[eventName] = [];
        }
        this.events[eventName].push(callback);
    }
    
    off(eventName, callback) {
        if (this.events[eventName]) {
            this.events[eventName] = this.events[eventName]
                .filter(cb => cb !== callback);
        }
    }
    
    emit(eventName, data) {
        if (this.events[eventName]) {
            this.events[eventName].forEach(callback => {
                callback(data);
            });
        }
    }
}

let eventManager = new EventManager();

eventManager.on('login', (user) => {
    console.log(`${user}がログインしました`);
});

eventManager.emit('login', '田中太郎');

イベント名をキーにして、コールバック関数を配列で管理します。

emit()でイベントを発火すると、登録されたすべての関数が実行されます。 イベント管理は、UI開発で重要な概念です。

問題30: データバリデーション

入力データの検証機能を作ってみましょう。

// 問題: フォームデータのバリデーションを行う関数を作成してください
// 検証項目: 必須入力、メールアドレス形式、電話番号形式

解答例をご紹介します。

function validateForm(data) {
    let errors = [];
    
    // 必須入力チェック
    if (!data.name || data.name.trim() === '') {
        errors.push('名前は必須です');
    }
    
    // メールアドレス形式チェック
    if (!data.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
        errors.push('有効なメールアドレスを入力してください');
    }
    
    // 電話番号形式チェック
    if (!data.phone || !/^\d{10,11}$/.test(data.phone.replace(/-/g, ''))) {
        errors.push('有効な電話番号を入力してください');
    }
    
    return {
        isValid: errors.length === 0,
        errors: errors
    };
}

let formData = {
    name: '田中太郎',
    email: 'tanaka@example.com',
    phone: '090-1234-5678'
};

let validation = validateForm(formData);
console.log(validation);

各項目について、条件を満たしているかチェックします。

正規表現を使って、文字列の形式を検証できます。 データバリデーションは、Webアプリケーションで必須の機能です。

練習を続けるためのコツ

継続的にスキルアップするためのアドバイスをご紹介します。

段階的な学習方法

効果的に学習を進めるためのステップです。

以下の順番で進めることをおすすめします。

1. 基礎固め: 簡単な問題から始める
2. 応用練習: 少し複雑な問題に挑戦
3. 実践応用: 実際のアプリケーションを意識した問題
4. 発展学習: より高度なアルゴリズムや概念

このような段階を踏むことで、着実にスキルが向上します。

自分なりの問題を作る

練習問題を解くだけでなく、自分で問題を作ることも重要です。

問題作成のコツをご紹介します。

• 日常生活の中からプログラムで解決できそうな問題を見つける
• 既存の問題を少し変更してみる
• 他の人の問題を参考にしてオリジナルを作る

自分で問題を作ることで、理解が深まります。

エラーを恐れない

練習中にエラーが発生しても、それは学習の機会です。

エラーとの向き合い方をご紹介します。

• エラーメッセージを冷静に読む
• 一行ずつコードを確認する
• 検索エンジンで解決方法を調べる
• 他の人に質問する

エラーから学ぶことで、プログラミングスキルが向上します。

まとめ

JavaScript初心者向けの練習問題30選を紹介しました。

学習のポイントをまとめました。

• 段階的な学習: 基礎から応用へと順番に進む
• 実際にコードを書く: 理論だけでなく実践が重要
• エラーを恐れない: 失敗から学ぶ姿勢を大切に
• 継続的な練習: 毎日少しずつでも続ける

難易度別のまとめ：

• ★（超基礎）: 文法の基本
• ★★（基礎応用）: 制御構造
• ★★★（実践基礎）: 関数とアルゴリズム
• ★★★★（実践応用）: 実用的な問題
• ★★★★★（応用発展）: 発展的な問題

これらの問題を通じて、JavaScriptの基礎から応用まで幅広くスキルを身に付けることができます！

最初は難しく感じる問題もあるかもしれませんが、諦めずに取り組むことで必ず上達します。 プログラミングは積み重ねが大切です。

ぜひ今日から、これらの練習問題に挑戦してみてください！ きっと、JavaScriptが楽しくなりますよ！