VIDEO LESSON

JavaScriptの配列とオブジェクト：map・filter・reduceでデータを処理するの解説動画

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

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

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

0:00こんにちは。
0:00ジャバスクリプト入門、実践連載の第三回です。
0:04今回のテーマは、配列とオブジェクトです。
0:07一件の商品をオブジェクト、その一覧を配列として扱い、買い物のデータを処理します。
0:14中心になるのは、条件で残すフィルター、形を変えるマップ、ひとつにまとめるリデュースという三つの方法です。
0:22あわせて、探すファインド、並べ替えるソート、そして元のデータを壊さないコピーの方法も学びます。
0:30データをどう表し、どう変えるかは、画面を作る次の回でもそのまま使います。
0:36最後まで進めると、明細を作って合計まで出す一連の流れが、自分で書けるようになります。
0:43一つひとつの操作は、結果だけでなく、元のデータがどうなったかも一緒に確かめながら進めます。
0:50まずオブジェクトです。
0:52オブジェクトは、関係する値を名前付きでひとまとめにする入れ物です。
0:57画面の例では、ペンという商品に、アイディー、名前、単価、個数という四つの情報を入れています。
1:05名前の部分をキー、入っている内容を値と呼びます。
1:08値を取り出すときは、ドットに続けてキーを書きます。
1:12アイディーを表示名とは別に用意するのがポイントです。
1:17名前が同じ商品が二つあっても、アイディーが違えば別の商品として区別できます。
1:23金額は円単位の整数として扱う前提で、この先の計算を進めていきます。
1:28最初は、値の取り出し方と、キーを使ってデータを整理する感覚をつかむことが目標です。
1:35次に配列です。
1:36配列は、値を順番に並べた一覧です。
1:38今回の買い物データでは、商品のオブジェクトを三つ並べたものを、アイテムズという名前で用意します。
1:46ノート、ペン、消しゴムの順です。
1:48要素を取り出す番号はゼロから始まるので、先頭のノートはゼロ番、二番目のペンは一番です。
1:55個数がゼロの消しゴムも、まだ一覧の中には残っています。
1:59買うものだけに絞るのは次のステップです。
2:02配列とオブジェクトを組み合わせるこの形は、商品一覧に限らず、実際のアプリで最もよく出てくるデータの形です。
2:11要素の順番と番号の対応を押さえておくと、このあとの絞り込みや変換の結果も読みやすくなります。
2:18ここから配列メソッドの使い分けです。
2:21最初はフィルターです。
2:23フィルターは、条件に合う要素だけを残して、新しい配列を作ります。
2:28今回の条件は、個数がゼロより大きいことです。
2:32ノートとペンは残り、個数がゼロの消しゴムは外れます。
2:36結果の要素数は二つです。
2:38大切なのは、元のアイテムズは変わらないことです。
2:42フィルターは取り除くのではなく、残すものを集めた新しい一覧を返すと考えてください。
2:49条件を変えれば、たとえば百円以上の商品だけ、といった絞り込みも同じ書き方でできます。
2:56戻り値を使わずに表示だけしたい場面では、無理に別の方法を選ぶ必要はありません。
3:02次はマップです。
3:03マップは、配列の各要素を別の値に変換して、新しい配列を作ります。
3:08ここでは、買う商品の一つひとつを、名前と小計だけを持つ明細の形に変えます。
3:14ノートは二百円かける二個で四百円、ペンは百二十円かける三個で三百六十円です。
3:20引数の波括弧で、名前、単価、個数だけを取り出す書き方を、分割代入と呼びます。
3:26オブジェクトから必要な値だけを、その場で受け取れる便利な方法です。
3:32フィルターが数を減らすのに対し、マップは数を変えずに形を変える、と対で覚えてください。
3:39フィルターとマップをつなげると、絞ってから変える、という読みやすい処理の流れが作れます。
3:46三つ目はリデュースです。
3:48リデュースは、配列の中身をたたみ込むように、一つの値にまとめます。
3:53明細の小計を順に足していくと、合計は七百六十円になります。
3:58書き方で大切なのが、最後に置く初期値のゼロです。
4:02足し算はゼロから始める、という開始の値を明示します。
4:07この初期値があるおかげで、対象が空の配列でも、合計はゼロとして正しく返ります。
4:14初期値を省略すると、空の配列ではエラーになってしまいます。
4:19集計では、開始の値を必ず書く、と習慣にしてください。
4:23合計だけでなく、個数の合計や、最も高い値なども、同じ考え方で集計できます。
4:30ファインドは、条件に合う最初の一個を探す方法です。
4:33ここでは、アイディーがペンと一致する商品を探し、その名前を表示しています。
4:38見つからなかった場合、ファインドはアンディファインドという、値がないことを表す値を返します。
4:45そのまま名前を取り出そうとするとエラーになるので、クエスチョンマークとドットを使う書き方で、
4:49値がないときの参照を避けます。
4:54さらに、ヌルかアンディファインドのときだけ代わりの文を使う合体の記号を組み合わせます。
5:00ゼロや空の文字まで置き換えてしまう、縦線二つの書き方とは違う点に注意してください。
5:06見つかる場合と見つからない場合の両方を試すことで、想定外の動きを早めに防げます。
5:11並べ替えのソートには注意点があります。
5:15ソートは新しい配列を返すのではなく、元の配列そのものの順番を書き換えてしまいます。
5:22そこで、ドット三つのスプレッドという書き方で、まず配列のコピーを作り、そのコピーを並べ替えます。
5:30こうすれば、元のアイテムズの順番は変わりません。
5:34また、数値を並べるときは、前の値から次の値を引く比較の関数を指定します。
5:40これがないと、数値が文字として扱われ、思った順番にならないことがあります。
5:46結果は安い順に、消しゴム、ペン、ノートとなります。
5:51コピーを作るひと手間が、あとから順番が変わって困る事故を未然に防いでくれます。
5:57データの更新でも、元のデータを守る方法を使います。
6:02ペンの個数を一つ増やした新しい一覧を作る例です。
6:06マップの中で、アイディーがペンの商品だけを、スプレッドでコピーし、個数を上書きした新しいオブジェクトにします。
6:16それ以外の商品は、そのまま使います。
6:19結果として、元のペンの個数は三のまま、新しい一覧では四になります。
6:25ただし、スプレッドによるコピーは浅いコピーです。
6:29配列やオブジェクトの中身までは自動で複製されません。
6:34深い階層を変えたいときは、その階層でも同じようにコピーしてください。
6:40変更しないものはそのまま、変更するものだけ新しくする、という区別が大切です。
6:46最後に、マップとセットという二つの入れ物を紹介します。
6:50大文字で始まるマップは、アイディーをキーにして商品を引ける、辞書のような仕組みです。
6:56一覧を何度も探すより、素早く目的の商品にたどり着けます。
7:00セットは、重複のない値の集まりです。
7:03ペン、ペン、ノートという希望の一覧をセットに入れると、重複したペンは一つになり、
7:06結果は二件になります。
7:10注意点として、マップに同じキーを登録すると、後の値で上書きされます。
7:15外部のデータを取り込むときは、重複を許すのか、エラーにするのかを先に決めておきましょう。
7:21探す回数が多いデータほど、この二つの入れ物を使う効果が大きくなります。
7:26まとめです。
7:27商品はオブジェクト、一覧は配列で表し、アイディーで区別します。
7:32処理の使い分けは、条件で残すならフィルター、形を変えるならマップ、一つに集計するならリデュース、
7:37一個を探すならファインドです。
7:43並べ替えや更新では、コピーを作ってから操作し、元のデータを守ります。
7:48練習として、個数をすべてゼロにして合計がゼロになること、存在しないアイディーを探して代替の表示が出ること、
7:55並べ替えても元の順番が変わらないことを確かめてみてください。
8:02結果と元データを比べる習慣は、この先のどの処理でも役に立ちます。
8:07次回はドムとイベントで、画面に一覧を追加します。
8:11これで第三回を終わります。

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

この動画で学べること

JavaScriptのmap・filter・reduce・find、オブジェクトのコピー、MapとSetを買い物データで解説。元のデータを変更しない更新方法を学びます。

解説記事・サンプルコードを読む：JavaScriptの配列とオブジェクト：map・filter・reduceでデータを処理する →