この 7 日間・初級編で目指すゴール
この「初級編」では、すでに「超初級」で
- コンソールでコードを動かす
- 変数、if、関数、配列、ランダム
- 簡単なおみくじアプリ
あたりを触った人を想定して、もう一歩「アプリ寄り」に踏み込みます。
この 7 日のゴールは次です。
ブラウザ上で動く「ちょっと実用的なミニアプリ」を自分で組み立てられるようになる
コードを「なんとなく真似する」から「構造を理解して書き換えられる」に進む
題材としては、次のどれかを狙います。
簡単な「タイマー」
シンプルな「買い物メモ（ToDo）風アプリ」
前に作った「おみくじ」を少し強化したアプリ
ここでは、解説のしやすさから「簡易 ToDo（やることリスト）アプリ」をメイン例にします。
ただし、タイマーに変えたい場合も対応できるように、考え方は汎用的に説明します。
Day 1: 画面構成と JavaScript の役割を整理する
HTML・CSS・JavaScript の役割の再確認
ここをちゃんと整理すると、この先の混乱が一気に減ります。
HTML は「何があるか」（ボタン、入力欄、表示エリア）を決める
CSS は「どう見えるか」（色、位置、大きさ）を決める
JavaScript は「どう動くか」（クリックしたとき何が起きるか）を決める
例えば、ToDo リストなら次のような分担になります。
入力欄とボタンとリストの枠は HTML
ボタンの色やリストのデザインは CSS
ボタンを押したらリストに項目が追加されるのは JavaScript
役割がごちゃごちゃになると、何をどこに書けばいいか分からなくなります。
初級から「役割の分離」を意識しておくと、あとで圧倒的に楽になります。
ToDo アプリの骨組み HTML を書く
まずは index.html として、次のような最小構成を用意します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>やることリスト</title>
</head>
<body>
<h1>やることリスト</h1>
<input id="todo-input" type="text" placeholder="やることを入力">
<button id="add-btn">追加</button>
<div id="todo-list"></div>
<script src="app.js"></script>
</body>
</html>
ここで重要なポイントを整理します。
id 属性は JavaScript から要素を操作するための「名前」
input と button と todo-list という三つの要素が、今回の主役
app.js というファイルはまだ作っていませんが、「ここに JavaScript を書く」という約束だけ先にしておきます。
今日やることのまとめ
Day 1 の目的は、アプリ全体のイメージをつかむことです。
まだ動かなくて大丈夫です。
入力欄・ボタン・表示エリア、それぞれが何の役割か、頭の中で整理できていれば合格です。
Day 2: JavaScript で DOM 要素をつかまえる
DOM とは何かを直感で理解する
難しい言葉ですが、ここではざっくりこう理解してください。
ブラウザは、HTML を読み込んで「画面の部品」を JavaScript から操作できるようにした世界（DOM）を作る
JavaScript は、その DOM 上の部品を「取ってくる」「書き換える」という操作をする
実際のコードで見た方が早いです。
getElementById で要素を取得する
Day 1 の index.html と同じフォルダに app.js を作り、次のように書きます。
const input = document.getElementById("todo-input");
const addButton = document.getElementById("add-btn");
const list = document.getElementById("todo-list");
console.log(input);
console.log(addButton);
console.log(list);
この状態で index.html をブラウザで開き、
開発者ツールの Console を見ると、それぞれの要素が表示されます。
ここでの重要ポイントは次です。
document は「ページ全体」の入口
getElementById は「id で要素を 1 つ取ってくる」関数
戻り値を変数に入れておくと、その変数経由で要素を操作できる
この「HTML で id を付ける → JavaScript で getElementById する」の流れは、
今後何度も使う基本パターンです。
Day 3: ボタンのクリックイベントを扱う
ボタンが押された瞬間を JavaScript でつかまえる
app.js にコードを追加します。
前日の 3 行のあとに次を書いてください。
addButton.addEventListener("click", function () {
console.log("ボタンがクリックされました");
});
ブラウザでボタンをクリックすると、Console にメッセージが出ます。
ここで押さえたいポイントは次です。
addEventListener は「このイベントが起きたら、この処理を実行して」という登録
“click” は「クリックされたとき」というイベント名
function () { … } は「そのときに実行する処理のかたまり」
「ユーザーの操作」と「その結果発生する処理」をつなぐのが、イベントです。
ここを理解すると、一気に「アプリらしさ」が出てきます。
入力欄の値を取得してログに出す
クリックされたとき、入力欄の中身を取得してみます。
addButton.addEventListener("click", function () {
const text = input.value;
console.log("入力されたテキスト:", text);
});
ここでの重要ポイントは input.value です。
value は「フォームに入力された値」を表すプロパティで、
入力欄関連では超頻出ワードです。
Day 4: 画面に ToDo 項目を追加する
innerHTML と textContent の違いを知る
まずは超シンプルに、「文字をそのまま表示する」ところから始めます。
app.js のクリックイベント内を次のように書き換えます。
addButton.addEventListener("click", function () {
const text = input.value;
const item = document.createElement("p");
item.textContent = text;
list.appendChild(item);
input.value = "";
});
動かしてみてください。
入力 → 追加ボタン → 下に p 要素が増えていく、という動作になっていれば成功です。
ここでの重要ポイントを一つずつ噛み砕きます。
document.createElement(“p”)
新しい p 要素を JavaScript で作る。まだ画面には出ていない。
item.textContent = text
その要素の中身のテキストを設定する。HTML タグとしてではなく、純粋な文字として扱う。
list.appendChild(item)
今作った要素を、todo-list の中に「子要素として追加する」。ここで初めて画面に現れる。
input.value = “”
入力欄を空に戻す。ユーザーにとっての「気持ちよさ」を作る大事な一行。
innerHTML というプロパティもありますが、初級のうちは textContent を優先して使うのがおすすめです。
innerHTML は HTML タグとして解釈されるので、扱いが少し難しくなります。
Day 5: データを配列で持ち、画面を「再描画」する考え方
実務で重要な「状態と表示の分離」
ここから少し「初級」らしい話になります。
今のやり方は「入力のたびに DOM を直接いじる」形です。
これでも動きますが、機能が増えると管理が難しくなります。
そこで、次のように考え方を変えます。
やることの中身は JavaScript の配列で持つ
画面は「その配列の中身を元に描画する」
このスタイルは、React や Vue などのフレームワークにもつながる、とても重要な考え方です。
配列にデータをためてから描画する
app.js を少し整理してみます。
まず、ファイルの先頭付近で配列を用意します。
const input = document.getElementById("todo-input");
const addButton = document.getElementById("add-btn");
const list = document.getElementById("todo-list");
const todos = [];
次に、「配列から画面を描画する」関数を作ります。
function render() {
list.textContent = "";
for (let i = 0; i < todos.length; i++) {
const item = document.createElement("p");
item.textContent = todos[i];
list.appendChild(item);
}
}
そして、クリック時の処理を次のようにします。
addButton.addEventListener("click", function () {
const text = input.value;
if (text === "") {
return;
}
todos.push(text);
render();
input.value = "";
});
ここでの重要ポイントは次です。
todos 配列が「本当のデータの置き場（状態）」
render 関数は「状態をもとに画面を組み立て直す」係
クリック時は「状態を更新 → render で再描画」という流れ
この「状態（データ）と表示（DOM）を分ける」という発想が身につくと、
どんなアプリにも応用が効くようになります。
Day 6: 削除機能を追加して、少し複雑な動きを作る
各項目に削除ボタンを付ける
今度は、各 ToDo に「削除」ボタンを付けてみます。
render 関数を次のように書き換えます。
function render() {
list.textContent = "";
for (let i = 0; i < todos.length; i++) {
const wrapper = document.createElement("div");
const item = document.createElement("span");
item.textContent = todos[i];
const delButton = document.createElement("button");
delButton.textContent = "削除";
delButton.addEventListener("click", function () {
todos.splice(i, 1);
render();
});
wrapper.appendChild(item);
wrapper.appendChild(delButton);
list.appendChild(wrapper);
}
}
ここでかなり多くの要素が出てくるので、一つずつ整理します。
wrapper は ToDo と削除ボタンをまとめて包むコンテナ
span にテキストだけを入れることで、ボタンと横並びにしやすくする準備
button 要素に「削除」と表示
delButton のクリックイベント内で、todos から該当の要素を削除し、render で再描画
特に重要なのは、次の流れです。
どの項目が押されたか → そのインデックス i を利用
配列から該当要素を splice で削除
再び render して画面を作り直す
splice(i, 1) は「i 番目から 1 個削除」という意味です。
ここまで来ると、「自分が押したところだけが消える」という、
アプリらしい振る舞いがしっかり作れるようになっています。
Day 7: まとめと応用アイデア
今週で身についた「初級」らしい力
この 7 日間で、次のような力がついています。
HTML でフォームとボタンと表示領域を用意する力
JavaScript で DOM 要素を取得し、イベントを設定する力
入力値を取得し、配列に保存して管理する力
配列をもとに画面を再描画する render パターン
削除機能のような「少し複雑な操作」を、自分で組み立てる力
ここまでできると、「おみくじ」「ToDo」「簡単なタイマー」「カウントアップ」など、
身近なミニアプリであれば、かなり自由に作ったり改造できるレベルです。
これからの応用アイデア
ここから先に進むときの方向性として、いくつか挙げておきます。
期限付き ToDo（締め切り日を入力して表示）
完了チェック（チェックボックスで完了済みを見た目で区別）
ローカルストレージを使って「ページを閉じても ToDo が残る」
