- 投稿日：2026/02/16
- 更新日：2026/02/21
前回までで、HTMLで文字を表示し、CSSで見た目を整えるところまで進めてきました。今回はいよいよ、ページに「動き」をつけていきます。
今回のゴール：JavaScriptを使って、ボタンを押したら画面の文字が変わる体験をする。
「ボタンを押したら、何かが起きる」——これはアプリの基本中の基本です。今回はその第一歩を、実際に手を動かしながら体験していきましょう。
JavaScriptってなに？
ここまでの記事で、HTMLとCSSを学んできましたね。ここでいったん、3つの役割を整理しておきましょう。
HTMLページの中身（文字・画像など）を作る → 家の骨組み
CSS見た目（色・大きさ・配置）を整える → 壁紙やインテリア
JavaScriptページに「動き」をつける → 電気や水道などの設備
JavaScript（ジャバスクリプト）は、ページに動きを加えるための言語です。
たとえば、こんなことができます。
・ボタンを押したら文字が変わる
・画像をクリックしたら別の画像に切り替わる
・入力された内容をチェックする
今回作る「おみくじアプリ」も、ボタンを押したら結果が表示される仕組みですよね。これはまさにJavaScriptの出番です。
HTMLファイルにJavaScriptを書く方法
JavaScriptは、HTMLファイルの中に <script> タグを使って書きます。
前回までと同じように、テキストエディタ（VS Code）で新しいファイルを作りましょう。ファイル名は practice4.html にしてみてください。
まずは一番シンプルな形から始めます。以下のコードを丸ごとコピーして、ファイルに貼り付けてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript練習</title> </head> <body> <h1>JavaScriptをはじめよう</h1> <p id="message">ここの文字が変わります</p> <script> document.getElementById("message").textContent = "JavaScriptで書き換えました！"; </script> </body> </html>
これをブラウザで開いてみてください。
「ここの文字が変わります」ではなく、「JavaScriptで書き換えました！」と表示されていれば成功です。（こんな感じ↓）
このコードのポイント
<script> と </script> で囲まれた部分が、JavaScriptのコードです。HTMLの <body> の中、一番下に書くのが基本の形です。
そして、この1行で「画面の文字を書き換える」ということをやっています。
document.getElementById("message").textContent = "JavaScriptで書き換えました！";
ちょっと長くて難しそうに見えますよね。大丈夫です、今は「おまじない」だと思ってください。
ざっくり言うとこういう意味です。
document.getElementById("message") → ページの中から、id="message" がついた要素を探してきて
.textContent = "..." → その中の文字を、右側の文字に書き換える
id="message" というのは、HTMLの <p id="message"> の部分です。これが「目印」になっていて、JavaScriptが「どの要素を変えればいいか」を見つけるために使います。
変数（へんすう）を使ってみよう
次に、「変数」という考え方を紹介します。
変数とは、データに名前をつけて保存しておく仕組みのことです。
たとえば、こんなイメージです。
「名前」という箱に「太郎」を入れておくあとから「名前」の箱を開けると「太郎」が出てくる
コードで書くとこうなります。
let name = "太郎";
let（レット）は「変数を作ります」という宣言です。この1行で、「name という名前の箱を作って、その中に "太郎" という文字を入れる」という意味になります。
では、変数を使ってさきほどのコードを少し書き換えてみましょう。practice4.html の中身を、以下のコードに丸ごと置き換えてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript練習</title> </head> <body> <h1>JavaScriptをはじめよう</h1> <p id="message">ここの文字が変わります</p> <script> let newText = "変数を使って書き換えました！"; document.getElementById("message").textContent = newText; </script> </body> </html>
ブラウザで開くと、今度は「変数を使って書き換えました！」と表示されるはずです。（こんな感じです↓）
やっていることは前と同じですが、表示したい文字をいったん newText という変数に入れてから使っています。こうすると、あとから表示内容を変えたいとき、let newText = "..." の部分だけ書き換えればよくなります。
💡 Tips
変数は、プログラミングの中でもっとも基本的な概念のひとつです。どんなプログラミング言語にも変数は存在しますし、どんなプログラムでも必ずと言っていいほど使います。「データに名前をつけて保存する」という発想は、この先ずっとお世話になるものなので、ここでしっかり感覚をつかんでおきましょう。
ボタンを押したら文字を変える
さて、ここからが今回のメインです。
さきほどのコードでは、ページを開いた瞬間に文字が書き換わっていました。でも、本当にやりたいのは「ボタンを押したら変わる」ですよね。
そのためには、2つの新しいことを覚えます。
・ボタン（<button> タグ）の作り方
・「関数（かんすう）」の使い方
関数ってなに？
関数とは、「ひとまとまりの処理に名前をつけたもの」です。
さっきの変数が「データに名前をつける仕組み」だったのに対して、関数は「動作に名前をつける仕組み」です。
たとえば「文字を書き換える」という処理に changeText という名前をつけておけば、あとから「changeText を実行して！」と呼び出すことができます。
では、実際にコードを書いてみましょう。practice4.html を以下の内容に書き換えてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript練習</title> </head> <body> <h1>ボタンで文字を変えよう</h1> <p id="message">ここの文字が変わります</p> <button onclick="changeText()">押してみて！</button> <script> function changeText() { let newText = "ボタンを押したら変わりました！"; document.getElementById("message").textContent = newText; } </script> </body> </html>
ブラウザで開いて、「押してみて！」ボタンをクリックしてみてください。
みなさんの環境でも、そのボタンをクリックしてみると…
変わりました！！
文字が「ボタンを押したら変わりました！」に変わりましたか？ 変わっていれば大成功です！
コードの解説
ひとつずつ見ていきましょう。
ボタンの部分：
<button onclick="changeText()">押してみて！</button>
<button> はボタンを作るHTMLタグです。onclick="changeText()" は、「このボタンがクリックされたら、changeText という関数を実行してね」という意味です。
関数の部分：
function changeText() { let newText = "ボタンを押したら変わりました！"; document.getElementById("message").textContent = newText; }
function changeText() { ... } で、changeText という名前の関数を作っています。{ } の中に書かれた処理が、関数が呼ばれたときに実行される内容です。
処理の流れをまとめるとこうなります。
１．ユーザーがボタンをクリックする
２．onclick が反応して、changeText() を呼び出す
３．関数の中身が実行される
４．id="message" の文字が書き換わる
ここまでできれば、今回の一番大きなポイントはクリアです。「自分の操作で画面が変わる」という体験ができましたね。
見た目も少し整えよう
せっかくなので、CSSも加えて少し見やすくしてみましょう。practice4.html を以下の内容に書き換えてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript練習</title> <style> body { font-family: sans-serif; text-align: center; margin-top: 60px; background-color: #f5f5f5; } #message { font-size: 24px; color: #333; margin: 30px 0; } button { font-size: 18px; padding: 12px 32px; background-color: #4CAF50; color: white; border: none; border-radius: 8px; cursor: pointer; } button:hover { background-color: #45a049; } </style> </head> <body> <h1>ボタンで文字を変えよう</h1> <p id="message">ここの文字が変わります</p> <button onclick="changeText()">押してみて！</button> <script> function changeText() { let newText = "ボタンを押したら変わりました！"; document.getElementById("message").textContent = newText; } </script> </body> </html>
前回学んだCSSが活きてきますね。ボタンに色がついて、マウスを乗せると少し色が変わるようになっています。cursor: pointer; は、ボタンの上にマウスを置いたとき、カーソルが指マークに変わる設定です。
🏋️ ミニチャレンジ①：表示されるメッセージを変えてみよう
ここで少し手を動かしてみましょう。
関数の中の let newText = "ボタンを押したら変わりました！"; の部分を、自分の好きなメッセージに変えてみてください。
たとえばこんな感じです。
・"今日もプログラミングがんばるぞ！
・""JavaScript、意外とできるかも！
・""こんにちは、世界！"
書き換えたらファイルを保存して、ブラウザをリロード（再読み込み）してからボタンを押してみてくださいね。自分で書いた文字が表示されると、ちょっと嬉しいかも。
ボタンを押すたびに違うメッセージを出す
ここからもう一歩進んでみましょう。今のコードでは、ボタンを何回押しても同じメッセージが出ますよね。これを「押すたびに違うメッセージが出る」ように変えてみます。
practice4.html を以下の内容に書き換えてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript練習</title> <style> body { font-family: sans-serif; text-align: center; margin-top: 60px; background-color: #f5f5f5; } #message { font-size: 24px; color: #333; margin: 30px 0; } button { font-size: 18px; padding: 12px 32px; background-color: #4CAF50; color: white; border: none; border-radius: 8px; cursor: pointer; } button:hover { background-color: #45a049; } </style> </head> <body> <h1>押すたびにメッセージが変わる！</h1> <p id="message">ボタンを押してみてください</p> <button onclick="changeText()">押してみて！</button> <script> let count = 0; function changeText() { count = count + 1; if (count === 1) { document.getElementById("message").textContent = "1回目：こんにちは！"; } if (count === 2) { document.getElementById("message").textContent = "2回目：JavaScriptって楽しいかも！"; } if (count === 3) { document.getElementById("message").textContent = "3回目：もう関数が使えてますよ！"; count = 0; } } </script> </body> </html>
ブラウザで開いて、ボタンを何回か押してみてください。押すたびにメッセージが変わり、3回押すとまた最初に戻るはずです。
みなさんもご自身の環境で押してみてくださいね。
新しく出てきたポイント
let count = 0; が関数の外にある
この変数は関数の外（<script> の直下）に書いてあります。こうすることで、関数が何回呼ばれても値が消えずに残ります。ボタンを押すたびに count が1ずつ増えていく仕組みです。
if で条件によって処理を変える
if (count === 1) { // countが1のときだけ、ここが実行される }
if は「もし～だったら」という意味です。count === 1 は「count が1と等しいなら」という条件です。条件に合ったときだけ、{ } の中の処理が実行されます。
if についてはこの先の記事でもっと詳しく扱いますので、今は「こういうことができるんだな」くらいの理解で大丈夫です。
count = count + 1; で数を増やす
これは「今の count の値に1を足して、また count に入れ直す」という意味です。ボタンを押すたびに count が 0 → 1 → 2 → 3 と増えていきます。3回目で count = 0 にリセットしているので、4回目にはまた1回目のメッセージが表示されます。
💡 Tips
今やった「ボタンを押したら画面が変わる」という仕組みは、実際のWeb開発でもあらゆる場面で使われています。ショッピングサイトの「カートに入れる」ボタンも、SNSの「いいね」ボタンも、根っこの考え方は同じです。ユーザーの操作をきっかけにして、JavaScriptで画面を書き換える。この基本パターンをしっかり押さえておくと、この先いろんな応用が利きますよ。
🏋️ ミニチャレンジ②：メッセージを増やしてみよう
3つのメッセージを、5つに増やしてみましょう。
ヒントはこちらです。
・if (count === 4) と if (count === 5) のブロックを追加する
・5回目の if の中で count = 0; にリセットする（3回目のリセットは消す）
・メッセージの内容は自由に考えてみてください
うまくいったら、ボタンを5回押してすべてのメッセージが順番に出るか確認してみてくださいね。
今回のまとめ
今回はJavaScriptの第一歩として、「ボタンを押したら画面の文字が変わる」を体験しました。振り返ってみると、けっこういろいろなことを学びましたね。
・JavaScriptとは → HTMLページに「動き」を加える言語
・<script> タグ → HTMLの中にJavaScriptを書く場所
・変数（let） → データに名前をつけて保存する仕組み
・document.getElementById → ページの中から特定の要素を探すおまじない
・<button> と onclick → ボタンを作って、クリック時に関数を実行する
・関数（function） → 処理に名前をつけてまとめたもの
・if → 条件によって処理を切り替える書き方（予告編）
「ボタンを押して画面が動いた！」という体験ができていれば、それが一番大事な収穫です。コードの細かい文法は、繰り返し書いているうちに自然と身についていきますので、今は全部を完璧に覚えようとしなくて大丈夫です。
次回予告
次回（第5回）は、「条件分岐」 を詳しく学びます。if を使って「もし○○だったら△△する、そうでなければ□□する」という処理を書けるようになります。これはおみくじアプリでも「大吉・中吉・小吉……」のように結果を分けるために使う、とても重要な仕組みです。
今回のコードの最後にちらっと出てきた if が、次回の主役になります。お楽しみに！
.png)
