3択クイズを作成したいのだが，JavaScript で分からない所がある。


3択のクイズを作成したい。

### 発生している問題・エラーメッセージ

3択クイズを作ろうと，ある教材の指示通りに作っていたのですが，
貼り付けてあるコードの
quizSet[currentNum].c.forEach(choice => {
const li = document.createElement("li");
li.textContent = choice;
choices.appendChild(li)

の c.forEach(choice => {
より以下が何を表しているのか分かりません。

エラーメッセージ


### 該当のソースコード
quizSet[currentNum].c.forEach(choice => {
    const li = document.createElement("li");
    li.textContent = choice;
    choices.appendChild(li)

JavaScript
コード

'use strict';

{
  const question = document.getElementById('question');
  const choices = document.getElementById('choices');
  const btn = document.getElementById('btn');

  const quizSet = [
    {q: 'What is A?', c: ['A0', 'A1', 'A2']},
    {q: 'What is B?', c: ['B0', 'B1', 'B2']},
    {q: 'What is C?', c: ['C0', 'C1', 'C2']},
  ];
  let currentNum = 0;

  question.textContent = quizSet[currentNum].q;

  quizSet[currentNum].c.forEach(choice => {
    const li = document.createElement('li');
    li.textContent = choice;
    choices.appendChild(li);
  });
}

```html
コード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Quiz</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <section class="container"> <p id="question"></p> <ul id="choices"></ul> <div id="btn" class="disabled">Next</div> </section> <script src="js/main.js"></script> </body> </html>

コード

試したこと

forEach() とdocument.createElement() について調べた。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。。

m.ts10806

2020/02/18 11:32

マークダウンのcode機能は任意数設置できるのでHTMLにも反映してください。また、提示のJavaScriptのコードは構文エラーが出ますのでそもそも動きませんよ。

行動規範の内容に同意します

回答1件

ベストアンサー

モダンな書き方です。

js
1// この式の結果は配列っぽい
2// quizSet[currentNum].c
3
4// なのでやってる事自体はこれと同じ
5for (let i = 0; i < quizSet[currentNum].c.length; i++) {
6    const choice = quizSet[currentNum].c[i];
7    const li = document.createElement("li");
8    li.textContent = choice;
9    choices.appendChild(li);
10}

このforEachやmapは所謂リスト操作という必殺技で、
上記は6行必要ですが、forEachはまず行数が5行に圧縮されます。

また対象が前、forEachという「各々」が2番目
加工内容が関数配下という順で現れるので、英語っぽくて読みやすいのも特徴です。

そのため多くの言語やライブラリで採用されています。
PythonやRubyなんかではfor文書く奴は雑魚みたいな扱いをされることもあります。

例題として九九の二次元配列をmapを利用して作ってみます。

mapというのは数学用語の写像という意味があり、
そこから転じて「値の集合」それぞれに加工する関数を潜らせます。
そうして得た新しい値の集合を配列にして戻すという意味で使われます。

普通に九九をfor文で作ると10行近くになると思いますが、ご覧の通り2行です。
まぁ必殺技なので最初は何だよコレ……となるかと思いますが、
興味が出てきたらゆくゆくという感じで学習してみてください。

js
1const kuku = [1, 2, 3, 4, 5, 6, 7, 8, 9];
2
3const result = kuku.map(a => kuku.map(b => a * b));
4
5console.log(JSON.stringify(result, null, 2));

結果