JavaScriptで何ができるんだろう？ その2

前回AI先生に「JavaScriptで何ができるの？」って聞いたら、一覧の中で「インタラクション」「入力チェック」「動的表示」の具体例を教えてもらいました。今回は「データ操作」についてわかりやすい事例を教えてもらいます。

前回のおさらい
データ操作
まとめ

前回のおさらい

【済】インタラクション：メニュー開閉、タブ切り替え、モーダル表示
【済】入力チェック：必須チェック、文字数・メール形式の検証
【済】動的表示：時計、カウントダウン、スライドショー
データ操作：計算、条件分岐、繰り返し処理
保存：ブラウザにメモ（localStorage）
通信：サーバーやAPIからデータ取得
描画：Canvasで図形・グラフ

あるく

前回はWeb上で動きが多いものが多かったけど、今回も似たようなものなのかな？

AI先生

今回は少し性質が違います。前回は“見た目の動き”が中心でしたが、今回のテーマは“データをどう扱うか”です。たとえば、計算や条件分岐、繰り返し処理で処理の流れを作ったりと、より“ロジック寄り”の内容になります。

データ操作

🧮 1. 計算（四則演算の基本）

💡イメージ

「買い物の合計金額を計算する」ような処理。

💻 例：商品価格の合計を出す

const apple = 120;
const banana = 150;
const total = apple + banana;

console.log("合計金額は " + total + "円です。");

🗣️出力結果：

合計金額は 270円です。

👉 JavaScriptは +、-、*、/、%（あまり）を使って計算できます。
※ + は数値だけでなく、文字列をつなぐときにも使われます。

⚖️ 2. 条件分岐（if文）

💡イメージ

「もし◯◯なら〜する、そうでなければ〜する」という判断。
たとえば「合計金額が200円を超えたら、ポイント付与」。

💻 例：条件でメッセージを変える

const total = 270;

if (total >= 200) {
  console.log("ポイントがつきます！");
} else {
  console.log("ポイント対象外です。");
}

🗣️出力結果：

ポイントがつきます！

👉 if (条件) { 処理 } else { 処理 } の形で使います。
複数条件なら else if もOKです。

🔁 3. 繰り返し処理（for文・while文）

💡イメージ

「同じ作業を何回も繰り返す」。
たとえば「1から5までの数字を順に表示する」など。

💻 例：for文で数字を表示

for (let i = 1; i <= 5; i++) {
  console.log(i + "回目のループです");
}

🗣️出力結果：

1回目のループです
2回目のループです
3回目のループです
4回目のループです
5回目のループです

👉 「最初の値 → 繰り返し条件 → 1回ごとの増加量」という流れ。
i++ は「i = i + 1」の短縮形です。

あるく

このあたり今Progateでやっているよ。基本的な計算とか繰り返し処理とか、Excelのマクロに近いような動きだよね。

AI先生

そうですね、とても良い感覚です。JavaScriptの条件分岐や繰り返しは、Excelのマクロ（VBA）にも通じる“処理の流れを自動化する考え方”です。Excelでの経験があるあるくさんには、理解しやすい部分だと思いますよ。

あるく

ある程度理解しているので飲み込みは早いと思うんだけど、なかなか細かいところが覚えられないよね。使っている記号の種類やらどこに何を入れればいいのかとか・・・

AI先生

それは自然なことです。最初は記号や構文を正確に覚えるよりも、実際に手を動かして“動く感覚”をつかむほうが大切です。何度か書いて動かすうちに、自然と体で覚えられるようになりますよ。

💡 3つを組み合わせた応用例

💻 例：テストの点数から平均を出して合否判定する

const scores = [80, 70, 90];
let sum = 0;

for (let i = 0; i < scores.length; i++) {
  sum += scores[i]; // 合計を計算
}

const avg = sum / scores.length;

console.log("平均点：" + avg);

if (avg >= 75) {
  console.log("合格です！");
} else {
  console.log("もう少し頑張りましょう！");
}

🗣️出力結果：