配列操作/map

// 問題1. map()メソッドを使って、配列をコピーしよう
const foodMenu = ['スープ', 'ペペロンチーノ', 'サラダ']

const foodMenu2 = foodMenu.map((food) => food)

console.log(foodMenu2)

// 問題2. 配列の各要素に同じ処理を加えて、新たな配列を作成してみよう

const arr = [12, 54, 69, 43]
// map()メソッドで新たな配列newArrを作成しましょう。
const newArr = arr.map((value) => {
  return value * 1.5
})
// 配列newArrを出力してみましょう。
console.log(newArr)

// 問題3. オブジェクト配列の情報を一部切り出した新たな配列を取得しよう

const contactList = [
  { name: 'シェリー', phone: 1128478426 },
  { name: 'アレックス', phone: 7652093342 },
  { name: 'キャサリン', phone: 2148592033 }
]
// 連絡先の名前のみを要素として持つ配列friendListを、map()メソッドで作成しましょう。
const friendList = contactList.map((contact) => ({ name: contact.name }))
// 配列friendListを出力して新たなオブジェクト配列が作成されているか確認しましょう。
console.log(friendList)


// 問題1. map()メソッドを使って、配列をコピーしよう
const foodMenu = ['スープ', 'ペペロンチーノ', 'サラダ']

// 問題2. 配列の各要素に同じ処理を加えて、新たな配列を作成してみよう

const arr = [12, 54, 69, 43]
// map()メソッドで新たな配列newArrを作成しましょう。

// 配列newArrを出力してみましょう。

// 問題3. オブジェクト配列の情報を一部切り出した新たな配列を取得しよう

const contactList = [
  { name: 'シェリー', phone: 1128478426 },
  { name: 'アレックス', phone: 7652093342 },
  { name: 'キャサリン', phone: 2148592033 }
]
// 連絡先の名前のみを要素として持つ配列friendListを、map()メソッドで作成しましょう。

// 配列friendListを出力して新たなオブジェクト配列が作成されているか確認しましょう。



    // =======================
    // テストコード
    // =======================
    const answer1 = 'const foodMenu2 = foodMenu.map((food) => food)';
    const answer2 = 'const newArr = arr.map((value) => {';
    const answer3 = 'console.log(newArr)';
    const answer4 = 'const friendList = contactList.map((contact) => ({ name: contact.name }))';
    const answer5 = 'console.log(friendList)';
    const questions = [
        {
            title: 'mapを用いた配列処理をしてみよう',
            tests: [
                {
                    title: '`map()メソッド`を使って、配列をコピーしてください',
                    hint: '`const foodMenu2 = foodMenu.map((food) => food)`と記述しましょう',
                    test: () => isContainTextInEditor(answer1)
                }
            ]
        },
        {
            title: '配列の各要素に同じ処理を加えて、新たな配列を作成してみよう',
            tests: [
                {
                    title: '`map()メソッド`で新たな配列`newArr`を作成してください',
                    hint: '`const newArr = arr.map((value) => { return value * 1.5 })`と記述しましょう',
                    test: () => isContainTextInEditor(answer2)
                },
                {
                    title: '配列`newArr`を出力してください',
                    hint: '`console.log(newArr)`と記述しましょう',
                    test: () => isContainTextInEditor(answer3)
                }
            ]
        },
        {
            title: 'オブジェクト配列の情報を一部切り出した新たな配列を取得しよう',
            tests: [
                {
                    title: '連絡先の名前のみを要素として持つ配列`friendList`を、`map()メソッド`で作成してください',
                    hint: '`const friendList = contactList.map((contact) => ({ name: contact.name }))`と記述しましょう',
                    test: () => isContainTextInEditor(answer4)
                },
                {
                    title: '配列`friendList`を出力して新たなオブジェクト配列を作成してください',
                    hint: '`console.log(friendList)`と記述しましょう',
                    test: () => isContainTextInEditor(answer5)
                }
            ]
        }
    ];


mapを用いた配列処理をしてみよう

変数定義(JavaScript)

変数の宣言や代入について学ぼう

関数(JavaScript)

アロー関数（１）

アロー関数を使ってみよう

分割代入(React)

分割代入を使ってみよう

オブジェクトの省略記法について知ろう

スプレッド構文(Javascript)

スプレッド構文を使ってみよう

配列操作/filter(プリミティブ)

filterを用いた配列処理をしてみよう

三項演算子

三項演算子を使いこなそう

Reactに頻出するJavaScriptの基礎概念をおさらいします。
変数宣言から分割代入、スプレッド構文まで基本を確実にマスターします。

世界的にも人気なReactを使って、Webアプリケーションの作成について学んでいきます

Reactコース

【最低限】はじめてのReact👼🏻

「Reactによく出るJavaScriptをおさらいしよう」レッスンの総復習クイズです。

```javascript
function triple(num){
  console.log($(1) * 3);
}
triple($(2)) //実装結果 30
```