コース一覧
モダンJavaScript:データ処理とコード設計
第5章まとめクイズ

モダンJavaScript:データ処理とコード設計

配列の map・filter・reduce・sort、クロージャと高階関数、オブジェクトとクラス、エラー設計、正規表現を学ぶ全 36 レッスン(665 分)のコースです。ローカルの作品データを題材に、表示とデータを分け、絞り込み・並び替え・入力検証までを組み立てます。Promise、fetch、API 通信、モジュールは次のコースで扱います。

1
土台をそろえる
01. このコースで育てるもの15分
02. strict mode が先に教えてくれる間違い15分
03. 表示とデータを切り分ける20分
04. 第1章まとめクイズ10分
2
配列をパイプラインで扱う
01. map で形を変える20分
02. filter と find で絞り込む20分
03. reduce でひとつにまとめる20分
04. sort と比較関数20分
05. 分類してまとめる groupBy20分
06. つなげて組み立てる20分
07. つくる 作品一覧の絞り込みと並び替え30分
08. 第2章まとめクイズ10分
3
関数を道具にする
01. クロージャで状態を閉じ込める20分
02. 設定を覚えた関数をつくる20分
03. 関数を返す関数20分
04. 副作用のない関数20分
05. 第3章まとめクイズ10分
4
オブジェクトを扱いきる
01. 分割代入で必要な値だけ取り出す20分
02. スプレッドとレストで組み替える20分
03. keys と values と entries20分
04. ビット演算でフラグをまとめる20分
05. 第4章まとめクイズ10分
5
クラスで型をつくる
01. クラスとインスタンス20分
02. private フィールドとアクセサ20分
03. 継承と super20分
04. 多態と static20分
05. つくる 作品コレクションをクラスにする30分
06. 第5章まとめクイズ10分
6
エラーを設計する
01. try catch finally20分
02. 自分でエラーを投げる20分
03. 失敗を画面に出す25分
04. 第6章まとめクイズ10分
7
正規表現
01. 正規表現のきほん20分
02. 入力を検証する20分
03. 置換とキャプチャ20分
04. 第7章まとめクイズ10分

モダンJavaScript:データ処理とコード設計

01このコースで育てるもの
02strict mode が先に教えてくれる間違い
03表示とデータを切り分ける
04第1章まとめクイズ
05map で形を変える
06filter と find で絞り込む
07reduce でひとつにまとめる
08sort と比較関数
09分類してまとめる groupBy
10つなげて組み立てる
11つくる 作品一覧の絞り込みと並び替え
12第2章まとめクイズ
13クロージャで状態を閉じ込める
14設定を覚えた関数をつくる
15関数を返す関数
16副作用のない関数
17第3章まとめクイズ
18分割代入で必要な値だけ取り出す
19スプレッドとレストで組み替える
20keys と values と entries
21ビット演算でフラグをまとめる
22第4章まとめクイズ
23クラスとインスタンス
24private フィールドとアクセサ
25継承と super
26多態と static
27つくる 作品コレクションをクラスにする
28第5章まとめクイズ
29try catch finally
30自分でエラーを投げる
31失敗を画面に出す
32第6章まとめクイズ
33正規表現のきほん
34入力を検証する
35置換とキャプチャ
36第7章まとめクイズ

第5章まとめクイズ

クイズ1

次のコードを実行すると、最後の console.log は何を出力しますか。

JavaScript

class Work { constructor(title, views) { this.title = title; this.views = views; } label() { return `${this.title} ${this.views}`; } } const a = new Work("プロフィールサイト", 120); const b = new Work("学習ログ", 0); console.log(a.label === b.label, a.views === b.views);

クイズ2

次のコードの結果として正しいものはどれですか。

JavaScript

class Work { #views = 0; constructor(views) { this.views = views; } get views() { return this.#views; } set views(value) { this.#views = value > 0 ? value : 0; } } const work = new Work(-10); work.views = 48; console.log(work.views);

クイズ3

次のコードを実行すると何が起きますか。

JavaScript

class Work { constructor(title) { this.title = title; } } class FeaturedWork extends Work { constructor(title, badge) { this.badge = badge; super(title); } } console.log(new FeaturedWork("作品ギャラリー", "注目").title);

クイズ4

次のコードの出力はどれですか。

JavaScript

class Work { static created = 0; constructor(title) { this.title = title; Work.created += 1; } format() { return this.title; } } class PopularWork extends Work { format() { return `${super.format()} 人気`; } } const list = [new Work("学習ログ"), new PopularWork("プロフィールサイト")]; console.log(list.map((work) => work.format()).join(" / "), Work.created);

クイズ5

次のコードの 2 つの console.log は何を出力しますか。

JavaScript

class WorkCollection { #works = []; add(title) { this.#works.push(title); return this; } titles() { return this.#works; } } const collection = new WorkCollection().add("プロフィールサイト").add("学習ログ"); const list = collection.titles(); list.push("偽の作品"); console.log(collection.titles().length); console.log(typeof collection.add("自己紹介カード"));

未回答の問題は、不正解として正解と解説のみ表示します

ログインが必要です

クイズに回答するにはログインしてください。