トラック
/
JavaScript
JavaScript
/
演習
/
Ozanのプレイリスト
Ozanのプレイリスト

Ozanのプレイリスト

学習演習

はじめに

JavaScriptでは、setは一意の値を格納するリストのような構造で、値にはプリミティブやオブジェクトの参照を使えます。配列とは異なり、セットの要素にはインデックスでアクセスできません。

セットの要素のいずれかと厳密に等しい値は、そのセットに追加できません。

const set = new Set();
const object = { color: 'lime green' };
const functionallyIdenticalObject = { color: 'lime green' };

set.add(object);
set.add('wow');
set.add(77);

console.log(set.size);
//=> 3

set.add(functionallyIdenticalObject); // added because functionallyIdenticalObject is not strictly equal to object
console.log(set.size);
//=> 4

set.add(77); // not added because 77 is strictly equal to 77
console.log(set.size);
//=> 4

セットを作るときに配列を引数として渡すこともできます。その配列の値がセットの値になり、重複した値は取り除かれます。

const array = [1, 5, 4, 1];
const set = new Set(array); // the set's values become [1, 5, 4]

console.log(set.size);
//=> 3

セットを配列に変換するには、Array.from()を使います。これは、セットやマップのような反復可能なオブジェクトを配列に変換します。

const set = new Set();

set.add(1);
set.add(2);
set.add(3);
set.add(4);

const array = Array.from(set);
console.log(array);
//=> [1, 2, 3, 4]

説明

Ozanは、近々のロードトリップに向けてプレイリストを作っています。同じ曲を2回以上聴きたくはないのですが、プレイリストが長くなりすぎて、どの曲をすでに追加したのか思い出せなくなっています。

Ozanの音楽プレイヤーのAPIは配列しか扱えないので、プレイリストに曲を追加する前に、その曲がすでにあるかどうかをArray.indexOf()で調べるコードを書いてみることにしました。ところが、このプログラムは実行に時間がかかりすぎます。そこで、助けが必要です!

Ozanを助けようとして、彼のプレイリストに_50万_曲も入っていることに驚くでしょう。もっと効率よくプレイリストを操作できる別のデータ構造を知っているのではないでしょうか?

1. 重複した曲を削除する

removeDuplicates関数を実装しましょう。この関数はプレイリストを_仮引数_として受け取り、すべての曲が重複していない新しいプレイリストを_返します_。

const playlist = [
  'Court and Spark - Joni Mitchell',
  'Big Yellow Taxi - Joni Mitchell',
  'Court and Spark - Joni Mitchell',
];

removeDuplicates(playlist);
//=> ['Court and Spark - Joni Mitchell', 'Big Yellow Taxi - Joni Mitchell']

2. 曲がすでに追加されているかどうかを確認する

hasTrack関数を実装しましょう。この関数はプレイリストと曲を_仮引数_として受け取り、プレイリストにその曲が含まれているかどうかを示す真偽値を_返します_。

const playlist = [
  'The Fashion Show - Grace Jones',
  'Dr. Funkenstein - Parliament',
];

hasTrack(playlist, 'Dr. Funkenstein - Parliament');
//=> true

hasTrack(playlist, 'Walking in the Rain - Grace Jones');
//=> false

3. 曲を追加する

addTrack関数を実装しましょう。この関数はプレイリストと曲を_仮引数_として受け取り、その曲を含む新しいプレイリストを_返します_。

const playlist = ['Selma - Bijelo Dugme'];

addTrack(playlist, 'Atomic Dog - George Clinton');
//=> ['Selma - Bijelo Dugme', 'Atomic Dog - George Clinton']

addTrack(playlist, 'Selma - Bijelo Dugme');
//=> ['Selma - Bijelo Dugme', 'Atomic Dog - George Clinton']

4. 曲を削除する

deleteTrack関数を実装しましょう。この関数はプレイリストと曲を_仮引数_として受け取り、その曲を含まない新しいプレイリストを_返します_。

const playlist = [
  'The Treasure - Fra Lippo Lippi',
  'After the Fall - Klaus Nomi',
];

deleteTrack(playlist, 'The Treasure - Fra Lippo Lippi');
//=> ['After the Fall - Klaus Nomi']

deleteTrack(playlist, 'I Feel the Magic - Belinda Carlisle');
//=> ['After the Fall - Klaus Nomi']

5. 重複しないアーティストを一覧にする

listArtists関数を実装しましょう。この関数はプレイリストを_仮引数_として受け取り、プレイリストに含まれる重複しないアーティストの一覧を_返します_。曲の名前は<SONG> - <ARTIST>という形式になっている点に注意しましょう。

const playlist = [
  'All Mine - Portishead',
  'Sight to Behold - Devendra Banhart',
  'Sour Times - Portishead',
];

listArtists(playlist);
//=> ['Portishead', 'Devendra Banhart']
GitHubで編集する リンクは新しいウィンドウまたはタブで開きます
JavaScript Exercism

Ozanのプレイリストを始める準備はできましたか?

Exercismに登録すれば、37個のコンセプト159個の演習、そして本物の人間によるメンタリングとともに、JavaScriptを学んでマスターできます。すべて無料です。