SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:01今回はマスのマックスを紹介します。
  3. 0:03これは、渡した複数の数値の中から、一番大きい値を返してくれる静的メソッドです。
  4. 0:10たとえばテストの得点が並んでいるとき、最高点はどれかを知りたい場面はよくあります。
  5. 0:17自分で一つずつ比べて探す手間を、このメソッドが一手に引き受けてくれます。
  6. 0:23この動画では、書き方と引数、記事の基本例、配列を渡す方法、引数がない場合や数値に変換できない値が混ざった場合の動き、
  7. 0:31そして大きな配列を扱うときの注意点まで、実行結果と一緒に学びます。
  8. 0:39まずは全体像をつかみましょう。
  9. 0:42似た役割のメソッドに最小値を返すミニマムもあり、セットで覚えると便利です。
  10. 0:48まず動作環境を確認します。
  11. 0:50マックスはマスオブジェクトに最初から備わる、歴史のとても長い機能です。
  12. 0:54クロームとファイアーフォックスでは一以降、サファリでは一以降、エッジでは十二以降で使えます。
  13. 1:00ノード・ジェイエスではゼロ・十・ゼロという古い版から対応しています。
  14. 1:05記事の互換性情報はエムディーエヌのデータに基づく目安です。
  15. 1:09現在使われている環境であれば、ほぼどこでもそのまま使えると考えてよいでしょう。
  16. 1:14スライドの通り、関数として備わっていることを実機でも確認済みです。
  17. 1:18追加の読み込みは不要です。
  18. 1:20迷ったときは、対象のブラウザーで小さいコードを一度実行して確かめるのが確実です。
  19. 1:25書き方を確認します。
  20. 1:27マスのあとにドットを書き、マックスとカッコを続けます。
  21. 1:31カッコの中には、比べたい数値をカンマで区切って並べます。
  22. 1:36引数の個数に決まりはなく、二つでも十個でも、一つだけでも動きます。
  23. 1:41戻り値は、その中で一番大きい数値です。
  24. 1:44スライドの例では、三と七と五の中から七が返り、一つだけ渡した場合はその値自体が返ることを実機で確認しました。
  25. 1:53比べる対象は変数でも計算式でもかまいません。
  26. 1:57まずは数値を直接並べる、この基本の形を覚えてください。
  27. 2:01カッコの中の順番は結果に影響しないため、並び順を気にする必要はありません。
  28. 2:07記事の基本例を見ます。
  29. 2:09七十二、九十一、八十五という三人分の得点を配列に入れ、マックスで最高点を表示します。
  30. 2:16実行結果は九十一で、ノードの実機結果とも一致しています。
  31. 2:20ここで大切なのが、配列の前に書いたドット三つの記号です。
  32. 2:25これはスプレッド構文と呼ばれ、配列の中身を一つずつの引数として広げて渡す働きをします。
  33. 2:32配列をそのまま渡す書き方との違いは、次のセクションでも改めて確認します。
  34. 2:37まずはこの例をコンソールで実行し、得点を一つ変えたら結果がどう変わるか予測してみてください。
  35. 2:45この書き方は、人数が増えても配列に足すだけで対応できる点も便利です。
  36. 2:50いろいろな数で動きを確かめます。
  37. 2:53マイナス五、マイナス二、マイナス九のように負の数だけを渡した場合は、ゼロに一番近いマイナス二が最大値になります。
  38. 3:01絶対値の大きさで比べるわけではない点に注意してください。
  39. 3:06小数の場合は、二・五と二・四を比べると二・五が返ります。
  40. 3:10整数でなければならない決まりはありません。
  41. 3:13また、無限大を一つでも渡すと、結果は無限大になります。
  42. 3:17スライドの結果はすべて実機で確認済みです。
  43. 3:21負の数では直感とずれることがあるので、迷ったら小さい例で試す習慣をつけましょう。
  44. 3:27同じ値が複数ある場合は、その値がそのまま最大値として返ります。
  45. 3:32配列に入ったデータを比べる方法を整理します。
  46. 3:35基本は、記事の例でも使ったスプレッド構文で、配列の前にドット三つを付けて展開して渡す形です。
  47. 3:43四、十二、八の配列からは十二が返ることを実機で確認しました。
  48. 3:49もう一つの方法として、アプライを使って配列を引数として渡す昔ながらの書き方もあり、
  49. 3:53結果は同じ十二になります。
  50. 3:58どちらの方法でも、元の配列自体は変更されません。
  51. 4:02新しいコードでは読みやすいスプレッド構文がおすすめです。
  52. 4:07配列をそのまま渡してしまう間違いは後ほど注意点でも触れます。
  53. 4:13なお、配列をそのまま渡すと数値に変換できず、結果がナンになるので注意してください。
  54. 4:20境界条件として、比べる数値が一つもない場合を確認します。
  55. 4:24引数を何も渡さずに呼び出すと、戻り値はマイナス無限大になります。
  56. 4:29空の配列を展開して渡した場合も、引数がゼロ個になるため、まったく同じ結果です。
  57. 4:34どちらも記事の境界例と実機の結果が一致しています。
  58. 4:38ここで注意したいのは、このマイナス無限大は、データが存在しないことを示す目印だという点です。
  59. 4:45実際の最高点や最大金額としてそのまま画面に表示してはいけません。
  60. 4:50データが空の場合の表示は、別に用意しておきましょう。
  61. 4:53件数を先に数えて、ゼロ件なら早期に分岐させる書き方が実務ではよく使われます。
  62. 4:59数値に変換できない値が混ざった場合を見ます。
  63. 5:02引数の中に一つでもナン、つまり数値ではないことを表す特別な値が含まれると、
  64. 5:06結果全体がナンになります。
  65. 5:10記事の境界例でも、一とナンを渡して、結果がナンかどうかを判定し、トゥルーが返ることを確認しています。
  66. 5:18実機の結果とも一致しました。
  67. 5:20ポイントは、例外が出るのではなく、ナンという値が静かに返ってくる点です。
  68. 5:26そのまま計算を続けると、ずれに気づきにくくなります。
  69. 5:30外部から来たデータは、渡す前に数値かどうかを確認する習慣が大切です。
  70. 5:35判定には、ナンバーオブジェクトのイズナンを使うと、誤判定を避けられます。
  71. 5:41引数が数値以外の場合の、自動変換の動きも知っておきましょう。
  72. 5:46数値の形をした文字列は、自動で数値に変換されて比べられます。
  73. 5:51スライドの例では、文字列の十が数値の十として扱われ、最大値になることを実機で確認しました。
  74. 5:58ヌルはゼロとして扱われます。
  75. 6:00一方、文字だけの文字列のように数値へ変換できないものはナンになり、結果全体もナンになります。
  76. 6:07自動変換に頼ると意図しない結果を招くことがあるため、実務では渡す前に自分で数値へ変換し、
  77. 6:12型をそろえておく方が安全です。
  78. 6:17入力がフォーム由来の文字列の場合は、特にこの変換の有無を意識してください。
  79. 6:23大きなデータを扱うときの注意点です。
  80. 6:26スプレッド構文で巨大な配列を展開すると、渡せる引数の個数の上限に達し、環境によってはエラーになる場合があります。
  81. 6:35記事でもこの点が注意として挙げられています。
  82. 6:39対策として、データ件数が多い場合は、リデュースやループで一つずつ比べながら最大値を更新する方法が確実です。
  83. 6:47スライドの例では、初期値をマイナス無限大にして順に比べ、九十一が得られることを実機で確認しました。
  84. 6:55件数が少ないうちはマックスで十分ですが、増えたときの逃げ道も覚えておきましょう。
  85. 7:02数万件を超えるデータを扱う可能性があるなら、最初からリデュースで書く判断も有効です。
  86. 7:09まとめです。
  87. 7:10マックスは、複数の数値から最大値を一行で求められるメソッドです。
  88. 7:15導入時の判断は三つです。
  89. 7:17まず、データが空の場合はマイナス無限大が返るため、表示や後続の処理を別に決めておくこと。
  90. 7:24次に、数値にできない値が混ざると結果がナンになるため、渡す前に検証すること。
  91. 7:30そして、配列はスプレッド構文で展開して渡し、件数が非常に多い場合はリデュースへの切り替えを検討することです。
  92. 7:39まずは記事の基本例をコンソールで実行し、入力を一か所ずつ変えて結果を予測してみてください。
  93. 7:46お疲れさまでした。
  94. 7:48小さい例で試しながら、境界条件まで含めて動きを確かめることが上達への近道です。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

Math.max()で複数の数値から最大値を求める方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

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