🌐

フロントエンドエンジニアがバックエンドを勉強してみた

2025/09/25に公開

 はじめに社会人からエンジニアを始めて、最初の集合研修で少しバックエンドを触って依頼、実務ではフロントエンドを担当してきました。そこで改めてバックエンドについて勉強してみました。

フロントエンドでTypeScriptやJavaScriptに触れる機会が多かったのでNestJSを用いて勉強してみました。今回はバックエンドの概念や役割など、フロントエンドしかしらない人（多分あまりいないとは思いますが。。）でもバックエンドについてなんとなくわかるようになるレベルのことを書こうと思います

 そもそもバックエンドとはバックエンドはフロントエンドでクライアントからリクエストを受けて必要なデータを返す処理を行っています。例えばAmazonなどのショッピングサイトでは、商品をクリックした際にサーバーへ商品の詳細情報をくださいというようなリクエストが送信されます。バックエンドはリクエストされた商品の詳細情報をデータベースから取得してフロントエンドにデータを送り返す処理を行っています。

 バックエンドの基本概念バックエンドには多くの基本的な概念があります。私が知らなかったかつ、重要な概念を今回は2つ紹介しようと思います。ControllerとServiceです。この2つのおかげでフロントからのリクエストにレスポンスができると言っても過言ではないのではと思います。2つの簡単な関係を説明すると、

 ControllerControllerは、フロントから送られてきたリクエストを読んで、どの処理を実行するかを決める窓口のような役割を担っています。フロントエンドのルーターに近い役割を担っているのではないかと感じました。

リクエストのURLやHTTPメソッドを読み、どの処理を実行するかを判断しています。

同じURLでも複数のメソッドがあるため、Getメソッドなのか、Postメソッドなのかなどを判断するのがControllerです。
import { Controller, Get, Post, Body, Param } from '@nestjs/common';

@Controller('posts') // /posts というURLに対応
export class PostsController {
  private posts = []; // 仮の投稿データ

  // GET /posts → 全ての投稿を返す
  @Get()
  findAll() {
    return this.posts;
  }

  // POST /posts → 新しい投稿を追加
  @Post()
  create(@Body() post: { id: string; title: string; content: string }) {
    this.posts.push(post);
    return { message: '投稿を追加しました', post };
  }
}
アノテーションで記載されている@Getや@PostがそれぞれどのHTTPメソッドに対応したメソッドなのかを表しています。@Bodyはリクエストの中身を取り出しています。先ほどのショッピングサイトの例で言うと、ショッピングカートに何が入っているかを確認するときなどに使用されます。

 ServiceServiceは実際のビジネスロジックを担当しています。先ほど紹介したControllerがどの処理を行うか決定する役割を担っていましたが、ServiceにはControllerが決定した処理の詳細を記載します。つまり、ControllerはどのServiceを実行するかを決定しているといった感じです。（先ほどの例ではコントローラの中に具体的な処理を書いていましたが、実際にはControllerの中でServiceを呼び出し、その戻り値をフロントに返すイメージです。）
import { Injectable } from '@nestjs/common';

@Injectable()
export class PostsService {
  private posts = [];

  // 全ての投稿を返す
  findAll() {
    return this.posts;
  }

  // 新しい投稿を追加
  create(post: { id: string; title: string; content: string }) {
    this.posts.push(post);
    return post;
  }
}
先ほどControllerに記載していた処理がServiceに記載されます。

 ControllerとServiceの関係前章でも触れましたが

先ほど記載したServiceを最終的にはControllerに渡します。

ControllerからServiceを呼び出す際のコードは以下の通りです。
import { Controller, Get, Post, Body, Param } from '@nestjs/common';
import { PostsService } from './posts.service';

@Controller('posts')
export class PostsController {
  constructor(private readonly postsService: PostsService) {}

  @Get()
  findAll() {
    return this.postsService.findAll();
  }

  @Post()
  create(@Body() post: { id: string; title: string; content: string }) {
    return this.postsService.create(post);
  }
}

 まとめフロントエンドで呼び出していたAPIはバックエンドでは上記のように処理されています。今回記載した内容はバックエンドの処理の一部でさらにここからデータベースからデータを取り出したり、ルーティング処理があったりさまざまな処理があります。次回以降でこれらは触れられたらと思います。

はじめに

そもそもバックエンドとは

バックエンドの基本概念

Controller

Service

ControllerとServiceの関係

まとめ

Discussion