VIDEO LESSON

JavaScriptのObject.isExtensible()：オブジェクトに項目を追加できるか調べるの解説動画

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

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

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

0:00こんにちは。
0:00今回はイズエクステンシブルを紹介します。
0:04これは、オブジェクトに新しい項目を追加できるかどうかを調べるメソッドです。
0:09ライブラリーから受け取ったオブジェクトに項目を追加しようとして、タイプエラーになった経験はないでしょうか。
0:18ここでいう拡張とは、オブジェクト自身のプロパティを新しく追加することです。
0:23既存の値を書き換えられるか、入れ子のデータを変更できるかとは別の状態を表します。
0:30この動画では、書き方と戻り値、三つの状態を比べる基本例、判定結果の正しい読み方、
0:35そして判定自体が失敗する場面まで、実行結果と一緒に学びます。
0:41設定に診断用の項目を追加できない原因を探すような場面が、その代表例です。
0:46まず動作環境を確認します。
0:48このメソッドはジャバスクリプトの標準組み込み関数で、ブラウザーとノード・ジェイエスの両方で利用でき、
0:53ドムや外部パッケージに依存しません。
0:58エムディーエヌでは、二千十五年七月からブラウザー間で広く利用可能な機能とされています。
1:04この記事のコードは、現在のクローム、エッジ、ファイアーフォックス、サファリと、
1:08ノード二十二以降を対象にします。
1:12注意点として、古い実装ではプリミティブ値の扱いに差があります。
1:17イーシーマスクリプト・ファイブではオブジェクト以外を渡すと例外でしたが、
1:21二千十五以降はフォルスを返す仕様になりました。
1:25書き方を確認します。
1:27オブジェクトという名前の後にイズエクステンシブルと書き、カッコの中に調べたい値を渡します。
1:33インスタンスのメソッドではなく、オブジェクトから呼び出す形です。
1:38戻り値がトゥルーなら対象は拡張可能、フォルスなら拡張不可能です。
1:43ただしイーシーマスクリプト二千十五以降では、オブジェクト以外を渡した場合もフォルスになります。
1:50通常のオブジェクトは作成時点では拡張可能で、追加禁止や封印、凍結といった処理を受けたものがフォルスになります。
1:59この判定は同期処理で、調べるだけなので対象を変更することはありません。
2:04記事の基本例を見ます。
2:06通常のオブジェクト、追加禁止にしたオブジェクト、凍結したオブジェクトの三つを用意し、
2:10それぞれ判定します。
2:15結果は、通常のオブジェクトだけがトゥルーで、追加禁止と凍結はどちらもフォルスでした。
2:22さらに、数値とヌルを渡してもフォルスが返ります。
2:26数値やヌルはオブジェクトではないためです。
2:30実機でも記事の期待出力とすべて一致しました。
2:34まず、調べたいオブジェクトが今どの状態にあるのかを、この判定で素早く確認できます。
2:41追加できない原因を探すときの最初の手掛かりです。
2:45なお、フォルスだけでは入力がオブジェクトかどうかまでは区別できない点も覚えておきましょう。
2:53基本例の続きです。
2:54追加禁止のオブジェクトでも、もともとあるテーマという項目はダークに更新できました。
3:00既存値の更新と、新規項目の追加は別の話なのです。
3:04一方、デバッグという新しい項目を追加しようとすると、ストリクトモードではタイプエラーになりました。
3:11例外を捕捉しているため処理は続き、追加後のデバッグを読むとアンディファインドで、
3:15項目が作られていないことが分かります。
3:19実機でも記事の期待出力と一致しました。
3:22拡張不可は、すべての変更ができないという意味ではない点がポイントです。
3:27フォルスになる処理を整理します。
3:29プリベントエクステンションズで追加を禁止したもの、シールで封印したもの、
3:34フリーズで凍結したものは、いずれもイズエクステンシブルがフォルスを返します。
3:40実機でも封印したオブジェクトでフォルスを確認しました。
3:43ただし、フォルス同士でも中身は同じではありません。
3:47追加禁止や封印では既存の書き込み可能な値は更新できますが、凍結では更新もできません。
3:52つまり、この判定で分かるのは新規追加の可否だけで、既存項目の書き換え可否までは区別できないのです。
3:59用途に応じて、別の確認と組み合わせてください。
4:02判定結果の読み方でよくある誤解を取り上げます。
4:06フォルスを、すべて変更不可という意味に解釈してしまうことです。
4:11先ほどの例でも、追加禁止のオブジェクトは既存値を更新できました。
4:16もし診断画面でこの結果だけを使って読み取り専用と表示すると、利用者を誤解させてしまいます。
4:23適切なのは、新規項目の追加不可と表示し、特定項目の更新可否は別の情報として扱うことです。
4:30判定結果が何を意味し、何を意味しないのかを言葉で正確に表すことが、調査結果を正しく伝えることにつながります。
4:39失敗を見落とす落とし穴も確認します。
4:41拡張できないオブジェクトへ代入で新規項目を追加しようとしたとき、ストリクトモードではタイプエラーになります。
4:49しかしストリクトモードでない場合は、追加が黙って無視され、例外は出ません。
4:54つまり、例外が出なかったことを、追加に成功した根拠にはできないのです。
4:59記事の実行例では、関数の中にユーズストリクトを置くことで、失敗を例外として観察できるようにしています。
5:07追加できたかどうかを確かめたいときは、判定メソッドで状態を確認するか、ストリクトモードで例外を捕捉するのが確実です。
5:15トゥルーという結果の読み方にも注意が必要です。
5:19拡張可能という判定は、特定のプロパティ名への代入が成功することを保証しません。
5:25既存プロパティの書き込み制限や、継承したアクセサー、プロキシによる制御などが別に関係するからです。
5:34また、判定はその時点の状態を示すにすぎません。
5:38判定の後、別の処理で追加禁止にされれば、以前の結果は使えなくなります。
5:44特に、判定と代入の間にアウェイトを挟む設計では、結果を長期間保存して使わないようにしましょう。
5:52実際の更新処理では、例外処理を残しておくことが大切です。
5:57判定そのものが失敗する例を見ます。
5:59プロキシでは、イズエクステンシブルのトラップが呼ばれることがあります。
6:05その結果が対象の実際の拡張性と矛盾すると、タイプエラーになります。
6:10スライドの例では、空のオブジェクト、つまり本来は拡張可能な対象に対して、
6:15トラップがフォルスを返すため、判定が例外になりました。
6:20実機でも記事の期待出力どおりタイプエラーを確認しました。
6:24任意のオブジェクトを受け取る診断ツールでは、判定処理そのものにも例外への備えが必要だということです。
6:32安全そうに見える確認用の関数ほど、想定外の入力を意識してください。
6:37まとめです。
6:37イズエクステンシブルは、オブジェクトに新規項目を追加できるかを返すメソッドです。
6:43ポイントは三つです。
6:44まず、追加禁止・封印・凍結でフォルスになり、オブジェクト以外でもフォルスになること。
6:50次に、フォルスでも既存値の更新はできる場合があり、トゥルーでも代入の成功は保証されないこと。
6:57そして、プロキシでは判定自体が例外になる場合があることです。
7:01活用場面では、受け取り直後と加工直前で状態を記録すると、追加できなくなった段階を絞り込めます。
7:07まずは記事の基本例を実行し、結果を予測してから確かめてみてください。
7:12お疲れさまでした。
7:13判定を設計の改善につなげる姿勢が、使いどころの判断を確かなものにします。

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

この動画で学べること

Object.isExtensible()でオブジェクトの拡張可否を調べる方法を解説。引数・戻り値、ブラウザーとNode.jsの実行手順、期待出力、既存値の更新との違いや例外の注意点を学べます。

解説記事・サンプルコードを読む：JavaScriptのObject.isExtensible()：オブジェクトに項目を追加できるか調べる →