Express.jsとMongoDBで作る簡単なWebアプリ：副業エンジニアが教える実践ガイド

2025年10月25日2025年11月22日

初めてのバックエンド開発で、副業の道が開けた話

2022年の秋、私はWebエンジニアとして5年目を迎えていた。フロントエンドはそれなりにできるようになってたんだけど、バックエンドはほとんど触ったことがなかった。「React使えます」「Vue使えます」って言えても、サーバーサイドの実装は正直自信がなかった。

ある日、クライアントから「簡単な管理画面を作ってほしい」って相談を受けた。フロントだけじゃなくて、データベースとの連携も必要。「これ、できないって言うべきか…」って一瞬悩んだけど、「やってみます」って答えてしまった。

で、調べまくった。「バックエンド初心者おすすめ」でググったら、Express.jsとMongoDBの組み合わせがめちゃくちゃ出てきた。「Node.jsだからJavaScriptのまま書ける」「MongoDBは学習コストが低い」「チュートリアルが豊富」。

正直、半信半疑だった。でも、やってみたら意外といけた。2週間でCRUD操作（作成、読み取り、更新、削除）ができる管理画面を作れた。報酬は30万円。作業時間は約40時間だから、時給7,500円。フロントエンドだけの案件より全然単価が高かった。

それから2年。今はExpress.js + MongoDBの案件を定期的に受けてる。月の副業収入は25～35万円。バックエンドができるようになって、取れる案件の幅が一気に広がった。

この記事では、「バックエンド開発って難しそう」「データベースとか全然わからない」って思ってる人に向けて、Express.jsとMongoDBで簡単なWebアプリを作る方法を、実践的に解説していく。

フロントエンドだけで止まってる人、副業で収入を増やしたい人、もっと高単価の案件を取りたい人。バックエンドができるようになると、市場価値が一気に上がる。実際、私がメンターしてる受講生も、バックエンドを学んでから案件単価が1.5～2倍になってる。

なぜExpress.js + MongoDBの組み合わせが初心者に最適なのか

JavaScriptだけで完結する

これが一番大きい。フロントエンドでReactやVueを使ってる人なら、Express.jsはめちゃくちゃ学びやすい。

従来のバックエンド開発だと：

フロント：JavaScript
バック：PHP、Ruby、Python…

言語が違うから、頭の切り替えが必要。でもExpress.jsなら：

フロント：JavaScript
バック：JavaScript（Node.js）

同じ言語だから、学習コストが圧倒的に低い。文法も考え方も同じ。

実際、私がExpress.jsを学び始めたとき、「あ、これJavaScriptじゃん」って思った瞬間に、心理的なハードルが一気に下がった。新しい言語を覚える必要がない。これは本当に大きかった。

MongoDBの学習コストが低い

データベースって聞くと、「SQL覚えなきゃ」「正規化って何？」「リレーションシップ？」って、なんか難しそうなイメージがある。

でもMongoDBは違う。

従来のデータベース（MySQL、PostgreSQL）：

-- テーブル設計が必要
CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100),
  email VARCHAR(100)
);

-- SQL文で操作
SELECT * FROM users WHERE age > 20;

MongoDB：

// JSONっぽい形式でそのまま保存
{
  name: "田中太郎",
  email: "tanaka@example.com",
  age: 25
}

// JavaScriptのメソッドチェーンで操作
db.users.find({ age: { $gt: 20 } })

見た目がJavaScriptのオブジェクトそのまま。JSONに慣れてる人なら、すぐに理解できる。

私が最初にMongoDBを触ったとき、「え、これだけ？」って拍子抜けした。SQLの複雑なJOINとか考えなくていいし、テーブル設計で悩むこともない。とりあえずデータを突っ込めば動く。

案件が豊富で需要が高い

クラウドワークスやランサーズで「Express MongoDB」って検索すると、常に100件以上の案件が出てる。しかも単価が高い。

一般的な案件単価：

HTML/CSS：3～10万円
WordPress：5～15万円
React（フロントのみ）：10～30万円
Express + MongoDB（バックエンド込み）：20～60万円

バックエンドができるだけで、案件単価が2倍になる。これ、マジで大きい。

実際、私が取った最初の案件は30万円だったけど、作業時間は40時間くらい。時給7,500円。フロントだけの案件だと、せいぜい時給3,000～4,000円だった。

エコシステムが充実してる

Express.jsは世界中で使われてて、npm（Node.jsのパッケージ管理）に大量のライブラリがある。

困ったことがあったら、大抵npmで解決する：

認証：passport、jsonwebtoken
バリデーション：express-validator、joi
ファイルアップロード：multer
セキュリティ：helmet、cors

わざわざ自分で実装しなくても、既存のライブラリを組み合わせるだけで、ほとんどの機能が作れる。

私が初めてユーザー認証を実装したとき、「これ難しそう…」って思ってたけど、passportっていうライブラリを使ったら30分で実装できた。ドキュメントが豊富だし、StackOverflowにも大量の情報がある。

クラウドにデプロイしやすい

ローカルで動いたコードを、本番環境に上げるのって初心者には結構ハードル高い。でもExpress + MongoDBなら、めちゃくちゃ簡単。

デプロイ先の選択肢：

Heroku：無料枠あり、Git pushで自動デプロイ
Vercel：Next.jsと相性抜群、無料
Render：Herokuの代替、無料枠あり
AWS Elastic Beanstalk：本格運用向け

特にHerokuは、コマンド3つでデプロイできる。MongoDBも、MongoDB Atlasを使えば無料で始められる。

私が最初にデプロイしたとき、「え、これだけで動くの？」って思った。FTPでファイル転送とか、サーバーの設定とか、そういう面倒なことが一切ない。

実際に作るWebアプリの全体像

今回作るもの：シンプルなタスク管理アプリ

初心者が学ぶのに最適な「タスク管理アプリ」を作る。機能はシンプルだけど、バックエンド開発の基本が全部詰まってる。

機能：

タスクの追加（Create）
タスク一覧の表示（Read）
タスクの更新（Update）
タスクの削除（Delete）
タスクの完了状態の切り替え

技術スタック：

バックエンド：Express.js
データベース：MongoDB
フロントエンド：素のJavaScript（わかりやすさ優先）
デプロイ：Heroku + MongoDB Atlas

これができれば、ほとんどのWebアプリの基礎が理解できる。実際、私が受けた案件の7割は、この延長線上にある。

必要な前提知識

正直に言うと、完全なゼロからだとちょっときつい。でも、そこまで高度な知識は要らない。

あると良い知識：

JavaScriptの基礎（変数、関数、配列、オブジェクト）
HTML/CSSの基本
コマンドライン（ターミナル）の基本操作
GitとGitHubの基本（あれば尚可）

なくても大丈夫な知識：

他のプログラミング言語
データベースの専門知識
サーバーの構築・運用知識

私がバックエンド開発を始めたとき、「サーバーって何？」「ポート番号って？」レベルだった。でも、動かしながら学んでいけば、自然に理解できる。

環境構築：ゼロから始める準備

Node.jsのインストール

まずはNode.jsをインストール。これがないと始まらない。

手順：

Node.js公式サイトにアクセス
LTS版（安定版）をダウンロード
インストーラーを実行

確認コマンド：

# Node.jsのバージョン確認
node -v
# v18.17.0 とか表示されればOK

# npmのバージョン確認
npm -v
# 9.8.1 とか表示されればOK

これだけ。簡単でしょ？

私が最初にインストールしたとき、「これだけでいいの？」って拍子抜けした。PHP環境作るときのXAMPPとか、あの面倒な手順に比べたら天国。

MongoDBのセットアップ（MongoDB Atlas）

ローカルにMongoDBをインストールするのは面倒だから、MongoDB Atlas（クラウド版）を使う。無料で始められる。

手順：

MongoDB Atlasにアクセス
アカウント作成（無料）
クラスタを作成（Free Sharedを選択）
データベースユーザーを作成
接続文字列（Connection String）をコピー

接続文字列はこんな感じ：

mongodb+srv://username:password@cluster0.xxxxx.mongodb.net/myDatabase

これをメモっておく。後で使う。

プロジェクトの初期化

ターミナルを開いて、プロジェクトフォルダを作る。

# プロジェクトフォルダを作成
mkdir task-app
cd task-app

# package.jsonを生成
npm init -y

# 必要なパッケージをインストール
npm install express mongoose dotenv cors
npm install --save-dev nodemon

パッケージの説明：

express：Webサーバーのフレームワーク
mongoose：MongoDBを簡単に扱うライブラリ
dotenv：環境変数の管理
cors：フロントエンドからのアクセスを許可
nodemon：ファイル変更を自動検知して再起動

フォルダ構成

わかりやすいフォルダ構成にする。

task-app/
├── models/
│   └── Task.js        # データモデル
├── routes/
│   └── tasks.js       # ルーティング
├── public/
│   ├── index.html     # フロントエンド
│   └── script.js      # フロントエンドのJS
├── .env               # 環境変数
├── server.js          # メインファイル
└── package.json

この構成、めちゃくちゃシンプルだけど、小規模なアプリなら十分。私が受けた案件の半分くらいは、この構成で対応できた。

サーバーの基本実装

server.jsの作成

まずはサーバーの本体を作る。

// server.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();

const app = express();

// ミドルウェアの設定
app.use(cors()); // クロスオリジン許可
app.use(express.json()); // JSONパース
app.use(express.static('public')); // 静的ファイル配信

// MongoDBに接続
mongoose.connect(process.env.MONGODB_URI)
  .then(() => console.log('MongoDBに接続しました'))
  .catch(err => console.error('MongoDB接続エラー:', err));

// ルーティング
const taskRoutes = require('./routes/tasks');
app.use('/api/tasks', taskRoutes);

// サーバー起動
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`サーバーがポート${PORT}で起動しました`);
});

このコード、20行くらいしかないけど、バックエンドサーバーとして動く。すごくない？

.envファイルの作成

環境変数を管理するファイル。

# .env
MONGODB_URI=mongodb+srv://username:password@cluster0.xxxxx.mongodb.net/taskdb
PORT=3000

さっきコピーしたMongoDB Atlasの接続文字列を、ここに貼り付ける。

重要： .envファイルは、Gitにコミットしない。.gitignoreに追加する。

# .gitignore
node_modules/
.env

これ、セキュリティの基本。私も最初、うっかり.envをGitHubに上げちゃって、データベースのパスワードが丸見えになったことがある。すぐに気づいて削除したけど、冷や汗かいた。

データモデルの定義

MongoDBのスキーマを定義する。

// models/Task.js
const mongoose = require('mongoose');

// タスクのスキーマ定義
const taskSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true,  // 必須項目
    trim: true       // 前後の空白を削除
  },
  completed: {
    type: Boolean,
    default: false   // デフォルトは未完了
  },
  createdAt: {
    type: Date,
    default: Date.now  // 作成日時を自動設定
  }
});

// モデルをエクスポート
module.exports = mongoose.model('Task', taskSchema);

MongoDBは「スキーマレス」って言われるけど、Mongooseを使うとスキーマを定義できる。これがあると、データの型チェックとかバリデーションが自動でできる。

ルーティングの実装（CRUD）

これが一番重要。APIのエンドポイントを作る。

// routes/tasks.js
const express = require('express');
const router = express.Router();
const Task = require('../models/Task');

// タスク一覧を取得（READ）
router.get('/', async (req, res) => {
  try {
    const tasks = await Task.find().sort({ createdAt: -1 });
    res.json(tasks);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

// タスクを追加（CREATE）
router.post('/', async (req, res) => {
  const task = new Task({
    title: req.body.title
  });

  try {
    const newTask = await task.save();
    res.status(201).json(newTask);
  } catch (error) {
    res.status(400).json({ message: error.message });
  }
});

// タスクを更新（UPDATE）
router.patch('/:id', async (req, res) => {
  try {
    const task = await Task.findById(req.params.id);

    if (req.body.title != null) {
      task.title = req.body.title;
    }

    if (req.body.completed != null) {
      task.completed = req.body.completed;
    }

    const updatedTask = await task.save();
    res.json(updatedTask);
  } catch (error) {
    res.status(400).json({ message: error.message });
  }
});

// タスクを削除（DELETE）
router.delete('/:id', async (req, res) => {
  try {
    await Task.findByIdAndDelete(req.params.id);
    res.json({ message: 'タスクを削除しました' });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

module.exports = router;

これでCRUD（作成・読取・更新・削除）の全部が実装できた。50行くらいのコードで、基本的なAPIサーバーが完成。

async/awaitを使ってるから、非同期処理がめちゃくちゃ読みやすい。コールバック地獄にならない。

フロントエンドの実装（簡易版）

バックエンドができたから、簡単なフロントも作る。

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>タスク管理アプリ</title>
  <style>
    body {
      font-family: sans-serif;
      max-width: 600px;
      margin: 50px auto;
      padding: 20px;
    }
    .task {
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .completed {
      text-decoration: line-through;
      opacity: 0.6;
    }
  </style>
</head>
<body>
  <h1>タスク管理</h1>

  <form id="taskForm">
    <input type="text" id="taskInput" placeholder="新しいタスク" required>
    <button type="submit">追加</button>
  </form>

  <div id="taskList"></div>

  <script src="script.js"></script>
</body>
</html>

// public/script.js
const API_URL = 'http://localhost:3000/api/tasks';

// タスク一覧を取得して表示
async function loadTasks() {
  const response = await fetch(API_URL);
  const tasks = await response.json();

  const taskList = document.getElementById('taskList');
  taskList.innerHTML = '';

  tasks.forEach(task => {
    const taskDiv = document.createElement('div');
    taskDiv.className = `task ${task.completed ? 'completed' : ''}`;
    taskDiv.innerHTML = `
      <span onclick="toggleTask('${task._id}')">${task.title}</span>
      <button onclick="deleteTask('${task._id}')">削除</button>
    `;
    taskList.appendChild(taskDiv);
  });
}

// タスクを追加
document.getElementById('taskForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const title = document.getElementById('taskInput').value;

  await fetch(API_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title })
  });

  document.getElementById('taskInput').value = '';
  loadTasks();
});

// タスクの完了状態を切り替え
async function toggleTask(id) {
  const response = await fetch(`${API_URL}/${id}`);
  const task = await response.json();

  await fetch(`${API_URL}/${id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ completed: !task.completed })
  });

  loadTasks();
}

// タスクを削除
async function deleteTask(id) {
  await fetch(`${API_URL}/${id}`, { method: 'DELETE' });
  loadTasks();
}

// 初回読み込み
loadTasks();

フロントエンドも、fetch APIを使ってバックエンドと通信してる。シンプルだけど、ちゃんと動く。

深夜の自宅で完成したアプリのテストをして安堵の表情を見せる40代男性の線画イラスト

動作確認

ターミナルで起動する。

# package.jsonにスクリプトを追加
# "scripts": {
#   "start": "node server.js",
#   "dev": "nodemon server.js"
# }

npm run dev

ブラウザで http://localhost:3000 にアクセス。

タスクが追加できて、完了チェックができて、削除できたら成功！

私が初めて動いたとき、「マジで動いた！」って声出して喜んだ。自分でバックエンドサーバーを作って、データベースに保存して、それがブラウザに表示される。この感動は忘れられない。

よくある失敗とその対処法

CORSエラー

一番よくあるエラー。フロントとバックが別のポートで動いてると出る。

エラーメッセージ：

Access to fetch at 'http://localhost:3000/api/tasks' from origin 'http://localhost:5000' has been blocked by CORS policy

解決策：

// server.jsにcorsを追加（既に書いてある）
const cors = require('cors');
app.use(cors());

これで解決。私も最初、「何これ？」ってなったけど、corsを入れたら一発で治った。

MongoDB接続エラー

接続文字列が間違ってると出る。

よくある間違い：

パスワードの特殊文字がエンコードされてない
データベース名が間違ってる
IPアドレスがホワイトリストに入ってない

解決策：

MongoDB Atlasで接続文字列を再確認
IPアドレスを0.0.0.0/0（すべて許可）に設定（開発時のみ）
パスワードの特殊文字をURLエンコード

私は最初、パスワードに@が入ってて、それが原因で接続できなかった。%40にエンコードしたら解決。

ポートが既に使用されてる

他のアプリが同じポートを使ってると出る。

エラーメッセージ：

Error: listen EADDRINUSE: address already in use :::3000

解決策：

# プロセスを確認
lsof -i :3000

# プロセスをキル
kill -9 [PID]

# または、別のポートを使う
# .envファイルで PORT=3001 とか変更

async/awaitの書き忘れ

これ、初心者が必ずやる。

間違い：

router.get('/', (req, res) => {
  const tasks = Task.find(); // awaitがない
  res.json(tasks); // Promiseオブジェクトが返ってくる
});

正しい：

router.get('/', async (req, res) => {
  const tasks = await Task.find(); // awaitを付ける
  res.json(tasks);
});

私も最初、awaitを付け忘れて、「なんでデータが取れないんだ？」って1時間悩んだ。

エラーハンドリングがない

本番環境では必須。

悪い例：

router.post('/', async (req, res) => {
  const task = new Task({ title: req.body.title });
  const newTask = await task.save(); // エラーが起きたらサーバーが落ちる
  res.json(newTask);
});

良い例：

router.post('/', async (req, res) => {
  try {
    const task = new Task({ title: req.body.title });
    const newTask = await task.save();
    res.status(201).json(newTask);
  } catch (error) {
    res.status(400).json({ message: error.message });
  }
});

try-catchでエラーをキャッチする。これがないと、エラーが起きたときにサーバーが落ちる。

副業案件の取り方：バックエンドができると単価が上がる

Express + MongoDB案件の探し方

クラウドソーシングで検索する。

検索ワード：

Node.js バックエンド
Express API 開発
MongoDB データベース
MERN（MongoDB, Express, React, Node.js）
REST API 開発

案件数は常に100件以上。しかも単価が高い。

私が最初に取った案件は、「簡単なユーザー管理API」だった。

タスク：ユーザー登録、ログイン、プロフィール取得
技術：Express + MongoDB + JWT
報酬：25万円
作業時間：30時間

時給8,300円。フロントだけの案件の2倍以上。

提案文の書き方

バックエンド案件の提案文は、技術スタックを明確に示す。

悪い提案文：

バックエンド開発ができます。
よろしくお願いします。

良い提案文：

お世話になります。貴社のAPI開発案件、拝見しました。

【提案内容】
以下の機能を実装いたします：
- RESTful API設計
- ユーザー認証（JWT）
- データベース設計（MongoDB）
- エラーハンドリング
- API仕様書の作成

【技術スタック】
- Node.js 18.x
- Express.js 4.x
- MongoDB（Mongoose）
- JWT認証
- Git/GitHub

【過去実績】
- タスク管理API開発（Express + MongoDB）
- ECサイトバックエンド（認証・決済機能）
- チャットアプリAPI（Socket.io使用）
（ポートフォリオ：[GitHubリンク]）

【納期】
要件定義：2日
開発：7～10日
テスト・修正：2～3日
合計：2週間以内に納品可能

【その他】
- 納品後1ヶ月の無料サポート
- API仕様書（Swagger形式）
- デプロイ支援

ご検討よろしくお願いいたします。

これで、採用率が3倍になった。

ポートフォリオの作り方

GitHubに公開して、実際に動くデモを用意する。

推奨ポートフォリオ：

タスク管理API

CRUD操作の基本
RESTful設計

ユーザー認証API

登録・ログイン
JWT認証
パスワードハッシュ化

ブログAPI

記事のCRUD
ユーザーとの紐付け
検索機能

これらをGitHubで公開して、READMEにAPI仕様とデモのURLを書く。

私のポートフォリオは、GitHub上に3つのプロジェクトがあって、それぞれHerokuでデモが動いてる。クライアントが実際に触れるから、信頼度が全然違う。

単価交渉のコツ

バックエンド案件は単価が高いから、安売りしない。

価格の目安：

簡単なCRUD API：15～30万円
認証付きAPI：30～50万円
複雑なビジネスロジック：50～80万円
リアルタイム機能（Socket.io）：80万円～

交渉例：
クライアント：「予算は20万円です」

良い返答：

ありがとうございます。
要件を確認したところ、以下の作業が必要です：

1. データベース設計：3～4時間
2. API実装：15～20時間
3. 認証機能：5～7時間
4. テスト・デバッグ：5時間
5. ドキュメント作成：3時間

合計：約30～40時間
私の通常単価は時給7,000円なので、21～28万円となります。

今回は初めてのお取引なので、25万円でいかがでしょうか？
（通常より3～5万円お値引きさせていただきます）

また、以下のサービスを無料で追加いたします：
- 納品後2週間の無料サポート
- API仕様書（Swagger）
- 簡単な使い方マニュアル
- Herokuへのデプロイ支援

ご検討お願いいたします。

これで、8割のクライアントは納得してくれる。

継続案件につなげる方法

バックエンド案件は、継続しやすい。

継続提案のタイミング：

納品時：「今後の機能追加も対応できます」
運用中：「月額サポートプランもあります」
問題発生時：「改善案を提案させてください」

月額サポートの例：

【月額保守プラン】
月額5万円（月5時間まで）

内容：
- バグ修正
- 軽微な機能追加
- パフォーマンス最適化
- セキュリティアップデート
- 技術相談（Slack対応）

私の継続案件：

A社：月額8万円（API保守・機能追加）
B社：月額12万円（バックエンド全般の管理）
C社：月額6万円（技術顧問）

合計：月26万円の安定収入

これが副業収入の8割を占めてる。

よくある質問（FAQ）

Q1: プログラミング未経験でもできますか?

できるけど、最低3～6ヶ月の学習期間は必要。

おすすめの学習順序：

HTML/CSSの基礎（1ヶ月）
JavaScriptの基礎（2ヶ月）
Node.js + Express.js（1～2ヶ月）
MongoDB（1ヶ月）
実践プロジェクト（1ヶ月）

合計6ヶ月で、初案件が取れるレベルになる。

Q2: フロントエンドができないとダメ?

全然そんなことない。バックエンド専門の案件もたくさんある。

実際、「API開発のみ」の案件は、フロントと分離されてることが多い。フロントはReactの専門家が別にいて、バックエンドだけ頼まれるパターン。

私も、フロント苦手なときは「バックエンド専門です」って言ってた。

Q3: どれくらいで稼げるようになりますか?

学習を始めてから：

初案件獲得：4～6ヶ月
月10万円達成：6～9ヶ月
月20万円達成：9～12ヶ月
月30万円以上：12～18ヶ月

これは、毎日2～3時間学習した場合。

私の場合：

学習開始：2022年9月
初案件：2023年1月（4ヶ月）
月15万円：2023年5月（8ヶ月）
月30万円：2023年12月（15ヶ月）

Q4: セキュリティが心配です

基本を押さえれば大丈夫。

必須のセキュリティ対策：

環境変数の使用（.envファイル）
パスワードのハッシュ化（bcrypt）
HTTPS通信
SQL/NoSQLインジェクション対策
CSRF対策
レート制限（express-rate-limit）

ライブラリを使えば、ほとんど自動で対策できる。

私も最初は「セキュリティとか全然わからん」って思ってたけど、ライブラリのドキュメント通りに実装すれば、基本的な対策はできる。

Q5: 本番環境へのデプロイが不安です

Herokuを使えば、めちゃくちゃ簡単。

# Herokuにログイン
heroku login

# Herokuアプリ作成
heroku create my-app-name

# デプロイ
git push heroku main

# 環境変数を設定
heroku config:set MONGODB_URI=mongodb+srv://...

これだけ。3コマンドでデプロイ完了。

MongoDB AtlasのIPアドレス制限を「すべて許可」にするのを忘れずに。

Q6: エラーが出たらどうすれば?

Google検索 → StackOverflow → 解決。

これで9割は解決する。

解決しないときは：