すぐに実践できる -JavaScript問題集04

JavaScriptでの実践的な問題集は、実際にコーディングする場面に直面するような課題を提供することで、スキルを向上させることができます。各問題の最後に解答と解説を付けることで、学習効果を高められるようにします。

問題 1: 配列操作と条件分岐

問題:
与えられた配列から、偶数の数字だけを取り出して新しい配列を作成し、その配列を昇順にソートした結果を出力する関数 filterAndSortEvens を実装してください。

入力例:

const arr = [3, 5, 2, 8, 1, 4];

出力例:

// 出力: [2, 4, 8]

問題 2: オブジェクトのマージ

問題:
2つのオブジェクトが与えられたとき、それらをマージして一つのオブジェクトを返す関数 mergeObjects を実装してください。もしキーが重複する場合は、2つ目のオブジェクトの値を優先してください。

入力例:

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { b: 4, d: 5 };

出力例:

// 出力: { a: 1, b: 4, c: 3, d: 5 }

問題 3: 深いコピー

問題:
オブジェクトの深いコピーを行う関数 deepClone を実装してください。オブジェクトはネストされたオブジェクトや配列を含む可能性があります。元のオブジェクトの変更がコピーに影響を与えないようにしてください。

入力例:

const original = { a: 1, b: { c: 2 }, d: [3, 4] };
const copy = deepClone(original);
copy.b.c = 10;
copy.d[0] = 5;

出力例:

// 出力: { a: 1, b: { c: 2 }, d: [3, 4] }
// `original`オブジェクトは変更されていないことを確認してください。

問題 4: クラスの作成

問題:
次の要件を満たすクラス Rectangle を作成してください。

幅 (width) と高さ (height) を持つ。
インスタンスの area メソッドで面積を返す。
インスタンスの perimeter メソッドで周囲長を返す。

入力例:

const rect = new Rectangle(4, 5);

出力例:

javascriptコードをコピーする// rect.area() => 20
// rect.perimeter() => 18

問題 5: 非同期処理

問題:
指定された秒数後に解決するPromiseを返す関数 wait を実装してください。この関数を使って、順番に3秒、2秒、1秒待ってから「完了」を出力する非同期関数 sequence を作成してください。

入力例:

async function sequence() {
    await wait(3);
    await wait(2);
    await wait(1);
    console.log("完了");
}

出力例:

// 6秒後に「完了」が出力されます。

解答と解説

問題 1: 配列操作と条件分岐

解答:

function filterAndSortEvens(arr) {
    return arr.filter(num => num % 2 === 0).sort((a, b) => a - b);
}

解説:
この問題では、filter メソッドを使って偶数を抽出し、sort メソッドで昇順に並べ替えています。filter は条件を満たす要素を新しい配列にするメソッドで、sort は比較関数を指定して要素を並べ替えます。

問題 2: オブジェクトのマージ

解答:

function mergeObjects(obj1, obj2) {
    return { ...obj1, ...obj2 };
}

解説:
スプレッド構文を使用して、2つのオブジェクトをマージしています。重複するキーがある場合、後ろに書かれたオブジェクトの値が優先されます。

問題 3: 深いコピー

解答:

function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}

解説:
JSON.parse と JSON.stringify を使うことで、オブジェクトの深いコピーを実現しています。ただし、この方法は関数やundefined、特殊なオブジェクト（Dateなど）を含む場合には注意が必要です。

問題 4: クラスの作成

解答:

class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    area() {
        return this.width * this.height;
    }

    perimeter() {
        return 2 * (this.width + this.height);
    }
}

解説:
JavaScriptのクラス構文を使い、Rectangle クラスを定義しています。constructor メソッドでインスタンス変数を初期化し、area と perimeter メソッドで計算を行います。

問題 5: 非同期処理

解答:

function wait(seconds) {
    return new Promise(resolve => setTimeout(resolve, seconds * 1000));
}

async function sequence() {
    await wait(3);
    await wait(2);
    await wait(1);
    console.log("完了");
}

解説:
wait 関数は指定された秒数後に解決する Promise を返します。sequence 関数では await を使い、非同期処理を順番に実行して最後に「完了」と表示します。

まとめ

今回の問題集は、実際の開発現場で役立つ基本的なスキルを磨くための内容です。配列やオブジェクトの操作、クラスの作成、非同期処理など、JavaScriptで頻繁に使用される機能をカバーしています。それぞれの問題に取り組むことで、JavaScriptの理解を深め、実践力を高めることができるでしょう。解答と解説を参考にしながら、さらなる発展問題にも挑戦してみてください。