JavaScript(React,TypeScript)リファクタリングに関する質問

###　JavaScript(React,TypeScript)リファクタリングに関する質問
お疲れ様です。
初投稿させていただきます。

学習のため、計算ゲームを作っています。
以下のコードは正しく動きますが、冗長に感じられるので改善点があれば教えていただけると助かります。

内容は足し算、引き算、掛け算それぞれに対して結果を判定する関数となっています。

###　コード内容

const handleAnswer = () => {
    if (operator === '+') {
        const correctAnswer = (value1 + value2).toString();
        if (answer === correctAnswer) {
            alert('正解！');
            setCorrectCount(correctCount + 1);
        } else {
            alert(`ざんねん！正解は${correctAnswer}でした`);
            setWrongCount(wrongCount + 1);
        }
        setAnswer('');
    } else if (operator === '-') {
        const correctAnswer = (value1 - value2).toString();
        if (answer === correctAnswer) {
            alert('正解！');
            setCorrectCount(correctCount + 1);
        } else {
            alert(`ざんねん！正解は${correctAnswer}でした`);
            setWrongCount(wrongCount + 1);
        }
        setAnswer('');
    } else if (operator === 'x') {
        const correctAnswer = (value1 * value2).toString();
        if (answer === correctAnswer) {
            alert('正解！');
            setCorrectCount(correctCount + 1);
        } else {
            alert(`ざんねん！正解は${correctAnswer}でした`);
            setWrongCount(wrongCount + 1);
        }
        setAnswer('');
    }
};

補足情報（React, TypeScriptのバージョン）

"react": "^17.0.2"
"typescript": "^4.1.2"

ここにより詳細な情報を記載してください。

nekoniki

2021/08/17 05:20

コードはコードブロック(```)で囲って表示してください。

mather

2021/08/17 05:29

> 冗長に感じられるのでご自身が冗長に感じる部分をもっと具体的に記載してみましょう。言葉にして説明するのも練習の一環だと思ったほうが良いです。

行動規範の内容に同意します

回答1件

ベストアンサー

同じようなコードをなるべく書かないといいと思います。

javascript
1function get_answer(op,v1,v2) {
2	if (op === '+') return (v1 + v2).toString();
3	if (op === '-') return (v1 - v2).toString();
4	if (op === 'x') return (v1 * v2).toString();
5	return '';
6}
7
8const handleAnswer = () => {
9	const correctAnswer = get_answer(operator,value1,value2);
10	if (answer === correctAnswer) {
11		alert('正解！');
12		setCorrectCount(correctCount + 1);
13	} else {
14		alert('ざんねん！正解は' + correctAnswer + 'でした');
15		setWrongCount(wrongCount + 1);
16	}
17	setAnswer('');
18};