WEBVTT

1
00:00:00.000 --> 00:00:00.938
こんにちは。

2
00:00:00.938 --> 00:00:04.379
今回はジャバスクリプトのアットを紹介します。

3
00:00:04.379 --> 00:00:09.540
操作履歴の最後の項目や、直近の測定値を取り出す場面はよくあります。

4
00:00:09.540 --> 00:00:15.092
これまでは配列の長さから一を引いて添字を計算していましたが、アットを使えば、

5
00:00:15.092 --> 00:00:20.644
最後はマイナス一、最後から二番目はマイナス二、とそのまま書けます。

6
00:00:20.644 --> 00:00:24.554
アットは条件に合うデータを探す機能ではありません。

7
00:00:24.554 --> 00:00:31.905
どの位置を読むかが決まっている場面で、末尾からの相対的な位置をコードに表すためのメソッドです。

8
00:00:31.905 --> 00:00:39.412
この動画では、基本のルールから、角括弧との違い、空配列の注意点までを、実行結果と一緒に学びます。

9
00:00:39.412 --> 00:00:41.664
まず従来の書き方と比べます。

10
00:00:41.664 --> 00:00:46.811
下書き、確認、公開という三つの履歴が入った配列で、最後の要素を読むには、

11
00:00:46.811 --> 00:00:51.958
長さから一を引いた位置を角括弧で指定する方法があります。

12
00:00:51.958 --> 00:00:54.854
これでも結果は公開と正しく読めます。

13
00:00:54.854 --> 00:00:59.357
同じことをアットで書くと、マイナス一を指定するだけです。

14
00:00:59.357 --> 00:01:02.735
出力はどちらも公開で、結果は変わりません。

15
00:01:02.735 --> 00:01:04.504
違いは読みやすさです。

16
00:01:04.504 --> 00:01:09.330
長さから計算する式は、慣れないと一瞬考えてしまいますが、アットなら末尾から数えるという意図が、

17
00:01:09.330 --> 00:01:14.155
そのままコードに表れます。

18
00:01:14.155 --> 00:01:19.303
削除や並べ替えは行わず、読み取りだけを行う点も押さえてください。

19
00:01:19.303 --> 00:01:26.702
角括弧の書き方が間違いというわけではなく、先頭や途中の要素を読むときは今までどおり使えます。

20
00:01:26.702 --> 00:01:31.688
末尾を読むときだけアットに置き換えると、意図が明確になります。

21
00:01:31.688 --> 00:01:33.287
動作環境を確認します。

22
00:01:33.287 --> 00:01:40.993
アットはドムやネットワークを必要としないため、ブラウザーとノード・ジェイエスの両方で同じコードが使えます。

23
00:01:40.993 --> 00:01:46.372
主要ブラウザーでは二千二十二年三月以降、広く利用できる機能とされています。

24
00:01:46.372 --> 00:01:53.206
ファイアフォックスでは九十から追加され、ノード・ジェイエスでは十六点六点ゼロで追加されました。

25
00:01:53.206 --> 00:02:00.620
使う前に、タイプオブでアレイのプロトタイプのアットを調べ、ファンクションと表示されれば対応しています。

26
00:02:00.620 --> 00:02:06.000
アンディファインドなら未対応で、そのまま呼び出すとタイプエラーになります。

27
00:02:06.000 --> 00:02:10.216
古い環境を対象にする場合は、先にこの確認を入れてください。

28
00:02:10.216 --> 00:02:17.340
確認を省くと、動く環境と動かない環境で結果が分かれてしまうため、公開前のチェックをおすすめします。

29
00:02:17.340 --> 00:02:19.783
引数と戻り値のルールです。

30
00:02:19.783 --> 00:02:27.300
基本形は、配列の後ろにドット・アットと書き、括弧の中に読み取り位置を指定します。

31
00:02:27.300 --> 00:02:31.247
ゼロは先頭、一は先頭から二番目を表します。

32
00:02:31.247 --> 00:02:35.945
マイナス一は最後、マイナス二は最後から二番目です。

33
00:02:35.945 --> 00:02:42.335
長さが三の配列では、マイナス三が先頭になり、マイナス四は範囲外です。

34
00:02:42.335 --> 00:02:48.725
負の位置は、配列の長さを足した位置として解釈されると覚えてください。

35
00:02:48.725 --> 00:02:56.242
戻り値はその位置の要素そのもので、範囲外の位置ではアンディファインドが返ります。

36
00:02:56.242 --> 00:03:02.632
実は文字列にも同じアットがあり、末尾の文字を取り出すこともできます。

37
00:03:02.632 --> 00:03:05.610
引数の細かい扱いを見ます。

38
00:03:05.610 --> 00:03:12.482
位置は整数として解釈され、小数はゼロ方向に切り捨てられます。

39
00:03:12.482 --> 00:03:19.354
例えば一点九は一に、マイナス一点九はマイナス一に相当します。

40
00:03:19.354 --> 00:03:24.623
画面では、十、二十、三十の配列で試しています。

41
00:03:24.623 --> 00:03:30.808
一点九では二十が、マイナス一点九では三十が返りました。

42
00:03:30.808 --> 00:03:41.346
一方、三やマイナス四のような範囲外の位置では、例外にはならず、アンディファインドが返ります。

43
00:03:41.346 --> 00:03:51.654
入力フォームから受け取った位置をそのまま渡すと、意図しない切り捨てが起きることがあります。

44
00:03:51.654 --> 00:03:59.671
呼び出し前に、整数として妥当な値かどうかを確認する設計にしてください。

45
00:03:59.671 --> 00:04:07.460
特に、変数で位置を受け取る関数を作るときは、この確認が効いてきます。

46
00:04:07.460 --> 00:04:09.992
記事の中心となる実行例を読みます。

47
00:04:09.992 --> 00:04:18.034
更新履歴として、下書きを保存、レビューを依頼、記事を公開、という三件のオブジェクトが入った配列を用意します。

48
00:04:18.034 --> 00:04:22.204
アットにゼロを渡すと先頭、マイナス一で最後、マイナス二で最後から二番目が取れ、

49
00:04:22.204 --> 00:04:26.374
それぞれのラベルが表示されました。

50
00:04:26.374 --> 00:04:31.438
範囲外のマイナス四ではアンディファインド、要素数は三と表示されます。

51
00:04:31.438 --> 00:04:35.236
最後に空の配列で試すと、戻り値はアンディファインドになるため、履歴はありません、

52
00:04:35.236 --> 00:04:39.034
と表示して終わります。

53
00:04:39.034 --> 00:04:45.140
このコードはノード・ジェイエスの実機でも、同じ六行の出力になることを確認済みです。

54
00:04:45.140 --> 00:04:49.608
ブラウザーのコンソールでも、そのまま貼り付けて実行できます。

55
00:04:49.608 --> 00:04:51.268
よくある間違いを見ます。

56
00:04:51.268 --> 00:04:55.003
角括弧にマイナス一を書いても、最後の要素は取れません。

57
00:04:55.003 --> 00:05:00.122
角括弧のマイナス一は、マイナス一という名前のプロパティを読むという意味になり、

58
00:05:00.122 --> 00:05:05.240
通常の配列にはそのプロパティがないため、アンディファインドが返ります。

59
00:05:05.240 --> 00:05:09.806
一方、アットにマイナス一を渡せば、最後の要素であるシーが返ります。

60
00:05:09.806 --> 00:05:14.371
画面の実行結果でも、アンディファインドとシーの違いが確認できます。

61
00:05:14.371 --> 00:05:18.659
やっかいなのは、角括弧の書き間違いでは例外が発生しない点です。

62
00:05:18.659 --> 00:05:22.948
末尾から読みたい場面では、必ずアットを使うようにしてください。

63
00:05:22.948 --> 00:05:24.504
空配列の注意点です。

64
00:05:24.504 --> 00:05:31.508
アットが範囲外でアンディファインドを返しても、その後の処理が安全になるわけではありません。

65
00:05:31.508 --> 00:05:41.468
空の配列から取り出した値に続けてドット・ラベルと書くと、アンディファインドからプロパティを読もうとしてタイプエラーが発生します。

66
00:05:41.468 --> 00:05:46.293
例外が起きるのは取得の瞬間ではなく、その戻り値を使う箇所です。

67
00:05:46.293 --> 00:05:52.518
先ほどの実行例のように、取得した値を確認してから分岐させる書き方にしてください。

68
00:05:52.518 --> 00:05:57.187
また要素としてアンディファインド自体が保存されている場合も戻り値は同じで、

69
00:05:57.187 --> 00:06:01.856
範囲外かどうかを戻り値だけでは区別できません。

70
00:06:01.856 --> 00:06:03.141
参照の注意点です。

71
00:06:03.141 --> 00:06:06.567
アットによる読み取り自体は、配列を変更しません。

72
00:06:06.567 --> 00:06:12.277
しかし要素がオブジェクトの場合、取得できるのは元と同じオブジェクトへの参照です。

73
00:06:12.277 --> 00:06:16.416
画面の例では、最後のタスクを取り出して完了フラグをトゥルーに書き換えると、

74
00:06:16.416 --> 00:06:20.556
元の配列の中身までトゥルーに変わりました。

75
00:06:20.556 --> 00:06:24.767
表示するだけの用途なら問題になりにくいものの、編集用のデータを独立させたい場合は、

76
00:06:24.767 --> 00:06:28.978
別途コピーの方法を用意してください。

77
00:06:28.978 --> 00:06:32.261
またアットは同期処理で、プロミスは返しません。

78
00:06:32.261 --> 00:06:39.684
配列にプロミスが入っていれば、そのプロミス自体が返るだけなので、完了を待つ処理は呼び出し側で管理します。

79
00:06:39.684 --> 00:06:40.835
活用事例です。

80
00:06:40.835 --> 00:06:49.217
アットは、追加順に保存した操作履歴、時刻順に並んだ測定値、階層を表すパンくずデータなどに向いています。

81
00:06:49.217 --> 00:06:57.599
例えば気温の測定値なら、最後と最後から二番目を取り出すことで、直前からの変化量をそのまま計算できます。

82
00:06:57.599 --> 00:07:00.557
画面の例では差が一点四になりました。

83
00:07:00.557 --> 00:07:02.530
ただし注意点もあります。

84
00:07:02.530 --> 00:07:06.639
最後の要素が、業務上の最新のデータとは限りません。

85
00:07:06.639 --> 00:07:11.241
エーピーアイが新しい順に返すなら最新は先頭ですし、ページ分割された一覧の最後は、

86
00:07:11.241 --> 00:07:15.843
そのページ内の最後にすぎません。

87
00:07:15.843 --> 00:07:23.239
アットは並び順や日時を判断しないため、データの並びの約束を先に確認してから使ってください。

88
00:07:23.239 --> 00:07:29.320
空データのときの表示まで決めておくと、そのまま実務のコードに持ち込めます。

89
00:07:29.320 --> 00:07:30.189
まとめです。

90
00:07:30.189 --> 00:07:34.388
アットは、配列の位置を指定して要素を一つ取り出すメソッドで、最後はマイナス一、

91
00:07:34.388 --> 00:07:38.587
最後から二番目はマイナス二と書けます。

92
00:07:38.587 --> 00:07:42.930
小数は切り捨てられ、範囲外ではアンディファインドが返ります。

93
00:07:42.930 --> 00:07:49.446
空のデータでは取得後の確認を忘れず、オブジェクトは参照が共有される点にも注意してください。

94
00:07:49.446 --> 00:07:54.514
実装のときは、位置の書き方だけでなく、空データのときに何を表示するかも一緒に決めておくと、

95
00:07:54.514 --> 00:07:59.581
取得できた場合だけを想定したコードを避けられます。

96
00:07:59.581 --> 00:08:03.925
末尾から読みたい場面に迷ったら、アットを思い出してください。

97
00:08:03.925 --> 00:08:05.228
お疲れさまでした。