VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00今回はオブジェクト・フロム・エントリーズを紹介します。
0:05これは、キーと値の組を並べたデータから、新しいオブジェクトを作る静的メソッドです。
0:11たとえば、変換処理を終えた設定の一覧を、再び使いやすいオブジェクトの形へ戻す、
0:16といった場面で活躍します。
0:20この動画では、書き方と引数と戻り値、記事の基本例と境界例、重複したキーの上書き、
0:26変換と組み合わせる実践的な使い方、そして例外の扱いまで、実行結果と一緒に学びます。
0:33配列とオブジェクトの間を行き来する変換は、データ処理の要になる大切な操作です。
0:39変換の前後でデータの形がどう変わるかを意識しながら聞いてください。
0:44まず動作環境を確認します。
0:46オブジェクト・フロム・エントリーズは、二千十九年頃の仕様で導入されたメソッドです。
0:53クロームでは七十三以降、エッジでは七十九以降、ファイアーフォックスでは六十三以降、
0:57サファリでは十二・一以降で使えます。
1:02ノード・ジェイエスでは十二・ゼロ・ゼロ以降に対応しています。
1:06記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:11対応範囲は広いものの、オブジェクト・アサインほど古くはないため、公開するコードでは対象環境を先に確認してください。
1:20追加の読み込みは不要で、関数として備わっていることを実機でも確認済みです。
1:25書き方を確認します。
1:27オブジェクトと書き、続けてフロム・エントリーズと書いて、カッコの中に、キーと値の組の集まりを渡します。
1:35引数は一つだけで、配列の配列でも、マップでも、組を取り出せる反復可能なデータであれば受け付けます。
1:42各組では、添字ゼロの要素がキー、添字一の要素が値として読まれます。
1:47戻り値は、組から作成された新しいオブジェクトです。
1:51渡した元のデータ自体は変更されません。
1:54スライドの例では、エーが一、ビーが二という二組からオブジェクトが作られることを、
1:58実機で確認しました。
2:01記事の基本例を見ます。
2:03テーマがダーク、言語がジェイエーという、二つの設定を、キーと値の組として並べた配列を用意し、
2:08フロム・エントリーズへ渡すコードです。
2:13実行結果は、テーマがダーク、ラングがジェイエーを持つオブジェクトとなり、
2:17ノードの実機結果とも一致しています。
2:21配列の中の一つ一つの組が、そのままオブジェクトのプロパティへ変換される、
2:24という対応関係が読み取れます。
2:28設定一覧のように、組の形でデータが手元にあるとき、そのままオブジェクトへ戻せるのが、
2:33このメソッドの素直な使いどころです。
2:37組の順番とオブジェクトの項目が対応している点にも注目してください。
2:42もっとも実践的な使い方を見ます。
2:45まずオブジェクト・エントリーズで、オブジェクトをキーと値の組の配列へ変換します。
2:51次にマップで各組の値を二倍に変換し、最後にフロム・エントリーズでオブジェクトへ戻す、
2:56という三段階の処理です。
3:01実行結果はエーが二、ビーが四となり、実機とも一致しました。
3:05この往復変換は、オブジェクトのすべての値に同じ加工を施したいときの定番パターンです。
3:12オブジェクトのままでは一括変換しにくい処理も、組の配列にすれば、配列の便利なメソッドをフルに使えるようになります。
3:22この型を覚えると、設定値の一括補正や表示用データの整形にも応用できます。
3:28記事の境界条件の例を見ます。
3:30同じキーであるエーに対して、一と二という二つの組を渡すコードです。
3:35実行結果はエーが二となり、記事の期待出力とも一致しています。
3:39つまり、同じキーが複数あると、例外にはならず、後ろの組の値で上書きされます。
3:45並び順が結果を決めるので、データの生成元で重複が起こり得る場合は注意が必要です。
3:51重複をエラーとして扱いたい場面では、フロム・エントリーズへ渡す前に、キーの重複を自分で検証してください。
3:59知らないうちに先の値が静かに消える、という事故を防げます。
4:03引数に渡せるデータの広さを確認します。
4:05マップはキーと値の組を取り出せるデータなので、そのまま渡すことができ、エックスが十、
4:10ワイが二十のオブジェクトになることを実機で確認しました。
4:14さらに、ユーアールエル・サーチ・パラムズも組の集まりとして渡せます。
4:19ただしこちらは値がすべて文字列になる点に注意してください。
4:22エーは数値の一ではなく、文字列の一として取り込まれます。
4:26数値として使いたい場合は、変換後に数値への変換を自分で加える必要があります。
4:31入力元の性質が結果の型に影響する、という点がポイントです。
4:34入力元が変わっても、呼び出し方は一つで済むのが設計の分かりやすさです。
4:39細かな仕様を確認します。
4:40空の配列を渡すと、例外にはならず、空のオブジェクトが返ります。
4:45データがない場合でも安全に呼べるのはありがたい性質です。
4:49次に、キーに数値を使うと、オブジェクトのキーとして扱うために文字列へ変換されます。
4:55スライドの例では、数値の一が文字列の一のキーになることを実機で確認しました。
5:00また、シンボルをキーに渡した場合は、そのままシンボルキーとして使えます。
5:05キーの型は、文字列かシンボルへそろえられる、と覚えておくと、取り出し時の食い違いを防げます。
5:12注意点を見ます。
5:13引数そのものにヌルやアンディファインドを渡すと、タイプ・エラーの例外が発生します。
5:19組を取り出せないデータも同様に例外になります。
5:22外部から受け取ったデータを渡すときは、事前に存在確認をしてください。
5:27もう一つ、値が欠けた組の扱いです。
5:29値のない組を渡すと、値はアンディファインドとなり、ジェイソン文字列化ではそのキーが表示されません。
5:36スライドの結果はどちらも実機で確認済みです。
5:39データの欠けが静かに進む場合があるので、組の形がそろっているかを、生成側でそろえておくことが大切です。
5:46実務に近い実例として、名前と年齢という項目の組から、利用者オブジェクトを作る例を見ます。
5:54組の配列をフロム・エントリーズへ渡すだけで、ドット記法で値を取り出せる通常のオブジェクトになります。
6:03年齢は文字列の三十として取り込まれるため、数値として計算したい箇所ではナンバーの変換を添えました。
6:12前回学んだオブジェクト・アサインとの違いも押さえてください。
6:17アサインは既存のターゲットを変更しますが、フロム・エントリーズは常に対象の新しいオブジェクトを返し、
6:23元データは変更しません。
6:28変換用途では、こちらのほうが意図が明確で安全です。
6:33項目が増えても、組を並べるだけで対応できる柔軟さも利点の一つです。
6:39まとめです。
6:40オブジェクト・フロム・エントリーズは、キーと値の組の集まりから新しいオブジェクトを作る静的メソッドです。
6:50判断のポイントは三つです。
6:52まず、引数は組を取り出せるデータであれば、配列でもマップでもよいこと。
6:59次に、同じキーは後ろの組が優先されるので、重複が問題になる場合は事前に検証すること。
7:07そして、エントリーズで組の配列へ分解し、加工してから戻す往復変換が、最も実践的な使い方であることです。
7:16まずは記事の基本例と境界例を実行し、組を一か所変えて結果を予測してから確かめてみてください。
7:25次に学ぶオブジェクト・エントリーズと合わせると、変換の理解が完成します。
7:32お疲れさまでした。

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

この動画で学べること

Object.fromEntries()でキーと値の組からオブジェクトを作る方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

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