SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00今回はアレイ・イズ・アレイを紹介します。
  3. 0:04これは、渡した値が配列かどうかを判定するための静的メソッドです。
  4. 0:09配列であればトゥルー、配列でなければフォルスという、わかりやすい真偽値が返ります。
  5. 0:16この動画では、書き方と一つの引数、戻り値、記事の基本例であるエーピーアイレスポンスの検証、
  6. 0:21配列風オブジェクトの境界例、タイプオブでは判定できない理由、エブリーと組み合わせた実例まで、
  7. 0:27実行結果と一緒に学びます。
  8. 0:33どこから来たデータかわからない場合でも、まず配列かどうかを確かめれば、安全に処理を始められます。
  9. 0:40判断の結果が真偽値で返るため、処理を分ける条件としてそのまま書けます。
  10. 0:46まず動作環境を確認します。
  11. 0:48アレイ・イズ・アレイは、古くから使える基本的なメソッドです。
  12. 0:51記事の互換性情報では、クロームでは四以降、エッジでは十二以降、ファイアーフォックスでは四以降、
  13. 0:55サファリでは五以降で使えます。
  14. 0:59ノード・ジェイエスではゼロ・一ゼロ・ゼロ以降に対応しています。
  15. 1:03記事が示すこれらの数値はエムディーエヌの互換性データに基づく目安で、対応範囲は非常に広く、
  16. 1:07現在の環境で使えない場面はまずありません。
  17. 1:11追加の読み込みは不要で、アレイに最初から関数として備わっていることを実機で確認済みです。
  18. 1:16古くからあるメソッドなので、安心して使える部類に入ります。
  19. 1:20書き方を確認します。
  20. 1:21大文字で始まるアレイに続けて、イズ・アレイと書き、カッコの中に判定したい値を一つだけ渡します。
  21. 1:29個々の配列から呼び出すのではなく、アレイという型そのものに付いている静的メソッドである点が特徴です。
  22. 1:36引数の値は型変換されず、そのまま判定されます。
  23. 1:40戻り値は、配列であればトゥルー、それ以外はフォルスで、渡した値自体は変更されません。
  24. 1:46スライドの例では、数値の配列がトゥルーになり、文字列エー・ビー・シーはフォルスになることを実機で確認しました。
  25. 1:55結果を条件分岐にそのまま使えます。
  26. 1:57配列の要素を数える必要はなく、外見の形だけを見て答えが返ります。
  27. 2:02記事の基本例を見ます。
  28. 2:04ペイロードというオブジェクトの中に、タグズという配列が入っているデータです。
  29. 2:10このタグズが本当に配列かどうかを、アレイ・イズ・アレイで調べるコードになっています。
  30. 2:16実行するとトゥルーが返り、記事の期待出力と一致し、ノードの実機結果とも一致しました。
  31. 2:23記事が説明するように、これはエーピーアイレスポンスの配列部分を検証する場面です。
  32. 2:29受け取ったデータが想定と違う形だった場合に、そのまま配列のメソッドを呼ぶとエラーになるため、
  33. 2:34処理を始める前の門番として使うと安全です。
  34. 2:39配列だとわかってから次の処理へ進む、という順番を意識してください。
  35. 2:44さまざまな値で判定結果を確かめます。
  36. 2:47要素が一つも入っていない空の配列でも、配列であることに変わりはないため、
  37. 2:51結果はトゥルーになります。
  38. 2:55一方、ジャバスクリプトという文字列は、文字の並びではありますが配列ではないためフォルスです。
  39. 3:02数値の百二十三や、通常のオブジェクトもフォルスになります。
  40. 3:06値が入っていないことを表すアンディファインドもフォルスであることを実機で確認しました。
  41. 3:13例外が投げられることはなく、どんな値を渡してもトゥルーかフォルスで答えが返るため、
  42. 3:18入力チェックの最初の段階に置きやすいメソッドです。
  43. 3:23空かどうかと、配列かどうかは別の確認だという点も意識しておきましょう。
  44. 3:29記事の境界例を確認します。
  45. 3:31ゼロという添字と、レングスという長さの項目を持つオブジェクトは、見た目が配列に似ている配列風オブジェクトです。
  46. 3:40しかし、結果はフォルスになることを実機で確認し、記事の期待出力とも一致しました。
  47. 3:47また、値がないことを表すナルもフォルスです。
  48. 3:50記事の期待出力はどちらもフォルスで、実機結果と一致しました。
  49. 3:55添字と長さがあるだけでは配列とは認められない、という厳密さが大切です。
  50. 4:01配列風の値を配列として扱いたい場合は、あとで学ぶアレイ・フロムなどで本物の配列へ変換してください。
  51. 4:09見た目の似通い方に惑わされないことが、この判定を使う意味です。
  52. 4:14タイプオブでは判定できない理由を確認します。
  53. 4:17タイプオブは値の種類を文字列で返す演算子ですが、配列に対して使うとオブジェクトと返ってきます。
  54. 4:24通常のオブジェクトに対しても同じくオブジェクトと返るため、両者を区別できません。
  55. 4:30さらに、ナルに対してもオブジェクトと返ることが知られています。
  56. 4:34記事も、タイプオブの配列はオブジェクトなので配列判定には使えない、と明記しています。
  57. 4:40スライドの三つの例はすべて実機で確認済みです。
  58. 4:44配列かどうかを知りたい場面では、タイプオブではなく、専用のアレイ・イズ・アレイを使ってください。
  59. 4:50大まかな種類の確認にはタイプオブ、配列の厳密な確認にはイズ・アレイ、と役割を分けてください。
  60. 4:57実務に近い実例を見ます。
  61. 4:59記事が紹介しているように、配列であることを確認したあとに、エブリーと組み合わせて各要素の型まで確認する使い方です。
  62. 5:08スライドの例では、タグズが配列であることと、すべての要素が文字列であることを、
  63. 5:12あわせて判定しています。
  64. 5:16結果はトゥルーになることを実機で確認しました。
  65. 5:19ここで大切なのは、配列であることと、要素が期待する型かどうかは別の話だという点です。
  66. 5:26記事もこの点を注意として挙げています。
  67. 5:29二段階で確認することで、受け取ったデータをより堅く扱えます。
  68. 5:33短いコードでも、二つの確認を重ねることで入力への信頼度が上がります。
  69. 5:38もう一つの実例として、一件と複数件をそろえる使い方を紹介します。
  70. 5:44データによって、値が一つだけ届く場合と、配列で複数届く場合が混在することがあります。
  71. 5:50トゥー・リストという関数では、アレイ・イズ・アレイで判定し、配列ならそのまま、
  72. 5:55配列でなければ配列で包んで返しています。
  73. 6:00シーエスエスという単独の文字列は、要素が一つの配列になり、もともと配列のものはそのまま残ることを実機で確認しました。
  74. 6:09形を先にそろえておくことで、その後の処理を一通りで書けるようになり、分岐が散らかりません。
  75. 6:16実際の入力検証でもよく使われる、基本的な整形のパターンです。
  76. 6:21注意点を三つ確認します。
  77. 6:23まず、関数の中で使えるアーギュメンツという引数一覧のオブジェクトは、配列風ではありますが配列ではないためフォルスです。
  78. 6:32次に、ユーイント・エイト・アレイのような型付き配列も、名前にアレイと付いていますが、
  79. 6:38通常の配列ではないためフォルスになることを実機で確認しました。
  80. 6:44そして、どんな値を渡しても例外は出ず、フォルスが返る点も覚えておきましょう。
  81. 6:51似ているから配列だろうと決めつけず、必ずアレイ・イズ・アレイで確かめる習慣が、
  82. 6:55思わぬエラーを防ぎます。
  83. 6:59名前や見た目だけで判断せず、実行して確かめることが大切です。
  84. 7:04まとめです。
  85. 7:05アレイ・イズ・アレイは、渡した値が配列かどうかを、トゥルーかフォルスの真偽値で返す静的メソッドです。
  86. 7:13判断のポイントは三つです。
  87. 7:15まず、添字とレングスを持つ配列風オブジェクトや、ナルはフォルスになること。
  88. 7:21次に、タイプオブでは配列と通常のオブジェクトを区別できないため、配列判定にはこのメソッドを使うこと。
  89. 7:29そして、配列であることと要素の型が正しいことは別なので、必要に応じてエブリーなどと組み合わせることです。
  90. 7:37まずは記事の基本例と境界例を実行し、入力を一つ変えて、結果を予測してから確かめてみてください。
  91. 7:45お疲れさまでした。
  92. 7:46データの形を最初に確かめる習慣は、この先の配列処理すべてに生きてきます。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

Array.isArray()で値が配列かどうかを判定する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

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