LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@nakamoto(賢吾 中本)

🌟 小学生でもわかる！ワンピースで学ぶJavaScriptのDOM操作（完全保存版）

Last updated at Posted at 2025-05-13

🌟 小学生でもわかる！ワンピースで学ぶJavaScriptのDOM操作（完全保存版）

📖 DOMとは？

DOM（ドム）とは、HTMLで作ったページをJavaScriptで動かすためのしくみのことです。
たとえば「ルフィの名前をゾロに変える」「画像を変える」「ボタンを押したら動く」など、全部DOMのおかげ！

🧰 ファイル構成

  • index.html：ページの設計図（絵やボタンを置く）
  • style.css：ページの見た目（色や形）
  • main.js：魔法のコード（ボタンを押したらキャラが変わる！）

🖥 index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ONE PIECEキャラ図鑑</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>ONE PIECE キャラ図鑑</h1>

  <div id="character" class="card">
    <h2 id="charName">ルフィ</h2>
    <img id="charImg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Y7rgTcW5NdDkxvwMW4Gdj2Q3G3lZVBvHHC10A3T_Iwxj0257NbTbdhvWKFOqn7nxXw6-V4P_0VFuJZ_5cQSDPxlazFKTD9N-d1A0IrX0k7LoaVpG3X9IwQ48H0zfXTJOT1JntRr0Lq3o/s1048/onepiece01_luffy.png" alt="ルフィ">
  </div>

  <button onclick="changeToZoro()">ゾロに変身！</button>

  <script src="main.js"></script>
</body>
</html>

🎨 style.css

body {
  font-family: sans-serif;
  background: linear-gradient(to bottom, #d0f0ff, #fff);
  text-align: center;
  padding: 40px;
}

.card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
  display: inline-block;
}

img {
  width: 200px;
  border-radius: 12px;
}

button {
  padding: 10px 20px;
  font-size: 18px;
  margin-top: 20px;
  background-color: #00c3ff;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

button:hover {
  background-color: #009acc;
}

⚙ main.js

// 🔁 ボタンを押したときにゾロに変身する関数を作ります
function changeToZoro() {

  // ▼ 「document」は今表示されているページ全体のことです。
  // ▼ 「getElementById」は、ページの中から特定のIDを持った部分を探す命令です。
  // ▼ この行は、IDが「charName」の部分（<h2>の中の名前）を見つけて、「ゾロ」という文字に書きかえています。
  document.getElementById("charName").textContent = "ゾロ";

  // ▼ 次の行では、IDが「charImg」の画像を見つけて、src（ソース）をゾロの画像URLに変えています。
  // ▼ 「.src」は画像ファイルの場所（URL）を指定するプロパティです。
  document.getElementById("charImg").src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkZ57Udi7AA5MRw4uzcx9M4R0J8PK03fIjZaaRlCLWBW5gBtnZpuCWLbao925kYGJy0HNcxEf9NcfbHFyuraKrY-4WhkFV01Ufut5cDeRpuiZ5cewk8CCQUD2v178dm67n_DqoHUrr_s-K/s1041/onepiece02_zoro_bandana.png";

  // ▼ 「.alt」は画像が表示されないときに代わりに出す説明文を決めるものです。
  // ▼ この行では、alt属性を「ゾロ」に変更しています。
  document.getElementById("charImg").alt = "ゾロ";
}

// 🔻 この部分では、ページを下にスクロールしたときの動きを設定しています。
// ▼ 「window」は画面全体（ブラウザ）を表します。
// ▼ 「addEventListener」は、「〜が起きたら〇〇をする」という命令です。
// ▼ 今回は "scroll"（スクロール）という動きが起きたら、中の関数（function）を実行します。
window.addEventListener("scroll", () => {

  // ▼ スクロールされたら、名前を「サンジ」に変えます
  document.getElementById("charName").textContent = "サンジ";

  // ▼ サンジの画像に変えます（.srcで画像を差し替え）
  document.getElementById("charImg").src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb915nunoRAuBcf2adDTT6Fr8_1ZDE01Ub0VKqNROZTAF-6hAt_f-1MZZxBfa3-OOIbxPvP3-3d3hBJdofYgYtysdgEZHVVkOEORkGoHxeYiU75aESvdKnxIuzZCr4RsjHe2SoUMfS3PEo/s1028/onepiece05_sanji.png";

  // ▼ alt属性（画像が表示されない時の文字）も「サンジ」に変えます
  document.getElementById("charImg").alt = "サンジ";
});

📌 各メソッドやプロパティについて

用語 説明
document 表示されているWebページ全体を意味します
getElementById 指定したIDの要素を1つ見つけます
textContent テキスト（文字）の中身を変更できます
src 画像などのファイルの場所（URL）を指定します
alt 画像が表示されない時の代わりの説明文です
addEventListener 特定の動き（クリック、スクロールなど）があったら何かを実行する命令です
scroll ページが下に動いたときの動作を感知するキーワードです

🧩 DOM操作でしていること（5つ）

  1. 文字を変える → .textContent
  2. 画像を変える → .src
  3. ボタンで動かす → onclick
  4. スクロールで動かす → addEventListener("scroll")
  5. altテキストを変える → .alt

✅ 操作①：文字を変える .textContent

main.js の行

document.getElementById("charName").textContent = "ゾロ";

HTML の対象

<h2 id="charName">ルフィ</h2>

どう影響するの？

  • charNameというIDを持つ<h2>の中の文字が、「ルフィ」から「ゾロ」に変わる
  • 結果：ページに表示されるキャラクターの名前が変化する！

✅ 操作②：画像を変える .src

main.js の行

document.getElementById("charImg").src = "画像URL";

HTML の対象

<img id="charImg" src="..." alt="ルフィ">

どう影響するの？

  • charImgというIDを持つ画像のsrc（画像の場所）を書きかえる
  • 結果：ルフィの画像がゾロやサンジなど別のキャラ画像に変わる！

✅ 操作③：ボタンで動かす onclick

HTML の行

<button onclick="changeToZoro()">ソロに変身！</button>

どう影響するの？

  • このボタンがクリックされると、JavaScriptの関数 changeToZoro() が実行される
  • 結果：クリックすると名前・画像・altが「ゾロ」に変わる！

✅ 操作④：スクロールで動かす addEventListener("scroll")

main.js の行

window.addEventListener("scroll", () => {
  // ...
});

HTML の対象

  • ページ全体（<body>を含む）

どう影響するの？

  • ユーザーがページを下にスクロールすると、JavaScriptの関数が自動で動く
  • 結果：キャラクターが「サンジ」に変わるようになる！

✅ 操作⑤：altテキストを変える .alt

main.js の行

document.getElementById("charImg").alt = "ゾロ";

HTML の対象

<img id="charImg" src="..." alt="ルフィ">

どう影響するの？

  • alt（画像が表示されないときの説明文）が「ルフィ」から「ゾロ」に変わる
  • 結果：もし画像が表示できない場合、「ゾロ」というテキストが代わりに出る！

🏁 まとめ

操作種類 JavaScriptの命令 対象HTML要素 結果
文字を変える .textContent <h2 id="charName"> キャラ名が変わる
画像を変える .src <img id="charImg"> 画像が変わる
ボタンで動かす onclick="関数名()" <button> ボタンを押すと動作する
スクロールで動く window.addEventListener("scroll") <body> 下にスクロールで動作する
altを変える .alt <img id="charImg"> 画像が見えないときの説明が変化

💡 JavaScriptの命令は、HTMLの中の特定の「タグ」に対して、「どこをどう変えるか」を指定して使います。
このしくみを「DOM（ドム）操作」と言います！

🏁 おわりに

ここまでで、JavaScriptを使ってワンピースのキャラを自由に変える魔法（DOM操作）を覚えました。
画像・文字・動作、全部自分の好きなようにコントロールできるんだよ！

👒 さあ、キミもナミやチョッパー、ロビン、ブルックなど追加して、
自分だけの「麦わらの一味図鑑」を作ってみよう！

引用：いらすとやhttps://www.irasutoya.com/2021/01/onepiece.html

ナミ：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtRfZsghuLTIyRzywbowxR_q3dtXJn33kub2lS7_pDSVeNlHKveWnsHjGOikcQlg6pgZT63i43SgAcJosU2mES_ZKK-f6G9qWvDViXOtBiDRMEDjQJOGghw-ZSUFYXZ1P01l5ZN0gkANI-/s1055/onepiece03_nami.png
チョッパー：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwXhPLNdUe6H1e8X7CvW3edgE1BqK7sNHFIbSLw9Y9sOzNrJFJig-sz9B2IRqsgYWXl-TKRpL99sggcD2qfcN82T5-MxZKdQtMDnjDF7luEIzsB9J41XFUMIN4SUzmCjXwMyuYh1dCkqn0/s992/onepiece06_chopper.png
ウソップ：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtPsAfN0IE2qpCnMIXr9CPKgJkLqiVE0VLh74Ohler_hT4-mosvVlNOraDvmLAJVz65EXKbODKXTheOL1o-IbEBWbZGvuWsxCbMpJeM7u6XbehkLDP8r21lAGu2Q3ZS_5lg0-nO09mxZJ1/s1025/onepiece04_usopp_sogeking.png
ブルック：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicPjQ7rvpZ7J4AdwOQLeidTouchG8itU6LzqT3nrNqBLdajXOB2MiFyWoVqYOnLx4ZGLqIKyejQ3kb0t0C_lU6buhcyJ6_svhzZl-NuaEcSUBR2XCj4xbZbZxg-nYWEVhIe8BEBOyrqpS-/s1102/onepiece09_brook.png
ロビン：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb_FkfaAWLeM3alcb5YOVmXPC2jsBEuuTQ8mplw5B-cnvd8LlExSr_3u7ybNGyT2TRzckrJSLOaY88DIuP6PVCCXxnMCY-a8b1SurHeEhWijrpmRnRpCWV6bw9LRiQghkECdemI4l2oebS/s1151/onepiece07_robin.png
エネル：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTBUDIYA3NqI3GndowHTh-oZf4TAm99PEgmUl09jar-wkO4DPM9FX8sPOQeH5VN7uBKmG8qpkaNiS4NDZlBCLiyoGsTS8TUuw36gMtMcA0kF83EY7tIyS3yqAegpe9yv1YEqXV0bINz0WX/s1156/onepiece14_enel.png
クロコダイル：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5cRnvUOeieTiPUR6Cfe2ZOuJVsRx7K91hyPPVPSfedJQ8A1yrtHq8izGtnYRREwl9TOV_ekM6llbX5bOpyfcprmxH4R1kPaIYKl5zVIehFyhZhtsuzqRaoaVsA_WCbJyTacoUQubXQJs/s1307/onepiece13_crocodile.png
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?