map / some / toLowerCase の練習

## やり方　
1行ずつ console.log で中身を確認」しながら書く

```php:
const names = ["Taro", "Hanako", "jiro"];
const upperNames = names.map(name => name.toUpperCase());

console.log(upperNames); // ["TARO", "HANAKO", "JIRO"]


const tags = ["優しい", "真面目", "静か"];
const hasTarget = tags.some(tag => tag === "真面目");

console.log(hasTarget); // true


const city = "TOKYO";
const keyword = "tokyo";

console.log(city.toLowerCase() === keyword.toLowerCase()); // true

const students = [
  { name: "Yamada", tags: ["頑張り屋", "遅刻"] },
  { name: "Tanaka", tags: ["真面目", "静か"] }
];

const keyword = "遅刻";

const result = students.filter(s =>
  s.name.toLowerCase().includes(keyword.toLowerCase()) ||
  s.tags.some(tag => tag.toLowerCase().includes(keyword.toLowerCase()))
);

console.log(result);
// Yamadaさんが出る（遅刻が一致したから）
```

　## mapとsome、使用例

 ```php;税率
 const prices = [100, 200, 300];
const withTax = prices.map(p => p * 1.1);
console.log(withTax); // [110, 220, 330]
 ```

 ```php:オブジェクトの配列をHTMLに変換
 const users = [{ name: "A" }, { name: "B" }];
const list = users.map(u => `<li>${u.name}</li>`).join("");
console.log(list); // "<li>A</li><li>B</li>"

 ```


 ```php:バリデーション（入力が1つでも空かどうか）
 const inputs = ["Taro", "", "Tokyo"];
const hasEmpty = inputs.some(i => i.trim() === "");
console.log(hasEmpty); // true
 ```


 ```php:特定の値が1つでも含まれてるか調べる
 const roles = ["admin", "editor"];
const canEdit = roles.some(role => role === "editor");
console.log(canEdit); // true
 ```

 ```php:重複check
 const emails = ["a@example.com", "b@example.com"];
const newEmail = "a@example.com";
const exists = emails.some(email => email === newEmail);
console.log(exists); // true
 ```


## jquery版

```php:
大文字にする
const names = ["Taro", "Hanako", "jiro"];
const upperNames = $.map(names, function(name) {
  return name.toUpperCase();
});
console.log(upperNames); // ["TARO", "HANAKO", "JIRO"]


指定したもん ある？
const tags = ["優しい", "真面目", "静か"];
const hasTarget = $.grep(tags, function(tag) {
  return tag === "真面目";
}).length > 0;

console.log(hasTarget); // true


const students = [
  { name: "Yamada", tags: ["頑張り屋", "遅刻"] },
  { name: "Tanaka", tags: ["真面目", "静か"] }
];
const keyword = "遅刻";
const result = $.grep(students, function(s) {
  return s.name.toLowerCase().includes(keyword.toLowerCase()) ||
         $.grep(s.tags, function(tag) {
           return tag.toLowerCase().includes(keyword.toLowerCase());
         }).length > 0;
});
console.log(result);


const prices = [100, 200, 300];
const withTax = $.map(prices, function(p) {
  return p * 1.1;
});
console.log(withTax); // [110, 220, 330]


リスト生成
const users = [{ name: "A" }, { name: "B" }];
const list = $.map(users, function(u) {
  return `<li>${u.name}</li>`;
}).join("");
console.log(list); // "<li>A</li><li>B</li>"


空文字、ある？
const inputs = ["Taro", "", "Tokyo"];
const hasEmpty = $.grep(inputs, function(i) {
  return $.trim(i) === "";
}).length > 0;
console.log(hasEmpty); // true


特定のロールがあるか
const roles = ["admin", "editor"];
const canEdit = $.inArray("editor", roles) !== -1;
console.log(canEdit); // true


メールが重複してるか
const emails = ["a@example.com", "b@example.com"];
const newEmail = "a@example.com";
const exists = $.inArray(newEmail, emails) !== -1;
console.log(exists); // true
```

##から文字削除

```php:
・JS
const arr = ["apple", " ", "", "banana", "  grape  "];
const cleaned = arr
  .map(str => str.trim())
  .filter(str => str !== "");
console.log(cleaned); // ["apple", "banana", "grape"]


・jquery
const arr = ["apple", " ", "", "banana", "  grape  "];
const cleaned = $.grep($.map(arr, function(str) {
  return $.trim(str);
}), function(str) {
  return str !== "";
});
console.log(cleaned); // ["apple", "banana", "grape"]
```

```php:
・JS
const emails = ["a@example.com", "b@example.com", "a@example.com"];
const uniqueEmails = [...new Set(emails)];
console.log(uniqueEmails); // ["a@example.com", "b@example.com"]


・jquery
const emails = ["a@example.com", "b@example.com", "a@example.com"];
const uniqueEmails = [];

$.each(emails, function(_, email) {
  if ($.inArray(email, uniqueEmails) === -1) {
    uniqueEmails.push(email);
  }
});
console.log(uniqueEmails); // ["a@example.com", "b@example.com"]
```

## 指定データがあったらテーブルに表示

```php:
・html
<table id="studentTable">
  <thead><tr><th>Name</th></tr></thead>
  <tbody></tbody>
</table>

・jquery
const data = [
  { name: "Yamada" },
  { name: "Tanaka" },
  { name: "Sato" }
];

const keyword = "Tanaka";
const $table = $("#studentTable tbody");
$table.empty();

$.each(data, function(_, item) {
  if (item.name === keyword) {
    $table.append(`<tr><td>${item.name}</td></tr>`);
  }
});


・JS
const data = [
  { name: "Yamada" },
  { name: "Tanaka" },
  { name: "Sato" }
];

const keyword = "Tanaka";
const table = document.querySelector("#studentTable tbody");
table.innerHTML = ""; // 初期化

data.forEach(item => {
  if (item.name === keyword) {
    const row = document.createElement("tr");
    row.innerHTML = `<td>${item.name}</td>`;
    table.appendChild(row);
  }
});

```

#指定dataをテーブルから削除

```php:
・html
<table id="studentTable">
  <thead><tr><th>Name</th></tr></thead>
  <tbody></tbody>
</table>

・JS
const rows = document.querySelectorAll("#studentTable tbody tr");
rows.forEach(row => {
  const name = row.querySelector("td").textContent;
  if (name === "Tanaka") {
    row.remove();
  }
});


・jquery
$("#studentTable tbody tr").each(function() {
  const name = $(this).find("td").text();
  if (name === "Tanaka") {
    $(this).remove();
  }
});
```

### 税率10%の雑貨と税率8%の牛乳から、税率8%の牛乳だけ取り出しテーブルに表示

```php:
・html
<table id="itemTable">
  <thead>
    <tr><th>商品名</th><th>税率</th></tr>
  </thead>
  <tbody></tbody>
</table>

・javascript
const items = [
  { name: "雑貨", tax: 0.10 },
  { name: "牛乳", tax: 0.08 },
  { name: "パン", tax: 0.08 },
  { name: "Tシャツ", tax: 0.10 }
];

const table = document.querySelector("#itemTable tbody");
table.innerHTML = ""; // 初期化

items.forEach(item => {
  if (item.name === "牛乳" && item.tax === 0.08) {
    const row = document.createElement("tr");
    row.innerHTML = `<td>${item.name}</td><td>${item.tax * 100}%</td>`;
    table.appendChild(row);
  }
});


・jquery
const items = [
  { name: "雑貨", tax: 0.10 },
  { name: "牛乳", tax: 0.08 },
  { name: "パン", tax: 0.08 },
  { name: "Tシャツ", tax: 0.10 }
];

const $table = $("#itemTable tbody");
$table.empty(); // 初期化

$.each(items, function(_, item) {
  if (item.name === "牛乳" && item.tax === 0.08) {
    $table.append(`<tr><td>${item.name}</td><td>${item.tax * 100}%</td></tr>`);
  }
});

```

### 家賃 / 光熱費 / 水道代 / 食費から、
    光熱費 / 水道代 / 食費だけを表示

```php:
・html
<table id="expenseTable">
  <thead>
    <tr><th>項目</th></tr>
  </thead>
  <tbody></tbody>
</table>


・javascript
const items = ["家賃", "光熱費", "水道代", "食費"];
const targetItems = ["光熱費", "水道代", "食費"];

const tbody = document.querySelector("#expenseTable tbody");
tbody.innerHTML = ""; // 初期化

items.forEach(item => {
  if (targetItems.includes(item)) {
    const tr = document.createElement("tr");
    tr.innerHTML = `<td>${item}</td>`;
    tbody.appendChild(tr);
  }
});


・jquery
const items = ["家賃", "光熱費", "水道代", "食費"];
const targetItems = ["光熱費", "水道代", "食費"];

const $tbody = $("#expenseTable tbody");
$tbody.empty(); // 初期化

$.each(items, function(_, item) {
  if (targetItems.includes(item)) {
    $tbody.append(`<tr><td>${item}</td></tr>`);
  }
});
```