変数定義(JavaScript)

// 問題1. let で変数宣言と代入をしてみよう
// 変数fruitに'あまおう'という文字列を出力してみましょう。

let fruit = 'あまおう'
console.log(fruit)

// 変数の再代入で'スカイベリー'という文字列を出力してみましょう。

fruit = 'スカイベリー'
console.log(fruit)

// 問題2. const で変数宣言をしてみよう
// 変数favoriteFruitに'シャインマスカット'という文字列を出力してみましょう。

const favoriteFruit = 'シャインマスカット'
console.log(favoriteFruit)

// 問題3. const での変更可能な変数宣言について
// オブジェクト変数fruitDictionaryを定義し、{name: 'ラフランス', country: 'France' }を出力してみましょう。

const fruitDictionary = {
  name: 'ラフランス',
  country: 'France'
}
console.log(fruitDictionary)

// nameプロパティの値を'金柑'に変更して出力結果を確認してみましょう。

fruitDictionary.name = '金柑'
console.log(fruitDictionary)

// '黄金色'という値を持つcolorプロパティをfruitDictionaryオブジェクトに追加して、出力してみましょう。

fruitDictionary.color = '黄金色'
console.log(fruitDictionary)

// 'マンゴスチン', 'ランブータン', 'リュウガン'を要素に持つ配列変数fruitsCartを定義して、出力してみましょう。

const fruitsCart = ['マンゴスチン', 'ランブータン', 'リュウガン']
console.log(fruitsCart)

// fruitsCartの2つ目の値を'シュガーアップル'に変更して、出力してみましょう。

fruitsCart[1] = 'シュガーアップル'
console.log(fruitsCart)

// push()メソッドを使用してfruitsCartに'ジャックフルーツ'を追加し、出力してみましょう。

fruitsCart.push('ジャックフルーツ')
console.log(fruitsCart)


// 問題1. let で変数宣言と代入をしてみよう
// 変数fruitに'あまおう'という文字列を出力してみましょう。

// 変数の再代入で'スカイベリー'という文字列を出力してみましょう。

// 問題2. const で変数宣言をしてみよう
// 変数favoriteFruitに'シャインマスカット'という文字列を出力してみましょう。

// 問題3. const での変更可能な変数宣言について
// オブジェクト変数fruitDictionaryを定義し、{name: 'ラフランス', country: 'France' }を出力してみましょう。

// nameプロパティの値を'金柑'に変更して出力結果を確認してみましょう。

// '黄金色'という値を持つcolorプロパティをfruitDictionaryオブジェクトに追加して、出力してみましょう。

// 'マンゴスチン', 'ランブータン', 'リュウガン'を要素に持つ配列変数fruitsCartを定義して、出力してみましょう。

// fruitsCartの2つ目の値を'シュガーアップル'に変更して、出力してみましょう。

// push()メソッドを使用してfruitsCartに'ジャックフルーツ'を追加し、出力してみましょう。



    // =======================
    // テストコード
    // =======================
    const answer1 = "let fruit = 'あまおう'";
    const answer2 = "fruit = 'スカイベリー'";
    const answer3 = "const favoriteFruit = 'シャインマスカット'";
    const answer4 = 'const fruitDictionary = ';
    const answer5 = "fruitDictionary.name = '金柑'";
    const answer6 = "fruitDictionary.color = '黄金色'";
    const answer7 = "const fruitsCart = ['マンゴスチン', 'ランブータン', 'リュウガン']";
    const answer8 = "fruitsCart[1] = 'シュガーアップル'";
    const answer9 = "fruitsCart.push('ジャックフルーツ')";
    const questions = [
        {
            title: 'let で変数宣言と代入をしてみよう',
            tests: [
                {
                    title: "変数`fruit`に'あまおう'という文字列を宣言してください",
                    hint: '変数`fruit`を`let`で宣言しましょう',
                    test: () => isContainTextInEditor(answer1)
                },
                {
                    title: "変数の再代入で'スカイベリー'という文字列を宣言してください",
                    hint: "fruit = 'スカイベリー'と記述し、変数`fruit`を再代入しましょう",
                    test: () => isContainTextInEditor(answer2)
                }
            ]
        },
        {
            title: 'const で変数宣言をしてみよう',
            tests: [
                {
                    title: "変数`favoriteFruit`に'シャインマスカット'という文字列を宣言してください",
                    hint: '変数`favoriteFruit`を`const`で宣言しましょう',
                    test: () => isContainTextInEditor(answer3)
                }
            ]
        },
        {
            title: 'const での変更可能な変数宣言について',
            tests: [
                {
                    title: "オブジェクト変数`fruitDictionary`を定義し、`{name: 'ラフランス', country: 'France' }`を定義してください",
                    hint: "`const fruitDictionary = { name: 'ラフランス', country: 'France'}`と記述し、オブジェクトで定義しましょう",
                    test: () => isContainTextInEditor(answer4)
                },
                {
                    title: "`nameプロパティ`の値を'金柑'に変更してください",
                    hint: "`fruitDictionary.name = '金柑'`と記述して、プロパティの値を変更しましょう",
                    test: () => isContainTextInEditor(answer5)
                },
                {
                    title: "'黄金色'という値を持つ`colorプロパティ`を`fruitDictionary`オブジェクトに追加してください",
                    hint: "`fruitDictionary.color = '黄金色'`と記述し、fruitDictionaryオブジェクトに追加しましょう",
                    test: () => isContainTextInEditor(answer6)
                },
                {
                    title: "'マンゴスチン', 'ランブータン', 'リュウガン'を要素に持つ配列変数`fruitsCart`を定義してください",
                    hint: "`const fruitsCart = ['マンゴスチン', 'ランブータン', 'リュウガン']`と記述し、配列で定義しましょう",
                    test: () => isContainTextInEditor(answer7)
                },
                {
                    title: "`fruitsCart`の2つ目の値を'シュガーアップル'に変更してください",
                    hint: "`fruitsCart[1] = 'シュガーアップル'`と記述し、2つ目の値を変更しましょう",
                    test: () => isContainTextInEditor(answer8)
                },
                {
                    title: "`push()メソッド`を使用して`fruitsCart`に'ジャックフルーツ'を追加してください",
                    hint: "`fruitsCart.push('ジャックフルーツ')`と記述し、プロパティを追加しましょう",
                    test: () => isContainTextInEditor(answer9)
                }
            ]
        }
    ];


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

関数(JavaScript)

アロー関数（１）

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

分割代入(React)

分割代入を使ってみよう

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

スプレッド構文(Javascript)

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

配列操作/map

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

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

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

三項演算子

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

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

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

Reactコース

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

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

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