JavaScript課題 記録

JavaScript課題でやったことをメモしておく。

基礎学習

ProgateでJavaScriptのコードを実際に書きながら基礎学習。
他言語だがプログラミング経験があるので、さすがにサクサク書いていける。自己肯定感がいい感じに上がる気がする。
仕事のコードもこれくらいスラスラ書ければ楽しいのに...

https://prog-8.com/courses/es6

演習課題

基礎学習が終わったら演習問題に取り組む。

拡張機能で動作確認

vscode上でJavaScriptを実行して動作確認できないかと調べたところ、
以下の拡張機能があったのでインストール。vscodeで書いたコードの動作確認することができた。
https://aya-cat-g-tech.hatenadiary.jp/entry/2024/03/09/193202

関数名はAIで

英語はダメで、処理の内容を見ていい感じの関数名はぱっと思いつかない。
そこに時間をかけるともったいないので、関数名はＡＩに付けてもらった。

chatgptに依頼

基礎学習の範囲で書けた問題

問題 1, 3, 5, 6, 8, 9

追加で学習が必要だった問題

問題 2

引数を何個でも設定できるようにする方法が分からなかったので調べた。
以下の残余引数を使って解決した。
https://qiita.com/momotaro_kawaii/items/655fb2be7a1b6df4daed

問題 4

配列メソッドでの重複する値を除去する処理が思いつかなかったので調べた。
以下を読んで、配列メソッドの index, array 引数と、それを使った重複する値を除去するロジックを
理解して解決した。
https://qiita.com/Jochun/items/2677dd60edd5d4f12835

問題 7

関数でオブジェクトを返す書き方が分からなかったので調べた。
検索するとAIの自動概要で以下が出てきたので解決した。

通常の関数で返す方法return キーワードの後に {} で囲んだオブジェクトを書きます。
function getUser() {
  return { name: "Taro", age: 20 };
}
アロー関数で返す方法
{} が関数の処理のブロックと間違われないように、オブジェクトを () で囲みます。
const getUser = () => ({ name: "Taro", age: 20 });

問題10

配列メソッドにソートするものがあるか調べた。
以下を参考にして解決。ソートの仕様が理解しきれていないので、もう少し学習が必要。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort


ひとまず課題終了

上記のように分からないところは調べつつ、自力で以下のようなコードを書いていった。

// 問題1: 引数として受け取った数値を2倍にして返す関数を作成して実行してください。
// 例) 引数: 2, 返り値: 4

// 関数
const doubleValue = (value) => {
  return value * 2;
};

// 定数
const number = 2;

// log表示
console.log(doubleValue(number));

AIでコードレビュー

課題を提出する前に、AIを使ってのコードレビューをしてみる。

claudeにレビューを依頼

以下のような指摘があった。

問題2（getMax）

• for文の使用は課題の指示通りでOKです。

• 気になる点：引数が空のとき false を返していますが、他のケースでは数値を返す関数なので、戻り値の型が場面によって変わってしまいます（呼び出し側で if (typeof result === 'number') のような判定が必要になり扱いにくい）。undefined を返すか、throw new Error('引数が必要です') とする方が一貫性があります。

問題4（removeDuplicates）

• ロジックは正しいです。

• 細かい点ですが、array.indexOf(value) == index は ==（緩やかな比較）になっています。プロジェクト内の他の比較はすべて === なので、ここも === に揃えると一貫性が出ます（今回はどちらも数値同士なので動作に影響はありません）。

問題5（greet）

• ここだけ設計パターンが他の問題と違います。他の問題は「関数が値を返す → 呼び出し側で console.log する」という形ですが、問題5だけ関数の中で直接 console.log してしまっています。

• 課題の共通ルール「3. 関数の引数に定数を渡して呼び出し、その結果を console.log する」に沿うなら、関数は文字列を return し、呼び出し側で console.log(greet(name)) とする方が一貫性があります。

問題10（getSortedEvenNumbers）

• ここが一番の注意点です。sort() を引数なしで呼んでいますが、sort() のデフォルトの並び替えは「文字列として」比較します。今回はたまたま結果が [12, 14, 16] のように正しく見えますが、例えば [100, 9, 25] のような配列だと [100, 25, 9] のように誤った順序になります（文字列比較では "100" < "25" < "9" になるため）。

• 数値として昇順ソートしたい場合は、比較関数を必ず渡してください。

上記の指摘があった個所を修正。
さらに追加で、課題のコードレビューをしている参考動画の字幕から、
同じような観点でもう一度AIにコードレビューをしてもらう。

追加で以下のような指摘があった。

省略記法（動画の3点目・4点目）が未対応の箇所

現状、まだ return と波括弧を使ったブロック構文のままの箇所が多いです。「1行でreturnするだけ」の関数・コールバックは全て省略できるので、以下を統一してください。

// Before
const doubleValue = (value) => {
  return value * 2;
};
// After
const doubleValue = (value) => value * 2;

指摘を受けて、コードを以下のように省略した形に変更した。
変更前のコードがあった方が理解しやすいのでコメントで残している。

// 関数
const doubleValue = (value) => value * 2;
// const doubleValue = (value) => {
//   return value * 2;
// };

// 定数
const number = 2;

// log表示
console.log(doubleValue(number));

修正が一通り終わったので、課題コードを提出してみる。