5日目のゴールとテーマ
5日目のテーマは「ブラウザの画面（HTML）とJavaScriptをつなげる」です。
昨日まではコンソールの中だけで完結していましたが、今日はついに「画面に出す」側に踏み込みます。
JavaScriptで
画面上の要素を見つける
その中身を書き換える
ボタンが押されたときに動く処理を書く
この3つを体験して、「あ、これアプリの入口だな」という感覚をつかむのが今日のゴールです。
HTMLとJavaScriptの関係をざっくりつかむ
HTMLは「骨格」、JavaScriptは「動き」
Webページはざっくり言うとこう分かれます。
HTML：文字やボタン、入力欄など「何があるか」を決める
CSS：色や大きさ、配置など「どう見えるか」を決める
JavaScript：クリックしたらどうなるか、入力されたらどうするかなど「どう動くか」を決める
今日は、HTMLとJavaScriptの最低限の連携だけをやります。
CSSは一旦忘れてOKです。
5日目の練習用HTMLを用意する
まずは超シンプルなページを作る
テキストエディタ（メモ帳でもOK）で、次の内容を index.html という名前で保存してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>5日目：JavaScript練習</title>
</head>
<body>
<h1>JavaScript練習ページ</h1>
<p id="message">ここにメッセージが表示されます。</p>
<button id="hello-button">あいさつする</button>
<script src="main.js"></script>
</body>
</html>
ポイントをかみ砕きます。
<p id="message">...</p>
画面上の「メッセージ表示用の場所」です。id=”message” が“名前タグ”のようなものです。
<button id="hello-button">あいさつする</button>
クリックできるボタンです。これにも id を付けています。
<script src="main.js"></script>
「このHTMLは main.js というJavaScriptファイルを読み込みます」という宣言です。
この main.js に、これからコードを書いていきます。
同じフォルダに main.js という空ファイルも作っておいてください。
JavaScriptからHTML要素を「見つける」
document.getElementByIdで要素をつかむ
main.js に、まずは次のコードを書いてみます。
console.log("main.js が読み込まれました。");
let messageElement = document.getElementById("message");
console.log(messageElement);
ブラウザで index.html を開き、開発者ツールのコンソールを見てください。
「main.js が読み込まれました。」と、<p id="message">...</p> の情報が表示されていればOKです。
ここでの重要ポイントは document.getElementById("message") です。
document は「今表示しているページ全体」を表す特別なオブジェクト
getElementById は「id がこれの要素を1つ返してくれる」メソッド
つまり、「id=”message” の要素をJavaScript側でつかむ」処理
これで、HTMLの <p> タグを JavaScript の変数 messageElement として扱えるようになりました。
要素の中身を書き換える
textContentでテキストを変える
さっきの続きとして、main.js をこう書き換えてみます。
let messageElement = document.getElementById("message");
messageElement.textContent = "JavaScriptから書き換えました！";
ブラウザをリロードすると、
「ここにメッセージが表示されます。」だった部分が
「JavaScriptから書き換えました！」
に変わっているはずです。
ここでのキモは textContent です。
messageElement.textContent は、「その要素の中の“文字だけ”」を表すプロパティ
そこに文字列を代入すると、画面上のテキストが書き換わる
つまり、「HTMLの中身を、JavaScriptから動的に変えられる」ということです。
これができると、一気に“アプリ感”が出てきます。
ボタンが押されたときに処理を動かす
addEventListenerで「クリックに反応する」
次は、「ページを開いた瞬間に書き換える」のではなく、
「ボタンが押されたときに書き換える」ようにしてみます。
main.js を次のように書きます。
let messageElement = document.getElementById("message");
let buttonElement = document.getElementById("hello-button");
buttonElement.addEventListener("click", function () {
messageElement.textContent = "こんにちは！ボタンが押されました。";
});
ブラウザをリロードして、
ボタン「アいさつする」をクリックしてみてください。
メッセージが変われば成功です。
ここで深掘りしたいポイントは3つです。
1つ目、buttonElement も getElementById でつかんでいること。
HTML側で id=”hello-button” と付けたボタンを、JavaScript側で変数にしているだけです。
2つ目、addEventListener("click", function () { ... }) の意味。
「このボタンに、“click（クリック）されたときにこの関数を実行する”というルールを登録する」ということです。
3つ目、「function () { … }」の中身が“ボタンが押されたときに実行される処理”になっていること。
ここでは、messageElement.textContent を書き換えています。
これで、「ユーザーの操作（クリック）に応じて画面が変わる」という、
アプリの基本中の基本が体験できました。
ユーザー入力を画面に反映するミニアプリ
名前を入力して「こんにちは、○○さん！」と表示する
少しだけステップアップして、
「入力欄に名前を入れて、ボタンを押すと挨拶が出る」ミニアプリを作ります。
まず、HTMLを少しだけ増やします。index.html の <body> の中を、次のようにします。
<h1>JavaScript練習ページ</h1>
<p id="message">ここにメッセージが表示されます。</p>
input type="text" id="name-input" placeholder="名前を入力してください">
<button id="hello-button">あいさつする</button>
<script src="main.js"></script>
※ 実際には <input ...> はタグなので、あなたのファイルでは <input ...> と書いてください（ここでは説明の都合でタグをそのまま書いていません）。
次に、main.js をこう書きます。
let messageElement = document.getElementById("message");
let buttonElement = document.getElementById("hello-button");
let nameInputElement = document.getElementById("name-input");
buttonElement.addEventListener("click", function () {
let name = nameInputElement.value;
if (name === "") {
messageElement.textContent = "名前を入力してください。";
} else {
messageElement.textContent = "こんにちは、" + name + "さん！";
}
});
動きはこうです。
入力欄に名前を入れる
ボタンを押す
nameInputElement.value で「入力された文字列」を取り出す
空文字なら「名前を入力してください」と表示
それ以外なら「こんにちは、○○さん！」と表示
ここでの重要ポイントは value です。
input 要素の value プロパティには、「ユーザーが入力した文字」が入る
それを変数 name に入れて、条件分岐に使っている
2日目・3日目でやった「条件分岐」と「文字列の結合」が、
ブラウザの画面とつながった瞬間です。
4日目までの「オブジェクト＋配列」とつなげる入口
まずは1件から、次は「一覧」に広げられる
今は「1人の名前」だけですが、
4日目でやった「オブジェクト＋配列」を思い出すと、
この先のイメージが見えてきます。
名前・年齢・メールを入力 → 1人分のオブジェクトを作る
それを配列に push する → 名簿になる
配列をループして、画面上に <li> や <p> を増やしていく → 名簿表示アプリ
今日はそこまで一気にやりませんが、
「HTMLの要素をJavaScriptから触れるようになった」ということが、
その一歩目になっています。
5日目で一番大事な感覚
「画面とコードが“線でつながった”」
今日あなたが手に入れたのは、
HTMLの要素に id を付けて、JavaScriptからつかむ感覚
textContent や value を通じて、「画面の中身」と「コードの変数」がつながる感覚
addEventListener で「ユーザーの操作に反応する」感覚
です。
これで、コンソールの中だけの世界から、
「実際の画面を持つアプリ」の世界に足を踏み入れました。
5日目のまとめ
今日のキーポイントを短く整理すると、
HTMLファイルを用意し、<script src="main.js"> でJavaScriptを読み込んだ
document.getElementById で、id付きの要素をJavaScript側の変数として扱えるようになった
textContent で要素のテキストを書き換えられるようになった
ボタンに addEventListener(“click”, …) を付けて、「クリック時の処理」を書けるようになった
input.value でユーザーの入力を取り出し、条件分岐と組み合わせてメッセージを変えられるようになった
次の6日目では、
4日目の「オブジェクト＋配列」と、5日目の「画面操作」を組み合わせて、
「簡単な名簿表示アプリ」をブラウザ上で動かしていきます。
もし余裕があれば、
今日のミニアプリに「時間帯で挨拶を変える（おはよう／こんにちは／こんばんは）」などを足してみると、
条件分岐と画面操作の両方の感覚が、ぐっと自分のものになります。