JavaScript | 1 日 60 分 × 7 日アプリ学習：超初級編

7日目のゴールと今日のテーマ

7日目のテーマは「ここまで学んだピースを“1つのアプリの設計”としてつなげて理解し直すこと」です。
新しい文法を増やす日ではなく、「自分は何ができるようになったのか」を整理して、“設計の目”を育てる日です。

今日のゴールは三つです。
自分が使えるようになった要素（変数・条件・関数・配列・オブジェクト）を言葉で説明できる。
それらがどうつながって「ミニアプリ」になっているかを理解できる。
「こういうアプリなら、自分でも作れそう」と具体的にイメージできる。

ここまで行けたら、超初級7日間コースとしては、かなりいい締めくくりになります。

ここまでで手に入れた「5つのピース」を整理する

変数：アプリの「今の状態」を覚えておく箱

変数は、値を覚えておくための「名前付きの箱」でした。

数値（年齢、点数、合計金額）
文字列（名前、メッセージ、メニュー名）
計算結果（平均点、税込金額）

こういったものを、一時的に、あるいは継続的に保持するために使いました。

例えば、料金計算のときはこうでした。

let price = 500;
let quantity = 3;
let total = price * quantity;

let price = 500;
let quantity = 3;
let total = price * quantity;

ここでのポイントは、「意味のある名前をつける」ことです。
a や b ではなく、price や total といった名前にすることで、
コードを読んだときに「何の値なのか」がすぐにわかるようになります。

条件分岐：アプリに「判断させる」仕組み

条件分岐（if / else）は、「状況に応じて処理を変える」ための仕組みでした。

年齢によってメッセージを変える。
平均点によって「合格」「不合格」を分ける。
入力された番号が正しい範囲かどうかをチェックする。

こういう「もし〜なら」のロジックを、何度も書いてきました。

if (avg >= 80) {
  console.log("合格です！");
} else {
  console.log("不合格です…");
}

if (avg >= 80) {
  console.log("合格です！");
} else {
  console.log("不合格です…");
}

ここでの大事な感覚は、「条件は true / false を返す式」であることです。
avg >= 80 は、「平均点が80以上か？」という質問であり、
その答え（true / false）によって、実行されるコードが変わります。

関数：処理に名前をつけて「道具」にする

関数は、「よく使う処理に名前をつけて、何度でも呼び出せるようにしたもの」でした。

挨拶メッセージを出す。
平均点を計算する。
税込金額を計算する。
メニュー一覧を表示する。

こういった処理を、関数として切り出してきました。

function calcAverage(scores) {
  let sum = 0;
  for (let i = 0; i < scores.length; i = i + 1) {
    sum = sum + scores[i];
  }
  let average = sum / scores.length;
  return average;
}

function calcAverage(scores) {
  let sum = 0;
  for (let i = 0; i < scores.length; i = i + 1) {
    sum = sum + scores[i];
  }
  let average = sum / scores.length;
  return average;
}

ここでの重要ポイントは、「関数は“入力”を受け取り、“出力”を返す箱」として考えられることです。
入力（引数）として scores を受け取り、
出力（戻り値）として average を返す。
この「入ってきて、出ていく」という流れを意識できると、一気に設計が楽になります。

配列：複数の値を「順番付きのリスト」として扱う

配列は、「同じ種類の値を、順番付きでまとめて持つ箱」でした。

点数のリスト。
メニュー名のリスト。
やることリスト。

こういったものを、配列として扱ってきました。

let menus = ["カレー", "ラーメン", "サラダ"];

let menus = ["カレー", "ラーメン", "サラダ"];

for 文と組み合わせることで、「全要素を順番に処理する」ことができました。

for (let i = 0; i < menus.length; i = i + 1) {
  console.log(menus[i]);
}

for (let i = 0; i < menus.length; i = i + 1) {
  console.log(menus[i]);
}

ここでの大事な感覚は、「配列は“同じ種類のもの”をまとめる」ということです。
「点数と名前とメニュー名」を一緒に入れるのではなく、
「点数の配列」「メニューの配列」といった形で、種類ごとに分けて持つのが基本です。

オブジェクト：意味のある情報を「1セット」にまとめる

オブジェクトは、「名前付きの情報をまとめた1セット」でした。

人のプロフィール（名前＋年齢＋趣味）。
メニュー1件（名前＋値段）。

こういった「1つのものに、複数の属性がある」データを表現するために使いました。

let menu = {
  name: "カレー",
  price: 800
};

let menu = {
  name: "カレー",
  price: 800
};

そして、「オブジェクトの配列」で複数件を扱いました。

let menus = [
  { name: "カレー", price: 800 },
  { name: "ラーメン", price: 700 }
];

let menus = [
  { name: "カレー", price: 800 },
  { name: "ラーメン", price: 700 }
];

ここでの重要ポイントは、「1件＝1オブジェクト」「複数件＝オブジェクトの配列」という形が、
アプリのデータ構造の基本パターンになっていることです。

7日目のミニテーマ：「自分の頭の中でアプリの設計図を描く」

例題アプリ：シンプルな「学習記録リスト」

ここまでの要素を使って、「学習記録リスト」のミニアプリを頭の中で設計してみましょう。
仕様はこうします。

1回の学習記録は、「日付」「学習時間（分）」「内容」を持つ。
複数回の学習記録をリストとして持つ。
全学習時間の合計を計算して表示する。
1件ずつ、内容をきれいに表示する。

これを、コードで組み立てていきます。

データ構造を決める：オブジェクト＋配列

まず、「1回分の学習記録」をオブジェクトで表します。

let record = {
  date: "2026-01-09",
  minutes: 60,
  topic: "JavaScriptの配列とオブジェクト"
};

let record = {
  date: "2026-01-09",
  minutes: 60,
  topic: "JavaScriptの配列とオブジェクト"
};

これを複数件持つために、「オブジェクトの配列」にします。

let records = [
  { date: "2026-01-07", minutes: 45, topic: "変数と条件分岐" },
  { date: "2026-01-08", minutes: 60, topic: "関数とreturn" },
  { date: "2026-01-09", minutes: 50, topic: "配列とfor文" }
];

let records = [
  { date: "2026-01-07", minutes: 45, topic: "変数と条件分岐" },
  { date: "2026-01-08", minutes: 60, topic: "関数とreturn" },
  { date: "2026-01-09", minutes: 50, topic: "配列とfor文" }
];

ここでの設計のポイントは、「1件＝1オブジェクト」「複数件＝配列」という形を守っていることです。
これだけで、データ構造としてかなり“アプリっぽく”なっています。

合計学習時間を計算する関数

次に、「全学習時間の合計」を計算する関数を作ります。

function calcTotalMinutes(records) {
  let sum = 0;

  for (let i = 0; i < records.length; i = i + 1) {
    let record = records[i];
    sum = sum + record.minutes;
  }

  return sum;
}

function calcTotalMinutes(records) {
  let sum = 0;

  for (let i = 0; i < records.length; i = i + 1) {
    let record = records[i];
    sum = sum + record.minutes;
  }

  return sum;
}

使うときはこうです。

let total = calcTotalMinutes(records);
console.log("合計学習時間は " + total + " 分です。");

let total = calcTotalMinutes(records);
console.log("合計学習時間は " + total + " 分です。");

ここでの大事な感覚は、「配列の中のオブジェクトから、必要なプロパティだけを取り出して計算している」ということです。
record.minutes だけを見て、合計を出しています。

1件ずつきれいに表示する関数

次に、「1件ずつ表示する」関数を作ります。

function printRecords(records) {
  console.log("学習記録一覧：");

  for (let i = 0; i < records.length; i = i + 1) {
    let record = records[i];
    console.log("----");
    console.log("日付: " + record.date);
    console.log("時間: " + record.minutes + " 分");
    console.log("内容: " + record.topic);
  }
}

function printRecords(records) {
  console.log("学習記録一覧：");

  for (let i = 0; i < records.length; i = i + 1) {
    let record = records[i];
    console.log("----");
    console.log("日付: " + record.date);
    console.log("時間: " + record.minutes + " 分");
    console.log("内容: " + record.topic);
  }
}

使うときはこうです。

printRecords(records);

printRecords(records);

ここでのポイントは、「表示ロジックを関数に閉じ込めている」ことです。
これにより、「どう表示するか」を変えたくなったとき、
printRecords だけを直せばよくなります。

全体をつなげる

最後に、「合計時間」と「一覧表示」をまとめて呼び出します。

let records = [
  { date: "2026-01-07", minutes: 45, topic: "変数と条件分岐" },
  { date: "2026-01-08", minutes: 60, topic: "関数とreturn" },
  { date: "2026-01-09", minutes: 50, topic: "配列とfor文" }
];

let total = calcTotalMinutes(records);
console.log("合計学習時間は " + total + " 分です。");

printRecords(records);

let records = [
  { date: "2026-01-07", minutes: 45, topic: "変数と条件分岐" },
  { date: "2026-01-08", minutes: 60, topic: "関数とreturn" },
  { date: "2026-01-09", minutes: 50, topic: "配列とfor文" }
];

let total = calcTotalMinutes(records);
console.log("合計学習時間は " + total + " 分です。");

printRecords(records);

これで、「学習記録リストアプリ」の最小バージョンが完成です。

ここまでの流れを言葉にすると、

データ構造を決める（オブジェクト＋配列）。
計算ロジックを関数にする（合計時間）。
表示ロジックを関数にする（一覧表示）。
最後に、それらを組み合わせて「アプリっぽい流れ」にする。

という設計になっています。

「自分なら何を作ってみたいか」を言葉にしてみる

7日間で身についた“設計の目”

この7日間で、あなたはすでにこういうことができるようになっています。

1つの値を変数として持てる。
条件によって処理を変えられる。
処理に名前をつけて、関数として再利用できる。
複数の値を配列として扱い、for 文で回せる。
意味のある情報をオブジェクトとしてまとめ、オブジェクトの配列で複数件を扱える。

これはもう、「アプリの中身を組み立てるための最低限の道具セット」です。
あとは、「何を作りたいか」を決めれば、その方向に少しずつ組み立てていけます。

小さくていいから「自分のアプリ」をイメージする

例えば、こんなものが作れそうです。

1週間の学習記録をつけて、合計時間と平均時間を出すアプリ。
お気に入りの本リスト（タイトル＋著者＋メモ）を表示するアプリ。
簡単な家計簿（項目＋金額）を配列＋オブジェクトで持って、合計を出すアプリ。

どれも、もうあなたが持っているピースだけで組み立てられます。

7日目のまとめと、これからの一歩

7日目は、「新しい文法」ではなく、「自分ができることを設計としてつなげる日」でした。

変数・条件分岐・関数・配列・オブジェクトという5つのピースが、
バラバラの知識ではなく、「アプリの設計図」として頭の中でつながり始めているはずです。

最後に、一つだけ本気で聞きたい。

この7日間で、「あ、自分でもこういうのなら作れそうだな」と感じたアプリは、何でしたか？
学習記録かもしれないし、メニューアプリかもしれないし、全然別の何かかもしれない。

その「作れそう」と感じたイメージが、あなたとプログラミングの一番大事な接点です。
そこから先は、「文法を覚える勉強」ではなく、「作りたいものに向かって必要なものを取りに行く旅」になります。