はじめてのTypeScriptプログラミング入門 30日コース | TypeScriptとプログラミング基礎 － Day 6：配列

TypeScript 30日で身につけるTypeScript
スポンサーリンク
スポンサーリンク
  1. Day 6：配列で「まとまったデータを扱う力」の感覚をつかむ
  2. 配列とは何か
  3. 配列の型：string[] / number[] / Array<T>
    1. number[]（数値の配列）
    2. string[]（文字列の配列）
    3. Array<T>（ジェネリック型）
  4. length：配列の長さを知る
  5. push / pop / shift / unshift：配列を操作する基本メソッド
    1. push：末尾に追加
    2. pop：末尾を削除
    3. unshift：先頭に追加
    4. shift：先頭を削除
  6. インデックス：配列の要素を取り出す
  7. 実践：成績管理プログラムを作る
  8. 点数追加（push）
  9. 点数表示（for…of）
  10. 合計（for 文で足し合わせる）
  11. 平均（合計 ÷ length）
  12. 最高点（Math.max）
  13. 最低点（Math.min）
  14. 成績管理まとめテンプレート
  15. Day 6のまとめ
  16. Day 6：配列で「まとまった情報」を扱う感覚を身につける
  17. 配列の基本と型の考え方
    1. 配列とは
    2. 配列の型：string[] / number[] / Array<T>
  18. length とインデックス：配列の「長さ」と「位置」
    1. length：要素の数を知る
    2. インデックス：0から始まる番号でアクセスする
  19. push / pop / shift / unshift：配列を操作する基本メソッド
    1. push：末尾に追加
    2. pop：末尾を削除
    3. unshift：先頭に追加
    4. shift：先頭を削除
  20. 練習1：名前一覧を作って表示する
    1. 名前一覧の作成
    2. 名前を1つずつ表示する（for…of）
  21. 練習2：商品価格一覧を作る
    1. 商品価格一覧の作成
    2. 価格を1つずつ表示する
  22. 練習3：数値の合計を求める
    1. 合計のロジック
  23. 練習4：最大値検索（最大の数を見つける）
    1. 最大値検索のロジック（手書き版）
    2. Math.max を使う方法（スプレッド構文）
  24. 練習5：最小値検索（最も小さい数を見つける）
    1. 最小値検索のロジック（手書き版）
    2. Math.min を使う方法
  25. Day 6 練習まとめテンプレート
  26. Day 6のまとめ

Day 6：配列で「まとまったデータを扱う力」の感覚をつかむ

Day 6では、プログラミングで頻繁に使う“配列”を扱います。 配列は、複数のデータをひとまとめにして管理できる便利な入れ物です。 今日は、成績管理をテーマにして、点数の追加・表示・合計・平均・最高点・最低点まで、配列をフル活用していきます。

配列とは何か

配列（Array）は、複数の値を順番に並べて保存できるデータ構造です。

const scores = [80, 90, 75];
TypeScript

このように、[] の中に値を並べるだけで配列が作れます。

配列の型：string[] / number[] / Array<T>

TypeScriptでは、配列の型を明示できます。

number[]（数値の配列）

const scores: number[] = [80, 90, 75];
TypeScript

string[]（文字列の配列）

const names: string[] = ["Alice", "Bob", "Charlie"];
TypeScript

Array<T>（ジェネリック型）

const scores: Array<number> = [80, 90, 75];
TypeScript

どちらも同じ意味ですが、初心者には number[] の方が読みやすいです。

length：配列の長さを知る

const scores = [80, 90, 75];
console.log(scores.length); // 3
TypeScript

push / pop / shift / unshift：配列を操作する基本メソッド

push：末尾に追加

scores.push(88); // [80, 90, 75, 88]
TypeScript

pop：末尾を削除

scores.pop(); // 最後の要素を削除
TypeScript

unshift：先頭に追加

scores.unshift(100); // [100, 80, 90, 75]
TypeScript

shift：先頭を削除

scores.shift(); // 先頭の要素を削除
TypeScript

インデックス：配列の要素を取り出す

配列は 0 から始まる番号（インデックス）で管理されています。

const scores = [80, 90, 75];

console.log(scores[0]); // 80
console.log(scores[1]); // 90
console.log(scores[2]); // 75
TypeScript

実践：成績管理プログラムを作る

ここからは、配列を使って成績管理をしてみます。

点数追加（push）

// scores.ts
let scores: number[] = [80, 90, 75];

console.log("初期の点数:", scores);

// 点数を追加
scores.push(88);
scores.push(92);

console.log("点数追加後:", scores);
TypeScript

点数表示（for…of）

console.log("=== 点数一覧 ===");

for (const score of scores) {
  console.log(score);
}
TypeScript

合計（for 文で足し合わせる）

let sum: number = 0;

for (const score of scores) {
  sum += score;
}

console.log("合計:", sum);
TypeScript

平均（合計 ÷ length）

const average: number = sum / scores.length;

console.log("平均:", average);
TypeScript

最高点（Math.max）

const maxScore: number = Math.max(...scores);
console.log("最高点:", maxScore);
TypeScript

最低点（Math.min）

const minScore: number = Math.min(...scores);
console.log("最低点:", minScore);
TypeScript

成績管理まとめテンプレート

// day6-practice.ts
// Day 6：成績管理プログラム

// 1. 初期データ
let scores: number[] = [80, 90, 75];

console.log("初期の点数:", scores);

// 2. 点数追加
scores.push(88);
scores.push(92);

console.log("点数追加後:", scores);

// 3. 点数表示
console.log("=== 点数一覧 ===");
for (const score of scores) {
  console.log(score);
}

// 4. 合計
let sum: number = 0;
for (const score of scores) {
  sum += score;
}
console.log("合計:", sum);

// 5. 平均
const average: number = sum / scores.length;
console.log("平均:", average);

// 6. 最高点
const maxScore: number = Math.max(...scores);
console.log("最高点:", maxScore);

// 7. 最低点
const minScore: number = Math.min(...scores);
console.log("最低点:", minScore);
TypeScript

Day 6のまとめ

Day 6では、配列の基本操作をしっかり体験しました。

  • 配列の型（number[], string[], Array<T>）
  • 配列の長さ（length）
  • 要素の追加・削除（push, pop, shift, unshift）
  • インデックスで要素を取り出す
  • for…of で配列をループする
  • 成績管理で、合計・平均・最高点・最低点を計算する

配列は、プログラミングの中でも特に出番が多いデータ構造です。 今日の成績管理プログラムは、ぜひ点数を増やしたり、削除したり、平均の計算方法を変えたりして遊んでみてください。

Day 6：配列で「まとまった情報」を扱う感覚を身につける

Day 6では、複数のデータをひとまとめにして扱うための「配列」をテーマに進めていきます。 名前一覧・商品価格一覧・数値の合計・最大値検索・最小値検索という、実務でもよく登場するパターンを通して、配列の基本操作を体に馴染ませていきます。

配列の基本と型の考え方

配列とは

配列（Array）は、同じ種類の値を順番に並べて保存できる入れ物です。

const names = ["Alice", "Bob", "Charlie"];
const prices = [1200, 3500, 980];
TypeScript

このように、[] の中に値を並べるだけで配列が作れます。

配列の型：string[] / number[] / Array<T>

TypeScriptでは、配列の「中身の型」を明示できます。

// 文字列の配列
const names: string[] = ["Alice", "Bob", "Charlie"];

// 数値の配列
const prices: number[] = [1200, 3500, 980];

// ジェネリック型で書く場合
const scores: Array<number> = [80, 90, 75];
TypeScript

初心者の方には、string[] や number[] の書き方が直感的でおすすめです。

length とインデックス：配列の「長さ」と「位置」

length：要素の数を知る

const names: string[] = ["Alice", "Bob", "Charlie"];

console.log("名前の数:", names.length); // 3
TypeScript

インデックス：0から始まる番号でアクセスする

console.log(names[0]); // "Alice"
console.log(names[1]); // "Bob"
console.log(names[2]); // "Charlie"
TypeScript

ポイント：

  • 配列のインデックスは 0からスタート します。
  • 「1番目」ではなく「0番目」から始まることに、最初は少し違和感があるかもしれませんが、すぐ慣れていきます。

push / pop / shift / unshift：配列を操作する基本メソッド

push：末尾に追加

let names: string[] = ["Alice", "Bob"];

names.push("Charlie"); // ["Alice", "Bob", "Charlie"]
console.log(names);
TypeScript

pop：末尾を削除

names.pop(); // 最後の要素 "Charlie" が削除される
console.log(names); // ["Alice", "Bob"]
TypeScript

unshift：先頭に追加

names.unshift("Zoe"); // ["Zoe", "Alice", "Bob"]
console.log(names);
TypeScript

shift：先頭を削除

names.shift(); // 先頭の "Zoe" が削除される
console.log(names); // ["Alice", "Bob"]
TypeScript

ポイント：

  • push / pop は「末尾」、unshift / shift は「先頭」を操作します。
  • 配列の両端から要素を出し入れしたいときに使います。

練習1：名前一覧を作って表示する

まずは、文字列の配列を使って「名前一覧」を作ってみます。

名前一覧の作成

// names-list.ts
// 名前一覧を作る

let names: string[] = ["Alice", "Bob", "Charlie"];

console.log("=== 名前一覧（初期） ===");
console.log(names);

// 名前を追加
names.push("Diana");
names.push("Edward");

console.log("=== 名前一覧（追加後） ===");
console.log(names);
TypeScript

名前を1つずつ表示する（for…of）

console.log("=== 名前を1つずつ表示 ===");

for (const name of names) {
  console.log(name);
}
TypeScript

深掘りポイント：

  • for...of は「配列の中身」を順番に取り出すのに向いています。
  • names[i] のようにインデックスでアクセスする方法と合わせて覚えておくと便利です。

練習2：商品価格一覧を作る

次に、数値の配列を使って「商品価格一覧」を作ってみます。

商品価格一覧の作成

// prices-list.ts
// 商品価格一覧を作る

let prices: number[] = [1200, 3500, 980];

console.log("=== 商品価格一覧（初期） ===");
console.log(prices);

// 価格を追加
prices.push(2200);
prices.push(4500);

console.log("=== 商品価格一覧（追加後） ===");
console.log(prices);
TypeScript

価格を1つずつ表示する

console.log("=== 商品価格を1つずつ表示 ===");

for (const price of prices) {
  console.log(price, "円");
}
TypeScript

ポイント：

  • 数値の配列は、合計や平均、最大値・最小値などの計算と相性が良いです。
  • 「一覧表示」と「集計処理」をセットで考えると、配列のイメージがつかみやすくなります。

練習3：数値の合計を求める

ここからは、配列を使った「集計処理」に入っていきます。 まずは、数値の配列の合計を求めてみます。

合計のロジック

  • 最初に sum = 0 を用意しておく
  • ループの中で sum += value として、毎回足していく
// sum-values.ts
// 数値の合計を求める

let numbers: number[] = [10, 20, 30, 40, 50];

let sum: number = 0;

for (const n of numbers) {
  sum += n; // sum = sum + n と同じ意味
}

console.log("数値一覧:", numbers);
console.log("合計:", sum);
TypeScript

深掘りポイント：

  • 「ループの外で初期値を用意して」「ループの中で少しずつ更新する」という流れは、合計だけでなく、カウントや最大値・最小値の計算にも応用できます。
  • このパターンは、配列を使った集計処理の基本形として、ぜひ体に染み込ませておきたいところです。

練習4：最大値検索（最大の数を見つける）

次は、配列の中から「いちばん大きい値」を探してみます。

最大値検索のロジック（手書き版）

  • 最初に「仮の最大値」として、配列の最初の要素を入れておく
  • ループで回しながら、「今見ている値が最大値より大きければ更新する」
// max-value.ts
// 最大値を検索する

let numbers: number[] = [10, 50, 30, 80, 40];

let max: number = numbers[0]; // 最初の要素を仮の最大値にする

for (const n of numbers) {
  if (n > max) {
    max = n; // より大きい値が見つかったら更新
  }
}

console.log("数値一覧:", numbers);
console.log("最大値:", max);
TypeScript

Math.max を使う方法（スプレッド構文）

const max2: number = Math.max(...numbers);
console.log("最大値（Math.max版）:", max2);
TypeScript

深掘りポイント：

  • 手書きのロジックを理解しておくと、「最大値だけでなく、特定の条件に合う値を探す」といった応用がしやすくなります。
  • Math.max(...numbers) のような書き方は、配列を「個々の引数」に展開するスプレッド構文を使っています。

練習5：最小値検索（最も小さい数を見つける）

最大値と同じ考え方で、「いちばん小さい値」を探してみます。

最小値検索のロジック（手書き版）

// min-value.ts
// 最小値を検索する

let numbers: number[] = [10, 50, 30, 80, 40];

let min: number = numbers[0]; // 最初の要素を仮の最小値にする

for (const n of numbers) {
  if (n < min) {
    min = n; // より小さい値が見つかったら更新
  }
}

console.log("数値一覧:", numbers);
console.log("最小値:", min);
TypeScript

Math.min を使う方法

const min2: number = Math.min(...numbers);
console.log("最小値（Math.min版）:", min2);
TypeScript

深掘りポイント：

  • 最大値と最小値のロジックは、ほぼ対称的です。
  • 「条件を変えるだけで、別の意味の検索になる」という感覚を持っておくと、配列処理の応用がしやすくなります。

Day 6 練習まとめテンプレート

最後に、今日の練習内容をひとつのファイルにまとめたテンプレートを用意します。 このままコピーして、値を変えたり、配列を増やしたりしながら遊んでみてください。

// day6-practice.ts
// Day 6 練習まとめ：名前一覧・商品価格一覧・合計・最大値・最小値

console.log("=== 名前一覧 ===");

let names: string[] = ["Alice", "Bob", "Charlie"];

console.log("初期の名前:", names);

names.push("Diana");
names.unshift("Zoe");

console.log("追加・先頭挿入後の名前:", names);

console.log("1つずつ表示:");
for (const name of names) {
  console.log(name);
}

console.log("\n=== 商品価格一覧 ===");

let prices: number[] = [1200, 3500, 980];

console.log("初期の価格:", prices);

prices.push(2200);
prices.push(4500);

console.log("追加後の価格:", prices);

console.log("1つずつ表示:");
for (const price of prices) {
  console.log(price, "円");
}

console.log("\n=== 数値の合計 ===");

let numbers: number[] = [10, 20, 30, 40, 50];
let sum: number = 0;

for (const n of numbers) {
  sum += n;
}

console.log("数値一覧:", numbers);
console.log("合計:", sum);

console.log("\n=== 最大値検索 ===");

let max: number = numbers[0];

for (const n of numbers) {
  if (n > max) {
    max = n;
  }
}

console.log("最大値（手書きロジック）:", max);
console.log("最大値（Math.max版）:", Math.max(...numbers));

console.log("\n=== 最小値検索 ===");

let min: number = numbers[0];

for (const n of numbers) {
  if (n < min) {
    min = n;
  }
}

console.log("最小値（手書きロジック）:", min);
console.log("最小値（Math.min版）:", Math.min(...numbers));
TypeScript

Day 6のまとめ

Day 6では、

  • 配列の基本（string[], number[], Array<T>）
  • length とインデックスで「長さ」と「位置」を扱う方法
  • push, pop, shift, unshift で配列を操作する方法
  • 名前一覧・商品価格一覧の作成と表示
  • 数値の合計・最大値・最小値の計算

といった、配列の基礎と実践を一通り体験しました。

配列は、現実世界の「リスト」や「一覧」をそのままコードに持ち込める、とても頼りになる道具です。 今日のコードは、ぜひ名前や価格、数値の内容を変えながら、「こうすると結果がどう変わるか」を遊ぶように試してみてください。 配列が自然に使えるようになると、プログラムで扱える世界がぐっと広がっていきます。

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