分割代入(React)

// 問題1. 分割代入を使用しない文字列の出力をしてみよう
// 変数myFavoriteCatの全ての値を1つずつ取り出してみましょう。

const myFavoriteCat = {
  nickname: 'Kiki',
  age: 3
}
console.log(myFavoriteCat.nickname)
console.log(myFavoriteCat.age)

// 配列myFavoriteDogの全ての値を1つずつ取り出してみましょう。

const myFavoriteDog = ['豆柴', 'オス']
console.log(myFavoriteDog[0])
console.log(myFavoriteDog[1])

// 問題2. 変数myFavoriteCatを分割代入を用いて、nicknameとageのプロパティを取り出してみよう

const { nickname, age } = myFavoriteCat
console.log(nickname)
console.log(age)

// 問題3. 変数myFavoriteDogの分割代入を用いて、豆柴とオスの要素を取り出してみよう
// ※ 変数名は、豆柴 → breed、オス → sexとしてください。

const [breed, sex] = myFavoriteDog
console.log(breed)
console.log(sex)

// 問題4. 変数myFavoriteCatのニックネームのプロパティを別名( nickname → catName、age → catAge )で出力してみましょう

const { nickname: catName, age: catAge } = myFavoriteCat
console.log(catName)
console.log(catAge)


// 問題1. 分割代入を使用しない文字列の出力をしてみよう
// 変数myFavoriteCatの全ての値を1つずつ取り出してみましょう。
const myFavoriteCat = {
  nickname: 'Kiki',
  age: 3
}

// 配列myFavoriteDogの全ての値を1つずつ取り出してみましょう。
const myFavoriteDog = ['豆柴', 'オス']

// 問題2. 変数myFavoriteCatを分割代入を用いて、nicknameとageのプロパティを取り出してみよう

// 問題3. 変数myFavoriteDogの分割代入を用いて、豆柴とオスの要素を取り出してみよう
// ※ 変数名は、豆柴 → breed、オス → sexとしてください。

// 問題4. 変数myFavoriteCatのニックネームのプロパティを別名( nickname → catName、age → catAge )で出力してみましょう



    // =======================
    // テストコード
    // =======================
    const answer1 = 'console.log(myFavoriteCat.nickname)';
    const answer2 = 'console.log(myFavoriteCat.age)';
    const answer3 = 'console.log(myFavoriteDog[0])';
    const answer4 = 'console.log(myFavoriteDog[1])';
    const answer5 = 'const { nickname, age } = myFavoriteCat';
    const answer6 = 'console.log(nickname)';
    const answer7 = 'console.log(age)';
    const answer8 = 'const [breed, sex] = myFavoriteDog';
    const answer9 = 'console.log(breed)';
    const answer10 = 'console.log(sex)';
    const answer11 = 'const { nickname: catName, age: catAge } = myFavoriteCat';
    const answer12 = 'console.log(catName)';
    const answer13 = 'console.log(catAge)';
    const questions = [
        {
            title: '分割代入を使用しない文字列の出力をしてみよう',
            tests: [
                {
                    title: '変数`myFavoriteCat`のnicknameプロパティを取り出してください',
                    hint: '`console.log(myFavoriteCat.nickname)`と記述しましょう',
                    test: () => isContainTextInEditor(answer1)
                },
                {
                    title: '変数`myFavoriteCat`のageプロパティを取り出してください',
                    hint: '`console.log(myFavoriteCat.age)`と記述しましょう',
                    test: () => isContainTextInEditor(answer2)
                },
                {
                    title: '変数`myFavoriteDog`の豆柴の要素を取り出してください',
                    hint: '`console.log(myFavoriteDog[0])`と記述しましょう',
                    test: () => isContainTextInEditor(answer3)
                },
                {
                    title: '配列`myFavoriteDog`のオスの要素を取り出してください',
                    hint: '`console.log(myFavoriteDog[1])`と記述しましょう',
                    test: () => isContainTextInEditor(answer4)
                }
            ]
        },
        {
            title: 'オブジェクトの分割代入をやってみましょう',
            tests: [
                {
                    title: '変数`myFavoriteCat`にオブジェクトの分割代入を定義してください',
                    hint: '`const { nickname, age } = myFavoriteCat`と記述し、分割代入で定義しましょう',
                    test: () => isContainTextInEditor(answer5)
                },
                {
                    title: 'オブジェクトの分割代入した変数`myFavoriteCat`のnicknameプロパティを取り出してください',
                    hint: '`console.log(nickname)`と記述しましょう',
                    test: () => isContainTextInEditor(answer6)
                },
                {
                    title: 'オブジェクトの分割代入した変数`myFavoriteCat`のageプロパティを取り出してください',
                    hint: '`console.log(age)`と記述しましょう',
                    test: () => isContainTextInEditor(answer7)
                }
            ]
        },
        {
            title: '配列の分割代入をやってみましょう',
            tests: [
                {
                    title: '変数`myFavoriteDog`に配列の分割代入を定義してください',
                    hint: '`const [breed, sex] = myFavoriteDog`と記述し、配列の分割代入で定義しましょう',
                    test: () => isContainTextInEditor(answer8)
                },
                {
                    title: '配列の分割代入した変数`myFavoriteDog`のbreedプロパティを取り出してください',
                    hint: '`console.log(breed)`と記述しましょう',
                    test: () => isContainTextInEditor(answer9)
                },
                {
                    title: '配列の分割代入した変数`myFavoriteDog`のsexプロパティを取り出してください',
                    hint: '`console.log(sex)`と記述しましょう',
                    test: () => isContainTextInEditor(answer10)
                }
            ]
        },
        {
            title: '取り出したプロパティに別名をつけてみよう',
            tests: [
                {
                    title: '変数`myFavoriteCat`のニックネームのプロパティを別名`( nickname → catName、age → catAge )`で定義してください',
                    hint: '`const { nickname: catName, age: catAge } = myFavoriteCat`と記述しましょう',
                    test: () => isContainTextInEditor(answer11)
                },
                {
                    title: '変数`myFavoriteCat`のcatNameプロパティを取り出してください',
                    hint: '`console.log(catName)`と記述しましょう',
                    test: () => isContainTextInEditor(answer12)
                },
                {
                    title: '変数`myFavoriteCat`のcatAgeプロパティを取り出してください',
                    hint: '`console.log(catAge)`と記述しましょう',
                    test: () => isContainTextInEditor(answer13)
                }
            ]
        }
    ];


分割代入を使ってみよう

変数定義(JavaScript)

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

関数(JavaScript)

アロー関数（１）

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

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

スプレッド構文(Javascript)

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

配列操作/map

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

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

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

三項演算子

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

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

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

Reactコース

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

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

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