JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day30：総復習

JavaScript JavaScript
スポンサーリンク

Day30 前半のゴール

ここまで 29 日間かけて作ってきた TODO アプリは、
「小さな Web アプリ」としてちゃんと成立しています。

Day30 は総復習。前半では、次のポイントを一つずつ確認していきます。

条件分岐を書けるか
配列を操作できるか
DOM を変更できるか
イベント処理ができるか

「なんとなく分かる」ではなく、
「自分でゼロから書ける」に近づけるのが今日のテーマです。

条件分岐を書けるかを確認する

条件分岐の基本形を言葉で説明できるか

条件分岐は、JavaScript の if 文です。
形はとてもシンプルで、こうです。

if (条件) {
  // 条件が true のときに実行される処理
} else {
  // それ以外のときに実行される処理
}
JavaScript

大事なのは、「条件の部分に true / false が入る式を書く」という感覚です。
例えば、text === "" や count > 0 のようなものです。

TODO アプリでよく使ったのは、
「入力が空なら何もしない」という条件でした。

const text = taskInputElement.value.trim();

if (text === "") {
  return;
}
JavaScript

ここでは、

入力が空文字列なら return で処理を中断する
空でないときだけ、タスク追加の処理に進む

という分岐を作っています。

例題：条件分岐でメッセージを切り替える

次のようなコードを考えてみましょう。

const score = 80;

if (score >= 70) {
  console.log("合格です");
} else {
  console.log("不合格です");
}
JavaScript

この if 文は、「score が 70 以上かどうか」でメッセージを分けています。
条件分岐の本質は、「状況に応じて処理を変える」ことです。

TODO アプリでも、

入力が空かどうか
チェックボックスが ON か OFF か
localStorage にデータがあるかどうか

といった条件で、処理を分けてきました。

配列を操作できるかを確認する

配列は「順番付きの箱」のイメージ

配列は、複数の値を順番付きでまとめて持つための仕組みです。

const fruits = ["りんご", "バナナ", "みかん"];
JavaScript

ここで重要なのは、

0 番目が “りんご”
1 番目が “バナナ”
2 番目が “みかん”

という「インデックス（番号）」の考え方です。

TODO アプリでは、tasks という配列をずっと使ってきました。

let tasks = [
  { title: "買い物に行く", isDone: false },
  { title: "メールを送る", isDone: true }
];
JavaScript

ここでは、
「タスクオブジェクトを並べた配列」という形になっています。

配列に追加・削除ができるか

配列の基本操作は、最低限この 2 つです。

push で末尾に追加する
splice で指定した位置を削除する

例として、タスクを追加するコードはこうでした。

function addTask(text) {
  const task = {
    title: text,
    isDone: false
  };
  tasks.push(task);
}
JavaScript

削除はこうです。

function deleteTask(index) {
  tasks.splice(index, 1);
}
JavaScript

ここでのポイントは、

配列の「どの位置」を操作するかは index で決まる
配列の中身は「オブジェクト」でもいい

という 2 点です。

例題：配列の中身をループで表示する

配列を扱うときにほぼ必須なのが、forEach です。

const fruits = ["りんご", "バナナ", "みかん"];

fruits.forEach((fruit, index) => {
  console.log(index, fruit);
});

TODO アプリでは、
この forEach を使って tasks から DOM を作っていました。

tasks.forEach((task, index) => {
  // task.title や task.isDone を使って要素を作る
});
JavaScript

「配列をループして、一つずつ処理する」という感覚が
しっかり身についているかを、ここで確認しておきましょう。

DOM を変更できるかを確認する

DOM は「画面の部品そのもの」

DOM（Document Object Model）は、
ブラウザが HTML を「木構造のオブジェクト」として扱ったものです。

JavaScript から DOM を触ることで、
画面の内容を自由に変えられます。

例えば、次のような HTML があるとします。

<div id="message"></div>

これに JavaScript で文字を入れるには、こう書きます。

const messageElement = document.getElementById("message");
messageElement.textContent = "こんにちは";
JavaScript

TODO アプリでは、
タスクリストの中身を全部作り直すときに、こうしていました。

taskListElement.textContent = "";
JavaScript

これは、「中身を一旦空にする」という DOM 操作です。

要素を作って、組み立てて、追加する

DOM 操作の基本パターンは、次の 3 ステップです。

要素を作る
中身や属性を設定する
親要素に追加する

例えば、タスク1件分の表示はこうでした。

const taskItemElement = document.createElement("div");

const taskTextElement = document.createElement("span");
taskTextElement.textContent = task.title;

taskItemElement.appendChild(taskTextElement);
taskListElement.appendChild(taskItemElement);
JavaScript

ここで大事なのは、

「画面に見えるものは、全部 DOM 要素として存在している」
「JavaScript からそれを作ったり、消したり、書き換えたりできる」

という感覚です。

例題：ボタンを追加してメッセージを変える

次の HTML を考えます。

<p id="status">まだクリックされていません</p>
<button id="changeButton">変更</button>

これに対して、ボタンを押したらメッセージを変えるコードはこうです。

const statusElement = document.getElementById("status");
const changeButtonElement = document.getElementById("changeButton");

changeButtonElement.addEventListener("click", () => {
  statusElement.textContent = "クリックされました！";
});
JavaScript

ここには、

DOM 要素を取得する
イベントを登録する
textContent を書き換える

という、Web アプリの基本が全部入っています。

イベント処理できるかを確認する

「何が起きたら、何をするか」を書けるか

イベント処理は、
「ユーザーの操作に反応してコードを動かす」仕組みです。

よく使うのは addEventListener です。

要素.addEventListener("イベント名", () => {
  // イベントが起きたときに実行したい処理
});
JavaScript

TODO アプリで一番よく見たのは、クリックイベントでした。

addButtonElement.addEventListener("click", () => {
  // タスクを追加する処理
});
JavaScript

チェックボックスの完了機能では、change イベントも使いました。

checkboxElement.addEventListener("change", () => {
  // 完了状態を切り替える処理
});
JavaScript

ここで大事なのは、

「イベントが起きたときに呼ばれる関数」を自分で書けるか
その中で、配列や DOM を正しく操作できるか

という 2 点です。

例題：入力欄の Enter キーで処理を実行する

少し応用として、キー入力のイベントを考えてみます。

<input id="nameInput" />
<p id="greeting"></p>

Enter キーが押されたら挨拶を表示するコードはこうです。

const nameInputElement = document.getElementById("nameInput");
const greetingElement = document.getElementById("greeting");

nameInputElement.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    const name = nameInputElement.value.trim();
    if (name === "") {
      return;
    }
    greetingElement.textContent = `こんにちは、${name} さん`;
  }
});
JavaScript

ここには、

イベントオブジェクト（event）を受け取る
event.key で押されたキーを判定する
条件分岐と DOM 操作を組み合わせる

という、かなり実践的な要素が詰まっています。

Day30 前半のまとめ

Day30 前半で確認したのは、次の 4 つです。

条件分岐で処理を分けられるか
配列を使って複数のデータを扱えるか
DOM を作ったり書き換えたりできるか
イベント処理で「ユーザーの操作に反応」できるか

TODO アプリは、これら全部の組み合わせでできています。

後半では、
「小規模 Web アプリを自分で組み立てられるか」
という視点で、これらを一気にまとめていきます。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました