はじめてのWeb APIとMongoDBで作るシンプルなメモ帳アプリ

はじめに

Web APIについて学んだことをきっかけに、実際に自分でも使ってみることにしました。

今回は、MongoDBというデータベースも初めて利用し、小さなアプリを実装してみました。

この記事では、その作成を通して得られた学びや気づきを、備忘録としてまとめています。

実装前に混乱していたこと（MPAとSPA）

私がチュートリアルで触れてきたアプリでは、複数のページがあり、基本的にHTMLファイルをサーバー側でレンダリングして返すことが基本でした。

しかし、今回のように1ページで完結するアプリの場合、どのように実装すれば良いのかで混乱しました。

サーバーはデータだけ提供し、UIの見た目はフロントエンドで制御するという役割分担の考え方を意識することで、徐々に理解できるようになってきました。

MPA（Multi Page Application）

• サーバー側で HTML を res.render() などで生成し、クライアントに送る
• 各操作（作成、編集、削除）ごとに新しいページに遷移する

SPA（Single Page Application）

• 最初に読み込まれたHTML内で、すべてのUIがJavaScriptによって制御される
• 操作に応じて API を呼び、データのみを取得または送信
• サーバーはデータ（JSON）を返すだけで、HTMLは返さない

実装の違い

• MPA：res.render('page', { data })
• SPA：res.json({ data })

API設計（CRUD操作）

アプリで必要なデータ操作は、いわゆるCRUD（Create / Read / Update / Delete）に分類できます。

今回は、メモの作成・取得・更新・削除といった基本的な操作を以下のようにAPIとして設計しました。

メソッド	パス	内容
POST	/api/memos	メモを新規作成
GET	/api/memos	すべてのメモを取得
GET	/api/memos/:id	特定のメモを取得
PUT	/api/memos/:id	メモを更新
DELETE	/api/memos/:id	メモを削除

データベース（MongoDB）でのデータ管理

データベースにはMongoDBを使用しました。

まず、以下のようにメモのスキーマを定義しました。

const memoSchema = new mongoose.Schema(
  {
    title: String,
    content: String,
  },
  { timestamps: true }
);

それぞれのAPIリクエストが、MongoDBのどの操作と対応しているかをまとめたのが以下の表です。

メソッド	内容	MongoDBメソッド
POST	メモを新規作成	new Memo({ title, content }).save()
GET	すべてのメモを取得	Memo.find()
GET	特定のメモを取得	Memo.findById(id)
PUT	メモを更新	Memo.findByIdAndUpdate(id, { title, content });
DELETE	メモを削除	Memo.findByIdAndDelete(id)

感想

• 初めてのAPI設計とデータベースの操作を通じて、Webアプリの裏側の仕組みを少しずつ理解できたように思います
• 特に、サーバーはHTMLを返すのではなく、データ（JSON）を返すだけという設計について理解することができました