37日目: フロントエンドとバックエンドの連携

田中一郎は、MongoDBを使ったデータ操作の基礎を学んだ後、次のステップとして「フロントエンドとバックエンドの連携」に取り組むことにした。
これは、フロントエンドでユーザーからの入力を受け取り、バックエンドでデータを処理して、その結果を再びフロントエンドに返すという、一連のデータフローを構築するための重要なステップだ。

フロントエンドとバックエンドの役割

まず、一郎はフロントエンドとバックエンドの役割を明確に理解することから始めた。
フロントエンドは、ユーザーと直接やり取りする部分であり、ユーザーインターフェース（UI）やユーザーエクスペリエンス（UX）を担当する。
一方、バックエンドは、サーバー側でのデータ処理やビジネスロジックを担う。

「フロントエンドとバックエンドがうまく連携することで、ユーザーにとって使いやすく、効率的なアプリケーションが完成する」と一郎は考え、学んだ技術を実際のプロジェクトで試すことに決めた。

Node.jsとExpressのセットアップ

一郎は、バックエンドの開発環境としてNode.jsとExpressフレームワークを使用することにした。
まず、Node.jsプロジェクトを作成し、必要なパッケージをインストールした。

npm init -y
npm install express mongoose body-parser

Expressは、Node.js上で動作する軽量なウェブアプリケーションフレームワークであり、APIの作成やリクエストの処理に適している。
MongooseはMongoDBとNode.jsを接続するためのライブラリで、データベース操作を簡単に行うことができる。

基本的なAPIの作成

一郎は、ユーザーが入力したデータを受け取り、それをMongoDBに保存し、保存されたデータをフロントエンドに返す簡単なAPIを作成することにした。

まず、Expressを使ってサーバーを立ち上げ、基本的なルートを設定した。

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

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

mongoose.connect('mongodb://localhost/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true });

const TaskSchema = new mongoose.Schema({
    name: String,
    completed: Boolean
});

const Task = mongoose.model('Task', TaskSchema);

app.post('/tasks', async (req, res) => {
    const task = new Task(req.body);
    await task.save();
    res.send(task);
});

app.get('/tasks', async (req, res) => {
    const tasks = await Task.find();
    res.send(tasks);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

このコードにより、ユーザーからタスク名と完了状態を受け取り、それをMongoDBに保存するAPIエンドポイントが作成された。
また、保存されたタスクを取得するためのエンドポイントも用意された。

フロントエンドとの連携

次に、一郎はフロントエンドでAPIを呼び出し、データのやり取りを行うコードを追加した。フロントエンドのHTMLファイルにJavaScriptを追加し、fetchメソッドを使ってバックエンドのAPIにリクエストを送信する仕組みを作成した。

document.getElementById('addTaskButton').addEventListener('click', async () => {
    const taskName = document.getElementById('taskInput').value;
    const response = await fetch('/tasks', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: taskName, completed: false })
    });
    const task = await response.json();
    console.log('Task added:', task);
});

async function loadTasks() {
    const response = await fetch('/tasks');
    const tasks = await response.json();
    console.log('Loaded tasks:', tasks);
}

loadTasks();

このコードにより、ユーザーがタスクを追加すると、そのデータがバックエンドに送信され、MongoDBに保存される。そして、保存されたタスクがフロントエンドに表示される。