7日目のゴール
7日目のテーマは
「イベント＋id を使って、“ちゃんとした1つのミニアプリ”を完成させること」 です。
ここまでであなたは、
id で HTML をつかまえる
click イベントを登録する
状態（変数）を持つ
画面の表示を更新する
という流れを何度も経験してきました。
今日はそれを全部まとめて、
「ボタンを押すアプリの最終形」を一つ作ります。
作るもの：ミニ「いいね＆ログイン」アプリ
アプリの仕様を言葉で整理する
まずは、コードを書く前に「仕様」を日本語で決めます。
状態：ログインしているかどうか（true / false）
状態：いいねの数（0 からスタート）
画面に出したいもの：
ログイン状態（ログイン中／ログインしていません）
いいねの数（◯件のいいね）
ボタン：ログイン／ログアウト
ボタン：いいね
動きのルール：
ログインしていないときは「いいね」ボタンを押せない
ログインボタンを押すと、ログイン状態が切り替わる
ログイン中に「いいね」を押すと、カウントが増える
これを全部、
「イベントで動く」＋「id で HTML を取得する」だけで組み立てます。
HTML を組み立てる
必要なパーツに id をつける
まずは HTML です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>7日目：いいね＆ログインアプリ</title>
</head>
<body>
<h1>いいね＆ログインアプリ</h1>
<p id="loginStatus">状態：ログインしていません</p>
<p id="likeCount">0 件のいいね</p>
<button id="loginButton">ログイン</button>
<button id="likeButton">いいね</button>
<script src="app.js"></script>
</body>
</html>
ここで重要なのは、「あとで JavaScript から触りたいもの全部に id をつけている」ことです。
ログイン状態を表示する p
いいねの数を表示する p
ログインボタン
いいねボタン
この4つが、今日の主役です。
JavaScript の「骨組み」を先に書く
まずは要素取得と状態だけを書く
app.js をこう始めます。
const loginStatus = document.getElementById("loginStatus");
const likeCount = document.getElementById("likeCount");
const loginButton = document.getElementById("loginButton");
const likeButton = document.getElementById("likeButton");
let isLoggedIn = false;
let likeNumber = 0;
ここまででやっていることは、もう完全におなじみですね。
id で HTML を取得して「リモコン」を作る
状態を表す変数を用意する（isLoggedIn, likeNumber）
この「要素取得＋状態宣言」が、いつものスタート地点です。
状態から画面を描く関数を作る
「状態 → 表示」を1か所にまとめる
次に、「今の状態に応じて画面をどうするか」をまとめた関数を作ります。
function render() {
if (isLoggedIn) {
loginStatus.textContent = "状態：ログイン中";
loginButton.textContent = "ログアウト";
likeButton.disabled = false;
} else {
loginStatus.textContent = "状態：ログインしていません";
loginButton.textContent = "ログイン";
likeButton.disabled = true;
}
likeCount.textContent = likeNumber + " 件のいいね";
}
ここで深掘りしたいポイントは三つです。
isLoggedIn という「事実」に応じて、
ログイン状態のテキストを変えていること。
同じく isLoggedIn に応じて、
ログインボタンの表示（ログイン／ログアウト）を変えていること。
ログイン状態に応じて、
likeButton.disabled を true / false にして「押せるかどうか」を制御していること。
そして最後に、
likeNumber という「いいねの数」を
人間向けの文章にして表示していること。
「状態 → 表示」の変換を、
この render 関数に全部集めています。
イベントで「状態を変える」だけに集中する
ログインボタンのイベント
次に、ログインボタンの click イベントを書きます。
loginButton.addEventListener("click", function () {
isLoggedIn = !isLoggedIn;
render();
});
ここでやっていることは、たった二つです。
isLoggedIn を反転させる（true → false、false → true）
状態が変わったので render() を呼んで画面を描き直す
「イベントの中では状態だけ変える」
「画面の更新は render に任せる」
という分担ができています。
いいねボタンのイベント
次に、いいねボタンです。
likeButton.addEventListener("click", function () {
likeNumber = likeNumber + 1;
render();
});
これも同じパターンです。
likeNumber を 1 増やす
状態が変わったので render() を呼ぶ
「どのイベントでも、やることは“状態を変える → render”」
という共通パターンになっているのがポイントです。
初期表示を忘れずに呼ぶ
ページを開いた瞬間の画面を整える
最後に、ファイルの一番下にこれを書きます。
render();
これで、
ページを開いた瞬間に
「ログインしていません」「0 件のいいね」「いいねボタンは押せない」
という、正しい初期状態が表示されます。
完成コードを通して眺める
app.js 全体
const loginStatus = document.getElementById("loginStatus");
const likeCount = document.getElementById("likeCount");
const loginButton = document.getElementById("loginButton");
const likeButton = document.getElementById("likeButton");
let isLoggedIn = false;
let likeNumber = 0;
function render() {
if (isLoggedIn) {
loginStatus.textContent = "状態：ログイン中";
loginButton.textContent = "ログアウト";
likeButton.disabled = false;
} else {
loginStatus.textContent = "状態：ログインしていません";
loginButton.textContent = "ログイン";
likeButton.disabled = true;
}
likeCount.textContent = likeNumber + " 件のいいね";
}
loginButton.addEventListener("click", function () {
isLoggedIn = !isLoggedIn;
render();
});
likeButton.addEventListener("click", function () {
likeNumber = likeNumber + 1;
render();
});
render();
ここまで来ると、
もう「ボタンを押すアプリ」というより、
立派な「ミニ Web アプリ」です。
7日目で絶対に押さえておきたい“型”
あなたがもう持っているパターン
今日のアプリを、あえて型として言い直すとこうなります。
HTML で「触りたい要素」に id をつける
JavaScript で getElementById して「リモコン」を作る
状態を表す変数を用意する
状態から画面を描く関数（render など）を作る
イベントの中では「状態を変える」だけに集中する
状態が変わったら render() を呼んで画面を更新する
この型さえあれば、
ログイン／ログアウト
いいね／ブックマーク
ON／OFF
開始／停止
どんなボタンでも、
同じ考え方で設計できます。
7日目のまとめ 「イベント＋id が“アプリの骨格”になった」
ここまで 7 日間で、あなたはずっと同じ二つを触ってきました。
JavaScript はイベントで動く
id で HTML を取得する
でも、今のあなたはもう、
それを「ただ知っている」段階ではなく、
どの要素に
どのイベントで
どんな状態を変えて
どう画面に反映するか
を、自分で組み立てられる段階にいます。
この「骨格」ができていれば、
この先「入力」「条件分岐」「カウンター」「配列」「CSV」などを足しても、
全部この延長線上で考えられます。
もし余力があれば、今日のアプリを少し変えてみてください。
いいねを減らす「取り消し」ボタンを足す
ログインしていないときに「ログインしてください」と alert を出す
どれも、もうあなたの手で書けるはずです。
