1. ホーム
  2. JavaScript

【JavaScript】at() の使い方|配列・文字列を末尾から取得する(負のインデックス)

Share

配列の最後の要素を取り出すとき、これまでは arr[arr.length - 1] のように長さから1を引いて書く必要がありました。at() メソッドを使うと、arr.at(-1) と書くだけで末尾の要素を取得できます。この記事では、配列と文字列の at() の基本的な使い方、負のインデックスの仕組み、従来の書き方との違い、範囲外を指定したときの挙動までをコード例とともに解説します。

at() は負のインデックスで末尾から要素を取り出せる

at() は、指定したインデックス(位置)にある要素を返すメソッドです。配列(Array)と文字列(String)の両方で使えます。最大の特徴は、負の数を渡すと末尾から数えた位置を取得できる点です。-1 なら最後の要素、-2 なら後ろから2番目、というように指定できます。

main.js
const fruits = ['りんご', 'みかん', 'ぶどう', 'もも'];

// 通常のインデックス(先頭から)
console.log(fruits.at(0)); // 'りんご'
console.log(fruits.at(1)); // 'みかん'

// 負のインデックス(末尾から)
console.log(fruits.at(-1)); // 'もも'(最後の要素)
console.log(fruits.at(-2)); // 'ぶどう'(後ろから2番目)

正の数を渡したときは、fruits[0] のような角括弧(ブラケット)記法と同じ結果になります。at() の真価は、負の数を使って末尾から手軽にアクセスできるところにあります。

従来の書き方と比べる

配列の最後の要素を取るとき、これまでは length から1を引いていました。at() を使うと、変数名を2回書かずに済み、意図も読み取りやすくなります。

main.js
const list = [10, 20, 30, 40, 50];

// 従来: length から1を引く
console.log(list[list.length - 1]); // 50

// at(): 負のインデックスで末尾を指定
console.log(list.at(-1)); // 50

特に getItems().at(-1) のように関数の戻り値へ直接つなげたいとき、at() はメソッドチェーンの途中で使えるため便利です。従来の length - 1 方式だと、いったん変数に入れないと二重に関数を呼ぶことになってしまいます。

文字列でも使える

at() は文字列にも用意されていて、指定した位置の1文字を返します。末尾の文字を取り出したいときに str.at(-1) と書けます。

main.js
const word = 'JavaScript';

console.log(word.at(0));  // 'J'
console.log(word.at(-1)); // 't'(最後の文字)

// 拡張子を判定する例
const file = 'photo.png';
const ext = file.split('.').at(-1);
console.log(ext); // 'png'

上の例のように、split('.') で分割した配列の最後を at(-1) で取れば、ファイルの拡張子を1行でスマートに取り出せます。

範囲外を指定すると undefined になる

存在しない位置を指定したときは、エラーにはならず undefined が返ります。配列の要素数を超えた正の数でも、末尾を越えた負の数でも同じです。

main.js
const arr = ['a', 'b', 'c'];

console.log(arr.at(5));  // undefined(要素数を超えている)
console.log(arr.at(-4)); // undefined(先頭より前)
console.log(arr.at(-1)); // 'c'(正しく末尾を取得)

この挙動はブラケット記法 arr[5] と同じで、範囲外は undefined になります。そのため at() の戻り値をそのまま使うときは、値が存在するか(undefined でないか)を確認してから扱うと安全です。

使うときに気をつけたいこと

負のインデックスはブラケット記法では使えない

「じゃあ arr[-1] でも末尾が取れるのでは?」と思うかもしれませんが、これは取れません。配列に対する arr[-1] は、末尾ではなく -1 という名前のプロパティを探しに行き、存在しないので undefined になります。末尾から取りたいときは at(-1) を使う、と覚えておきましょう。

対応環境を確認する

at() は比較的新しく追加されたメソッドで、2022年以降の主要ブラウザや Node.js で使えます。現在のモダンな環境ならまず問題ありませんが、かなり古いブラウザまで対応する必要がある場合は、従来の length - 1 方式を使うか、動作環境を確認してから採用してください。

まとめ

at() は、インデックスを指定して要素や文字を取り出すメソッドで、負の数を渡すと末尾から数えた位置を取得できるのが特徴です。arr.at(-1) と書くだけで最後の要素を取れるため、arr[arr.length - 1] よりも短く読みやすくなります。配列と文字列の両方で使え、範囲外はエラーにならず undefined が返ります。末尾を扱う場面では、ブラケット記法の arr[-1] は効かない点にだけ注意して、at() を活用してみてください。

参考ページ