エンジニア・AIと会話する

画面の向こうにも、処理がある

申請ボタンを押すと、画面からサーバーへ申請内容が送られ、検査・保存の結果が返ってきます。このやり取りの窓口をAPIと呼びます。画面側をフロントエンド、サーバー側の処理をバックエンドと呼び、どちらにもTypeScriptが使われることがあります。

画面側でボタンを隠しても、APIへの不正な要求を防げるとは限りません。本人か、操作が許可されるかを、サーバーでも確認する必要があります。TypeScriptの型だけでこの認証・認可は実現しません。

待ち時間のある処理を読む

type SaveResult = { id: string };

async function submitExpense(): Promise<SaveResult> {
  const result = await saveExpense();
  return result;
}

asyncは非同期の関数、awaitは結果が届くのを待つ書き方です。Promise<SaveResult>は、将来SaveResultの値が得られる処理を表します。通信は失敗することもあり、成功の型を書くだけで失敗時の対応まで決まるわけではありません。

ジェネリクスは「中身を指定する共通の形」

type ApiResult<T> = {
  data: T;
  receivedAt: string;
};

type ExpenseResult = ApiResult<Expense>;
type UserResult = ApiResult<User>;

<T>のTは、あとから指定する型の入る場所です。申請にも社員にも「データ＋受信日時」という共通の形を使えます。この仕組みをジェネリクスと呼びます。

入門では、山括弧を見たら「中身の型を指定しているのかも」と読めれば十分です。Promise<Expense>なら将来得るのは申請、Array<Expense>なら申請の配列で、Expense[]と同じ意味です。

Reactと.tsxは、画面の話

Reactは画面を部品として組み立てるためのライブラリです。TypeScriptと、HTMLに似たJSXという記法を一緒に書くファイルでは、拡張子に.tsxを使います。.tsは通常のTypeScriptのファイルです。

type AmountProps = { amount: number };

function AmountLabel({ amount }: AmountProps) {
  return <span>{amount}円</span>;
}

この部品は金額を受け取り、「1200円」のような表示を作ります。画面部品に渡す値をpropsと呼びます。この例も「受け取る値→処理→表示」の順で読めます。全部の記号を覚える必要はありません。

AIへの依頼を、業務の条件から書く

上限などの数値は教材用です。自社のルールに置き換えます。AIの説明や型チェックだけで承認せず、実際の画面と保存結果を、人が条件に沿って確かめます。