三項演算子

// 問題1. 処理の基本をおさえよう
// 以下のif文を三項演算子に書き換えましょう。
const saving = (budget, expense) => {
  return budget - expense < 0 ? 'You bought too many candies!' : 'Well done!'
}
console.log(saving(200, 230))

// 問題2. 三項演算子を使用して商品金額を正しく出力させよう

// 条件分岐のための関数を定義しましょう。
const formattedPrice = (price) => {
  return typeof price === 'number'
    ? price.toLocaleString()
    : '数値を入力してください'
}
// 5100を引数として渡し、結果を出力させてみましょう。
console.log(formattedPrice(5100))
// 文字列’React’を引数として渡し、結果を出力させてみましょう。
console.log(formattedPrice('React'))

// 問題3. 三項演算子を使用して予算オーバーかどうかを判定しよう

// 関数checkSumを定義しましょう。
const checkSum = (price1, price2) => {
  return price1 + price2 > 5000 ? '予算オーバーです' : '予算内です'
}

// 300と4500の商品を買う場合の処理結果を出力してみましょう。
console.log(checkSum(300, 4500))
// 1800と3500の商品を買う場合の処理結果を出力してみましょう。
console.log(checkSum(1800, 3500))


// 問題1. 処理の基本をおさえよう
// 以下のif文を三項演算子に書き換えましょう。
const saving = (budget, expense) => {
  if (budget - expense < 0) {
    return 'You bought too many candies!'
  } else {
    return 'Well done!'
  }
}

console.log(saving(200, 230))

// 問題2. 三項演算子を使用して商品金額を正しく出力させよう

// 条件分岐のための関数を定義しましょう。
const formattedPrice = (price) => {}

// 5100を引数として渡し、結果を出力させてみましょう。

// 文字列’React’を引数として渡し、結果を出力させてみましょう。

// 問題3. 三項演算子を使用して予算オーバーかどうかを判定しよう

// 関数checkSumを定義しましょう。

// 300と4500の商品を買う場合の処理結果を出力してみましょう。

// 1800と3500の商品を買う場合の処理結果を出力してみましょう。



    // =======================
    // テストコード
    // =======================
    const answer1 = "budget - expense < 0 ? 'You bought too many candies!' : 'Well done!'";
    const answer2 = "return typeof price === 'number'";
    const answer3 = 'console.log(formattedPrice(5100))';
    const answer4 = "console.log(formattedPrice('React'))";
    const answer5 = 'const checkSum = (price1, price2) => {';
    const answer6 = 'console.log(checkSum(300, 4500))';
    const answer7 = 'console.log(checkSum(1800, 3500))';
    const questions = [
        {
            title: '三項演算子の処理の基本をおさえよう',
            tests: [
                {
                    title: 'if文を三項演算子に書き換えてください',
                    hint: "`const saving = (budget, expense) => { return budget - expense < 0 ? 'You bought too many candies!' : 'Well done!' }`と記述しましょう",
                    test: () => isContainTextInEditor(answer1)
                }
            ]
        },
        {
            title: '三項演算子を使用して、商品金額を正しく出力させよう',
            tests: [
                {
                    title: '三項演算子を使った条件分岐のための関数を定義してください',
                    hint: "`typeofメソッド`を使用して、`const formattedPrice = (price) => { return typeof price === 'number' ? price.toLocaleString() : '数値を入力してください'}`と記述しましょう",
                    test: () => isContainTextInEditor(answer2)
                },
                {
                    title: '5100を引数として渡し、出力してください',
                    hint: '`console.log(formattedPrice(5100))`と記述しましょう',
                    test: () => isContainTextInEditor(answer3)
                },
                {
                    title: "文字列'React'を引数として渡し、出力してください",
                    hint: "`console.log(formattedPrice('React'))`と記述しましょう",
                    test: () => isContainTextInEditor(answer4)
                }
            ]
        },
        {
            title: '三項演算子を使用して、予算オーバーかどうかを判定しよう',
            tests: [
                {
                    title: '三項演算子を使った関数`checkSum`を定義してください',
                    hint: "`const checkSum = (price1, price2) => { return price1 + price2 > 5000 ? '予算オーバーです' : '予算内です' }`と記述しましょう",
                    test: () => {
                        expect(checkSum(1000, 2000)).toEqual('予算内です'),
                            expect(checkSum.length).toEqual(2);
                    }
                },
                {
                    title: '300と4500の商品を買う場合の処理結果を出力してください',
                    hint: '`console.log(checkSum(300, 4500))`と記述しましょう',
                    test: () => isContainTextInEditor(answer6)
                },
                {
                    title: '1800と3500の商品を買う場合の処理結果を出力してください',
                    hint: '`console.log(checkSum(1800, 3500))`と記述しましょう',
                    test: () => isContainTextInEditor(answer7)
                }
            ]
        }
    ];


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

変数・定数定義(JavaScript)

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

関数(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
```