追加と削除が繰り返される配列要素のオブジェクトに一意のid番号を振る

配列要素のオブジェクトに一意のid番号を振りたい場合があります。たとえば、Vue.jsでデータを動的にページの要素として差し込む場合(v-forディレクティブ)、データのオブジェクトには一意のプロパティが求められます(「キー付きv-for」参照)。データの追加や削除が繰り返されるとき、新たなデータの一意の整数をどのようにして求めるかが課題です。

数値をカウントアップする

もっとも簡単なのは、新たに加えるデータの整数をはじめに決めたら、あとはひたすらカウントアップすることです。

// はじめの数値
let nextId = data.length;

// データを加えるとき
data.push({
    id: nextId++,
    // 他のプロパティ
});

これでも、動作にはことさら問題はないでしょう。ただ、データの追加と削除を繰り返したとき、データ総数はさほどなくても、最後のデータのidはどんどん大きくなります。idを表示した場合は、見栄えがよくないかもしれません。

使われている最大値を調べる

今あるデータの中で使われているidの最大値を調べれば、値がやみくもに大きくなることは避けられます。引数に受け取ったデータの中からidに使われている最大の値を調べて、1加えた数値を返すのがつぎの関数です。

function getNewId(data) {
    const ids = data.map((element) => element.id);
    return Math.max(...ids) + 1;
}

Array.prototype.map()メソッドは、引数の関数に要素を渡し、その戻り値からなる新たな配列をつくって返します。得られるのは、id番号の配列です。そこで、Math.max()メソッドにより最大値を取り出したうえ、1加えて返しています。なお、ECMAScript 2015のスプレッド構文...は、配列の要素をカンマ区切りの引数として渡します(「JavaScript: ECMAScript 2015のスプレッド構文・残余引数・分割代入を使ってみる」の「スプレッド構文」参照)。

これで、id番号がひたすら大きくなることはなくなります。つぎのサンプル001は、この関数と同じ処理で新たに加えるデータのidを定めました(「Vue.js + ES6: SVGでレーダーチャートを操作する」参照)。実用としては、これで問題はないでしょう。

サンプル001■Vue.js + ES6: Radar chart with SVG controlled dynamically - final

See the Pen Vue.js + ES6: Radar chart with SVG controlled dynamically - final by Fumio Nonaka (@FumioNonaka) on CodePen.

空き番号を探して使う

前項の「使われている最大値を調べる」考え方ですと、小さい番号に抜けが生じてしまうのは仕方ありません。けれど、その穴も埋める処理を定めたのが、以下の関数です。

まず、使われたidを、Array.prototype.reduce()メソッドで配列としてまとめます。インデックスはidに読み替え、値がtrueならすでに使われているということです。つぎに、ECMAScript 2015のArray.prototype.findIndex() メソッドにより、値がtrueでない最初のインデックスを探します。すべてのidがtrueで埋まっていたら、戻り値は-1です。その場合は、Array.lengthプロパティの値が、つぎのidとなります。

function getNewId(data) {
    const usedIds = data.reduce((accumulator, element) => {
        accumulator[element.id] = true;
        return accumulator;
    }, []);
    const nextid = usedIds.findIndex((exists) => !exists);
    return nextid < 0 ? usedIds.length : nextid;
}

前掲サンプル001の作例を、ご参考までにうえの関数(メソッド)と同じ処理に書き替えて掲げます(サンプル002)。

サンプル002■ Vue.js + ES6: Radar chart with SVG controlled dynamically with unique id

See the Pen Vue.js + ES6: Radar chart with SVG controlled dynamically with unique id by Fumio Nonaka (@FumioNonaka) on CodePen.

Vue.jsのkey属性に配列インデックスは使わない

前項の作例では、Vue.jsのv-forディレクティブで、key属性に一意の番号を与えました。もっとも、v-forディレクティブは、データの配列インデックスも取り出せます。一意でありさえすればよいのでしたら、この値を使えばよさそうです。

<axis-label
    v-for="(stat, index) in stats"
    :stat="stat"
    :index="index"

    :key="stat.id">
</axis-label>

けれども、配列インデックスは、はじめの方の要素が取り除かれると、そのあとすべての要素の番号が振り直されます。どの要素が変更されたのか、key属性によって絞り込もうとしているとき、他の項目の値まで変わってしまったら変更する範囲が無駄に広がります。それだけでなく、動作に問題が生じることもありえます(「Vue.js: v-forで項目インデックスをkey属性にしていいのか」参照)。

したがって、本稿で解説したように、追加・削除するデータ以外の値は変えないようにした方がよいのです。

[追記: 2019年11月26日] 「空き番号を探して使う」項のコードで用いるメソッドを、Array.prototype.forEach()からArray.prototype.reduce()に変更。本文の一部を加筆・補正し、サンプルの掲載はjsdo.itからCodePenに改めた。
[追記: 2018年04月21日]「Vue.jsのkey属性に配列インデックスは使わない」の項を追加。