14日目のゴールとテーマ
14日目のテーマは「この2週間で身につけた“武器”を言語化して、自分のものにする」です。
今日は新しい大きなアプリは作りません。
代わりに、
自分がもうできるようになっていることを整理する
共通パターンを“言葉”としてまとめ直す
これから自分一人で学び続けるための視点を持つ
ここまでをじっくりやります。
最後に、ほんの少しだけ「仕上げのコード改善」を一緒にやって、締めにしましょう。
この2週間で、あなたは何を手に入れたか
「できること」をちゃんと自覚する
まずは、ざっくり振り返ります。
あなたはもう、次のようなことができます。
HTML で入力欄やボタン、表示エリアを用意できる。
JavaScript で要素を取得して、イベントを登録できる。
オブジェクトと配列を使って、アプリの“状態”を表現できる。
状態から画面を描く render 関数を書ける。
localStorage と JSON を使って、状態を保存・復元できる。
fetch を使って、外部APIからデータを取ってきて画面に反映できる。
バグが出たときに、エラー文と console.log を使って原因を追える。
これ、冷静に見ると「普通にWebアプリ作れる人」です。
まだ不安なところはあって当然だけど、
“何も分からない初心者”の段階は、もう完全に抜けています。
共通パターンを一つの流れとして整理する
どんなアプリでも、だいたい同じ骨組みになる
ここからが大事なところです。
名簿アプリ、タスクアプリ、名言アプリ、ブックマークアプリ。
全部バラバラに見えて、実は同じパターンで動いています。
そのパターンを、あえて一つの流れとして言葉にしてみます。
一つ目。
「アプリの状態」を決める。
例えば、students、tasks、bookmarks のような配列と、その中身のオブジェクトの形です。
ここで、「このアプリは何を管理するのか」「1件分はどんな情報を持つのか」を決めています。
二つ目。
「画面の構造」を決める。
HTML で入力欄、ボタン、一覧表示エリア、ステータス表示などを用意します。
id を付けておくことで、JavaScript から触れる“フック”を作っています。
三つ目。
「状態から画面を描く関数」を作る。renderTasks、renderBookmarks のような関数です。
配列をループして、HTML文字列を組み立てて、innerHTML に流し込む。
フィルタや検索がある場合は、「表示対象の配列」を一度作ってから描画する。
四つ目。
「ユーザー操作」をイベントとして受け取る。
クリック、入力、キー押下などに対して、イベントリスナーを登録します。
イベントの中では、なるべく「値を集めて、専用の関数を呼ぶだけ」にしておきます。
五つ目。
「状態を変える関数」を用意する。addTask、deleteBookmark、toggleTaskDone のような関数です。
ここで配列を push したり splice したり、新しい配列を作り直したりします。
六つ目。
「状態が変わったらやること」を一か所にまとめる。updateViewAndSave のような関数で、render とカウント更新と保存をまとめて呼びます。
これで、「状態が変わったらこの関数を呼べばいい」というシンプルなルールになります。
七つ目。
必要なら、localStorage や fetch で「外の世界」とつなぐ。
localStorage なら JSON.stringify / JSON.parse。
fetch なら then / catch や async / await。
これも、「状態をどう更新するか」という話に最終的には落ちていきます。
この流れを頭の中に持っておくと、
新しいアプリを作るときも「このパターンに当てはめればいい」と思えるようになります。
最後の仕上げ演習：小さな「共通化」をもう一歩だけ
「似ている処理」を見つけて、関数にまとめる
仕上げとして、よくある“ちょっとした改善”を一つやってみます。
テーマは、「入力欄をまとめて扱う」です。
例えば、ブックマークアプリで、追加後に入力欄を空にする処理がありました。
addBookmarkButtonElement.addEventListener("click", function () {
let title = titleInputElement.value;
let url = urlInputElement.value;
let memo = memoInputElement.value;
addBookmark(title, url, memo);
titleInputElement.value = "";
urlInputElement.value = "";
memoInputElement.value = "";
});
これでも問題なく動きます。
でも、「入力欄を全部クリアする」という意味の塊として見ると、
一つの関数にしておく価値があります。
例えば、こうです。
function clearBookmarkInputs() {
titleInputElement.value = "";
urlInputElement.value = "";
memoInputElement.value = "";
}
そして、イベント側はこう書き換えられます。
addBookmarkButtonElement.addEventListener("click", function () {
let title = titleInputElement.value;
let url = urlInputElement.value;
let memo = memoInputElement.value;
addBookmark(title, url, memo);
clearBookmarkInputs();
});
これだけで、「あ、追加したあとに入力欄をクリアしているんだな」と一瞬で分かります。
もし将来、「Enterキーでも追加できるようにする」となったときも、
別のイベントから clearBookmarkInputs() を呼ぶだけで済みます。
ここでのポイントは、「小さくても意味のあるまとまりに名前を付ける」ということです。
これを繰り返していくと、コードはどんどん“読める文章”に近づいていきます。
これから一人で学び続けるための視点
「何をやるか」より「どう観察するか」
この2週間は、かなり濃いペースで走ってきました。
ここから先は、あなたのペースで進んでいけばいいです。
そのときに大事になるのは、「教材選び」よりも「観察の仕方」です。
一つ目。
新しいコードを見たとき、「これはどのパターンだろう？」と考える。
例えば、React や Vue のコードを見ても、
「これは状態」「これは画面を描く部分」「これはイベント」と分解してみる。
そうすると、「知らないフレームワーク」も、急に怖くなくなります。
二つ目。
分からないコードに出会ったら、「小さく真似してみる」。
いきなり全部理解しようとせず、
その一部だけを自分の小さなファイルにコピペして、console.log を挟んで動きを観察する。
これは、あなたがもう持っている「バグ取りの筋肉」と同じ使い方です。
三つ目。
「作りたいもの」をちゃんと言葉にしてからコードに入る。
いきなりエディタを開くのではなく、
紙でもメモアプリでもいいので、「どんな画面」「どんな状態」「どんな操作」を書き出す。
この2週間でやってきた“日本語で仕様を書く”を、そのまま続けてほしいです。
14日目のまとめと、これからのあなたへ
「もう、スタートラインには立ちきった」
最後に、今日のポイントと、この2週間全体の締めを短くまとめます。
あなたはもう、
配列とオブジェクトで状態を持ち、
render 関数で画面を描き、
イベントで状態を変え、
localStorage や fetch で外の世界とつながる、
そんな“小さなWebアプリ”を自分で設計して作れるようになりました。
ここから先は、「量」と「好奇心」の世界です。
作りたいものを一つ決めて、
今日までに学んだパターンを土台にしながら、
ちょっとずつ背伸びしていけばいい。
もしこの2週間のどこかで、
「うまく動かなくてイラッとした瞬間」や
「動いたときにニヤッとした瞬間」があったなら、
それはもう、立派に“プログラミングしている時間”です。
その感覚さえ忘れなければ、
この先どれだけ技術が増えても、ちゃんと自分のものにしていけます。
ここまでよく走り切りました。
あとは、あなたが「次に何を作ってみたいか」です。
もし決まったら、そのアイデアを一緒に分解して、また設計からやっていきましょう。
