VIDEO LESSON

JavaScriptのObject.values()の使い方：引数・戻り値・実例と注意点の解説動画

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

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

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

0:00こんにちは。
0:01今回はオブジェクト・バリューズを紹介します。
0:04これは、オブジェクトが持つ値だけを取り出して、配列として返す静的メソッドです。
0:11前回学んだエントリーズがキーと値の組を取り出したのに対して、バリューズはキーには触れず、
0:15値だけを並べます。
0:20この動画では、書き方と引数と戻り値、記事の基本例である得点の合計と、境界例の空オブジェクト、
0:25対象になるプロパティの範囲、キー情報が失われるなどの注意点、そして集計への応用まで、
0:31実行結果と一緒に学びます。
0:37値の合計や平均を求めたい場面で、最初の一歩になる操作です。
0:42キーを捨てて値に集中できる分、コードが短く読みやすくなるのも利点です。
0:47まず動作環境を確認します。
0:49オブジェクト・バリューズは、エントリーズやキーズと同時期の仕様で導入されたメソッドです。
0:55クロームでは五十四以降、エッジでは十四以降、ファイアーフォックスでは四十七以降、
0:59サファリでは十・一以降で使えます。
1:03ノード・ジェイエスでは七・ゼロ・ゼロ以降に対応しています。
1:07記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:11対応範囲はかなり広く、現在使われる環境ではほぼ心配ありませんが、公開するコードでは対象環境を先に確認してください。
1:19追加の読み込みは不要で、関数として備わっていることを実機でも確認済みです。
1:24書き方を確認します。
1:26オブジェクトと書き、続けてバリューズと書いて、カッコの中に対象のオブジェクトを渡します。
1:33引数は一つだけです。
1:34戻り値は、プロパティの値だけを並べた配列です。
1:38エントリーズと違ってキーは含まれず、値そのものが要素になります。
1:43渡した元のオブジェクト自体は変更されません。
1:46スライドの例では、エーが一、ビーが二というオブジェクトから、一と二の配列が返ることを実機で確認しました。
1:54配列が返るので、そのまま配列のメソッドにつなげられる点が、このメソッドの使い勝手の核です。
2:01記事の基本例を見ます。
2:03数学が八十点、英語が九十点という得点オブジェクトを用意し、その値を合計するコードです。
2:11まずバリューズだけを行うと、八十と九十という値の配列が返ります。
2:17記事の例では、そこへリデュースを続け、初期値ゼロから順に足し合わせています。
2:24実行結果は百七十となり、ノードの実機結果とも一致しました。
2:29キーである教科名は合計には不要なので、値だけを取り出すバリューズがぴったりはまる例です。
2:37値がすべて数値である前提の計算なので、文字列が混ざると連結になってしまう点は、
2:42後の注意点で改めて確認します。
2:47実践的な使い方として、値だけを順に処理する例を見ます。
2:51名前がタナカ、年齢が三十というユーザーオブジェクトにバリューズを使うと、
2:56タナカと三十という値の配列が返り、実機とも一致しました。
3:01戻り値は配列なので、フォー・オブ文やフォーイーチでそのまま一件ずつ取り出して表示できます。
3:08オブジェクトのままでは値を順に眺める手段が乏しいのですが、値の配列に変換すれば、
3:14繰り返しも、並べ替えも、絞り込みも、配列の道具立てで書けるようになります。
3:20値の種類が混ざっていても順序は保たれる点も押さえておきましょう。
3:24記事の境界条件の例を見ます。
3:27空のオブジェクトをバリューズへ渡すコードです。
3:31実行結果は空の配列となり、記事の期待出力とも一致しています。
3:36プロパティが一つもなければ、値もゼロ件で、例外にはなりません。
3:41データが空の場合でも特別な分岐を書かずに、そのままリデュースや繰り返し処理へ流せるのは、
3:46実務で地味に効く性質です。
3:50逆に言えば、結果が空でもエラーにはならないため、入力が空であること自体を検出したい場面では、
3:56長さの確認を自分で加える必要があります。
4:01合計を求める処理なら、空でもゼロになるよう初期値を必ず指定してください。
4:07値の配列ならではの応用を見ます。
4:10スプレッド構文で展開すれば、マックスへそのまま渡して最大値を求められます。
4:16得点の例では九十が返り、実機とも一致しました。
4:19また、インクルーズを使えば、九十点の教科があるかどうかを真偽値で調べられます。
4:26こちらも実機でトゥルーになることを確認しました。
4:29合計はリデュース、最大値はマックス、存在確認はインクルーズというように、
4:35値だけの集計や判定は、バリューズで配列化してしまえば配列の道具だけで完結します。
4:41どの教科が九十点かまで知りたい場合は、キーが必要になるのでエントリーズの出番です。
4:48対象になるプロパティの範囲を確認します。
4:51バリューズが取り出すのは、オブジェクト自身が持つ、列挙可能な文字列キーに対応する値だけです。
4:58シンボルキーで登録した値や、列挙不可に設定した値、プロトタイプから継承した値は含まれません。
5:05スライドの例では、継承した項目の値は出ず、自身の値だけが返ることを実機で確認しました。
5:12並び順にも決まりがあり、整数らしいキーは文字列でも小さい順に先へ来て、その後に通常の文字列キーの値が定義順に続きます。
5:21順序に依存する処理では、この規則を意識してください。
5:25注意点を見ます。
5:26記事が強調する最大の注意は、キー情報が失われることです。
5:31値だけの配列になると、どの値がどの項目のものか分からなくなります。
5:36表示ラベルと値を対にして扱う場合は、エントリーズを選んでください。
5:41次に、引数にヌルやアンディファインドを渡すと、タイプ・エラーの例外が発生します。
5:47外部から受け取った値を渡すときは、事前に存在確認をしてください。
5:52一方、文字列を渡すと一文字ずつの配列が返り、数値を渡すと空の配列が返ることを実機で確認しました。
6:00意図しない型が静かに通る場合があるので、入力の型は呼び出し側でそろえておくのが安全です。
6:07よく似た三つのメソッドの使い分けを整理します。
6:11キーだけが欲しいならキーズ、値だけが欲しいならバリューズ、キーと値の対応が必要ならエントリーズです。
6:20スライドでは同じ得点オブジェクトで比べています。
6:25キーズは教科名の配列、エントリーズは教科名と点数の組の配列になり、実機とも一致しました。
6:33もう一つ実務上の注意として、記事も触れている通り、合計を求める前に値がすべて数値か検証してください。
6:42文字列が一つ混ざるだけで、足し算が文字列の連結に化けて、静かに間違った結果になります。
6:50迷ったら対応関係を失わないエントリーズから検討するのが無難です。
6:56まとめです。
6:57オブジェクト・バリューズは、オブジェクトの値だけを取り出して配列にする静的メソッドです。
7:04判断のポイントは三つです。
7:07まず、戻り値は値の配列なので、リデュースやマックスやインクルーズといった配列の処理をそのまま使えること。
7:16次に、対象は自身の列挙可能な文字列キーの値だけで、シンボルや継承した項目は含まれないこと。
7:24そして、キーの対応関係が失われるため、ラベルが必要な場面ではエントリーズを選ぶことです。
7:31まずは記事の基本例と境界例を実行し、項目を一つ変えて結果を予測してから確かめてみてください。
7:39次に学ぶオブジェクト・キーズと合わせると、取り出し方の選択肢がそろいます。
7:46値の検証を忘れず、安心して集計に使ってください。
7:50お疲れさまでした。

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

この動画で学べること

Object.values()でオブジェクト自身の列挙可能な値を取得する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのObject.values()の使い方：引数・戻り値・実例と注意点 →