Javaを学んだ新人エンジニアのみなさんがJavaScriptを学ぶことには以下の3つの意義があります。

Javaが主にサーバーサイドで利用されるのに対し、JavaScriptはフロントエンド開発に欠かせない言語です。JavaScriptを習得することで、フルスタックエンジニアとしてシステム全体を設計・実装できるようになり、技術の幅が大きく広がります。
Javaは静的型付け言語で、型が厳密にチェックされるのに対し、JavaScriptは動的型付け言語で柔軟に記述できます。この違いはバグの出方や設計手法にも影響します。
Javaはコンパイラ型で事前にバイトコードに変換され、JavaScriptはインタプリタ型で逐次実行されます。こうした実行モデルの違いを知ることで、アプリケーションの性能や開発体験にも敏感になります。

JavaScriptを学ぶことで、視野が広がり、より多角的な開発スキルを身につけることができるのです。

第1章 JavaScriptとは？

1-1. JavaScriptの立ち位置を理解しよう

JavaScriptは、Webページに動きを与えるためのプログラミング言語です。HTMLやCSSが「構造」と「見た目」を担当するのに対し、JavaScriptはユーザーの操作に応じたインタラクティブな動作を実現します。

Web開発の三本柱

技術	役割	例
HTML	構造	見出し、段落、リンクなど
CSS	見た目	色、フォント、レイアウト
JavaScript	動き・機能	ボタンクリック時の処理、入力チェック、アニメーション

これらを組み合わせることで、モダンなWebアプリケーションが実現されています。

1-2. フロントエンドとバックエンドの違い

フロントエンド

ユーザーが直接見る部分（ブラウザ上で表示されるHTML/CSS/JavaScript）
JavaScriptで実装される処理：ボタンクリック、バリデーション、非同期通信など

バックエンド

サーバー側で動作する処理（Java, Python, PHP など）
Spring Bootなどのフレームワークが使われる

【例】
フォームに入力 → JavaScriptで入力チェック → サーバーに送信 → Spring Bootがデータを処理 → 結果を画面に表示

フロントエンドとバックエンドは、役割分担して連携しています。

1-3. JavaとJavaScriptは全くの別物！

名前は似ていますが、JavaとJavaScriptは全く異なる言語です。

比較項目	Java	JavaScript
実行環境	JVM（サーバー、PCなど）	Webブラウザ
用途	サーバー処理、業務アプリ等	Webの画面処理、動的なUI
型付け	静的型付け	動的型付け
クラスベース	○	ES6からはクラスあり（本質はプロトタイプ）

Javaの経験があると、文法面で親しみやすい部分はありますが、根本的な考え方が違うため、最初は混乱しないように注意が必要です。

1-4. JavaScriptはブラウザで動く！

JavaScriptの最大の特徴は「ブラウザ上で即時実行できる」ことです。

ブラウザに組み込まれたJavaScriptエンジン

Chrome → V8エンジン
Firefox → SpiderMonkey
Safari → JavaScriptCore（Nitro）

つまり、インストール不要で、すぐに試せるのが魅力です。開発者ツール（F12）を使えば、その場でコードを試せます。

<!-- HTMLに直接JavaScriptを埋め込む例 -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
</head>

<body>
	<button onclick="alert('こんにちは')">クリックしてみて！</button>
</body>

</html>

📌 まとめ

JavaScriptはWebページに動きや機能を加える言語で、HTML/CSSと組み合わせて使う。
フロントエンド（画面側）で動き、ユーザー操作に応じた処理を担当する。
Javaとは全く別の言語だが、Javaの経験があると一部理解しやすい。
ブラウザ上で即実行できるため、学習ハードルが低い。

第2章 JavaScriptの基本文法

2-1. 変数の宣言とスコープ

JavaScriptでは、変数を次の3つのキーワードで宣言できます。

`let`：ブロックスコープの変数（基本的にこれを使う）

let count = 5;
count = count + 1; // OK

`const`：再代入不可の定数（再代入しない変数はこっち）

const name = "Yamazaki";
// name = "Tanaka"; // エラー！

`var`：昔の書き方（関数スコープ）→ 非推奨

var oldVar = 10; // 古い書き方、基本使わない

🔍 Javaではすべて明示的な型が必要ですが、JavaScriptは「動的型付け」の言語です。

2-2. データ型の基本

主なプリミティブ型

型名	例	備考
数値（Number）	`42`, `3.14`	整数・小数の区別なし
文字列（String）	`"Hello"`, `'Hi'`, `ようこそ`	シングル・ダブル・バッククォート
真偽値（Boolean）	`true`, `false`	条件分岐でよく使う
未定義（undefined）	未代入の変数	`let x; console.log(x); // undefined`
null	値が存在しないことを明示	`let user = null;`

let age = 25;
let name = "Yamazaki";
let isMember = true;

2-3. 演算子

算術演算子

let a = 10 + 2;    // 12
let b = 10 - 2;    // 8
let c = 10 * 2;    // 20
let d = 10 / 2;    // 5
let e = 10 % 3;    // 1（剰余）

比較演算子

3 == "3"   // true（型が違ってもOK）
3 === "3"  // false（型も比較 → これを推奨！）
5 !== 4    // true

==は型変換あり、===は型も一致。基本的に===と!==を使うようにしましょう。

論理演算子

true && false  // AND（→ false）
true || false  // OR（→ true）
!true          // NOT（→ false）

2-4. テンプレート文字列

JavaScriptでは、変数を文字列に埋め込むとき、バッククォート `を使ったテンプレートリテラルが便利です。

let name = "Yamazaki";
let age = 30;
let message = `名前は${name}、年齢は${age}歳です。`;
console.log(message);
// → 名前はYamazaki、年齢は30歳です。

Javaの + 連結よりも、テンプレート文字列の方が読みやすくてバグが少ないです。

📌 まとめ

変数宣言は let（変更あり）と const（変更なし）を基本に使う
データ型は動的に決まる（型宣言不要）
演算子はJavaとほぼ同じだが、=== や !== を使うのがポイント
テンプレート文字列（バッククォート）で文字列結合が簡単にできる

練習問題（理解度チェック）

let と const の違いを説明してください。
以下のコードの出力を答えてください。 let x = 10; let y = "10"; console.log(x == y); console.log(x === y);
次の変数を使ってテンプレート文字列で「こんにちは、○○さん！」と出力するコードを書いてください。 const userName = "Imai";
var が非推奨とされる理由を自分の言葉で説明してください（ヒント：スコープの違い）。

第3章制御構文と関数

3-1. 条件分岐（if / else if / else）

Javaと同様に、条件に応じた処理を分けることができます。

let score = 85;

if (score >= 90) {
  console.log("とても良くできました！");
} else if (score >= 70) {
  console.log("よくできました！");
} else {
  console.log("がんばりましょう！");
}

条件式のかっこ ( ) やブロック { } の書き方はJavaと同じです。

3-2. switch文

複数の分岐条件を判定するときに使います。

let fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("リンゴです");
    break;
  case "banana":
    console.log("バナナです");
    break;
  default:
    console.log("その他の果物です");
}

break を忘れると下まで実行されてしまうので注意！

3-3. 繰り返し処理（for / while）

for文

for (let i = 0; i < 5; i++) {
  console.log(`iは${i}`);
}

Javaとほぼ同じ構文です。

while文

let count = 0;
while (count < 3) {
  console.log(count);
  count++;
}

3-4. for...of文（配列の繰り返し）

JavaScriptには、配列の要素を簡単に取り出す構文があります。

const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
  console.log(fruit);
}

Javaの「拡張for文」に似た感覚で使えます。

3-5. 関数の定義と呼び出し

通常の関数定義（function宣言）

function greet(name) {
  return `こんにちは、${name}さん！`;
}

console.log(greet("Sato")); // → こんにちは、Satoさん！

関数式（変数に代入）

const greet = function(name) {
  return `Hello, ${name}`;
};

アロー関数（ES6以降の書き方）

const greet = (name) => {
  return `Hi, ${name}`;
};

1行だけなら波かっこ・returnも省略可能：

const greet = name => `Hi, ${name}`;

3-6. スコープ（変数の有効範囲）

JavaScriptでは関数の内外でスコープ（見える範囲）が異なります。

let x = 10;

function sample() {
  let y = 5;
  console.log(x); // 10（外の変数は見える）
}
console.log(y); // エラー！（関数内の変数は外から見えない）

letやconstはブロックスコープ。Javaと似た感覚で扱えます。

📌 まとめ

if / else if / else はJavaと同じ構文で使用可能
switch文では break を忘れずに
forやwhile、for...ofで繰り返し処理ができる
関数の定義は function、関数式、アロー関数の3種類がある
let/constはブロックスコープ、関数の外では使えない

練習問題（理解度チェック）

for文を使って1〜5の数字を表示するコードを書いてください。
次のコードの出力結果を答えてください。 let fruits = ["apple", "banana", "melon"]; for (const f of fruits) { console.log(f); }
greet という名前のアロー関数を作成し、「こんにちは、○○さん」と返すようにしてください（引数：名前）。
switch文を使って、入力された曜日によって「平日」か「週末」を表示するコードを書いてください。

承知しました。それでは、**第4章「配列とオブジェクトの基本」**を以下に執筆します。配列とオブジェクトはJavaScriptで最もよく使うデータ構造のため、Javaのコレクションやクラスとの違いも補足しながら丁寧に解説します。

第4章配列とオブジェクトの基本

4-1. 配列（Array）とは？

配列は、複数の値を順番に格納するためのデータ構造です。JavaScriptでは、次のように定義します。

const fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // apple（0番目）

添字（インデックス）は 0 から始まります（Javaと同じ）
異なる型の要素も混在できます（ただしあまり推奨されません）

const mixed = [1, "hello", true]; // 数値、文字列、真偽値

4-2. 配列の主な操作

要素の追加・削除

let animals = ["dog", "cat"];
animals.push("rabbit");     // 末尾に追加
animals.pop();              // 末尾を削除
animals.unshift("lion");    // 先頭に追加
animals.shift();            // 先頭を削除

繰り返し処理（forEach, map）

const numbers = [1, 2, 3];
numbers.forEach(num => {
  console.log(num * 2); // 2, 4, 6
});

const doubled = numbers.map(num => num * 2); // [2, 4, 6]

配列の長さ、検索、結合など

const fruits = ["apple", "banana"];
console.log(fruits.length);     // 配列の長さ（2）
console.log(fruits.includes("banana")); // true
console.log(fruits.join(", ")); // "apple, banana"

4-3. オブジェクト（Object）とは？

オブジェクトは、名前（キー）と値のセットを持つデータ構造です。JavaのMap<String, Object>やPOJOのようなイメージです。

const user = {
  name: "Imai",
  age: 30,
  isMember: true
};
console.log(user.name);    // Imai
console.log(user["age"]);  // 30（どちらの書き方も可）

4-4. オブジェクトの操作

プロパティの追加・更新・削除

user.email = "Yamazaki@example.com";  // 追加
user.age = 31;                      // 更新
delete user.isMember;              // 削除

オブジェクトのループ処理（for...in）

for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

4-5. 配列×オブジェクトの組み合わせ

現実のWeb開発では、オブジェクトの配列を扱う場面が多いです。例えばユーザー一覧、商品一覧など。

const users = [
  { name: "Imai", age: 30 },
  { name: "Matsuda", age: 25 },
];

users.forEach(user => {
  console.log(`${user.name}（${user.age}歳）`);
});

このような構造は、Spring BootのController → Thymeleaf → JavaScript間でデータを受け渡す時にもよく使います。

📌 まとめ

配列は複数の値を順序付きで管理できる（push, forEach, mapなどが便利）
オブジェクトはキーと値のペアでデータを保持する（JavaのMapやクラスに近い）
. または [] でプロパティにアクセスできる
オブジェクトの配列は実務で非常によく使われるパターン

了解しました。それでは、**第5章「DOM操作の基礎」**を以下に執筆いたします。Spring Boot + Thymeleafの画面にJavaScriptを組み込むために不可欠な「DOM（Document Object Model）」の理解と基本操作を身につけることを目的としています。

第5章 DOM操作の基礎

5-1. DOMとは？

DOM（Document Object Model）とは、HTMLをJavaScriptから操作するための仕組みです。
Webページは読み込まれると、HTMLの構造が「ツリー状のオブジェクト」として表現され、JavaScriptからその構造を自由に操作できます。

例：以下のようなHTMLがあるとします

<h1 id="title">こんにちは</h1>

→ これはJavaScriptから次のようにアクセスできます：

const heading = document.getElementById("title");
heading.textContent = "ようこそ！";

5-2. 要素の取得方法

DOM操作の第一歩は、対象となるHTML要素を取得することです。

`document.getElementById(id)`

idが付いた要素を1つ取得します（最速でシンプル）

<p id="message">Hello</p>

const msg = document.getElementById("message");

`document.querySelector(cssセレクタ)`

CSSセレクタで要素を1つ取得します（汎用的）

<p class="text">こんにちは</p>

const text = document.querySelector(".text");

`document.querySelectorAll(cssセレクタ)`

複数の要素を一括で取得します（配列風オブジェクトが返る）

<ul>
  <li class="item">A</li>
  <li class="item">B</li>
</ul>

const items = document.querySelectorAll(".item");
items.forEach(item => console.log(item.textContent));

5-3. テキストやHTMLの変更

`textContent`：テキストのみ書き換える

heading.textContent = "ようこそ！";

`innerHTML`：HTMLごと差し替え（タグも書き換える）

div.innerHTML = "<strong>太字で表示</strong>";

innerHTML は柔軟ですが、ユーザー入力を直接代入するとXSS（セキュリティ問題）になりやすいため注意が必要です。

5-4. 属性やクラスの操作

属性を変更する：`setAttribute`, `getAttribute`

const link = document.querySelector("a");
link.setAttribute("href", "https://example.com");

クラスを追加・削除・切り替え：`classList`

element.classList.add("active");
element.classList.remove("hidden");
element.classList.toggle("selected");

5-5. 要素の追加・削除

要素を作成して追加する

const ul = document.querySelector("ul");
const li = document.createElement("li");
li.textContent = "新しい項目";
ul.appendChild(li);

要素を削除する

ul.removeChild(li); // 親から子を削除

または、直接 .remove() で削除することも可能（新しめの方法）：

li.remove();

5-6. Spring Boot × DOM操作の注意点

Spring Boot + Thymeleafでは、テンプレートで生成されるHTMLにJavaScriptがアクセスする場合：

JavaScriptの読み込みはHTMLの末尾に配置（</body>直前）するのが原則
DOMがまだ読み込まれていないと、要素が null になるので注意！

<!-- OKな配置例 -->
<script src="/js/main.js"></script>
</body>
</html>

もしくは DOMContentLoaded イベントを使って、「ページの読み込み完了後」に処理を実行する方法もあります（次章で詳しく扱います）。

📌 まとめ

DOMとは、HTMLをJavaScriptから操作できる仕組み
要素は getElementById や querySelector で取得する
textContent, innerHTML, setAttribute, classList などで内容・見た目を変更可能
新しい要素を createElement → appendChild で追加
Spring Bootでの開発では、JavaScriptの配置場所に注意！

第6章イベント処理の基本

6-1. イベントとは？

イベントとは、ユーザーの操作（クリック、入力、スクロールなど）に対してブラウザが発生させる「出来事」です。
JavaScriptではこのイベントに反応（リッスン）して、任意の処理を実行できます。

代表的なイベントの種類

イベント名	発生タイミング
`click`	要素がクリックされたとき
`input`	入力欄の内容が変更されたとき
`submit`	フォームが送信されたとき
`change`	セレクトボックスやチェックボックスが変更されたとき
`DOMContentLoaded`	ページのHTML読み込み完了時

6-2. `addEventListener` を使ったイベント登録

JavaScriptでは、addEventListener を使ってイベントを設定するのが基本です。

例：ボタンがクリックされたらメッセージを表示

<button id="myBtn">クリックしてね</button>

const btn = document.getElementById("myBtn");
btn.addEventListener("click", () => {
  alert("ボタンがクリックされました！");
});

第1引数：イベント名（文字列）
第2引数：実行する関数（イベントハンドラ）

6-3. `event` オブジェクトで詳細を取得

イベントハンドラの関数には、event オブジェクトが自動で渡されます。

btn.addEventListener("click", (event) => {
  console.log(event.target); // イベントが発生した要素
});

これを使えば、複数のボタンに1つの関数で対応することも可能です。

6-4. フォーム送信イベントと `preventDefault()`

フォーム送信（submitイベント）は、通常だとページ遷移やリロードが発生します。
JavaScriptで制御したい場合は、preventDefault() を使ってそれを止めます。

例：送信ボタンを押したらアラートを表示し、ページ遷移を防ぐ

<form id="form">
  <input type="text" name="username" />
  <button type="submit">送信</button>
</form>

const form = document.getElementById("form");

form.addEventListener("submit", (event) => {
  event.preventDefault(); // デフォルトの動作（送信）をキャンセル
  alert("フォームが送信されました！");
});

6-5. 入力イベントでリアルタイムに反応する

`input` イベント：テキスト入力のたびに呼び出される

<input id="nameInput" />
<p id="preview">こんにちは！</p>

const input = document.getElementById("nameInput");
const preview = document.getElementById("preview");

input.addEventListener("input", () => {
  preview.textContent = `こんにちは、${input.value}さん！`;
});

フォームの内容をリアルタイムに画面に反映させる例です。

6-6. よくあるパターン：ループ + イベント

複数の要素にイベントをまとめて設定することもよくあります。

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
</ul>

const items = document.querySelectorAll(".item");

items.forEach(item => {
  item.addEventListener("click", () => {
    item.classList.toggle("selected");
  });
});

📌 まとめ

イベントは「ユーザーの操作」に反応する仕組み
addEventListener でイベントと処理を関連づける
event オブジェクトで、イベントの詳細情報を取得できる
フォーム送信時は preventDefault() を使ってページ遷移を防げる
input イベントでリアルタイムなフィードバックが実現可能

第7章実践！Spring Bootアプリと連携するJavaScript

7-1. Spring BootとJavaScriptの関係

Spring Bootでは、@ControllerでHTMLテンプレート（Thymeleaf）を返し、そのHTMLに対してJavaScriptを使って動的な動きを付け加えるのが一般的です。

【例】
Controller → Thymeleaf → HTML表示 → JavaScriptでDOM操作やイベント処理

JavaScriptの主な役割：

入力チェック（バリデーション）
フォームの補助入力やリアルタイム表示
表示の切り替え（例：モーダル、エラーメッセージ）
ユーザーの操作ログの取得・確認

7-2. HTML要素とJavaScriptの連携方法

JavaScriptから要素を操作するには、idやclassが重要な目印となります。Thymeleafとの組み合わせでは、以下のように書くことが多いです。

Thymeleafの中でid/classを使う

<input type="text" th:id="'nameInput'" th:value="${user.name}">
<p id="namePreview">ようこそ！</p>

const input = document.getElementById("nameInput");
const preview = document.getElementById("namePreview");

input.addEventListener("input", () => {
  preview.textContent = `こんにちは、${input.value}さん！`;
});

th:id を使うと Thymeleaf によってHTMLが生成されたあとでも JavaScript で操作可能になります。

7-3. 表示の切り替え（エラー表示、詳細表示など）

classの追加/削除で表示切り替え

<div id="errorBox" class="hidden">エラーがあります</div>

.hidden { display: none; }

const errorBox = document.getElementById("errorBox");
errorBox.classList.remove("hidden"); // 表示する

クラスを使った切り替えは、見た目を保ったまま制御できるので非常に実用的です。

7-4. 確認ダイアログ（削除ボタンの確認）

Spring Bootアプリでよくあるのが「削除ボタンの押し間違い防止」です。

<form th:action="@{/delete}" method="post" onsubmit="return confirmDelete();">
  <button type="submit">削除</button>
</form>

function confirmDelete() {
  return confirm("本当に削除してよろしいですか？");
}

confirm() はシンプルな組み込みダイアログです。

7-5. 動的リストの追加・削除

JavaScriptで動的に要素を追加する例

<ul id="todoList"></ul>
<input type="text" id="todoInput">
<button id="addBtn">追加</button>

const list = document.getElementById("todoList");
const input = document.getElementById("todoInput");
const addBtn = document.getElementById("addBtn");

addBtn.addEventListener("click", () => {
  const text = input.value;
  if (text.trim() !== "") {
    const li = document.createElement("li");
    li.textContent = text;
    list.appendChild(li);
    input.value = ""; // 入力欄をリセット
  }
});

このように、Spring Bootから表示された画面でも、ユーザーの入力内容を元に動的なリスト表示が実現できます。

7-6. 実務で使えるちょっとしたテクニック集

ページ読み込み後に処理を実行する方法

document.addEventListener("DOMContentLoaded", () => {
  console.log("ページが読み込まれました");
});

これは、要素を操作する前にDOMの読み込みを保証する安全な方法です。

`data-属性` を活用したデータ埋め込み

Thymeleafでは、data-属性 を使ってサーバーからのデータをHTMLに埋め込んでおき、JavaScriptで拾うという手法もよく使われます。

<button class="deleteBtn" th:data-id="${item.id}">削除</button>

const btns = document.querySelectorAll(".deleteBtn");
btns.forEach(btn => {
  btn.addEventListener("click", () => {
    const id = btn.dataset.id;
    console.log(`削除対象のID: ${id}`);
  });
});

📌 まとめ

Spring Boot + Thymeleaf では、JavaScriptはHTMLの後処理を担当
id や class を使ってDOMと連携
フォームのバリデーションや確認ダイアログなど、実用例が多い
classList や data-属性 を活用すれば実装がシンプルになる
JavaScriptはあくまで「画面上のインタラクション担当」、ロジックはSpring Bootに任せるのが原則

JavaScript研修、本当にお疲れさまでした。

HTML/CSSとJavaの基礎を土台に、JavaScriptの文法からDOM操作、イベント処理、そしてSpring Bootとの連携までを駆け抜けた皆さんの努力は、これからの現場で確かな力になります。大切なのは、知識を「知っている」だけでなく「使ってみる」こと。疑問にぶつかったときこそ学びのチャンスです。これからも実践を重ね、チームやユーザーのために“動く画面”を作れるエンジニアとして、ますます活躍されることを心より願っています。

JavaWebアプリケーション目次に戻る

「JavaScript入門テキスト」　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる

補講. Spring Boot開発のためのJavaScript入門

第1章 JavaScriptとは？

1-1. JavaScriptの立ち位置を理解しよう

Web開発の三本柱

1-2. フロントエンドとバックエンドの違い

フロントエンド

バックエンド

1-3. JavaとJavaScriptは全くの別物！

1-4. JavaScriptはブラウザで動く！

ブラウザに組み込まれたJavaScriptエンジン

📌 まとめ

第2章 JavaScriptの基本文法

2-1. 変数の宣言とスコープ

let：ブロックスコープの変数（基本的にこれを使う）

const：再代入不可の定数（再代入しない変数はこっち）

var：昔の書き方（関数スコープ）→ 非推奨

2-2. データ型の基本

主なプリミティブ型

2-3. 演算子

算術演算子

比較演算子

論理演算子

2-4. テンプレート文字列

📌 まとめ

練習問題（理解度チェック）

第3章 制御構文と関数

3-1. 条件分岐（if / else if / else）

3-2. switch文

3-3. 繰り返し処理（for / while）

for文

while文

3-4. for...of文（配列の繰り返し）

3-5. 関数の定義と呼び出し

通常の関数定義（function宣言）

関数式（変数に代入）

アロー関数（ES6以降の書き方）

3-6. スコープ（変数の有効範囲）

📌 まとめ

練習問題（理解度チェック）

第4章 配列とオブジェクトの基本

4-1. 配列（Array）とは？

4-2. 配列の主な操作

要素の追加・削除

繰り返し処理（forEach, map）

配列の長さ、検索、結合など

4-3. オブジェクト（Object）とは？

4-4. オブジェクトの操作

プロパティの追加・更新・削除

オブジェクトのループ処理（for...in）

4-5. 配列×オブジェクトの組み合わせ

📌 まとめ

第5章 DOM操作の基礎

5-1. DOMとは？

例：以下のようなHTMLがあるとします

5-2. 要素の取得方法

document.getElementById(id)

document.querySelector(cssセレクタ)

document.querySelectorAll(cssセレクタ)

5-3. テキストやHTMLの変更

textContent：テキストのみ書き換える

innerHTML：HTMLごと差し替え（タグも書き換える）

5-4. 属性やクラスの操作

属性を変更する：setAttribute, getAttribute

クラスを追加・削除・切り替え：classList

5-5. 要素の追加・削除

要素を作成して追加する

要素を削除する

5-6. Spring Boot × DOM操作の注意点

📌 まとめ

第6章 イベント処理の基本

6-1. イベントとは？

代表的なイベントの種類

6-2. addEventListener を使ったイベント登録

例：ボタンがクリックされたらメッセージを表示

6-3. event オブジェクトで詳細を取得

6-4. フォーム送信イベントと preventDefault()

例：送信ボタンを押したらアラートを表示し、ページ遷移を防ぐ

6-5. 入力イベントでリアルタイムに反応する

input イベント：テキスト入力のたびに呼び出される

6-6. よくあるパターン：ループ + イベント

`let`：ブロックスコープの変数（基本的にこれを使う）

`const`：再代入不可の定数（再代入しない変数はこっち）

`var`：昔の書き方（関数スコープ）→ 非推奨

第3章制御構文と関数

第4章配列とオブジェクトの基本

`document.getElementById(id)`

`document.querySelector(cssセレクタ)`

`document.querySelectorAll(cssセレクタ)`

`textContent`：テキストのみ書き換える

`innerHTML`：HTMLごと差し替え（タグも書き換える）

属性を変更する：`setAttribute`, `getAttribute`

クラスを追加・削除・切り替え：`classList`

第6章イベント処理の基本

6-2. `addEventListener` を使ったイベント登録

6-3. `event` オブジェクトで詳細を取得

6-4. フォーム送信イベントと `preventDefault()`

`input` イベント：テキスト入力のたびに呼び出される

第7章実践！Spring Bootアプリと連携するJavaScript

`data-属性` を活用したデータ埋め込み

「JavaScript入門テキスト」　最後までお読みいただきありがとうございます。