【ES6】JavaScript：forEach文とは？使い方や書き方を解説！

1. const fruitsbasket = ["りんご", "バナナ", "オレンジ"];
   「fruitsbasket」という名前の変数を作り、配列[]の中に「りんご」「バナナ」「オレンジ」という値を入れる。
2. fruitsbasket.forEach(function(fruits)
   変数「fruitsbasket」の中から1つずつ値を取り出して、「fruits」という変数に入れる繰り返しを始める。
3. console.log(fruits)
   変数「fruit」の中身をコンソール画面に表示する。

【配列のコード】

const fruitsbasket = ["りんご", "バナナ", "オレンジ"];

　
【forEach文のコード】

fruitsbasket.forEach(function(fruits) {
  console.log(fruits);
});

1. const fruitsbasket = ['りんご', 'バナナ', 'オレンジ'];
   「fruitsbasket」という名前の変数を作り、配列[]の中に「りんご」「バナナ」「オレンジ」という値を入れる。
2. fruitsbasket.forEach(function(fruits, index)
   「fruitsbasket」の中にあるフルーツの名前を1つずつ取り出して、取り出したフルーツを「fruits」、その順番（0番目、1番目）を「index」という変数に入れる繰り返し処理を始める。
3. console.log(`${index}番目のフルーツは${fruits}です`);
   取り出したユーザー名「user」とユーザの年齢「age」を、文字と一緒にコンソール画面に表示する。

【配列のコード】

const fruitsbasket = ['りんご', 'バナナ', 'オレンジ'];

　
【forEachf文のコード】

fruitsbasket.forEach(function(fruits, index) {
  console.log(`${index}番目のフルーツは${fruit}です`);
});

1. const fruitsbasket = ['りんご', 'バナナ', 'オレンジ'];
   「fruitsbasket」という名前の変数を作り、配列[]の中に「りんご」「バナナ」「オレンジ」という値を入れる。
2. fruitsbasket.forEach(function(fruits, index, array)
   「fruitsbasket」の中にあるフルーツの名前を1つずつ取り出して、取り出したフルーツを「fruits」という変数に入れ、順番（0番目、1番目）を「index」という変数に入れる。そして「array」に配列全体を入れる繰り返し処理を始める。
3. console.log();
   変数「fruits」「index」「array」を文字と一緒にコンソール画面に表示する。

【配列のコード】

const fruitsbasket = ['りんご', 'バナナ', 'オレンジ'];

　
【forEachf文のコード】

fruitsbasket.forEach(function(fruits, index, array) {
  console.log("-----------");
  console.log(`▶ 値（value）: ${fruits}`);
  console.log(`▶ 順番（index）: ${index}`);
  console.log(`▶ 配列全体（array）: ${array}`);
});

1. const scores = [80, 90, 75, 60];
   「scores（スコア）」という名前の変数を作り、配列[]の中に点数（80, 90, 75, 60）を入れる。
2. let total = 0;
   「total（合計点）」という変数を作り、最初は「0」にしておく。
3. scores.forEach(function(score) {total += score;});
   「scores」の中にある点数を1つずつ取り出して、「score」という変数に入れる繰り返しを始め、取り出した点数を「total」に足していく。
4. console.log(`合計点は${total}点です`);
   変数「total」の中身をコンソール画面に表示する。

【配列のコード】

const scores = [80, 90, 75, 60];
let total = 0;

　
【forEachf文のコード】

scores.forEach(function(score) {
  total += score;
});

console.log(`合計点は${total}点です`);

1. const users = [];
   「users」という名前の変数を作り、その中に3人分の情報（名前と年齢）をオブジェクト形式で入れた配列を作る。
2. users.forEach(function(user)
   「users」配列の中から1人ずつ取り出して、その情報を「user」という名前の変数に入れて、繰り返し処理を始める。
3. console.log(`${user.name}さんは${user.age}歳です`);
   取り出した「user」オブジェクトの中の「name」と「age」の値をコンソール画面に表示する。

【配列のコード】

const users = [
  { name: "太郎", age: 25 },
  { name: "花子", age: 30 },
  { name: "次郎", age: 20 }
];

　
【forEachf文のコード】

users.forEach(function(user) {
  console.log(`${user.name}さんは${user.age}歳です`);
});

DOM操作は、JavaScriptでツリーにアクセスし、HTMLの要素の追加・削除・書き換えなどを行うことです。

1. const fruits = ["りんご", "バナナ", "みかん"];
   「fruits」という名前の変数を作り、3つの果物の文字列を配列として入れる。
2. const list = document.getElementById("list");
   HTMLの中にある、id="list" の要素を取得して、「list」という変数に入れる。
3. fruits.forEach(function(fruit)
   「fruits」の中の要素を1つずつ取り出して、「fruit」という変数に入れて処理を繰り返す。
4. const p = document.createElement("p");
   新しく段落「<p>」の要素を作る。
5. p.textContent = fruit;
   段落の中のテキストに、取り出した果物の名前を入れる。
6. list.appendChild(p);
   作った段落「<p>果物名</p>」を、HTMLのlist要素の中に追加する。

1. const numbers = [1, 2, 3, 4, 5];
   「numbers」という名前の変数を作り、配列[]の中に数値（1, 2, 3, 4, 5）を入れる。
2. numbers.forEach(function(number)
   「numbers」の中から1つずつ数字を取り出して「number」という変数に入れながら繰り返す。
3. if (number === 3) {return; // numberが3のときだけ処理をスキップ}
   取り出した「number」が「3」のときは「return」でこの回の処理だけスキップして、次の数字へ進む。
4. console.log(number);
   変数「number」の中身をコンソール画面に表示する。

【配列のコード】

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

　
【forEachf文のコード】

numbers.forEach(function(number) {
  if (number === 3) {
    return;
  }
  console.log(number);
});

someは「条件に合うものが一つでもあるか」を調べるためのメソッドです。

具体的には次のようなことを行います。

1. const numbers = [1, 2, 3, 4, 5];
   「numbers」という名前の変数を作り、配列[]の中に数値（1, 2, 3, 4, 5）を入れる。
2. numbers.some(function(number)
   配列「numbers」の中の数字を1つずつ取り出し、「number」という変数に入れて繰り返しを始める。
3. console.log(number);
   変数「number」の中身をコンソール画面に表示する。
4. if (number === 3) {}
   もし、取り出した「number」が「3」のときは「true（はい）」を返して処理を中断する。
5. return false;
   もし、取り出した「number」が「3」以外のときは「false（いいえ）」を返して処理を続ける。

【配列のコード】

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

　
【some文のコード】

numbers.some(function(number) {
  console.log(number);
  if (number === 3) {
    return true;
  }
  return false;
});

具体的には次のようなことを行います。

1. const numbers = [1, 2, 3, 4, 5];
   「numbers」という名前の変数を作り、配列[]の中に数値（1, 2, 3, 4, 5）を入れる。
2. numbers.every(num =>
   配列「numbers」の中の数字を1つずつ取り出し、「num」という変数に入れて繰り返しを始めます。
3. console.log(num);
   変数「num」の中身をコンソール画面に表示する。
4. return num !== 3;
   数字が「3」でなければ「true」返し処理を続ける。数字が「3」なら「false」を返して繰り返し処理を止めます。

【配列のコード】

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

　
【every文のコード】

numbers.every(num => {
  console.log(num);
  return num !== 3;
});