【要約】AIが書いたsort()、元の配列が書き換わって画面が意図せず変わる件 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
Reactを使用する開発者が、AIに生成させた並べ替え処理を実装した際に、元のStateまで書き換わる不具合に直面した。AIは標準的なコードを提示するが、JavaScriptの仕様による副作用を考慮しない場合がある。具体的には以下の問題が発生する。
- ・
Array.prototype.sort()が元の配列を直接書き換える破壊的メソッドであること。 - ・Reactが「同じ参照のまま中身だけが変わる」状態を検知できず、再レンダリングが正しく行われないこと。
- ・意図しないタイミングで表示が崩れる、あるいは更新が反映されないといった挙動を招くこと。
// Approach
開発者は、配列のコピーを作成してから並べ替えを行う、あるいは非破壊的なメソッドを使用する手法を採用した。元のデータを保護しつつ、Reactの検知ロジックに適合させる必要がある。具体的な手法は以下の通りである。
- ・スプレッド構文
[...array].sort()を用いて、新しい配列を作成してから実行する。 - ・ES2023で導入された、非破壊的な
toSorted()メソッドを利用する。 - ・AIへの指示（プロンプト）に「元の配列は変更せず、新しい配列を返すこと」という制約を明示的に加える。
// Result
配列のコピー作成や非破壊的メソッドの利用により、Stateの不変性が保たれることが示された。これにより、Reactの再レンダリングが正しく動作し、意図しない副作用を防止できる。具体的な成果は以下の通りである。
- ・
[...items].sort()等の実装により、元のStateが安全に保持される。 - ・AIへのプロンプトを改善することで、最初から安全なコードを得られる確率が高まる。
- ・
reverse()やsplice()といった他の破壊的メソッドへの注意喚起も行われた。
Senior Engineer Insight
> AI生成コードの盲信は、JavaScriptの言語仕様に起因する副作用を見落とすリスクを高める。特にReactのような不変性を前提とするライブラリでは、破壊的メソッドの混入は致命的なバグを招く。開発者は、AIの出力を鵜呑みにせず、メソッドの副作用を常に検証すべきである。
toSorted()のようなモダンな仕様の活用や、プロンプトエンジニアリングによる制約付与は、開発効率と品質を両立させる実戦的なスキルと言える。