はじめに

Day06では、AngularからNode.jsのAPIを呼び出して
データを「取得」した。

今回は逆。

Angularからデータを「送る」

ここで初めて、

• 入力
• バリデーション
• 保存処理

という、業務アプリの核心に入る。

---

今回のゴール

• Angularでフォーム入力を扱う
• POSTでAPIに送る
• Node.jsで受け取る
• JSONで結果を返す

---

① Node.js側：POST APIを追加

まずはバックエンドから。

Service側（処理）

// src/services/userService.ts

export type CreateUserRequest = {
  name: string;
};

export type CreateUserResponse = {
  message: string;
};

export function createUser(data: CreateUserRequest): CreateUserResponse {
  return {
    message: `User ${data.name} created`
  };
}

ここではまだDBは使わない。
まずは流れを理解することが目的。

---

Controller側

// src/controllers/userController.ts

import { Request, Response } from "express";
import { createUser } from "../services/userService";

export function createUserController(req: Request, res: Response) {
  const { name } = req.body;

  const result = createUser({ name });

  res.json(result);
}

---

index.tsに追加

import express from "express";
import { createUserController } from "./controllers/userController";

const app = express();
app.use(express.json());

app.post("/users", createUserController);

ここで重要なのは：

app.use(express.json());

これがないとPOSTのbodyが読めない。

---

② Angular側：フォームを作る

ServiceにPOST追加

// user.service.ts

export interface CreateUserRequest {
  name: string;
}

export interface CreateUserResponse {
  message: string;
}

createUser(data: CreateUserRequest) {
  return this.http.post<CreateUserResponse>(
    'http://localhost:3000/users',
    data
  );
}

---

Component側

name: string = '';
resultMessage: string = '';

submit() {
  this.userService.createUser({ name: this.name })
    .subscribe(res => {
      this.resultMessage = res.message;
    });
}

---

HTML

<input [(ngModel)]="name" placeholder="名前を入力">

<button (click)="submit()">送信</button>

<p>{{ resultMessage }}</p>

※ FormsModule を app.module.ts に追加するのを忘れずに。

import { FormsModule } from '@angular/forms';

imports: [
  ...,
  FormsModule
]

---

ここで起きていること

流れはこう。

入力
  ↓
Angular
  ↓
POST /users
  ↓
Node.js
  ↓
Service処理
  ↓
JSON返却
  ↓
画面更新

これがWeb業務アプリの基本構造。

---

GETとPOSTの違い

	GET	POST
用途	取得	作成
データ	URL	body
書き込み	×	○

ここを混ぜると設計が崩れる。

---

役割分離は崩れていないか？

• Angular：入力と表示
• Node.js：処理と判断
• Service：実処理

今回も責務はきれいに分かれている。

---

Day07のまとめ

• POSTでデータを送れるようになった
• express.json()は必須
• AngularではFormsModuleが必要
• これでCRUDの「C」ができた

ここまで来たら、
もう業務アプリの骨格は完成している。

---

次回予告

Day08：データを一覧表示する（簡易CRUD完成へ）

ここから
「管理画面」っぽくしていく。