コース一覧
非同期JavaScript:API通信とモジュール
第3章まとめクイズ

非同期JavaScript:API通信とモジュール

Promise と async/await、非同期エラー、HTTP/REST、fetch による GET、読み込み・成功・失敗の表示、モジュールの読み方を学ぶ全 19 レッスン(380 分)のコースです。最後は承認済みの読み取り専用 API から作品データを取得して表示します。POST はリクエストの組み立てまでで、外部サービスへの書き込みは行いません。

1
非同期処理
01. 同期と非同期15分
02. Promise をつくって返す20分
03. async と await20分
04. Promise.all で同時に待つ20分
05. 非同期のエラーを捕まえる20分
06. つくる 読み込み中の表示を出す30分
07. 第1章まとめクイズ10分
2
fetch で外のデータを使う
01. HTTP と REST の読みかた15分
02. fetch でデータを取る25分
03. 取ったデータを描画する25分
04. response.ok と失敗時の表示25分
05. POST のリクエストを組み立てる20分
06. つくる 作品データを API から読む30分
07. 第2章まとめクイズ10分
3
モジュールと総仕上げ
01. ファイルを分けるという考えかた15分
02. named export と default export15分
03. つくる ポートフォリオアプリを仕上げる40分
04. ここから先の学びかた15分
05. 第3章まとめクイズ10分

非同期JavaScript:API通信とモジュール

01同期と非同期
02Promise をつくって返す
03async と await
04Promise.all で同時に待つ
05非同期のエラーを捕まえる
06つくる 読み込み中の表示を出す
07第1章まとめクイズ
08HTTP と REST の読みかた
09fetch でデータを取る
10取ったデータを描画する
11response.ok と失敗時の表示
12POST のリクエストを組み立てる
13つくる 作品データを API から読む
14第2章まとめクイズ
15ファイルを分けるという考えかた
16named export と default export
17つくる ポートフォリオアプリを仕上げる
18ここから先の学びかた
19第3章まとめクイズ

第3章まとめクイズ

クイズ1

次の 2 つのファイルがあります。app.js を type="module" で読み込むと何が起きますか。

JavaScript

// works.js export const CATEGORIES = ["site", "card"]; function debugLabel(work) { return work.category; } export function countWorks(works) { return works.length; }

JavaScript

// app.js import { CATEGORIES, debugLabel } from "./works.js"; console.log(CATEGORIES.length);

クイズ2

次のコードを実行すると、console.log には何が出ますか。

JavaScript

// work-card.js export default function createWorkCard(work) { return work.title + " のカード"; } export const CARD_CLASS = "work-card";

JavaScript

// app.js import buildCard, { CARD_CLASS } from "./work-card.js"; console.log(buildCard({ title: "学習ログ" }), CARD_CLASS);

クイズ3

次のコードを実行すると、console.log には何が出ますか。

JavaScript

// works.js export function publishedWorks(works) { return works.filter((work) => work.published); } export default 5;

JavaScript

// app.js import * as works from "./works.js"; console.log(typeof works.publishedWorks, works.default);

クイズ4

次の HTML を開くと、console.log には何が出ますか。

HTML

<script type="module"> const siteName = "ポートフォリオ"; </script> <script> console.log(typeof siteName); </script>

クイズ5

次のコードを実行すると、console.log には何が出ますか。

JavaScript

// works.js function publishedWorks(works) { return works.filter((work) => work.published); } function sortByViews(works) { return [...works].sort((a, b) => b.views - a.views); } export { publishedWorks as pick, sortByViews };

JavaScript

// app.js import { pick, sortByViews } from "./works.js"; const list = pick([ { title: "プロフィールサイト", published: true }, { title: "作品ギャラリー", published: false } ]); console.log(list.length);

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

ログインが必要です

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