1日目のゴールと全体像
1日目のテーマは 「JavaScriptで、画面上の数字を“自分のクリックで動かす”体験をすること」 です。
題材はシンプルな カウンターアプリ。 でも、この小さなアプリの中に
- HTML/CSSとの連携
- DOM操作
- イベント処理
- JavaScript基本文法（変数・代入・関数）
が全部詰まっています。
カウンターアプリのイメージをつかむ
どんな動きを目指すか
1日目で作るカウンターは、次のような動きをします。
- 画面に「0」という数字が表示されている
- 「＋」ボタンを押すと、数字が1増える
- 「−」ボタンを押すと、数字が1減る
たったこれだけですが、 「自分の操作が画面に反映される」 という感覚が、 プログラミングの入り口としてとても大事です。
HTMLとCSS：カウンターの“土台”を作る
HTMLで画面の部品を置く
HTMLは「何をどこに置くか」を決める言語です。 まずは、カウンターの枠・数字・ボタンを配置します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カウンターアプリ 1日目</title>
<style>
/* 画面全体のスタイル */
body {
font-family: sans-serif; /* 文字のフォント */
display: flex; /* 中身を中央寄せにするための設定 */
justify-content: center; /* 横方向の中央寄せ */
align-items: center; /* 縦方向の中央寄せ */
height: 100vh; /* 画面の高さ全体を使う */
background-color: #f5f5f5; /* 背景色を薄いグレーに */
}
/* カウンター全体の枠 */
.counter-container {
background-color: #ffffff; /* 白い背景 */
padding: 20px; /* 内側の余白 */
border-radius: 8px; /* 角を少し丸く */
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* ふわっとした影 */
text-align: center; /* 中身を中央寄せ */
}
/* 数字の表示部分 */
.counter-value {
font-size: 48px; /* 大きめの文字サイズ */
margin-bottom: 20px; /* 下に余白 */
}
/* ボタンのスタイル */
.counter-button {
font-size: 24px; /* ボタンの文字サイズ */
padding: 10px 20px; /* ボタンの内側の余白 */
margin: 0 10px; /* 左右に余白 */
cursor: pointer; /* マウスカーソルを「手」の形に */
}
</style>
</head>
<body>
<!-- カウンター全体を包むコンテナ -->
<div class="counter-container">
<!-- 現在のカウンター値を表示する要素 -->
<div id="counter" class="counter-value">0</div>
<!-- ボタンたち -->
<button id="decrement" class="counter-button">−</button>
<button id="increment" class="counter-button">＋</button>
</div>
<!-- ここにJavaScriptを後で書く -->
<script>
// JavaScriptコードは後ほど説明します
</script>
</body>
</html>
ここで押さえたいポイント
id="counter"やid="increment"は、 JavaScriptからこの要素を特定するための“名前”- CSSは「見た目」だけを担当し、 動きはすべてJavaScriptが担当する
JavaScriptの基本文法：変数で「今の値」を覚える
カウンターの値を記憶する変数
カウンターは「今いくつか」を覚えておく必要があります。 それを JavaScript の 変数 で表現します。
<script>
// カウンターの現在値を覚えておく変数
let count = 0; // 最初は 0 からスタート
</script>
let→ 変数を宣言するキーワードcount→ 変数の名前= 0→ 初期値を 0 にする
ここで大事なのは、 「変数はアプリの“記憶”」 だという感覚です。
DOM操作：画面の要素をJavaScriptからつかむ
DOMとは「画面の地図」
ブラウザはHTMLを読み込むと、 DOM（Document Object Model） という「画面の地図」を作ります。 JavaScriptはこの地図を見ながら、 「どの要素を触るか」を決めます。
要素を取得する
<script>
let count = 0; // カウンターの現在値
// 画面上の「数字表示」の要素を取得する
const counterElement = document.getElementById('counter');
// 画面上の「−ボタン」と「＋ボタン」の要素を取得する
const decrementButton = document.getElementById('decrement');
const incrementButton = document.getElementById('increment');
</script>
document→ 「今表示しているページ全体」を表すオブジェクトgetElementById('counter')→ 「id が ‘counter’ の要素をください」 という命令
ここで押さえたいのは、 「JavaScriptはHTMLの要素を“オブジェクト”として扱う」 ということです。
イベント処理：クリックされたときに動く仕組み
「クリックされたらこうする」を書く
ボタンがクリックされたときに、 カウンターの数字を変えて、画面に反映させたいですよね。 そのために使うのが イベント処理 です。
<script>
let count = 0;
const counterElement = document.getElementById('counter');
const decrementButton = document.getElementById('decrement');
const incrementButton = document.getElementById('increment');
// 「−ボタン」がクリックされたときの処理
decrementButton.addEventListener('click', function() {
// カウンターの値を1減らす
count = count - 1;
// 画面上の数字を更新する
counterElement.textContent = count;
});
// 「＋ボタン」がクリックされたときの処理
incrementButton.addEventListener('click', function() {
// カウンターの値を1増やす
count = count + 1;
// 画面上の数字を更新する
counterElement.textContent = count;
});
</script>
ここをしっかり深掘りする
addEventListener('click', function() { ... })は 「クリックされたときに、この関数を実行してね」 という意味。count = count + 1;は 「今の count に 1 を足して、また count に代入する」 という処理。counterElement.textContent = count;は 「画面上の文字を、変数 count の値に置き換える」 という命令。
ここで、JavaScriptの基本文法が自然に使われています。
- 変数（
let count） - 代入（
count = count + 1） - 関数（
function() { ... }） - オブジェクトのプロパティ（
counterElement.textContent）
1日目の完成コード
ここまでの内容をひとつにまとめた「完成版」です。 このままファイルに保存してブラウザで開けば、 カウンターが動きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カウンターアプリ 1日目</title>
<style>
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
.counter-container {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
text-align: center;
}
.counter-value {
font-size: 48px;
margin-bottom: 20px;
}
.counter-button {
font-size: 24px;
padding: 10px 20px;
margin: 0 10px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- カウンター全体 -->
<div class="counter-container">
<!-- 現在のカウンター値 -->
<div id="counter" class="counter-value">0</div>
<!-- ボタンたち -->
<button id="decrement" class="counter-button">−</button>
<button id="increment" class="counter-button">＋</button>
</div>
<script>
// カウンターの現在値を覚えておく変数
let count = 0;
// 画面上の要素を取得する（DOM操作）
const counterElement = document.getElementById('counter');
const decrementButton = document.getElementById('decrement');
const incrementButton = document.getElementById('increment');
// 「−ボタン」がクリックされたときのイベント処理
decrementButton.addEventListener('click', function() {
// カウンターの値を1減らす
count = count - 1;
// 画面上の数字を更新する
counterElement.textContent = count;
});
// 「＋ボタン」がクリックされたときのイベント処理
incrementButton.addEventListener('click', function() {
// カウンターの値を1増やす
count = count + 1;
// 画面上の数字を更新する
counterElement.textContent = count;
});
</script>
</body>
</html>
1日目で本当に掴んでほしいこと
1日目でいちばん大事なのは、 「JavaScriptで画面の数字を動かせた」という体験そのもの です。
- HTMLは「何を置くか」
- CSSは「どう見せるか」
- JavaScriptは「どう動かすか」
そして、
- 変数で「今の値」を覚え
- DOM操作で「画面の要素」をつかみ
- イベント処理で「クリックされたときの動き」を書く
この流れが、 Webフロントエンドの基本の「型」になります。
2日目以降は、このカウンターを少しずつ育てながら、
- リセットボタン
- 最小値・最大値
- 複数カウンター
- 入力フォームとの連携
へ広げていくことで、 JavaScriptとDOM操作の理解を深めていきます。
