VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:01今回はアレイ・フロムを紹介します。
0:03これは、反復可能な値や配列風オブジェクトから、新しい配列を作るための静的メソッドです。
0:11文字列やセットのように順番に取り出せる値も、長さを持つだけのオブジェクトも、
0:16どちらも本物の配列へ変換できます。
0:20この動画では、書き方と三つの引数、戻り値、記事の基本例である長さ指定による連番生成、
0:26文字列や配列風オブジェクトからの変換、変換関数との組み合わせ、そして絵文字に関する境界例まで、
0:32実行結果と一緒に学びます。
0:38配列のメソッドを使いたいのに、持っているデータが配列ではない、という場面で最初に思い出したいメソッドです。
0:47変換後の配列には、マップやフィルターといった配列専用のメソッドをそのまま使えます。
0:54つまり、形をそろえることが、後の処理を素直に書くための第一歩になります。
1:00まず動作環境を確認します。
1:02アレイ・フロムは、エスシックスと呼ばれる世代で導入された基本的なメソッドです。
1:07記事の互換性情報では、クロームでは四十五以降、エッジでは十二以降、ファイアーフォックスでは三十二以降、
1:11サファリでは九以降で使えます。
1:16ノード・ジェイエスでは四・ゼロ・ゼロ以降に対応しています。
1:20これらの数値はエムディーエヌの互換性データに基づく目安ですが、対応範囲は広く、
1:24現在の環境で使えない場面はまずありません。
1:28追加の読み込みは不要で、アレイに最初から関数として備わっていることを実機で確認済みです。
1:34書き方を確認します。
1:36大文字で始まるアレイに続けて、フロムと書き、カッコの中に変換したい値を渡します。
1:43個々の配列から呼び出すのではなく、アレイという型そのものに付いている静的メソッドです。
1:50引数は三つありますが、必須なのは第一引数の変換したい値だけです。
1:56第二引数には各要素を加工する変換関数、第三引数にはその関数の中で使うディスを指定でき、
2:00どちらも任意です。
2:05戻り値は新しい配列で、元の値は変更されません。
2:09スライドの例では、文字列エー・ビー・シーが一文字ずつの配列になることを実機で確認しました。
2:17記事の基本例を見ます。
2:18レングスが四という配列風オブジェクトを渡し、変換関数でインデックスに一を足した値を要素にしています。
2:27アンダースコアは、元の要素を使わないことを示す書き方です。
2:32もとの要素は値が入っていないため、アンディファインドになります。
2:37実行すると、一、二、三、四という連番の配列が文字列化されて表示され、記事の期待出力と一致し、
2:42ノードの実機結果とも一致しました。
2:48記事が説明するように、これはページ番号の連番を生成する場面です。
2:53長さだけが決まっていて、中身を順番に作りたいときに便利な使い方です。
2:59ページ番号以外にも、カレンダーの日付や、表の行番号のように、決まった長さの並びを機械的に作る場面で応用できます。
3:08文字列からの変換を確認します。
3:11文字列は反復可能な値の代表例で、アレイ・フロムに渡すと、一文字ずつに分解された配列が返ります。
3:18ジャバスクリプトという十文字の文字列なら、長さは十になることを実機で確認しました。
3:25ここで大切なのは、後で見る境界例にもつながる点です。
3:29アレイ・フロムは文字列をユニコードのコードポイントという単位で扱うため、
3:34絵文字のような文字も一つの要素として数えます。
3:39空文字で分割するスプリットとは扱いが異なる場合があるので、文字を数える目的ではアレイ・フロムのほうが意図に合うことが多いです。
3:49配列風オブジェクトからの変換を見ます。
3:52ゼロから始まる添字と、レングスという長さの項目を持つオブジェクトは、反復可能でなくても配列へ変換できます。
4:00スライドの例では、エーとビーの二要素が取り出され、結果が配列になることを実機で確認しました。
4:07関数のなかで使えるアーギュメンツや、ブラウザーで要素を集めたノードリストも、
4:11この配列風の仲間です。
4:14記事も、ドムのノードリストを配列へ変換する用途を紹介しています。
4:19添字が足りない場所はアンディファインドで埋まるため、長さと中身がそろっているか確認してください。
4:26配列風のままでは、マップやフィルターといった配列のメソッドを直接呼べないことが多いため、
4:31変換してから処理するのが定番の流れです。
4:36第二引数の変換関数を見ます。
4:38変換関数は、要素とインデックスを受け取り、返した値が新しい配列の要素になります。
4:45スライドの例では、一、二、三の各要素を二倍にして、二、四、六という配列を作ることを実機で確認しました。
4:53基本例の連番生成も、実はこの変換関数を使った応用でした。
4:58いったん配列を作ってからマップで加工する、という二段階を一度で済ませられる点が利点です。
5:05変換関数を使わない場合は要素がそのまま入り、使う場合は加工後の値が入る、
5:10という違いを意識して使い分けてください。
5:14反復可能な値の例として、セットからの変換を紹介します。
5:18セットは重複しない値だけを保持する仕組みで、一、二、二、三を入れても、二は一度しか残りません。
5:26これをアレイ・フロムで配列に戻すと、一、二、三という重複のない配列になることを実機で確認しました。
5:33重複を取り除きたいときに、セットを経由する方法はよく使われます。
5:38また、マップから変換すると、キーと値の組が要素として並びます。
5:43反復可能な値であれば種類を問わず扱える点が、アレイ・フロムの守備範囲の広さです。
5:49記事の境界例を確認します。
5:51エーという文字と、笑顔の絵文字を並べた文字列を、アレイ・フロムで変換し、
5:55その長さを調べるコードです。
6:00実行すると長さは二になり、記事の期待出力と一致し、実機結果とも一致しました。
6:06スライドでは絵文字をユニコードエスケープ表記で書いていますが、同じ文字列を表しています。
6:13記事が注意するように、文字列はユニコードのコードポイント単位で扱われます。
6:20ただし、複数のコードポイントで構成される見た目の一文字とは一致しない場合があるため、
6:26表示上の文字数と完全に同じとは限らない点に注意してください。
6:32注意点を三つ確認します。
6:33まず、変換関数なしで長さだけを渡すと、中身はすべてアンディファインドになります。
6:40連番が欲しい場合は、基本例のように変換関数でインデックスを使ってください。
6:46次に、アレイ・フロムで作った配列は新しい配列ですが、入れ子になったオブジェクトまでは複製されず、
6:51元のものと参照が共有される、いわゆる浅いコピーです。
6:57要素のオブジェクトを変更すると、元にも影響する場合があります。
7:02そして、変換元の値そのものは変更されません。
7:05新しい配列が返ることと、中身まで独立していることは別だ、と覚えておきましょう。
7:11また、第一引数にヌルやアンディファインドを渡すと例外になるため、値が入っていることを先に確かめる場面では注意が必要です。
7:21まとめです。
7:22アレイ・フロムは、反復可能な値や配列風オブジェクトから、新しい配列を作る静的メソッドです。
7:29ポイントは三つです。
7:31まず、第一引数には文字列やセットのような反復可能な値か、長さを持つ配列風オブジェクトを渡すこと。
7:38次に、第二引数の変換関数を使うと、連番の生成や値の加工を変換と同時にできること。
7:45そして、文字列はコードポイント単位で扱われ、作られる配列は浅いコピーであることです。
7:52まずは記事の基本例と境界例を実行し、長さや入力を一つ変えて、結果を予測してから確かめてみてください。
8:00お疲れさまでした。
8:01データの形がそろっていないと感じたら、まずアレイ・フロムで配列に直す、という入口の役割を思い出してください。

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

この動画で学べること

Array.from()で反復可能な値や配列風オブジェクトから配列を作る方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

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