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

## 【初めに】
この問題集では JavaScript の **`filter` メソッド** の基礎を練習できます。  
React のコンポーネント内でもよく使われるので、しっかりマスターしましょう！

---

## 問題1: 偶数を抽出
以下の配列 `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>

---

## 問題2: 指定値以上の数値を抽出
以下の配列 `numbers` から、10 以上の値のみを抽出した配列 `largeNumbers` を作成してください。  

```js
const numbers = [5, 12, 8, 20, 15];

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

console.log(largeNumbers);
```

<details>
<summary>解答を表示</summary>

```js
const largeNumbers = numbers.filter(num => num >= 10);
console.log(largeNumbers);
```

</details>

---

## 問題3: 正値のみを抽出
以下の配列 `numbers` から、正の数値のみを抽出した配列 `positiveNumbers` を作成してください。  

```js
const numbers = [-3, 5, -1, 8, -10, 15];

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

console.log(positiveNumbers);
```

<details>
<summary>解答を表示</summary>

```js
const positiveNumbers = numbers.filter(num => num > 0);
console.log(positiveNumbers);
```

</details>

---

## 問題4: 文字列の長さでフィルタリング
以下の配列 `words` から、5 文字以上の単語のみを抽出した配列 `longWords` を作成してください。  

```js
const words = ["apple", "banana", "cherry", "date", "fig"];

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

console.log(longWords);
```

<details>
<summary>解答を表示</summary>

```js
const longWords = words.filter(word => word.length >= 5);
console.log(longWords);
```

</details>

---

## 問題5: 指定文字を含む単語を抽出
以下の配列 `words` から、`a` を含む単語のみを抽出した配列 `wordsWithA` を作成してください。  

```js
const words = ["apple", "banana", "cherry", "date", "fig"];

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

console.log(wordsWithA);
```

<details>
<summary>解答を表示</summary>

```js
const wordsWithA = words.filter(word => word.includes("a"));
console.log(wordsWithA);
```

</details>

---

## 問題6: 年齢でフィルタリング
以下の配列 `users` から、20 歳以上のユーザーのみを抽出した配列 `adultUsers` を作成してください。  

```js
const users = [
  { name: "Alice", age: 17 },
  { name: "Bob", age: 22 },
  { name: "Charlie", age: 19 },
  { name: "David", age: 25 }
];

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

console.log(adultUsers);
```

<details>
<summary>解答を表示</summary>

```js
const adultUsers = users.filter(user => user.age >= 20);
console.log(adultUsers);
```

</details>

---

## 問題7: 在庫ありの商品のみを抽出
以下の配列 `products` から、在庫が 1 以上ある商品のみを抽出した配列 `availableProducts` を作成してください。  

```js
const products = [
  { name: "Laptop", stock: 0 },
  { name: "Phone", stock: 5 },
  { name: "Tablet", stock: 2 },
  { name: "Monitor", stock: 0 }
];

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

console.log(availableProducts);
```

<details>
<summary>解答を表示</summary>

```js
const availableProducts = products.filter(product => product.stock > 0);
console.log(availableProducts);
```

</details>

---

## 問題8: 過去のイベントを抽出
以下の配列 `events` から、現在の日付より過去の日付のイベントのみを抽出してください。  

```js
const events = [
  { name: "Event A", date: "2025-01-01" },
  { name: "Event B", date: "2023-06-15" },
  { name: "Event C", date: "2024-12-01" }
];

const today = "2024-02-05";

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

console.log(pastEvents);
```

<details>
<summary>解答を表示</summary>

```js
const pastEvents = events.filter(event => event.date < today);
console.log(pastEvents);
```

</details>

---

## 問題9: 特定のタグを持つ記事を抽出
以下の配列 `articles` から、タグ `"JavaScript"` を含む記事のみを抽出してください。  

```js
const articles = [
  { title: "React Basics", tags: ["React", "JavaScript"] },
  { title: "CSS Grid Guide", tags: ["CSS"] },
  { title: "Understanding Promises", tags: ["JavaScript", "Async"] }
];

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

console.log(jsArticles);
```

<details>
<summary>解答を表示</summary>

```js
const jsArticles = articles.filter(article => article.tags.includes("JavaScript"));
console.log(jsArticles);
```

</details>

---

## 【まとめ】
何問解けましたか？ 
さらに深く理解するために、適当なブラウザでコンソールなどで
実際に書いて解くと面白いかもです！