JavaScript入門

対象読者: HTMLとCSSの基礎を終え、Webページへ動きを追加したい人。

この教材でできるようになること

JavaScriptの値、関数、配列、objectを扱える
DOMを取得し、eventへ応答できる
fetchと非同期処理の基本を説明できる
入力検証とエラー表示を実装できる

1. JavaScriptを読み込む

<button id="add" type="button">項目を追加</button>
<ul id="items"></ul>
<p id="status" role="status"></p>
<script type="module" src="app.js"></script>

type="module"を使うとmodule scopeになり、importとexportを利用できます。

2. 値と関数

const lessons = ["HTML", "CSS"];

function addLesson(currentLessons, title) {
  const normalized = title.trim();
  if (normalized.length === 0) {
    throw new Error("タイトルを入力してください");
  }
  return [...currentLessons, normalized];
}

元の配列を直接変更せず新しい配列を返すと、処理の前後を比較しやすくなります。

3. 配列を変換する

const lessons = [
  { title: "HTML", done: true },
  { title: "JavaScript", done: false },
];

const remainingTitles = lessons
  .filter((lesson) => !lesson.done)
  .map((lesson) => lesson.title);

map: 各要素を別の値へ変換する
filter: 条件に合う要素を残す
find: 最初に一致した要素を返す
some: 一つでも一致するか調べる

4. DOMとevent

const button = document.querySelector("#add");
const list = document.querySelector("#items");

if (!(button instanceof HTMLButtonElement) || !(list instanceof HTMLUListElement)) {
  throw new Error("必要な要素が見つかりません");
}

button.addEventListener("click", () => {
  const item = document.createElement("li");
  item.textContent = `項目 ${list.children.length + 1}`;
  list.append(item);
});

外部入力をinnerHTMLへ直接入れるとHTMLとして解釈されます。単純な文字を表示する場合はtextContentを使います。

5. 非同期処理

async function loadLessons() {
  const response = await fetch("/api/lessons");
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  return response.json();
}

try {
  const lessons = await loadLessons();
  console.log(lessons);
} catch (error) {
  console.error("取得に失敗しました", error);
}

awaitはPromiseの完了を待ちます。通信は失敗する前提で、HTTP statusと例外の両方を扱います。

6. moduleへ分ける

// validation.js
export function requireTitle(value) {
  const title = value.trim();
  if (!title) throw new Error("タイトルは必須です");
  return title;
}

// app.js
import { requireTitle } from "./validation.js";

画面操作、データ変換、通信を分けるとテストしやすくなります。

演習: 学習リスト

inputへ教材名を入力する
buttonでlistへ追加する
空入力は追加せず、role="status"へ理由を表示する
各項目に削除buttonを付ける
Enterキーでも追加できる

追加後にinputを空へ戻し、focusをinputへ戻すところまで実装してください。