【React・JavaScript】Reactで必須！配列操作を練習する問題集-いろいろ編 #1

## 【初めに】
この問題集では、JavaScript の **配列関数（map, filter, reduce など）** の基礎を練習できます。  
React のコンポーネント内でもよく使われるので、しっかりマスターしましょう！

💡 **各関数特化の問題集はこちら**
- ▼`map` の詳しい解説はこちら

https://qiita.com/arunbababa/items/24aca981b4d6386f9f1d

-▼ `filter`の詳しい解説はこちら 

https://qiita.com/arunbababa/items/9aa3fab020df2a871598

-▼ `reduce`の詳しい解説はこちら
　すぐに追加します🙇（当記事はそのままお読みいただけます）

- ▼JavaScript の非同期処理 (Promise, async/await) 

https://qiita.com/arunbababa/items/f199301346afe14cb407

---

## 問題1: `map` を使ってリストを変換
以下の配列 `numbers` を、すべて2倍した新しい配列 `doubledNumbers` を作成してください。  
その配列をコンソールで表示させてください。

```js
const numbers = [1, 2, 3, 4, 5];

// doubledNumbers を作成してください

console.log(doubledNumbers);
```

<details>
<summary>解答例</summary>

```js
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers);
```

</details>

---

## 問題2: `filter` を使って条件に合う要素を抽出
以下の配列 `numbers` から、偶数のみを抽出した新しい配列 `evenNumbers` を作成してください。  
その配列をコンソールで表示させてください。

```js
const numbers = [10, 15, 20, 25, 30];

// evenNumbers を作成してください

console.log(evenNumbers);
```

<details>
<summary>解答例</summary>

```js
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);
```

</details>

---

## 問題3: `reduce` を使って合計を求める
配列 `numbers` のすべての値の合計 `sum` を求めてください。  
その結果をコンソールで表示させてください。

```js
const numbers = [3, 7, 9, 2, 8];

// sum を求めてください

console.log(sum);
```

<details>
<summary>解答例</summary>

```js
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);
```

</details>

---

## 問題4: スプレッド構文を使って配列を結合
以下の2つの配列を結合し、新しい配列 `mergedArray` を作成してください。  
その配列をコンソールで表示させてください。

```js
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// mergedArray を作成してください

console.log(mergedArray);
```

<details>
<summary>解答例</summary>

```js
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray);
```

</details>

---

## 問題5: `find` を使って特定の要素を取得
以下の配列 `users` から、`id` が `2` のオブジェクト `targetUser` を取得してください。  
その結果をコンソールで表示させてください。

```js
const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

// targetUser を取得してください

console.log(targetUser);
```

<details>
<summary>解答例</summary>

```js
const targetUser = users.find(user => user.id === 2);
console.log(targetUser);
```

</details>

---

## 問題6: `some` を使って条件に合う要素があるか確認
以下の配列 `numbers` に、`10` 以上の数が含まれているかを判定し、  
`hasLargeNumber` に `true` または `false` を格納してください。  
その結果をコンソールで表示させてください。

```js
const numbers = [4, 7, 9, 2, 15];

// hasLargeNumber を作成してください

console.log(hasLargeNumber);
```

<details>
<summary>解答例</summary>

```js
const hasLargeNumber = numbers.some(num => num >= 10);
console.log(hasLargeNumber);
```

</details>

---

## 問題7: `every` を使ってすべての要素が条件を満たすか確認
以下の配列 `ages` がすべて `18` 以上かを判定し、  
`allAdults` に `true` または `false` を格納してください。  
その結果をコンソールで表示させてください。

```js
const ages = [20, 25, 30, 18, 17];

// allAdults を作成してください

console.log(allAdults);
```

<details>
<summary>解答例</summary>

```js
const allAdults = ages.every(age => age >= 18);
console.log(allAdults);
```

</details>

---

## 問題8: `sort` を使って数値の配列を昇順に並べ替え
以下の配列 `numbers` を昇順にソートし、新しい配列 `sortedNumbers` を作成してください。  
その結果をコンソールで表示させてください。

```js
const numbers = [25, 10, 5, 40, 30];

// sortedNumbers を作成してください

console.log(sortedNumbers);
```

<details>
<summary>解答例</summary>

```js
const sortedNumbers = [...numbers].sort((a, b) => a - b);
console.log(sortedNumbers);
```

</details>

---

## 問題9: `Object.keys` を使ってオブジェクトのキーを取得
以下のオブジェクトのすべてのキーを取得し、配列 `keys` として出力してください。

```js
const person = { name: "Ken", age: 30, city: "Osaka" };

// keys を作成してください

console.log(keys);
```

<details>
<summary>解答例</summary>

```js
const keys = Object.keys(person);
console.log(keys);
```

</details>

---

## 問題10: `Promise` を使って非同期処理を実装
1秒後に `"Hello, World!"` をコンソールに表示する `Promise` を作成してください。

```js
function delayedMessage() {
  // delayedMessage を作成してください
}

delayedMessage().then(message => console.log(message));
```

<details>
<summary>解答例</summary>

```js
function delayedMessage() {
  return new Promise(resolve => {
    setTimeout(() => resolve("Hello, World!"), 1000);
  });
}

delayedMessage().then(message => console.log(message));
```

</details>

---

## 【まとめ】
いくつ解けましたでしょうか？？
より効率的な方法やご指摘があればコメントいただければ幸いです！