スプレッド構文(Javascript)

// 問題1. スプレッド構文を使って、関数calcFuncの引数に配列numbers内の要素を渡し、配列の要素の和の出力結果が数値の10となるように実行してみましょう。
const numbers = [5, 2, 3]
const calcFunc = (x, y, z) => {
  console.log(x + y + z)
}
// この下に解答してください
calcFunc(...numbers)

// 問題2. スプレッド構文を用いて,配列のbasicCakeに 'egg' 、'sugar' と変数dryIngredientsを含めて定義し、ターミナルに出力してみましょう。
const dryIngredients = ['flower', 'baking-powder']
// この下に解答してください
const basicCake = ['egg', 'sugar', ...dryIngredients]

console.log(basicCake)

// 問題3. オブジェクト`hero`を展開し`age`プロパティを追加して値を`30`として変数`clonedHero`を定義し、ターミナルに出力してみましょう。
const hero = { id: 1, name: 'Superman' }
// この下に解答してください
const clonedHero = { ...hero, age: 30 }

console.log(clonedHero)


// 問題1. スプレッド構文を使って、関数calcFuncの引数に配列numbers内の要素を渡し、配列の要素の和の出力結果が数値の10となるように実行してみましょう。
const numbers = [5, 2, 3]
const calcFunc = (x, y, z) => {
  console.log(x + y + z)
}
// この下に解答してください


// 問題2. スプレッド構文を用いて,配列のbasicCakeに 'egg' 、'sugar' と変数dryIngredientsを含めて定義し、ターミナルに出力してみましょう。
const dryIngredients = ['flower', 'baking-powder']
// この下に解答してください
const basicCake = []

console.log(basicCake)

// 問題3. オブジェクト`hero`を展開し`age`プロパティを追加して値を`30`として変数`clonedHero`を定義し、ターミナルに出力してみましょう。
const hero = { id: 1, name: 'Superman' }
// この下に解答してください
const clonedHero = {}

console.log(clonedHero)


    // =======================
    // テストコード
    // =======================
    const answer1 = 'calcFunc(...numbers)';
    const answer2_1 = "const basicCake = ['egg', 'sugar', ...dryIngredients]";
    const answer2_2 = "const basicCake = ['egg', ...dryIngredients, 'sugar']";
    const answer2_3 = "const basicCake = ['sugar', 'egg', ...dryIngredients]";
    const answer2_4 = "const basicCake = ['sugar', ...dryIngredients, 'egg']";
    const answer2_5 = "const basicCake = [...dryIngredients, 'egg', 'sugar']";
    const answer2_6 = "const basicCake = [...dryIngredients, 'sugar', 'egg']";
    const answer3_1 = 'const clonedHero = { ...hero, age: 30 }';
    const answer3_2 = 'const clonedHero = { age: 30, ...hero }';
    const questions = [
        {
            title: '要素を展開してみよう',
            tests: [
                {
                    title: 'スプレッド構文を使い、関数`*calcFunc*`の結果が数値の10となるように実行してください',
                    hint: '`x`、`y`、`z`がそれぞれ`5`、`2`、`3`となるには配列`*numbers*`を展開する必要があります',
                    test: () => {
                        isContainTextInEditor(answer1);
                        isContainTextInConsoleLog(10);
                    }
                }
            ]
        },
        {
            title: '要素をまとめてみよう',
            tests: [
                {
                    title: '配列の`basicCake`を定義してください',
                    hint: '同じ配列内で、スプレッド構文による展開と追加したい要素の記述を行いましょう',
                    test: () => isContainTextInEditor([
                        answer2_1,
                        answer2_2,
                        answer2_3,
                        answer2_4,
                        answer2_5,
                        answer2_6
                    ])
                }
            ]
        },
        {
            title: '要素をコピーしてみよう',
            tests: [
                {
                    title: '変数`clonedHero`を定義してください',
                    hint: '同じオブジェクト内で、スプレッド構文による展開とプロパティの追加を行いましょう',
                    test: () => isContainTextInEditor([answer3_1, answer3_2])
                }
            ]
        }
    ];


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

変数定義(JavaScript)

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

関数(JavaScript)

アロー関数（１）

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

分割代入(React)

分割代入を使ってみよう

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

配列操作/map

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

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

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

三項演算子

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

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

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

Reactコース

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

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

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