はじめに

Day07では、POSTでデータを送信できるようになった。

今回はそのデータを
一覧で表示できる状態 にする。

ここまでできれば、

• 登録（Create）
• 取得（Read）

がそろう。

業務アプリの基本形が完成する。

---

① Node.js側：データを保持する

今回は学習用なので、
メモリ上に配列で保持する。

Service修正

// src/services/userService.tsexport type User = {
  id: number;
  name: string;
};let users: User[] = [];
let currentId = 1;export function createUser(name: string): User {
  const newUser: User = {
    id: currentId++,
    name
  };  users.push(newUser);
  return newUser;
}export function getUsers(): User[] {
  return users;
}

---

Controller追加

// src/controllers/userController.tsimport { Request, Response } from "express";
import { createUser, getUsers } from "../services/userService";export function createUserController(req: Request, res: Response) {
  const { name } = req.body;  const user = createUser(name);  res.json(user);
}export function getUsersController(req: Request, res: Response) {
  const userList = getUsers();
  res.json(userList);
}

---

index.tsに追加

app.get("/users", getUsersController);

---

② Angular側：一覧取得

Service修正

export interface User {
  id: number;
  name: string;
}getUsers() {
  return this.http.get<User[]>(
    'http://localhost:3000/users'
  );
}

---

Component修正

users: User[] = [];loadUsers() {
  this.userService.getUsers()
    .subscribe(data => {
      this.users = data;
    });
}submit() {
  this.userService.createUser({ name: this.name })
    .subscribe(() => {
      this.name = '';
      this.loadUsers();
    });
}

---

HTML修正

<input [(ngModel)]="name" placeholder="名前を入力">
<button (click)="submit()">登録</button><button (click)="loadUsers()">一覧取得</button><ul>
  <li *ngFor="let user of users">
    {{ user.id }} - {{ user.name }}
  </li>
</ul>

---

ここで起きていること

流れはこう。

登録
  ↓
POST /users
  ↓
メモリ配列に保存
  ↓
GET /users
  ↓
一覧表示

これで
Create + Read 完成。

---

なぜ今DBを使わないのか

理由はシンプル。

• まず構造を理解する
• HTTPの流れを掴む
• 役割分離を体に入れる

DBはその後でいい。

---

今できていること

• AngularとNode.jsが双方向通信
• POSTで登録
• GETで一覧
• 型でデータ構造共有

これはもう立派なWebアプリ。

---

Day08のまとめ

• データをメモリに保持
• GET /usersで一覧取得
• Angularで*ngFor表示
• CRUDのCとR完成

---

次の選択肢

ここから分岐できる。

① Update / Deleteまでやる
② バリデーションをちゃんと入れる
③ DB（SQLite）導入する
④ ここで一度まとめ記事を書く

まめさんの流れ的には
👉 このままCRUD完成（Update / Delete） が自然。

---

次回予告

Day09：UpdateとDeleteを実装する（CRUD完成）