12.1 当演習の概要

本実習では、テスト用のダミーデータ（JSONPlaceholder）を利用して、Web API 通信の基礎を学びます。

これまでに学習した内容を総括し、より実務に近いアプリケーションの構築を通じて、外部 API からデータを取得し、それを加工して画面（HTML）に反映させる一連の流れを習得しましょう。

ここで作成するのは、次単元で構築する「書籍管理システム 1.0」そのものではありません。しかし、その開発に必要となる「データの取得・加工・表示」という 3 つの技術要素を練習するためのミニアプリです

本章を終えることで、皆さんは自分でソースコードを解析・記述できる実務レベルの基礎スキルを身につけたことになります。

本アプリは、以下の機能を実装していきます。

Fetch API を使って外部から書籍データ（JSON）を取得します。

取得したデータを「クラス」を使って効率的に管理・加工します。

JavaScript による DOM 操作で、取得したデータを HTML のリスト形式で表示します。

キーワード入力に合わせて、表示されるデータをリアルタイムに絞り込みます。