VIDEO LESSON

JavaScriptのat()：配列の末尾から要素を取得するの解説動画

再生時間 8:05動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はジャバスクリプトのアットを紹介します。
0:04操作履歴の最後の項目や、直近の測定値を取り出す場面はよくあります。
0:09これまでは配列の長さから一を引いて添字を計算していましたが、アットを使えば、
0:15最後はマイナス一、最後から二番目はマイナス二、とそのまま書けます。
0:20アットは条件に合うデータを探す機能ではありません。
0:24どの位置を読むかが決まっている場面で、末尾からの相対的な位置をコードに表すためのメソッドです。
0:31この動画では、基本のルールから、角括弧との違い、空配列の注意点までを、実行結果と一緒に学びます。
0:39まず従来の書き方と比べます。
0:41下書き、確認、公開という三つの履歴が入った配列で、最後の要素を読むには、
0:46長さから一を引いた位置を角括弧で指定する方法があります。
0:51これでも結果は公開と正しく読めます。
0:54同じことをアットで書くと、マイナス一を指定するだけです。
0:59出力はどちらも公開で、結果は変わりません。
1:02違いは読みやすさです。
1:04長さから計算する式は、慣れないと一瞬考えてしまいますが、アットなら末尾から数えるという意図が、
1:09そのままコードに表れます。
1:14削除や並べ替えは行わず、読み取りだけを行う点も押さえてください。
1:19角括弧の書き方が間違いというわけではなく、先頭や途中の要素を読むときは今までどおり使えます。
1:26末尾を読むときだけアットに置き換えると、意図が明確になります。
1:31動作環境を確認します。
1:33アットはドムやネットワークを必要としないため、ブラウザーとノード・ジェイエスの両方で同じコードが使えます。
1:40主要ブラウザーでは二千二十二年三月以降、広く利用できる機能とされています。
1:46ファイアフォックスでは九十から追加され、ノード・ジェイエスでは十六点六点ゼロで追加されました。
1:53使う前に、タイプオブでアレイのプロトタイプのアットを調べ、ファンクションと表示されれば対応しています。
2:00アンディファインドなら未対応で、そのまま呼び出すとタイプエラーになります。
2:06古い環境を対象にする場合は、先にこの確認を入れてください。
2:10確認を省くと、動く環境と動かない環境で結果が分かれてしまうため、公開前のチェックをおすすめします。
2:17引数と戻り値のルールです。
2:19基本形は、配列の後ろにドット・アットと書き、括弧の中に読み取り位置を指定します。
2:27ゼロは先頭、一は先頭から二番目を表します。
2:31マイナス一は最後、マイナス二は最後から二番目です。
2:35長さが三の配列では、マイナス三が先頭になり、マイナス四は範囲外です。
2:42負の位置は、配列の長さを足した位置として解釈されると覚えてください。
2:48戻り値はその位置の要素そのもので、範囲外の位置ではアンディファインドが返ります。
2:56実は文字列にも同じアットがあり、末尾の文字を取り出すこともできます。
3:02引数の細かい扱いを見ます。
3:05位置は整数として解釈され、小数はゼロ方向に切り捨てられます。
3:12例えば一点九は一に、マイナス一点九はマイナス一に相当します。
3:19画面では、十、二十、三十の配列で試しています。
3:24一点九では二十が、マイナス一点九では三十が返りました。
3:30一方、三やマイナス四のような範囲外の位置では、例外にはならず、アンディファインドが返ります。
3:41入力フォームから受け取った位置をそのまま渡すと、意図しない切り捨てが起きることがあります。
3:51呼び出し前に、整数として妥当な値かどうかを確認する設計にしてください。
3:59特に、変数で位置を受け取る関数を作るときは、この確認が効いてきます。
4:07記事の中心となる実行例を読みます。
4:09更新履歴として、下書きを保存、レビューを依頼、記事を公開、という三件のオブジェクトが入った配列を用意します。
4:18アットにゼロを渡すと先頭、マイナス一で最後、マイナス二で最後から二番目が取れ、
4:22それぞれのラベルが表示されました。
4:26範囲外のマイナス四ではアンディファインド、要素数は三と表示されます。
4:31最後に空の配列で試すと、戻り値はアンディファインドになるため、履歴はありません、
4:35と表示して終わります。
4:39このコードはノード・ジェイエスの実機でも、同じ六行の出力になることを確認済みです。
4:45ブラウザーのコンソールでも、そのまま貼り付けて実行できます。
4:49よくある間違いを見ます。
4:51角括弧にマイナス一を書いても、最後の要素は取れません。
4:55角括弧のマイナス一は、マイナス一という名前のプロパティを読むという意味になり、
5:00通常の配列にはそのプロパティがないため、アンディファインドが返ります。
5:05一方、アットにマイナス一を渡せば、最後の要素であるシーが返ります。
5:09画面の実行結果でも、アンディファインドとシーの違いが確認できます。
5:14やっかいなのは、角括弧の書き間違いでは例外が発生しない点です。
5:18末尾から読みたい場面では、必ずアットを使うようにしてください。
5:22空配列の注意点です。
5:24アットが範囲外でアンディファインドを返しても、その後の処理が安全になるわけではありません。
5:31空の配列から取り出した値に続けてドット・ラベルと書くと、アンディファインドからプロパティを読もうとしてタイプエラーが発生します。
5:41例外が起きるのは取得の瞬間ではなく、その戻り値を使う箇所です。
5:46先ほどの実行例のように、取得した値を確認してから分岐させる書き方にしてください。
5:52また要素としてアンディファインド自体が保存されている場合も戻り値は同じで、
5:57範囲外かどうかを戻り値だけでは区別できません。
6:01参照の注意点です。
6:03アットによる読み取り自体は、配列を変更しません。
6:06しかし要素がオブジェクトの場合、取得できるのは元と同じオブジェクトへの参照です。
6:12画面の例では、最後のタスクを取り出して完了フラグをトゥルーに書き換えると、
6:16元の配列の中身までトゥルーに変わりました。
6:20表示するだけの用途なら問題になりにくいものの、編集用のデータを独立させたい場合は、
6:24別途コピーの方法を用意してください。
6:28またアットは同期処理で、プロミスは返しません。
6:32配列にプロミスが入っていれば、そのプロミス自体が返るだけなので、完了を待つ処理は呼び出し側で管理します。
6:39活用事例です。
6:40アットは、追加順に保存した操作履歴、時刻順に並んだ測定値、階層を表すパンくずデータなどに向いています。
6:49例えば気温の測定値なら、最後と最後から二番目を取り出すことで、直前からの変化量をそのまま計算できます。
6:57画面の例では差が一点四になりました。
7:00ただし注意点もあります。
7:02最後の要素が、業務上の最新のデータとは限りません。
7:06エーピーアイが新しい順に返すなら最新は先頭ですし、ページ分割された一覧の最後は、
7:11そのページ内の最後にすぎません。
7:15アットは並び順や日時を判断しないため、データの並びの約束を先に確認してから使ってください。
7:23空データのときの表示まで決めておくと、そのまま実務のコードに持ち込めます。
7:29まとめです。
7:30アットは、配列の位置を指定して要素を一つ取り出すメソッドで、最後はマイナス一、
7:34最後から二番目はマイナス二と書けます。
7:38小数は切り捨てられ、範囲外ではアンディファインドが返ります。
7:42空のデータでは取得後の確認を忘れず、オブジェクトは参照が共有される点にも注意してください。
7:49実装のときは、位置の書き方だけでなく、空データのときに何を表示するかも一緒に決めておくと、
7:54取得できた場合だけを想定したコードを避けられます。
7:59末尾から読みたい場面に迷ったら、アットを思い出してください。
8:03お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Array.prototype.at()で配列の末尾や末尾から2番目の要素を取得する方法を解説。ブラウザーとNode.jsの実行手順、空配列・範囲外の扱い、参照共有の注意点を学べます。

解説記事・サンプルコードを読む：JavaScriptのat()：配列の末尾から要素を取得する →