前回の関数から、扱うデータのまとまりへ
前回のE-07では、入力・処理・出力を持つ部品として関数を学びました。さらにその前のE-06では、同じ処理を繰り返すループを見ました。そのループが1件ずつ回していた対象こそ、今回学ぶ配列です。業務で扱うデータの多くは、1件だけでなく複数件のまとまりで届きます。たとえば経費の明細や社員の名簿は、いつも「複数件の並び」です。まずは、このまとまりの形を正しくつかんでいきましょう。
このスライドのポイント
- E-07: 入力・処理・出力を持つ部品として関数を学んだ
- E-06: 同じ処理を繰り返すループを学んだ。そのループが回していた対象が配列
- 業務データは1件だけでなく「複数件のまとまり」で扱うことが多い
配列・要素・インデックスの定義
配列とは、順序を持った値の並びのことです。並びの中の1つずつの値を、要素と呼びます。そして、それぞれの要素の位置を表す番号をインデックスと呼び、これは1ではなく0から始まります。つまり1件目のインデックスは0、2件目は1、という数え方になります。この0始まりが、今回いちばん大切な点です。さらに配列は、全体の長さ、つまり件数も持っています。
このスライドのポイント
- 配列＝順序を持った値の並び
- 要素＝並びの中の1つずつの値
- インデックス＝要素の位置を表す番号。0から始まる（1件目は0、2件目は1）
- 配列は長さ（件数）を持つ
なぜ「0始まり」を知る必要があるか
このインデックスが0から始まる、という点を知らないと、「1件目が取れない」「最後の1件だけ抜ける」といったバグの原因が読めません。これはバイブコーディングで頻繁に起きる、位置のずれによる不具合です。また、配列を知らないと、画面に一覧が表示される裏側で何が起きているのかを想像できません。データのまとまりを扱う感覚は、コードを読む土台になります。
このスライドのポイント
- 知らないと:「1件目が取れない」「最後の1件だけ抜ける」系のバグの原因が読めない
- 位置のずれによる不具合はバイブコーディングで頻出
- 配列を知らないと、画面の一覧表示の裏側を想像できない
配列の構造——「n件の最後はn-1」
配列の構造を図で見ます。たとえば1200、800、500という3件の配列があるとします。左から順に、インデックス0に1200、1に800、2に500が入っています。要素は3つですが、最後の要素のインデックスは2です。ここで覚えておきたいのは、n件の配列の最後のインデックスはn-1、という関係です。この関係が、位置を正しく指すための基本になります。
このスライドのポイント
- 例: [1200, 800, 500] という3件の配列
- インデックス0に1200、1に800、2に500
- 要素は3つ、最後の要素のインデックスは2
- 覚える関係:「n件の配列の最後のインデックスはn-1」
Webアプリでの配列——一覧表示の裏側
身近な例で確かめます。日報の一覧、商品の一覧、検索結果——画面に一覧として並ぶものは、すべて配列を1件ずつ描いた結果です。前に見たD-04のレスポンスでも、ボディに複数件のデータが配列として届き、それを画面に並べる、という流れになります。つまり、サーバーから届いた配列を、E-06のループで1件ずつ処理して表示している、というわけです。ここまでの道具がつながって、一覧表示になります。
このスライドのポイント
- 日報一覧・商品一覧・検索結果——画面の「一覧」はすべて配列を1件ずつ描いた結果
- D-04のレスポンスのボディに複数件が配列で届く→画面に並ぶ
- 届いた配列をE-06のループで1件ずつ処理して表示
技術サンプルカード
サンプルコードで参照の仕方を確かめます。pricesという配列に対して、priceの0番、つまり[0]と書くと1件目の1200が取れます。lengthは件数の3を返します。そして最後の要素は、lengthから1を引いた位置、つまり[2]で取り出せます。読み方の要点は、位置を指定する角かっこの0が1件目にあたること、最後の要素はlengthから1を引いた位置になること、の2つです。AIが書いた一覧処理を確認するときは、データが0件・1件・大量のときにどう動くかを聞くのが有効です。
混同しやすい概念——インデックスと件数
混同しやすいのは、インデックスと件数の数え方です。インデックスは0から始まる位置番号、件数は1から数える個数です。3件の配列は、件数としては3ですが、最後の要素のインデックスは2になります。この、3件なのに最後は2、というずれが、境界のバグを生みます。数えるときと位置を指すときで、始まりの数が違う、と意識してください。
このスライドのポイント
- インデックス: 0から始まる位置番号
- 件数: 1から数える個数
- 3件の配列は、件数は3だが最後の要素のインデックスは2
バイブコーディングでの確認点——0件を疑う
バイブコーディングでの確認点です。一覧を扱うコードをAIに作らせたら、「データが0件のときの表示はどうなりますか」を必ず確認してください。件数が1件以上あることを前提にした処理は、空のときに崩れがちです。この、何もないときにどう見せるか、という空の状態の設計は、後のH章でも扱う大切な観点です。まずは0件を疑う癖をつけましょう。
このスライドのポイント
- 一覧を扱うコードには「データが0件のときの表示はどうなりますか」を必ず確認
- 件数が1件以上ある前提の処理は、空のときに崩れがち
- 「何もないときにどう見せるか」（空の状態の設計）は後のH章でも扱う観点
まとめと次回
最後に一問一答です。3件の配列の、最後の要素のインデックスは何番でしょうか。……答えは2です。0から始まるので、3件目は2番になります。30秒まとめです。配列は順序を持つ値の並び、その1つずつが要素、位置番号がインデックスで0始まり、件数はlengthで分かります。次回のE-09では、順序ではなく名前でデータをまとめる、オブジェクトを学びます。関連資料は「業務アプリDB設計パターン50」と「AI開発ワード100」です。
このスライドのポイント
- 一問一答:「3件の配列の、最後の要素のインデックスは？」→ 答: 2（0始まりのため）
- 30秒まとめ: 配列＝順序を持つ並び、要素＝1つずつの値、インデックス＝0始まりの位置番号、件数＝length
- 次回: E-09 オブジェクト（順序ではなく名前でまとめる）
- 関連資料:「業務アプリDB設計パターン50」「AI開発ワード100」
