夫のひきだし

夫が調べて、AI妻・嫁子が斬る

【第5回】AIに「このデータの形で作って」と言えるようになる｜配列とオブジェクト（嫁子が教えるTS講座）

学ぶ

今回のゴール

前回（変数と型）は値を1つずつ扱いました。今回はまとめて持つ方法です。全体の流れは講座の目次へ。

嫁子: 今日の内容はね、AIに指示を出すとき、いちばん効く知識だと思う。

「買い物リストを作って」だけだと、AIは勝手にデータの形を決めるの。名前だけの単純なリストにするか、値段や個数も持たせるか、選択肢はいくらでもある。

でも「{ name, price, done } を持った配列で作って」と言えたら、返ってくるものが一発で決まるんだよ。今日はその言い方を覚える回だね。

① 配列 — 順番に並べて持つ

複数の値を順番に並べたものです。[] で書きます。

const items = ["牛乳", "卵", "パン"];

console.log(items[0]);     // 牛乳
console.log(items.length); // 3

取り出すときは items[0] のように番号を指定します。番号は0から始まります。1番目が [0]、2番目が [1] です。

length は個数を返します。よく使うので覚えておいてください。

追加と削除もよく出てきます。

items.push("バター");   // 最後に追加
items.pop();           // 最後を取り出して削除

嫁子: 0から数えるの、最初は本当に気持ち悪いよね。私も理屈は知ってるけど、直感には反すると思う。

でもこれ、ほぼ全部のプログラミング言語で共通なの。だから慣れるしかない。「最後の要素は length - 1 番目」というのだけ覚えておくと、事故が減るよ。

② オブジェクト — 名前をつけて持つ

順番ではなく、名前（キー）で値を持つ形です。{} で書きます。

const item = {
  name: "牛乳",
  price: 250,
  done: false,
};

console.log(item.name);  // 牛乳
console.log(item.price); // 250

取り出すときは item.name のように名前を指定します。番号を覚える必要がないので、中身が増えても読めます。

配列 [] オブジェクト {}
何で取り出すか 番号 名前
向いているもの 同じ種類のものの並び 1つのものの属性
例 買い物リスト全体 リストの1品

この使い分けが、そのまま「データ設計」です。

③ 実際は組み合わせて使う

現実のデータは、たいていオブジェクトの配列になります。

const items = [
  { name: "牛乳", price: 250, done: false },
  { name: "卵",   price: 300, done: true },
  { name: "パン", price: 180, done: false },
];

console.log(items[1].name);  // 卵

「3件のデータがあり、それぞれが name・price・done を持っている」という形です。買い物リストも、ブログの記事一覧も、SNSの投稿一覧も、基本はこの形をしています。

嫁子: これが分かると、AIが返してくるコードの8割は「読める側」に入るよ。

Webの世界で扱うデータって、ほとんどがこの「オブジェクトの配列」なの。サーバーから届くデータも、この形で来ることが多いんだ。

だから items[1].name みたいな書き方を見て「1番目のデータの名前だな」と分かれば、もう迷子にならないよ。

④ 中身を取り出す書き方

配列を1件ずつ処理する書き方も、ここで見ておきます。ループの詳しい話は次回ですが、この形は本当によく出てきます。

const names = items.map((item) => item.name);
console.log(names);  // ["牛乳", "卵", "パン"]

map は「全部に同じ処理をして、新しい配列を作る」という命令です。上の例では、各データから名前だけを取り出しています。

const todo = items.filter((item) => item.done === false);

filter は「条件に合うものだけ残す」です。上は「まだ買っていないもの」だけを取り出しています。

嫁子: map と filter は、ReactやNext.jsを触ると毎日見ることになるよ。

今は書けなくていいの。「見たら意味が分かる」で十分だからね。実際に書くのはAIだし、あなたの仕事は「これは何を取り出そうとしているか」を判断することだよ。

つまずきポイント

{} はオブジェクト、[] は配列です。ここを取り違えると、エラーの意味がまったく分からなくなります。

undefined が出たら、たいてい名前の打ち間違いです。

console.log(item.nane);  // undefined（name の打ち間違い）

存在しない名前を指定しても、JavaScriptはエラーを出さずに undefined を返します。前回の「静かに壊れる」と同じ性質で、これも第3部のTypeScriptが解決する問題です。

嫁子: undefined はね、「そんなものは無い」という意味なの。エラーメッセージじゃなくて、値として返ってくる。

だから気づくのが遅れるんだよね。画面に何も出ないから原因を探したら、実は打ち間違いだった、というのは初心者だけじゃなくて誰でもやるよ。

今回のまとめ

次にやること

次回は条件分岐とループです。「もし〜なら」「全部に対して〜する」という、プログラムに判断させる部分に入ります。

今回の宿題：上の items を書き写して、items[2].price を console.log してみてください。そのあとわざと items[2].pryce と打ち間違えて、undefined が出るのも確認しておくと、あとで役に立ちます。

嫁子: 打ち間違いをわざとやるの、変な宿題だと思うでしょ。

でも「エラーじゃないのに、何も出ない」という状況を一度体験しておくと、実際に起きたとき原因にたどり着くのが早くなるんだよ。