オブジェクトと型

今日のゴール

行き先カードが3枚並びます(直島・台北・パリ)。

今日つかまえるバグ: place.name を place.nmae と打ち間違える事故。JavaScriptはこれを undefined と表示して終わります。

ミニ解説その1(JS): オブジェクト

いくつかの値をひとまとまりにして持ちたいことがあります。「直島・日本・2泊」はバラバラの3つではなく、1つの行き先です。これを表すのが オブジェクト です。

const place = { name: '直島', country: '日本', nights: 2 };
console.log(place.name); // 直島

{ 名前: 値, ... } の形で書き、.名前 で取り出します。{} はオブジェクト、[] は配列です。ここは混ざりやすいので、箱の図で覚えてください。

• [] … 順番に並んだ箱。「1番目、2番目…」
• {} … 名札のついた箱。「name、country…」

そして map。コース1で使った forEach は「1個ずつ実行するだけ」でしたが、map は 1個ずつ変換して、新しい配列を返します。カードのHTMLを作るのにぴったりです。

Aパート: JSで書く

新しいファイル src/places.js を作ります。このコースで初めて、自分でファイルを増やします。

export const places = [
  { name: '直島', country: '日本', nights: 2, lat: 34.46, lon: 133.99, currency: 'JPY' },
  { name: '台北', country: '台湾', nights: 4, lat: 25.04, lon: 121.56, currency: 'TWD' },
  { name: 'パリ', country: 'フランス', nights: 5, lat: 48.86, lon: 2.35, currency: 'EUR' },
];

export は「このファイルの外から使ってよい」という印です。受け取る側は import します。

src/main.ts からカードを描きます。

 import './style.css';+import { places } from './places';  const TRIP_DATE = '2026-09-19';

 const greeting = document.querySelector('#greeting')!; greeting.textContent = greet('はると', daysUntil(TRIP_DATE));++const placesBox = document.querySelector('#places')!;+placesBox.innerHTML = places+  .map(+    (place) => `+      <article class="place">+        <h3>${place.name}</h3>+        <p>${place.country} / ${place.nights}泊</p>+      </article>+    `,+  )+  .join('');

保存すると、カードが3枚出ます。ここまでがAパートです。

事故を踏む

${place.name} を ${place.nmae} に変えて保存してください。

画面のカードの見出しが undefined になります。開発サーバは止まりません。JavaScriptは「そんな名札の箱は無いね」と言うかわりに、静かに undefined を返して先へ進みます。第1章で覚えた「実行する係(Vite)は検査しない」がそのまま出ています。

いっぽう検査する係は、もう気づいています。 npm run check を打つと、この時点でこう出ます。

src/main.ts(25,21): error TS2339: Property 'nmae' does not exist on type '{ name: string; country: string; nights: number; lat: number; lon: number; currency: string; }'.

ミニ解説その2(TS): 型の世界と値の世界

ここから先ずっと使う地図を1枚。

値の世界(実行時に本当に存在するもの)
  const places = [...]        ← 実際のデータ
  function greet(...) {...}   ← 実際の処理

型の世界(検査のときだけ存在するもの)
  type Place = {...}          ← 形の宣言
  : string  : number          ← 注釈

  ビルドすると、型の世界はまるごと消える。

type は型の世界の住人です。値を入れることはできません。

Bパート: TSにする

places.js を F2 で places.ts にリネームします。呼び出し側(main.ts)は 1文字も直す必要がありません。拡張子を書かずに './places' と読み込んでいるからです。

-export const places = [+export type Place = {+  name: string;+  country: string;+  nights: number;+  lat: number;+  lon: number;+  currency: string;+};++export const places: Place[] = [   { name: '直島', country: '日本', nights: 2, lat: 34.46, lon: 133.99, currency: 'JPY' },   { name: '台北', country: '台湾', nights: 4, lat: 25.04, lon: 121.56, currency: 'TWD' },   { name: 'パリ', country: 'フランス', nights: 5, lat: 48.86, lon: 2.35, currency: 'EUR' }, ];

足したのは type Place = {...} と : Place[] だけで、データの行は1行も動いていません。Place[] は「Placeが並んだ配列」という意味です。

そして place.nmae をもう一度やってみてください。エラー文が変わります。

src/main.ts(25,21): error TS2339: Property 'nmae' does not exist on type 'Place'.

さっきの長い { name: string; country: string; ... } が、Place のひとことになりました。しかも place. まで打つと 候補が出ます。

コラム: interface という書き方

世の中のコードでは type のかわりに interface をよく見ます。

interface Place {
  name: string;
  country: string;
}

いまは「同じようなものだ」と思っておいてください。 このコースは type に統一します(第4章で使うユニオンは type でしか書けないため)。違いは第10章で正式に読みます。

読み替えの約束(この章の隠れた主役)

これから毎章、自分の内容に書き換えていきます。すると教材の差分と自分のコードが少しずつずれます。そこで約束を1つ。

わざと壊してみる

places.ts の1件目から country の行を消してください。ここで赤くなるのが正解です。 Property 'country' is missing。型は「揃っているべきものが欠けている」ことも見つけます。確認したら戻します。

あなたの番

• 自分の行きたい場所3つに書き換えてください。コース1の「行きたい場所メモ」を作った方は、そこから持ってきてください。
• 緯度経度(lat / lon)は、地図サイトで場所を右クリックすると数字が出ます。第5章と第9章で本当に使いますので、だいたいで構いませんが入れておいてください。
• 表示する項目を1つ増やしてみてください。 type に足す → データに足す → 描画に足す、の3段です。自分だけの項目には // mine を付けます。
• 合格条件: 変えたあとも npm run check がエラー0。

実務メモ

React Nativeの FlatList に渡す配列と、その要素の型。それはまさに今日の Place[] です。

TSエラー語辞典

この章で実際に出るエラー英文と、その日本語訳です。卒業するころには全章ぶんがお助けページに集まります。

ハマったら