12.5 検索機能の実装と全体の結合

// book-search.js

// すべての処理を統合する、起動時のメイン処理（最上部のコードを以下のように完成させます）
document.addEventListener("DOMContentLoaded", async () => {
	// 1. 通信を開始してデータを取得
	const data = await fetchBookData();

	// 2. クラスをインスタンス化してデータを管理
	const manager = new BookManager();
	manager.setBooks(data.slice(0, 15)); // 練習用に最初の15件を使用します

	// 3. 初期状態のリストを表示
	renderList(manager.getProcessedItems());

	// 4. 検索機能を有効化
	setupSearch(manager);

});

// 書籍データを取得する関数（枠組み）
async function fetchBookData() {
	try {
		// 1. fetchを使って外部サーバーへデータのリクエストを送信します
		const response = await fetch("https://jsonplaceholder.typicode.com/posts");
		
		// 2. 通信が成功したか（ステータスコードが200系か）をチェックします
		if (!response.ok) {
			throw new Error(`HTTPエラーが発生しました。ステータス: ${response.status}`);
		}
		
		// 3. 届いたデータをJavaScriptで扱えるオブジェクト形式（JSON）に変換します
		const books = await response.json();
		
		// 通信が成功したことを確認するためのメッセージ
		console.log(`通信成功！${books.length}件のデータを取得しました。`);
		
		return books;
	} catch (error) {
         // 通信に失敗した場合のエラーメッセージ
		console.log(`データの取得に失敗しました: ${error.message}`);
		return [];
	}
}

// 書籍データを効率的に管理するためのクラス
class BookManager {
    constructor() {
        this.books = []; // データを保持するプロパティ
    }

    // 取得したデータをクラス内にセットします
    setBooks(data) {
        this.books = data;
    }

    // 画面表示に不要な情報を削り、整形されたデータを返します
    getProcessedItems() {
        // mapを使って、idとtitleだけの新しいオブジェクト配列を作成します
        return this.books.map(book => ({
            id: book.id,
            title: book.title
        }));
    }
}

// 画面のリスト（ul要素）を更新する関数
function renderList(items) {
    const listElement = document.querySelector("#book-list");
    listElement.innerHTML = ""; // 一度中身を空にして初期化します

    // 1件ずつHTML要素（liタグ）を作成して追加します
    items.forEach(item => {
        const li = document.createElement("li"); // <li>を作成
        li.textContent = `[ID:${item.id}] ${item.title}`; // テキストを設定
        listElement.appendChild(li); // ulの中に追加
    });
}

function setupSearch(manager) {
	const searchBox = document.querySelector("#search-box");
	searchBox.addEventListener("input", (event) => {
		const keyword = event.target.value;
		// キーワードを含むものだけを抽出
		const filtered = manager.books.filter(book => 
			book.title.includes(keyword)
		);
		renderList(filtered);
	});
}

3: document.addEventListener("DOMContentLoaded", async () => {

6: const data = await fetchBookData();

9:   const manager = new BookManager();
10: manager.setBooks(data.slice(0, 15));

13: renderList(manager.getProcessedItems());

16: setupSearch(manager);

82: const keyword = event.target.value;

84: const filtered = manager.books.filter(book =>
85:     book.title.includes(keyword)
86: );

87: renderList(filtered);