AWS CodeWhispererをすごさを実感する方法
現時点で、GitHub Copilotを使うと、プログラミングが上達しないような気がして使いたくない（料金がかかるからかもしれません）。
無料のAWS CodeWhispererを使おうということで、初めは、Youtube動画でやっているような方法で使用しようとしましたが、使い方が間違ってました。
結論から言うと、冗長なコードになりやすい初心者にはうってつけということです。
私のような初心者は、どうしても、類似のコードを、何回も書いてしまうのですが、それを、これはコード予想してくれるため、かなりの時間節約になります。
ここでは、４択問題のボタンの作成を行います。
『A』ボタンを押すと、下記のようになります。
『B』ボタンを押すと、下記のようになります。
例えば何も考えなければ下記のような感じになりました。
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, Button } from "react-native";
import { useState } from "react";
export default function App() {
const correctAnswer = "b";
const problemText =
const [buttonText_a, setButtonText_a] = useState("a"); ・・・①
const [buttonText_b, setButtonText_b] = useState("b"); ・・・①
const [buttonText_c, setButtonText_c] = useState("c"); ・・・①
const [buttonText_d, setButtonText_d] = useState("d"); ・・・①
const [correctText, setCorrectText] = useState("");
const [explanationText, setExplanationText] = useState("");
const pressHandler_a = () => {
if (buttonText_a == correctAnswer) {
setCorrectText("Correct");
setExplanationText("");
} else {
setCorrectText("Incorrect!");
setExplanationText(`正解は${correctAnswer}でした。`);
}
};
const pressHandler_b = () => {
if (buttonText_b == correctAnswer) {
setCorrectText("Correct");
setExplanationText("");
} else {
setCorrectText("Incorrect!");
setExplanationText(`正解は${correctAnswer}でした。`);
}
};
const pressHandler_c = () => {
if (buttonText_c == correctAnswer) {
setCorrectText("Correct");
setExplanationText("");
} else {
setCorrectText("Incorrect!");
setExplanationText(`正解は${correctAnswer}でした。`);
}
};
const pressHandler_d = () => {
if (buttonText_d == correctAnswer) {
setCorrectText("Correct");
setExplanationText("");
} else {
setCorrectText("Incorrect!");
setExplanationText(`正解は${correctAnswer}でした。`);
}
};
return (
<View style={styles.container}>
<Text>{problemText}</Text>
<View style={styles.buttonContainer}>
<Button title={buttonText_a} onPress={pressHandler_a} /> ・・・②
<Button title={buttonText_b} onPress={pressHandler_b} /> ・・・②
<Button title={buttonText_c} onPress={pressHandler_c} /> ・・・②
<Button title={buttonText_d} onPress={pressHandler_d} /> ・・・②
</View>
<Text>{correctText}</Text>
<Text>{explanationText}</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
buttonContainer: {
flexDirection: "row",
justifyContent: "space-around",
width: "80%",
},
});
似たような反復箇所は1個目を書いていれば、2個目からはコード補完してくれます。
選択肢が、ア、イ、ウ，エであったら、①をそれぞれ変えればよいようにしてます。②のtilteに、文字列で直接記載してもよいかもしれません。immutableかなということで①のように記述してます。
onPress後の関数は引数なしですが、引数ありにすれば、a～dについての処理はまとめることができそうだとラクをしようとすると、力がないために、どつぼにはまることがあります。
ただし、CodeWhispererがあれば、わざわざ書き直さなくても、コード補完は、きっちり、aのところを、b,c,dにかけて書いてくれますので、ややこしくなく、間違えずに、早く作成できるのです。
ちなみに、Windowsでしているので、改行は、\r\nになってます。
