読み込み中…

\n\n```\n\n```js\nconst message = document.querySelector(\"#today-message\");\nmessage.textContent = \"本日は 7:00〜18:00 まで営業しています\";\n```\n\n`document` は、ページ全体の DOM を表す特別な変数です。`querySelector` には CSS と同じセレクタを渡し、最初に当てはまった部品を受け取ります。\n\n| 書き方 | すること |\n|---|---|\n| `document.querySelector(\"#id\")` | 当てはまる最初の部品を1つ探す |\n| `document.querySelectorAll(\".class\")` | 当てはまる部品をすべて探す |\n| `el.textContent = \"...\"` | 部品の中の文字を書きかえる |\n| `el.classList.add(\"name\")` | 部品にクラスを付ける |\n\n`<script>` に `type=\"module\"` を付けると、HTML を読み終えてから JavaScript が実行されます。そのため、`querySelector` で探す部品は、すでに DOM にあります。`type=\"module\"` の意味は、第5章でも確かめます。\n\n> [!KEYWORD] DOM\n>\n> ブラウザが HTML から作る、ページの部品の木構造です。JavaScript は DOM を通して画面を読み書きします。\n\n## 1.2 部品を作って追加する\n\n商品のデータから、リストの項目を作って追加します。\n\n```js\nconst products = [\n { id: \"p001\", name: \"食パン（1斤）\", price: 380, reservable: true },\n { id: \"p002\", name: \"クロワッサン\", price: 220, reservable: true },\n { id: \"p003\", name: \"あんパン\", price: 180, reservable: true },\n { id: \"p006\", name: \"季節のタルト\", price: 460, reservable: false },\n];\n\nconst list = document.querySelector(\"#product-list\");\n\nfor (const product of products) {\n const item = document.createElement(\"li\");\n item.textContent = `${product.name} ${product.price}円`;\n list.append(item);\n}\n```\n\n| 書き方 | すること |\n|---|---|\n| `document.createElement(\"li\")` | 新しい `<li>` を作る（まだ画面にはない） |\n| `parent.append(child)` | 親の最後に子を追加して、画面に出す |\n| `el.remove()` | 部品を取り除く |\n\nこの例を実行すると、`<ul>` の中に4つの `<li>` が追加され、商品の一覧が表示されます。`reservable` は、予約できるかどうかを表す値で、第2章で使います。\n\n> [!WARNING] innerHTML に外から来た文字を入れない\n>\n> `el.innerHTML = \"<li>\" + name + \"</li>\"` のように書くと、文字が HTML として解釈されます。お客さんが入力した名前などを入れると、悪意のあるプログラムを動かされる危険があります。文字を表示するときは `textContent` を使います。\n\n> [!TRY] 一覧に項目を足す\n>\n> 上の `products` に、カレーパン（p004、240円）を追加して、一覧に表示されることを確かめてください。表示する文字は「カレーパン 240円」の形にします。\n\n> [!DETAILS] 解答の例\n>\n> 配列に `{ id: \"p004\", name: \"カレーパン\", price: 240, reservable: true }` を書き足します。表示の処理は変えなくても、項目が5つになります。データと表示を分けておくと、商品を足すときにデータだけを直せば済みます。\n\n## 第1章のまとめ\n\n- `querySelector` で部品を探し、`textContent` で文字を書きかえる\n- `createElement` で部品を作り、`append` で画面に追加する\n- 文字を表示するときは `innerHTML` ではなく `textContent` を使う\n\n# 第2章イベントに応える\n\nボタンを押す、文字を入力するなど、利用者の操作をイベントと呼びます。この章では、イベントが起きたときに処理を動かす書き方と、フォームの送信を受け取る方法を確かめます。\n\n晴さんは、商品一覧に「予約できる商品だけを表示する」ボタンがほしいと話しました。季節のタルトは店頭のみの販売で、予約できないからです。\n\n## 2.1 ボタンのクリック\n\nボタンを押したときの処理は、`addEventListener` で登録します。\n\n```html\n\n```\n\n```js\nconst button = document.querySelector(\"#reservable-only\");\n\nbutton.addEventListener(\"click\", () => {\n const reservable = products.filter((p) => p.reservable);\n renderProducts(reservable);\n});\n```\n\n`addEventListener` の1つ目の引数はイベントの種類、2つ目はイベントが起きたときに呼ばれる関数です。この関数を、イベントハンドラと呼びます。\n\n| イベント | 起きるとき |\n|---|---|\n| `click` | 押されたとき（キーボードの Enter でも起きる） |\n| `input` | 入力欄の中身が変わるたび |\n| `change` | 選択肢が選び直されたとき |\n| `submit` | フォームが送られたとき |\n\n`renderProducts` は、第1章の一覧を作る処理を関数にまとめたものとします。一覧を作り直す前に、中身を空にしておきます。\n\n```js\nconst renderProducts = (items) => {\n list.replaceChildren();\n for (const product of items) {\n const item = document.createElement(\"li\");\n item.textContent = `${product.name} ${product.price}円`;\n list.append(item);\n }\n};\n```\n\n> [!KEYWORD] イベントハンドラ\n>\n> イベントが起きたときに呼ばれる関数です。`addEventListener` で、部品とイベントの種類に結び付けます。\n\n## 2.2 フォームの送信を受け取る\n\n予約フォームが送られたときに、入力された値を受け取ります。\n\n```html\n\n

\n```\n\n```js\nconst form = document.querySelector(\"#reserve-form\");\nconst formMessage = document.querySelector(\"#form-message\");\n\nform.addEventListener(\"submit\", (event) => {\n event.preventDefault();\n const data = new FormData(form);\n const name = data.get(\"name\");\n const quantity = Number(data.get(\"quantity\"));\n formMessage.textContent = `${name}さん、${quantity}個の予約を受け付けました`;\n});\n```\n\nフォームを送ると、ブラウザはふだん、ページを読み込み直します。`event.preventDefault()` は、この動きを止める命令です。止めておくと、ページを移動せずに JavaScript で処理を続けられます。\n\n`FormData` は、フォームの入力欄の値を、`name` 属性の名前で取り出せるようにします。取り出した値は文字列なので、個数は `Number()` で数に直します。\n\n> [!WARNING] 送信は click ではなく submit で受け取る\n>\n> 送るボタンの `click` に処理を付けると、入力欄で Enter キーを押して送ったときに処理が動きません。フォームの送信は、`<form>` の `submit` イベントで受け取ります。\n\n> [!TRY] 入力に合わせて表示を変える\n>\n> 個数の入力欄の値が変わるたびに、「合計 ○円」とページに表示する処理を書いてください。商品はクロワッサン（220円）とします。\n\n> [!DETAILS] 解答の例\n>\n> 個数の入力欄を `quantityInput` として探し、`quantityInput.addEventListener(\"input\", () => { ... })` の中で、`Number(quantityInput.value) * 220` を計算して、表示用の部品の `textContent` に入れます。`input` イベントは、数字を変えるたびに起きます。\n\n## 第2章のまとめ\n\n- 操作に応える処理は `addEventListener` で登録する\n- フォームの送信は `submit` で受け取り、`preventDefault` でページの移動を止める\n- `FormData` で入力値を取り出す。値は文字列なので、数は `Number()` で直す\n\n# 第3章非同期処理と Promise\n\nデータの読み込みのように時間のかかる処理は、終わるのを待たずに次の処理へ進みます。この章では、このような非同期処理の考え方と、その結果を表す Promise を確かめます。\n\n蓮さんは、商品のデータを別のファイルから読み込むことにしました。ところが、読み込みの処理のすぐ後で一覧を表示しようとすると、一覧が空のままでした。\n\n## 3.1 待たずに進む処理\n\n次のプログラムを実行すると、表示の順番はどうなるでしょうか。\n\n```js\nconsole.log(\"1. 読み込みを始めます\");\n\nsetTimeout(() => {\n console.log(\"2. 読み込みが終わりました\");\n}, 1000);\n\nconsole.log(\"3. 次の処理に進みます\");\n```\n\n```text\n1. 読み込みを始めます\n3. 次の処理に進みます\n2. 読み込みが終わりました\n```\n\n`setTimeout` は、指定した時間（ミリ秒）が過ぎてから関数を呼ぶ命令です。JavaScript は、1秒待つあいだ止まらずに、先に3番目の行を実行します。\n\nこのように、時間のかかる処理の終わりを待たずに進むことを、非同期処理と呼びます。ブラウザでは、データの読み込みや、時間の経過を待つ処理が非同期になります。待っているあいだも画面が固まらず、ボタンを押したりスクロールしたりできます。\n\n| 処理の種類 | 例 | 待ち方 |\n|---|---|---|\n| 同期処理 | 計算、変数への代入 | 終わってから次へ進む |\n| 非同期処理 | データの読み込み、`setTimeout` | 終わる前に次へ進む |\n\n蓮さんの一覧が空だったのは、読み込みが終わる前に、一覧を表示する行が実行されていたためです。\n\n> [!KEYWORD] 非同期処理\n>\n> 時間のかかる処理の終わりを待たずに、次の処理へ進む仕組みです。結果は、処理が終わってから受け取ります。\n\n## 3.2 Promise\n\n非同期処理の結果は、Promise という値で受け取ります。Promise は「あとで結果が届く約束」を表し、次の3つの状態のどれかにあります。\n\n| 状態 | 意味 |\n|---|---|\n| pending（待ち） | 処理がまだ終わっていない |\n| fulfilled（成功） | 処理が終わり、結果がある |\n| rejected（失敗） | 処理が失敗し、エラーがある |\n\nPromise の結果は、`then` と `catch` で受け取ります。\n\n```js\nconst wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));\n\nwait(1000)\n .then(() => {\n console.log(\"1秒たちました\");\n })\n .catch((error) => {\n console.error(\"失敗しました\", error);\n });\n```\n\n`then` には成功したときの処理、`catch` には失敗したときの処理を渡します。`console.error` は、コンソールにエラーとして赤い文字で表示する命令です。\n\n自分で `new Promise` を書く場面は多くありません。データの読み込みなど、ブラウザの命令の多くが Promise を返すので、ふだんはそれを受け取って使います。\n\n> [!WARNING] Promise は結果そのものではない\n>\n> `const data = fetch(\"products.json\");` と書いても、`data` に入るのは結果ではなく Promise です。結果は、`then` か、次の章の `await` で取り出します。\n\n> [!TRY] 表示の順番を答える\n>\n> 次のプログラムを実行したとき、A・B・C はどの順番で表示されますか。\n>\n> `console.log(\"A\"); wait(500).then(() => console.log(\"B\")); console.log(\"C\");`\n\n> [!DETAILS] 解答\n>\n> A → C → B。`wait(500)` は非同期処理なので、終わるのを待たずに C を表示し、0.5秒後に B を表示します。\n\n## 第3章のまとめ\n\n- 時間のかかる処理は、終わりを待たずに次へ進む（非同期処理）\n- 非同期処理の結果は Promise で受け取る。状態は pending・fulfilled・rejected の3つ\n- 成功は `then`、失敗は `catch` で受け取る\n\n# 第4章 async/await と fetch\n\nPromise の結果は、`async` と `await` を使うと、上から順に読める形で書けます。この章では、`async`/`await` の書き方と、`fetch` で JSON のデータを読み込み、失敗に備える方法を確かめます。\n\n蓮さんは、商品のデータを `products.json` というファイルに移し、そこから読み込んで一覧を表示することにしました。\n\n## 4.1 async と await\n\n第3章の `then` の書き方を、`async`/`await` で書き直します。\n\n```js\nconst main = async () => {\n console.log(\"待ちます\");\n await wait(1000);\n console.log(\"1秒たちました\");\n};\n\nmain();\n```\n\n| 書き方 | 意味 |\n|---|---|\n| `async` | この関数の中で `await` を使うことを示す。関数は Promise を返す |\n| `await` | Promise の結果が届くまで、この関数の続きを待つ |\n\n`await` で待つのは、その関数の中だけです。待っているあいだも、ほかの処理や画面の操作は止まりません。`then` をつなげる書き方より、処理の順番が上から下に読めるため、この本では `async`/`await` を基本にします。\n\n失敗は、`try` と `catch` で受け取ります。\n\n```js\nconst main = async () => {\n try {\n await wait(1000);\n console.log(\"成功しました\");\n } catch (error) {\n console.error(\"失敗しました\", error);\n }\n};\n```\n\n`try` の中で失敗が起きると、残りの行を飛ばして `catch` の中が実行されます。\n\n## 4.2 fetch で JSON を読み込む\n\n`products.json` には、次のように商品のデータを書きます。\n\n```json\n[\n { \"id\": \"p001\", \"name\": \"食パン（1斤）\", \"price\": 380, \"category\": \"bread\", \"reservable\": true },\n { \"id\": \"p002\", \"name\": \"クロワッサン\", \"price\": 220, \"category\": \"pastry\", \"reservable\": true },\n { \"id\": \"p006\", \"name\": \"季節のタルト\", \"price\": 460, \"category\": \"sweets\", \"reservable\": false }\n]\n```\n\nJSON は、JavaScript のオブジェクトと配列に似た書き方で、データをやり取りするための形式です。名前は必ず `\"` で囲みます。\n\nこのファイルを `fetch` で読み込みます。\n\n```js\nconst loadProducts = async () => {\n const response = await fetch(\"products.json\");\n if (!response.ok) {\n throw new Error(`読み込みに失敗しました（${response.status}）`);\n }\n return await response.json();\n};\n```\n\n| 行 | すること |\n|---|---|\n| `await fetch(...)` | サーバーにリクエストし、レスポンスを受け取る |\n| `response.ok` | 状態コードが 200〜299 なら `true` |\n| `throw new Error(...)` | 失敗として扱い、呼び出した側の `catch` に知らせる |\n| `await response.json()` | 本文の JSON を、JavaScript の値に変える |\n\n> [!KEYWORD] fetch\n>\n> URL を指定して、サーバーからデータを受け取るブラウザの命令です。結果は Promise で返ります。\n\n> [!NOTE] ファイルを直接開くと fetch が動かない\n>\n> `index.html` をブラウザにドラッグして開いた状態では、安全のため `fetch` でファイルを読めません。第5章で作る開発用のサーバーから開くと読み込めます。\n\n## 4.3 読み込みの失敗に備える\n\n`fetch` を使う画面は、読み込み中・成功・失敗の3つの場面を考えて作ります。\n\n```js\nconst showProducts = async () => {\n message.textContent = \"商品を読み込んでいます…\";\n try {\n const products = await loadProducts();\n renderProducts(products);\n message.textContent = \"\";\n } catch (error) {\n message.textContent = \"商品を読み込めませんでした。時間をおいてもう一度お試しください。\";\n console.error(error);\n }\n};\n\nshowProducts();\n```\n\n| 場面 | 画面に出すもの |\n|---|---|\n| 読み込み中 | 「読み込んでいます」の案内 |\n| 成功 | 商品の一覧 |\n| 失敗 | 何が起きたかと、次にどうすればよいか |\n\n> [!WARNING] 404 では catch に入らない\n>\n> `fetch` は、ネットワークにつながらないときだけ失敗します。ファイルが見つからない 404 や、サーバーのエラーの 500 でも、`fetch` 自体は成功として返ります。`response.ok` を確かめて、自分で `throw` しないと、失敗に気づけません。\n\n> [!TRY] 失敗を確かめる\n>\n> 第5章で開発用のサーバーを用意したあとに、`loadProducts` の中のファイル名を、わざと `product.json`（s がない）に変えて実行してください。画面にどの案内が出るか、Console と Network パネルに何が表示されるかを確かめます。\n\n> [!DETAILS] 解答の例\n>\n> 画面には「商品を読み込めませんでした」の案内が出ます。Network パネルを見ると、`product.json` の Status は 200 で、中身は `index.html` になっています。Vite の開発用のサーバーは、見つからないファイルの代わりに `index.html` を返すためです。そのため `response.ok` は `true` のままで、`response.json()` が HTML を JSON として読もうとして失敗し、Console には `SyntaxError: Unexpected token '<'` で始まるエラーが表示されます。本番のサーバーでは 404 を返すことが多く、そのときは `response.ok` で気づけます。確かめたら、ファイル名を元に戻します。\n\n## 第4章のまとめ\n\n- `async` の付いた関数の中で、`await` で Promise の結果を待つ\n- 失敗は `try` と `catch` で受け取る\n- `fetch` は `response.ok` を確かめ、失敗なら `throw` する\n- 読み込み中・成功・失敗の3つの場面の表示を用意する\n\n# 第5章モジュールで分ける\n\nプログラムが長くなったら、役割ごとにファイルを分けます。この章では、`export` と `import` でファイルを分けるモジュールの書き方と、開発用のサーバーで動かす方法を確かめます。\n\n蓮さんの `script.js` は、データの読み込み・一覧の表示・フォームの処理が1つのファイルに入り、長くなってきました。\n\n## 5.1 export と import\n\n役割ごとに、3つのファイルに分けます。\n\n```text\nkomorebi/\n index.html\n products.json\n src/\n api.js … データの読み込み\n render.js … 一覧の表示\n main.js … ページの始まり\n```\n\n```js\n// src/api.js\nexport const loadProducts = async () => {\n const response = await fetch(\"products.json\");\n if (!response.ok) {\n throw new Error(`読み込みに失敗しました（${response.status}）`);\n }\n return await response.json();\n};\n```\n\n```js\n// src/render.js\nexport const renderProducts = (list, items) => {\n list.replaceChildren();\n for (const product of items) {\n const item = document.createElement(\"li\");\n item.textContent = `${product.name} ${product.price}円`;\n list.append(item);\n }\n};\n```\n\n```js\n// src/main.js\nimport { loadProducts } from \"./api.js\";\nimport { renderProducts } from \"./render.js\";\n\nconst list = document.querySelector(\"#product-list\");\nconst products = await loadProducts();\nrenderProducts(list, products);\n```\n\n```html\n\n```\n\n| 書き方 | 意味 |\n|---|---|\n| `export const x = ...` | このファイルの外から使えるようにする |\n| `import { x } from \"./file.js\"` | ほかのファイルの `x` を使う |\n| `type=\"module\"` | このファイルをモジュールとして読み込む |\n\nモジュールの中の変数は、`export` しない限り、ほかのファイルからは見えません。名前がぶつかる心配がなくなり、ファイルごとに役割を決めて書けます。モジュールのいちばん外側では、`async` 関数の外でも `await` を使えます。\n\n> [!KEYWORD] モジュール\n>\n> `export` と `import` でつながる、役割ごとに分けた JavaScript のファイルです。\n\n## 5.2 開発用のサーバーで動かす\n\nモジュールと `fetch` は、ファイルを直接開いた状態では動きません。開発用のサーバーを使って、`http://localhost` から開きます。ここでは、Node.js に付いてくる `npx` で、Vite という道具を動かします。\n\n```bash\ncd komorebi\nnpx vite\n```\n\n```text\n VITE ready in 300 ms\n\n ➜ Local: http://localhost:5173/\n```\n\n表示された URL をブラウザで開くと、商品の一覧が表示されます。ファイルを保存すると、ブラウザの表示がひとりでに更新されます。止めるときは、ターミナルで Ctrl＋C を押します。\n\n| 開き方 | アドレス欄 | モジュールと fetch |\n|---|---|---|\n| ファイルをドラッグする | `file:///...` | 動かない |\n| 開発用のサーバー | `http://localhost:5173/` | 動く |\n\nVite は、この先の React のカリキュラムでも、アプリを作る道具として使います。\n\n> [!WARNING] import のパスは .js まで書く\n>\n> ブラウザでそのまま動かすモジュールでは、`import { loadProducts } from \"./api\"` のように拡張子を省くと、ファイルが見つかりません。`./api.js` まで書きます。道具によっては省ける場合がありますが、ブラウザの決まりでは必要です。\n\n> [!TRY] 関数を別のファイルに移す\n>\n> 第2章の「予約できる商品だけを表示」ボタンの処理を、`src/filters.js` に `export const onlyReservable = (items) => ...` として移し、`main.js` から `import` して使ってください。\n\n> [!DETAILS] 解答の例\n>\n> `src/filters.js` に `export const onlyReservable = (items) => items.filter((p) => p.reservable);` を書きます。`main.js` の先頭に `import { onlyReservable } from \"./filters.js\";` を足し、ボタンのイベントハンドラの中で `renderProducts(list, onlyReservable(products))` と呼び出します。\n\n## 第5章のまとめ\n\n- `export` と `import` で、役割ごとにファイルを分ける\n- `<script>` には `type=\"module\"` を付ける\n- モジュールと `fetch` は、`npx vite` などの開発用のサーバーから開いて動かす\n- ブラウザで動かす `import` のパスは `.js` まで書く\n\n### 参考情報（2026-10-18確認）\n\n- [MDN Web Docs：DOM の紹介](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction)\n- [MDN Web Docs：イベント入門](https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Scripting/Events)\n- [MDN Web Docs：非同期 JavaScript](https://developer.mozilla.org/ja/docs/Learn_web_development/Extensions/Async_JS)\n- [MDN Web Docs：フェッチ API の使用](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch)\n- [MDN Web Docs：JavaScript モジュール](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules)\n- [Vite](https://vite.dev/)\n","book_id","093f6eea-410f-4d0e-955e-f9744b9a1d0f","username","2026-08-18T00:23:58.738378Z","2026-10-09T01:06:36.193004Z","is_producer","is_admin","bio","disabled","initialLocale","ja","cookieNoticeDismissed"]

第1章 DOM を操作する