SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

JavaScriptのObject.is()：NaNと符号付きゼロを区別して値を比較するの解説動画

再生時間 7:54動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00今回はジャバスクリプトのオブジェクト・イズを紹介します。
  3. 0:05これは、二つの値が同じかどうかを判定する、比較のためのメソッドです。
  4. 0:11普段の比較で十分な場面も多いのですが、数値には少し特殊なケースがあります。
  5. 0:17計算に失敗したことを表すナン同士や、符号だけが違うゼロです。
  6. 0:22オブジェクト・イズは、ナン同士を同じ値と扱い、正のゼロと負のゼロを区別します。
  7. 0:28この動画では、厳密等価演算子との違いから、変更検知への活用、オブジェクト比較の注意点までを、
  8. 0:33実行結果と一緒に学びます。
  9. 0:38何を同じと見なすかを自分で選べるようになるのが目標です。
  10. 0:42判断に迷ったら、まずこの二つのケースに当てはまるかを確認してみてください。
  11. 0:49まず、困りごとから見ます。
  12. 0:50計算結果を前回の値と比べて、変わったときだけ処理したい場面を考えてください。
  13. 0:56ところが厳密等価演算子では、ナンとナンを比べても結果はフォルスになり、計算できない状態が続いていても、
  14. 1:01毎回変化したように見えてしまいます。
  15. 1:07逆に、ゼロとマイナスゼロはトゥルーになり、符号が変わっても変化なしと判定されます。
  16. 1:13画面のとおり、オブジェクト・イズではナン同士がトゥルーに変わります。
  17. 1:18すべての比較を置き換える必要はありません。
  18. 1:21この二つのケースが問題になる場面でこそ、選ぶ意味があります。
  19. 1:26この小さなずれが、不要な再処理や、大切な変化の見逃しの原因になります。
  20. 1:31引数と戻り値を確認します。
  21. 1:33呼び出し方は、オブジェクト・イズに比べたい値を二つ渡すだけです。
  22. 1:38インスタンスを作らず、オブジェクトに直接指定して呼ぶ静的メソッドです。
  23. 1:44戻り値は真偽値で、同じ値ならトゥルー、異なる値ならフォルスです。
  24. 1:49画面の例では、数値の十二同士はトゥルー、文字列の十二と数値の十二は型が違うのでフォルスになりました。
  25. 1:57型の自動変換は行いません。
  26. 1:59数値以外も渡せて、文字列なら内容と順序を比べ、オブジェクトなら同じものを参照しているかを比べます。
  27. 2:07比較対象そのものを変更する処理もありません。
  28. 2:11なお、引数の順序を入れ替えても、比較の結果は変わりません。
  29. 2:15基本の実行例を読みます。
  30. 2:17変数オリジナルにカウントを持つオブジェクトを入れ、別の変数エイリアスに同じものを代入しました。
  31. 2:26この二つは同じオブジェクトを指しているので、比較結果はトゥルーです。
  32. 2:32一方、その場で新しく作った、見た目が同じオブジェクトと比べても、結果はフォルスになります。
  33. 2:40記事の完全な例では、数値、型の違う値、ナン、ゼロ、参照の八件を並べて確認しています。
  34. 2:48このコードは、ノード・ジェイエスの実機でも、記事の期待出力と完全に一致することを確認済みです。
  35. 2:57ブラウザーのコンソールでも同じ結果になります。
  36. 3:01結果の読み方を整理します。
  37. 3:03違いが出るのは二か所だけです。
  38. 3:04一つ目はナンです。
  39. 3:06厳密等価ではフォルスですが、オブジェクト・イズではトゥルーで、計算できないという状態が続いたことを、
  40. 3:10同じ状態として扱えます。
  41. 3:14二つ目は符号付きゼロです。
  42. 3:15厳密等価ではプラスゼロとマイナスゼロを区別できませんが、オブジェクト・イズではフォルスとなり、
  43. 3:19符号の変化を検出できます。
  44. 3:23この比較規則はセームバリューと呼ばれます。
  45. 3:25それ以外の値については、厳密等価とほぼ同じ結果になるので、違いはこの二点に絞って覚えてください。
  46. 3:32この対応だけを覚えておけば、結果の読み間違いは防げます。
  47. 3:35対応環境を確認します。
  48. 3:37オブジェクト・イズは、二千十五年九月から主要ブラウザー間で利用できる機能で、
  49. 3:42現在のクローム、エッジ、ファイアフォックス、サファリで使えます。
  50. 3:47ノード・ジェイエスでも利用でき、記事の実行対象は二十二系です。
  51. 3:51サンプルは標準のジャバスクリプトだけで、外部ライブラリーも通信も使いません。
  52. 3:57ただし、古いブラウザーや組み込み環境まで無条件に対応するわけではありません。
  53. 4:02画面のように、タイプオブで関数として存在するかを確認してから使うと、未対応の環境でもエラーを避けて案内できます。
  54. 4:10活用例を見ます。
  55. 4:12計算結果が次々に届くとき、変化したときだけ履歴を残せば、記録の量を減らせます。
  56. 4:19ここでは、五、五、ナン、ナン、ゼロ、マイナスゼロ、マイナスゼロ、八という八件の並びを処理します。
  57. 4:28方針は、ナンが続く場合は同じ状態と扱い、ゼロの符号が変われば記録することです。
  58. 4:35前回の値と現在の値をオブジェクト・イズで比べ、異なる場合だけ記録します。
  59. 4:41まだ記録がない状態を表す変数を別に用意しているのは、最初の入力を偶然の一致で省略しないためです。
  60. 4:50表示用の関数でも、負のゼロを見分けられるよう、同じ比較を使っています。
  61. 4:56外部ライブラリーは使わず、標準の機能だけで書ける例です。
  62. 5:01実行結果を読み解きます。
  63. 5:03八件の入力に対して、記録は五件だけになりました。
  64. 5:07重なった五とナンは、それぞれ一回だけ記録され、ゼロからマイナスゼロへの変化は、
  65. 5:12符号の違いとしてしっかり記録されています。
  66. 5:16最後の八も新しい値として残りました。
  67. 5:19この結果も、ノード・ジェイエスの実機出力と一致することを確認済みです。
  68. 5:25注意点として、ナンの発生回数自体を障害の分析に使う場合は、この方法で省略してはいけません。
  69. 5:32重複を省いてよい情報なのかを決めてから導入してください。
  70. 5:36省略のルールを先に決めることが大切です。
  71. 5:39大切な注意点です。
  72. 5:40名前にオブジェクトと付いていますが、プロパティの中身を一つずつ調べる関数ではありません。
  73. 5:47画面の例では、状態を別の変数に代入したあと、カウントを二に書き換えました。
  74. 5:53参照は変わっていないので比較はトゥルーのままで、前の変数から見たカウントも二になっています。
  75. 5:59つまり、この代入は過去の内容の保存にはなりません。
  76. 6:03変更検知に使うなら、変更前の数値を別に保持するか、オブジェクトを直接書き換えず、
  77. 6:08新しい参照へ置き換える設計にしてください。
  78. 6:12内容同士の比較が必要なら、対象の項目と比較の規則を自分で明示します。
  79. 6:17参照が同じかどうかと、内容が同じかどうかは、別の問いとして分けて考えてください。
  80. 6:23もう二つの制約を確認します。
  81. 6:25一つ目は小数の誤差です。
  82. 6:27レイ点イチ足すレイ点ニと、レイ点サンの比較はフォルスになります。
  83. 6:32浮動小数点の誤差を吸収する機能はないので、測定値などを比べる場合は、許容できる誤差の幅を別に設計してください。
  84. 6:40また、二つの値が同じと判定されても、業務で使える正しい値とは限りません。
  85. 6:45ナンを同じ状態と扱うことと、その値を保存してよいかは別の判断です。
  86. 6:50二つ目は処理の性質で、このメソッドは同期的に真偽値を返すため、非同期の後始末は不要です。
  87. 6:57ただし、引数として渡す式が例外を出せば、比較自体は実行されません。
  88. 7:01未対応環境への備えは、対応環境のセクションで紹介した存在確認がそのまま使えます。
  89. 7:07まとめです。
  90. 7:08オブジェクト・イズは、ナン同士を同じと扱い、符号付きゼロを区別する比較です。
  91. 7:15通常の比較をすべて置き換える必要はなく、厳密等価で困る二つのケースがあるときに選びます。
  92. 7:22導入の前に、扱うデータについて二つ決めてください。
  93. 7:26計算できない状態が続いたら同じと見なすか、そしてゼロの符号に意味があるかです。
  94. 7:33このルールがはっきりすれば、変更検知のような処理で迷わず使えます。
  95. 7:38練習として、ナンとマイナスゼロを含む小さな配列を用意し、記録される変化を予想してから実行してみてください。
  96. 7:47小さな例で結果を確かめる習慣が、比較の使い分けを確実にします。
  97. 7:52お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

Object.is()の引数・戻り値と、厳密等価演算子との違いを解説。NaNや符号付きゼロの比較、変更検知の活用例、ブラウザーとNode.jsでの実行手順、参照比較の注意点を学びます。

解説記事・サンプルコードを読む：JavaScriptのObject.is()：NaNと符号付きゼロを区別して値を比較する →