12.2 基本構造の準備
まずは、アプリケーションの土台となる HTML ファイルを作成しましょう。
本章の演習では、すべてのプログラムを book-search.js という 1 つのファイルに集約して記述していきます。
ソースフォルダ：public/ch12
ファイル名：book-search.js
➢ book-search.html
public フォルダに ch12 フォルダを追加し、book-search.html を作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript の練習: book-search.js を実行中</title>
<style>
body { font-family: sans-serif; margin: 20px; }
#message { color: blue; margin-bottom: 10px; }
input { padding: 5px; width: 250px; margin-bottom: 15px; }
li { margin-bottom: 5px; }
</style>
</head>
<body>
<h1>書籍検索（練習用アプリ）</h1>
<!-- メッセージ表示領域 -->
<div id="message"></div>
<!-- 検索ボックス -->
<input type="text" id="search-box" placeholder="タイトルで検索...">
<!-- 書籍リスト表示領域 -->
<ul id="book-list"></ul>
<!-- 重要要素: defer 属性を追加して読み込みます -->
<script src="book-search.js" defer></script>
</body>
</html>
➢ book-search.js
同じく ch12 フォルダに、book-search.js を作成します。
// book-search.js
// HTML の解析（パース）がすべて終わった後に実行されるように設定します
document.addEventListener("DOMContentLoaded", async () => {
// 最初に実行する関数を呼び出します
await fetchBookData();
});
// 書籍データを取得する非同期関数（枠組み）
async function fetchBookData() {
console.log("アプリを起動しました。book-search.js を実行中です。");
}
実行結果
まずは、この状態が完成したら動かしてみましょう。
ブラウザで実行して、コンソールに以下の表示が出ることを確認してください。
解説
HTML も JavaScript も、まだ空っぽの状態です。
book-search.js には、ここまで学習した async/await で、fetchBookData()という関数が作られています。
この中では、単に 11 行目で console.log() を使い、「アプリを起動しました。book-search.js を実行中です。」と短いメッセージを表示しているだけです。
defer 属性と DOMContentLoaded については第 8 章で学んだ内容です。コードの動きを確認しながら進めてください。