やる事
numbers配列内の数値を３以下とそれ以外で分けたオブジェクトを作る
const numbers = [1, 2, 3, 4, 5, 6];
{
ika: [1,2,3],
igai: [4,5,6]
}
まずは自分で書いてみる
const numbers = [1, 2, 3, 4, 5, 6];
let siwake = {
ika: [],
igai: []
}
numbers.forEach((number) => {
if (number <= 3) {
siwake.ika = [...siwake.ika, number]
}
else {
siwake.igai = [...siwake.igai, number]
}
});
console.log(siwake);
スプレット構文をループ処理内で使っているあたりを怒られそう。
質問してみた
Q.
上記のようなjavascriptのコードのように3以下とそれ以外で分ける処理で、より軽量でエラーが起こりにくい書き方を教えて下さい。
A.
上記のコードは、与えられた配列numbersをループして、特定の条件に基づいて2つの別々の配列 siwake.ikaとsiwake.igaiに要素を追加しています。このコードは機能的ではありますが、より効率的な方法があります。
以下は、より効率的なアプローチです。
const numbers = [1, 2, 3, 4, 5, 6];
const siwake = {
ika: [],
igai: []
};
for (const num of numbers) {
if (num <= 3) {
siwake.ika.push(num);
} else {
siwake.igai.push(num);
}
}
console.log(siwake);
このコードでは、forEachメソッドの代わりにfor...ofループを使用し、配列に要素を直接pushメソッドを使用して追加しています。これにより、スプレッド演算子や新しい配列を作成する必要がなく、メモリ使用量が削減され、パフォーマンスが向上します。
また、constキーワードを使用してnumbersとsiwake変数を宣言しました。これは、変数が再代入されないことを示すため、より安全なコードになります。
さらに質問をする。
Q.これでも動きましたけど
for (num of numbers) {
if (num <= 3) {
siwake.ika.push(num);
} else {
siwake.igai.push(num);
}
}
以下のようにconst num とした理由を教えてください。
for (const num of numbers) {
if (num <= 3) {
siwake.ika.push(num);
} else {
siwake.igai.push(num);
}
}
A.
for...ofループを使用する際に、ループ内でnumという変数を宣言する方法についての質問ですね。
for (num of numbers) { ... }
このコードは、for...ofループでnumという変数を宣言していますが、この場合、num変数はループ内で再代入可能な変数として扱われます。つまり、numの値が再代入される可能性があるため、このコードは動作しますが、コードの可読性や保守性に欠ける可能性があります。
一方、
for (const num of numbers) { ... }
このコードでは、constキーワードを使用してnum変数を宣言しています。この場合、num変数は再代入不可能な定数として扱われ、ループ内でnumの値が再代入されることはありません。このようにすることで、コードの可読性が向上し、numの値が誤って変更されることを防ぐことができます。
したがって、constキーワードを使用して変数を宣言することは、コードの品質を向上させ、バグを防ぐのに役立つ良いプラクティスです。コード内で再代入が不要な変数は、できるだけ定数として宣言することが推奨されます。
TypeScriptで書き直してもらう
もちろん、TypeScriptで同じ処理を書いてみましょう。以下がTypeScriptでのコードです。
const numbers: number[] = [1, 2, 3, 4, 5, 6];
const siwake: { ika: number[]; igai: number[] } = {
ika: [],
igai: [],
};
for (const num of numbers) {
if (num <= 3) {
siwake.ika.push(num);
} else {
siwake.igai.push(num);
}
}
console.log(siwake);
このコードでは、変数numbersとsiwakeの型注釈を追加して、TypeScriptの型チェックを有効にしています。また、number[]型の配列を使用してnumbersとsiwakeの型を指定しました。これにより、TypeScriptは適切な型で変数を使用することを確認し、型の不一致によるエラーを防ぎます。
まとめ
簡単な処理でChatGPTで質問を行ってから、本番のコードに生かすと、インプットとアウトプットが効率的にできますね！
まだまだ、chatGPT力を上げなければ。。。