JavaScriptの便利な構文に潜む罠

Transcript

1. JavaScriptの便利な構文に潜む罠 石田 健太郎 2025年10月10日
2. 自己紹介 石田 健太郎（いしだ けんたろう） 株式会社kubell 新卒2年目のフロントエンドエンジニア 「Chatwork」のブラウザ版・デスクトップ版の開発 を担当 学生時代は競技プログラミングをやってました パフォーマンス改善とかが好きです 今日はパフォーマンス改善について話します
3. 便利構文と罠
4. スプレッド構文、使ってますか？
5. スプレッド構文 配列やオブジェクトを展開する構文 Object.assign() や Array.prototype.concat() 相当の処理を簡潔に記述できる const obj = { a: 'foo' }; const newObj = { ...obj, b: 'bar' }; console.log(newObj); // { a: "foo", b: "bar" } const arr = [1, 2, 3]; const newArr = [...arr, 4, 5]; console.log(newArr); // [1, 2, 3, 4, 5]
6. 便利ですねー
7. さて、こんなコードがあります
8. 問題のコード よくあるAPIからのレスポンスを整形しているコード 別にいいんじゃないの？ const rooms = Object.entries(response.room_dat).reduce( (accumulator, [roomId, room]) => { // 処理 return { ...accumulator, [roomId]: formattedRoom }; }, {}, );
9. スプレッド構文についてもう少し深掘り
10. スプレッド構文 スプレッド構文は1段階のシャローコピーを生成する ネストしたオブジェクトでなければ書き換えても影響が無いので便利 const obj = { a: 'foo', b: { c: 'bar' } }; const newObj = { ...obj }; newObj.a = 123; newObj.b.c = 456; console.log(obj.a); // foo console.log(obj.b.c); // 456
11. ここに落とし穴
12. スプレッド構文の落とし穴 コピーを生成するということは、コピーする要素数に応じた処理が必要になる オーダー記法で Ｏ(N) と表記される const obj = { a: 'foo', b: { c: 'bar' } }; const newObj = { ...obj }; // obj の要素数に応じた処理が必要 newObj.a = 123; newObj.b.c = 456; console.log(obj.a); // foo console.log(obj.b.c); // 456
13. 問題のコード（再掲）
14. 問題のコード reduce の中で accumulator をスプレッド構文で展開している const rooms = Object.entries(response.room_dat).reduce( (accumulator, [roomId, room]) => { // 処理 return { ...accumulator, [roomId]: formattedRoom }; // ここが問題 }, {}, );
15. 何が問題なのか reduce が進むにつれて展開されるオブジェクトが増えていく N個の要素を処理するには 0 + 1 + 2 ... N-3 + N-2 + N-1 個分のオブジェクトが展 開される オーダー記法にすると Ｏ(N^2) 理論上要素数の二乗に比例する処理が必要 手元の環境では1万を超えると顕著に重くなり、10万を超えたあたりで分単位の時間が かかるようになった {}; // 1回目のreduceで展開されるaccumulator { 1: 'foo' }; // 2回目のreduceで展開されるaccumulator { 1: 'foo', 2: 'bar' }; // 3回目のreduceで展開されるaccumulator { 1: 'foo', 2: 'bar', 3: 'buz' }; // 4回目のreduceで展開されるaccumulator { 1: 'foo', 2: 'bar', 3: 'buz', 4: 'qux' }; // 5回目のreduceで展開されるaccumulator
16. 改善しよう
17. 改善しよう 基本的にどの言語も key-value 形式のデータ構造の操作は Ｏ(1) 単純に accumulator に代入する処理に変えることで Ｏ(N^2) から Ｏ(N) に改善 reduce 内で accumulator に破壊的な操作をした場合、第二引数で渡した初期値が影響 を受ける 今回は初期値が空オブジェクトなので問題なし 変更を加えたくない場合は引数に渡す時点でスプレッド構文で展開すればOK const rooms = Object.entries(response.room_dat).reduce( (accumulator, [roomId, room]) => { // 処理 accumulator[roomId] = formattedRoom; return accumulator; }, {}, );
18. まとめ
19. まとめ スプレッド構文は展開する要素数に応じた処理が必要 reduce 等の Ｏ(N) の処理の中で使用すると、 Ｏ(N^2) になってしまうことがある forループや map , forEach 等の配列の高階関数も注意 単に要素の追加や上書き処理にスプレッド構文を使用している場合は、一時変数を直接 上書きするように変更すれば改善できる