JavaScript
PR

【JavaScript 4-1】ミニ制作｜ボタンで表示を切り替えるページを作る（初心者向け）

JS4-1.webp
toshi
記事内に商品プロモーションを含む場合があります

※この記事は JavaScript 4-1「ミニ制作」です。
ここでは、これまで学んだ内容を使って、ボタンで表示内容を切り替える小さなページを作ります。
新しい文法をたくさん増やすより、
「HTML・CSS・JavaScriptがつながって動く」感覚を優先します。

ここまでで、JavaScriptの入口として、

– 変数
– if
– 関数
– 配列
– オブジェクト
– DOM操作
– console.logでの確認

を少しずつ見てきました。

今回は、それらをいきなり大きなアプリにするのではなく、
**小さなミニ制作**
として組み合わせていきます。

作るのは、
**ボタンを押すと表示内容が切り替わるページ**
です。

たとえば、

– HTMLの説明を見る
– CSSの説明を見る
– JavaScriptの説明を見る

という3つのボタンを用意して、
押したボタンに合わせて画面の文章を変える形にします。

Q
「今回は“ボタンで内容が切り替わる学習メモ”を作ります」

今回作るのは、かなり小さなページです。

ただし、使っている考え方は実用にもつながります。

  • HTMLにボタンと表示場所を用意する
  • CSSでカードの見た目を整える
  • JavaScriptでボタンを取得する
  • クリックされたら表示内容を変える
  • 表示する内容はオブジェクトにまとめる
  • 関数で表示処理をまとめる

最初は、
「ボタンを押すと、画面の内容が変わる」
ところまで確認できれば十分です。

目次
  1. 今回のゴール
  2. 今回作るもの
  3. まずは完成形を見る（コピペOK）
  4. index.html を作る
  5. style.css を作る
  6. script.js を作る
  7. どこを見ればいい？（変化のポイント）
  8. memoData で表示内容を管理する
  9. showMemo 関数で表示を変える
  10. addEventListener でボタンと関数をつなげる
  11. ボタンを押してから画面が変わるまで
  12. よくあるつまずき（ここだけ確認）
  13. 今回のまとめ（ここだけ押さえればOK）
  14. 今日のゴール確認（できた判定）
  15. 次に読む（JavaScript 4-2へ）
  16. JavaScript 4-1 の一例zipについて
まずは完成ラインを確認する

今回のゴール

  • HTML・CSS・JavaScriptを分けて小さなページを作る
  • ボタンを押した時にJavaScriptが反応する
  • オブジェクトにまとめた内容を画面に表示する
  • 関数を使って表示切り替えの処理をまとめる
  • JavaScriptで“ページを操作している感覚”をつかむ
小さく作って全体像を見る

今回作るもの

今回は、3つのボタンを持つ学習メモページを作ります。

ボタンは次の3つです。

– HTMLを見る
– CSSを見る
– JavaScriptを見る

ボタンを押すと、
画面のタイトルと説明文が切り替わります。

ボタン表示する内容
HTMLを見るHTMLはページの中身を書く役割
CSSを見るCSSは見た目を整える役割
JavaScriptを見るJavaScriptは動きや変化を加える役割

このミニ制作では、
これまで何度も出てきた

– getElementById
– addEventListener
– textContent
– function
– object

を組み合わせます。

まずは動く形を用意する

まずは完成形を見る（コピペOK）

フォルダ構成は、これまでと同じように考えると分かりやすいです。

javascript-04-01-example/

├─ index.html

├─ css/

│  └─ style.css

└─ js/

   └─ script.js
TeX

ページの中身を作る

index.html を作る

まずは `index.html` をこの形で作ります。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript 4-1</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <main class="page">
    <section class="memo-card">
      <p class="label">JavaScript 4-1 の一例</p>
      <h1>ボタンで表示を切り替える</h1>
      <p class="lead">ボタンを押すと、表示される学習メモが切り替わります。</p>
      <div class="button-area">
        <button id="htmlButton" class="button" type="button">HTMLを見る</button>
        <button id="cssButton" class="button" type="button">CSSを見る</button>
        <button id="jsButton" class="button" type="button">JavaScriptを見る</button>
      </div>
      <div class="result-box">
        <p id="resultTitle" class="result-title">ここにタイトルが表示されます。</p>
        <p id="resultText" class="result-text">見たい内容のボタンを押してください。</p>
      </div>
    </section>
  </main>
  <script src="js/script.js"></script>
</body>

</html>
HTML

HTML側では、

– 3つのボタン
– タイトルを表示する場所
– 説明文を表示する場所

を用意しています。

JavaScriptでは、
これらの id を使って、
ボタンや表示場所を見つけます。

見た目を整える

style.css を作る

次に、`css` フォルダの中に `style.css` を作って、下のコードを書きます。

body {
  background-color: #f3f4f6;
  margin: 0;
  padding: 24px;
  color: #333333;
  line-height: 1.8;
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

.page {
  max-width: 760px;
  margin: 24px auto 0;
}

.memo-card {
  background-color: #ffffff;
  padding: 24px;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}

.label {
  color: #92400e;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 8px;
}

h1 {
  color: #111827;
  font-size: 32px;
  margin-top: 0;
  margin-bottom: 16px;
}

.lead {
  margin-top: 0;
  margin-bottom: 24px;
}

.button-area {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.button {
  background-color: #eab308;
  color: #111827;
  border: none;
  padding: 12px 18px;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: #ca8a04;
}

.result-box {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  padding: 16px;
}

.result-title {
  font-weight: bold;
  color: #92400e;
  margin-top: 0;
  margin-bottom: 8px;
}

.result-text {
  margin: 0;
}

@media (max-width: 600px) {
  .button-area {
    display: block;
  }

  .button {
    width: 100%;
    margin-bottom: 8px;
  }
}
CSS

CSSでは、
ボタンと結果表示の見た目を整えています。

画面が狭い時は、
ボタンが縦に並ぶようにしています。

今回の中心はJavaScriptですが、
見た目を整えることで、
「ボタンを押したらどこが変わったか」
が見やすくなります。

ボタンで内容を切り替える

script.js を作る

最後に、`js` フォルダの中に `script.js` を作って、下のコードを書きます。

const htmlButton = document.getElementById("htmlButton");
const cssButton = document.getElementById("cssButton");
const jsButton = document.getElementById("jsButton");

const resultTitle = document.getElementById("resultTitle");
const resultText = document.getElementById("resultText");

const memoData = {
  html: {
    title: "HTML",
    text: "HTMLは、見出し・文章・画像・リンクなど、ページの中身を書く役割です。"
  },
  css: {
    title: "CSS",
    text: "CSSは、色・余白・文字サイズ・配置など、ページの見た目を整える役割です。"
  },
  javascript: {
    title: "JavaScript",
    text: "JavaScriptは、ボタン操作や入力に反応して、ページに動きや変化を加える役割です。"
  }
};

function showMemo(type) {
  resultTitle.textContent = memoData[type].title;
  resultText.textContent = memoData[type].text;
}

htmlButton.addEventListener("click", function() {
  showMemo("html");
});

cssButton.addEventListener("click", function() {
  showMemo("css");
});

jsButton.addEventListener("click", function() {
  showMemo("javascript");
});
JavaScript
toshi
toshi

今回は
“押したボタンに合わせて、
オブジェクトの中身を表示する”
ところがポイントです。

コードを見やすく整えたいときは

HTML・CSS・JavaScriptを書いている途中でコードが見づらくなった場合は、 ToshiLab Toolsのコード整形ツールでインデントをそろえると確認しやすくなります。

コード整形ツールを使ってみる

コードの見る場所を整理する

どこを見ればいい？（変化のポイント）

見る場所起きていること
htmlButton / cssButton / jsButton3つのボタンを取得している
resultTitleタイトルを表示する場所
resultText説明文を表示する場所
memoData表示する内容をオブジェクトにまとめている
showMemo表示を切り替える処理をまとめている
addEventListenerボタンが押された時に
showMemo を呼び出している

今回のコードは、
これまで学んだ内容を組み合わせています。

特に大事なのは、

– 表示する内容を `memoData` にまとめる
– `showMemo` 関数で表示を切り替える
– ボタンごとに表示する内容を変える

という流れです。

表示する内容を1か所にまとめる

memoData で表示内容を管理する

今回の表示内容は、
`memoData` というオブジェクトにまとめています。

const memoData = {
  html: {
    title: "HTML",
    text: "HTMLは、見出し・文章・画像・リンクなど、ページの中身を書く役割です。"
  },
  css: {
    title: "CSS",
    text: "CSSは、色・余白・文字サイズ・配置など、ページの見た目を整える役割です。"
  },
  javascript: {
    title: "JavaScript",
    text: "JavaScriptは、ボタン操作や入力に反応して、ページに動きや変化を加える役割です。"
  }
};
JavaScript

これは、
HTML用、CSS用、JavaScript用の説明を、
1つの場所にまとめている形です。

今回はオブジェクトの中に、
さらにオブジェクトを入れています。
少し難しく見えるかもしれませんが、
「表示する内容をまとめた箱」と見れば大丈夫です。

切り替える処理をまとめる

showMemo 関数で表示を変える

表示を変える処理は、
`showMemo` という関数にまとめています。

function showMemo(type) {
  resultTitle.textContent = memoData[type].title;
  resultText.textContent = memoData[type].text;
}
JavaScript

この関数は、
受け取った `type` に合わせて、
表示するタイトルと説明文を変えます。

たとえば、

showMemo("html");
JavaScript

と呼び出すと、
`memoData.html` の中身が表示されます。

toshi
toshi

ここは少しだけ発展っぽく見えますが、やっていることは「指定された内容を表示する」だけです。

押したボタンに合わせて内容を変える

addEventListener でボタンと関数をつなげる

ボタンが押された時の処理は、
それぞれ次のように書いています。

htmlButton.addEventListener("click", function() {
  showMemo("html");
});

cssButton.addEventListener("click", function() {
  showMemo("css");
});

jsButton.addEventListener("click", function() {
  showMemo("javascript");
});
JavaScript

これで、

– HTMLを見る → showMemo(“html”)
– CSSを見る → showMemo(“css”)
– JavaScriptを見る → showMemo(“javascript”)

という流れになります。

表示の流れを1本で見る

ボタンを押してから画面が変わるまで

順番起きていること
1 ボタンを押す
2addEventListener が反応する
3showMemo が呼び出される
4memoData から内容を取り出す
5textContent で画面に表示する

この流れが見えると、
JavaScriptでページを動かしている感覚がかなりつかみやすくなります。

最初から完璧に説明できなくても大丈夫です。

まずは、
「ボタンを押すと、指定したデータが画面に出る」
ところを確認しましょう。

少しだけ変えてみる（練習）
  • HTMLの説明文を変えてみる
  • CSSの説明文を変えてみる
  • JavaScriptの説明文を変えてみる
  • ボタンの文字を変えてみる
  • memoData に php を追加してみる
  • PHPを見るボタンを追加できるか試してみる

最初は、文章を変えるだけで十分です。

慣れてきたら、
新しいボタンを増やして、
表示内容を追加する練習をしてみてください。

ただし、ボタンを増やす時は、

– HTMLにボタンを追加する
– JavaScriptでボタンを取得する
– memoDataに内容を追加する
– addEventListenerを追加する

という流れが必要です。

止まった時の見直し方

よくあるつまずき（ここだけ確認）

Q
「つまずき①：ボタンを押しても表示が変わらない」

まずは、ボタンの id 名を確認します。

HTML側が、

<button id="htmlButton" class="button" type="button">
	HTMLを見る
</button>
HTML

なら、JavaScript側も、

const htmlButton = document.getElementById("htmlButton");
JavaScript

のように同じ名前にします。

Q
「つまずき②：memoData[type] が分からない」

最初は少し難しく見えますが、
type に入った文字によって、取り出す場所が変わると考えれば大丈夫です。

showMemo("html");
JavaScript

なら、type は “html” です。

そのため、

memoData[type]
JavaScript

は、

memoData.html
JavaScript

に近い意味になります。

Q
「つまずき③：追加したボタンだけ動かない」

ボタンを追加した時は、
HTMLだけでなくJavaScript側も追加する必要があります。

確認する場所は次の4つです。

– HTMLにボタンを追加したか
– JavaScriptでそのボタンを取得したか
– memoDataに表示内容を追加したか
– addEventListenerで関数を呼び出しているか

どこか1つ抜けると、そのボタンだけ動かないことがあります。

Q
「つまずき④：コンソールにエラーが出る」

まずは、カンマや波カッコを確認します。

オブジェクトでは、
データとデータの間にカンマが必要です。

html: {
    title: "HTML",
    text: "HTMLの説明です。"
  },
  css: {
    title: "CSS",
    text: "CSSの説明です。"
  }
JavaScript

カンマや { } が抜けると、エラーになることがあります。

制作で使った内容を振り返る

今回のまとめ（ここだけ押さえればOK）

  • HTMLにボタンと表示場所を用意した
  • CSSで見た目を整えた
  • JavaScriptでボタンと表示場所を取得した
  • オブジェクトに表示内容をまとめた
  • 関数で表示切り替えの処理をまとめた
  • ボタンを押すと表示内容が切り替わるページを作れた
できたことを確認する

今日のゴール確認（できた判定）

ここまでできたらOKです。

  • ボタンで表示内容を切り替えられた
  • HTML・CSS・JavaScriptを分けて書けた
  • memoData に表示内容をまとめられた
  • showMemo 関数で表示処理をまとめられた
  • 次の JavaScript 4-2 に進む準備ができた
入力内容を扱う制作へ進む

次に読む（JavaScript 4-2へ）

今回は、ボタンを押して表示内容を切り替えるミニ制作を行いました。

次は、
入力欄に書かれた内容をJavaScriptで確認するミニ制作へ進みます。

フォームや入力欄に反応できるようになると、
JavaScriptでできることがさらに広がります。

次へ：JavaScript 4-2 入力内容を確かめるへ進む
コード一式で動きを確認する

JavaScript 4-1 の一例zipについて

この記事の内容は、JavaScript 4-1 の一例として zip ファイルを用意しました。

最初はそのまま開いて動きを確認し、
そのあとで表示される文章やボタンを少し変えてみると進めやすいです。

“正解を暗記するもの”ではなく、
「こういう形でも作れる」という確認用として使ってください。

javascript-04-01-example.zip
└─ javascript-04-01-example/
├─ index.html
├─ css/
│　└─ style.css
└─ js/
　　└─ script.js

javascript-04-01-exampleダウンロード
PR：最初の1冊（必要な方だけ）

PR：JavaScriptを進めるための参考（必要な方だけ）
JavaScriptは、DOM操作・イベント処理・オブジェクトの組み合わせあたりで少しつまずきやすいので、必要な方だけ参考を置いておきます。
まずは記事内のコードだけでも十分進めます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

ABOUT ME
toshi
toshi
フルスタックエンジニア
InstagramContact
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました