【JavaScript入門】ボタンをクリックして文字を変える方法をやさしく解説

この記事では、JavaScript初心者でも簡単に作れる “ボタンで文字を変える” ミニアプリを紹介します。こうした小さな作品を作りながら、私はUdemyで学んできました。

✅ 完成形を触ってみよう！
✅ はじめに
✅ コードを書いてみよう
✅ おまけ：見た目を少し整えたい方へ
1. スタイリングのコード（CSS）
✅ もっと本格的に学びたい方へ
✅ 関連リンク

✅ 完成形を触ってみよう！

まずは動かしてみましょう。
ボタンをクリックすると、表示される文字が変わります。

👉 JavaScriptで「ボタンクリック→動きが変わる」仕組みを体験できます。

✅ はじめに

JavaScriptって聞くと「難しそう」と感じる人が多いかもしれません。
でも今回紹介するのは、ボタンを押すと文字が変わるだけの、超シンプルなしくみです。

この記事では、HTMLとCSSの基本を理解し、VSCodeなどのエディタを使ってコードが書ける方を対象にしています。
（HTMLやCSSの基礎が不安な方は、Udemyなどの入門講座から始めるのがおすすめです）

少しでも動くものが作れると、「プログラミングって楽しいかも」と感じられるはず。
むずかしい言葉はできるだけ使わず、やさしく解説していきます！

✅ コードを書いてみよう

それでは、実際にコードを書いてみましょう。
今回は HTML（見た目の部分）と JavaScript（動きの部分）をそれぞれ分けて紹介します。

「コード」と聞くと難しく感じるかもしれませんが、大丈夫。
一行ずつ、どんな意味なのかを丁寧に説明していきます。

HTML：ボタンと表示エリアを用意する

まずは、画面に表示される部分（HTML）です。
次のコードをコピーして、VSCodeなどのエディタに貼り付けてみてください。

<div id="changeGreet">
  <p id="greetArea"></p>
  <button id="changeBtn">チェンジ！</button>
</div>

この部分では、

<p> タグで文字の表示エリアを作り、
<button> タグでボタンを作っています。

それぞれに id を付けて、JavaScriptから操作できるようにしています。

JavaScript：ボタンを押したときの動きを作る

次に、ボタンを押したときの動きを書きます。
こちらは<script> タグで書きましょう。

<script>
const greets = ['こんにちは', 'おはよう', 'こんばんは', 'ハロー', 'お疲れ様です'];

const greetArea = document.querySelector('#greetArea');
const changeBtn = document.querySelector('#changeBtn');

let greetIndex = 0;
greetArea.textContent = greets[greetIndex];

changeBtn.addEventListener('click', () => {
  greetIndex = (greetIndex + 1) % greets.length;
  greetArea.textContent = greets[greetIndex];
});
</script>

このコードでは、

greets は、表示させたいあいさつのリストです。
querySelector() でHTMLの要素を取得し、
addEventListener() でボタンが押されたときの動きを定義しています。
% は「割った余り」を使って、最後まで表示したらまた最初に戻るしくみです。

✅ ワンポイント解説：このコードの見どころ

今回のコードでは、次の2つがポイントです。

document.querySelector()
→ HTMLの特定の要素をJavaScriptから操作するための命令です。今回の例では、<p> や <button> を取得しています。
%（割った余り）を使ったループ
→ あいさつの配列の最後まで行ったら、また最初に戻るようにしています。(greetIndex + 1) % greets.length という書き方で、無限ループを防ぎながら循環できます。

「なるほど、こんなことができるのか！」と感じてもらえたらうれしいです。

✅ おまけ：見た目を少し整えたい方へ

JavaScriptの動きはうまくいきましたか？
ここからは ちょっとだけ見た目を整える方法（CSS） をご紹介します。
※ 興味のある方だけでOKです！

スタイリングのコード（CSS）

#changeGreet {
  max-width: 600px;
  width: 100%;
  margin: 30px auto;
  padding: 30px 0;
  text-align: center;
  border: 1px solid #ccc;
}
#changeGreet p {
  margin-bottom: 30px;
  font-size: 1.4em;
}
#changeGreet button {
  padding: 8px 16px;
  font-size: 1.1em;
  cursor: pointer;
  background: #00008b;
  color: #ffffff;
  box-shadow: 2px 2px 4px #333;
}
#changeGreet button:hover {
  background: #00488b;
}
#changeGreet button:active {
  transform: translateY(2px);
  box-shadow: 0 0 1px #333;
}

このCSSをHTMLと同じファイルの <style> タグの中に書くか、別のCSSファイルに記述して読み込めばOKです。

※この記事では、見た目を整えるCSSについては深く解説していません。興味がある方は、ぜひご自身でいろいろ試してみてください！