EY-Office ブログ

2015年にES6（正確にはES2015）がリリースされた以降のJavaScript(ECMAcript)は 毎年ES2016, ES2017・・・と標準規格が更新されています。
昨年リリースされたES2023ではArrayオブジェクト（クラス）に幾つかのメソッドが追加されましたが、これがReactのコードを書くのに案外便利だったので書いておきます。

Bing Image Creatorが生成した画像を使っています

ES2015以降にArrayに追加されたメソッド

ES2015以降にArrayオブジェクトにいくつかのメソッドが追加されてきました。ChatGPTに聞いたところES2020までの追加を教えてくれました。ES2021以降はGoogle検索で調べました。

• ES2015
  • Array.from()
  • Array.of()
  • find()
  • findIndex()
  • fill()
  • copyWithin()
  • keys()
  • values()
  • entries()
• ES2016
  • includes()
• ES2019
  • flat()
  • flatMap()
• ES2022
  • at()
  • findLast()
  • findLastIndex()
• ES2023
  • toReversed()
  • toSorted()
  • toSpliced()
  • with()

ES2023で追加されたメソッドはこのような時に便利

Reactのコードを書いているとステートが配列の事もあると思います。

const [visiblities, SetVisiblities] = useState<boolean[]>([false,false,false,false]);

ステートのn番目だけtrueにしたい

ステートのn番目だけtrueにしたい場合は、どのようなコードを書くでしょうか？ ステートの更新はイミュータブルに行う必要があるので、たとえば以下のようなコードになるでしょうか。

const newVisiblities = [...visiblities];
newVisiblities[n] = true;
SetVisiblities(newVisiblities);

しかし、ES2023で追加されたwith()メソッドを使うと以下のように書けます。😃

SetVisiblities(visiblities.width(n, true));

ステート配列の最後に要素を追加

ステート配列の最後に要素を追加のには、 ES2023を使わなくても以下のように書けます。

• SetVisiblities(visiblities.concat(true));
• SetVisiblities([...visiblities, true]);

ステート配列の最初に要素を挿入

ステート配列の最初に要素を挿入するのも、ES2023を使わなくても以下のように書けます。

• SetVisiblities([true, ...visiblities]);

ステート配列の中間に要素を挿入

ES2023を使わない場合は、splice()を使い以下のようなコードでしょうか。splice()はミュータブなメソッドですし、戻り値は「取り除かれた要素を含む配列」なのも使いにくいですよね。

const newVisiblities = [...visiblities];
newVisiblities.splice(n, 0, true);
SetVisiblities(newVisiblities);

また、slice()メソッド＋スプレッド演算子を使ったコードは以下のようになります。

SetVisiblities([...visiblities.slice(0, n), true, 
  ...visiblities.slice(n, visiblitie.length)]);

しかし、ES2023のtoSpliced()を使うと、以下のようにシンプルになります。😃

SetVisiblities(visiblities.toSplice(n, 0, true));

ステート配列の要素を削除する

やはりsplice()の出番ですね、n番目の要素を削除するのは以下のようになります。

const newVisiblities = [...visiblities];
newVisiblities.splice(n, 1);
SetVisiblities(newVisiblities);

slice()メソッド＋スプレッド演算子を使ったコードは以下のようになります。

SetVisiblities([...visiblities.slice(0, n), 
  ...visiblities.slice(n + 1, visiblities.length)]);

filter()メソッドを使う方法もありますね。

SetVisiblities(visiblities.filter((v, i) => i !== n));

しかし、ES2023のtoSpliced()を使うと、以下のようにシンプルになります。😃

SetVisiblities(visiblities.toSplice(n, 1));

まとめ

JavaScriptは1995年（29年前）に生まれた言語です。歴史的経緯もあると思いますが、基本オブジェクト（クラス）にミュータブなメソッドとイミュータブルなメソッドが一貫性なく混ざっています（Ruby言語のミュータブなメソッド名には!が付くようなルールは良いですね）。

ただし、JavaScriptは年々進歩しています。今回説明したようにES2023でsplice()のイミュータブル版のtoSpliced()が追加されています。

注意点として、ES2023は新し目のツール（TypeScript(tsc)ならバージョン5.2以降）でないとサポートされてないので気を付けてください。