Node.js を使用した MVC パターンを理解する-jsチュートリアル-php.cn

Understanding the MVC Pattern with Node.js

Model-View-Controller (MVC) パターンは、Web 開発で最も人気のあるアーキテクチャパターンの 1 つです。 MVC は、アプリケーションを 3 つの相互接続されたコンポーネント (モデル、ビュー、コントローラー) に分割することで、組織化され、保守可能でスケーラブルなコードを促進します。 Node.js は、非同期処理と広大なエコシステムを備えており、MVC ベースのアプリケーション、特に Web および API 開発を構築する場合に最適です。このガイドでは、Node.js を使用した MVC パターンを検討し、その利点と実際の実装について説明します。

MVCパターンとは何ですか?

MVC パターンは、アプリケーションを 3 つの異なる部分に分割します。

モデル: アプリケーションのデータとビジネスロジックを表します。ユーザーインターフェイスとは独立してデータベースと対話し、データを処理します。
View: アプリケーションのプレゼンテーション層を処理します。データをユーザーに表示し、ユーザーのコマンドをコントローラーに送信します。
コントローラー: モデルとビューの間の仲介者として機能します。ユーザー入力を受け取り、モデルと対話し、それに応じてビューを更新します。

このように関心を分離すると、管理、テスト、拡張が簡単な方法でコードを整理できます。

Node.js で MVC を使用する利点

保守性: MVC では、コードをレイヤーに編成することで、複雑なアプリケーションの管理が容易になります。
スケーラビリティ: この構造により、個々のコンポーネントを個別にスケーリングまたは変更できます。
再利用可能なコード: MVC では、多くの場合、コンポーネントはアプリケーションの複数のビューまたは部分にわたって再利用可能です。
効率的なチームコラボレーション: フロントエンド開発者とバックエンド開発者は、重複を最小限に抑えながら同時に作業できます。

Node.js を使用した MVC プロジェクトのセットアップ

ここでは、Node.js と Express を使用して単純な MVC アプリケーションを構築します。この例は、ユーザーがタスクを表示、追加、削除できるようにする基本的な「タスクマネージャー」です。

ステップ 1: プロジェクトを初期化する

まず、新しい Node.js プロジェクトを作成し、必要な依存関係をインストールします。

# Create a project folder
mkdir mvc-task-manager
cd mvc-task-manager

# Initialize Node.js
npm init -y

# Install Express and other dependencies
npm install express ejs mongoose body-parser

ログイン後にコピー

Express: Node.js 用の最小限の Web フレームワーク。コントローラーとルートのセットアップに最適です。
EJS: 動的 HTML ビューのレンダリングを可能にするテンプレートエンジン。
Mongoose: データベース内のデータをモデル化するための MongoDB の人気のあるライブラリ。
Body-parser: ミドルウェアで受信したリクエストの本文を解析するミドルウェア。

ステップ 2: プロジェクト構造のセットアップ

アプリケーションをモデル、ビュー、コントローラーのフォルダーに整理します。この構造は MVC パターンに不可欠です。

mvc-task-manager/
│
├── models/
│   └── Task.js
│
├── views/
│   ├── index.ejs
│   └── tasks.ejs
│
├── controllers/
│   └── taskController.js
│
├── public/
│   └── css/
│       └── styles.css
│
├── app.js
└── package.json

ログイン後にコピー

ステップ 3: モデルの構成

モデル は、アプリケーション内のデータ構造を表します。このタスクマネージャーでは、Mongoose を使用して MongoDB でタスクモデルを定義します。

// models/Task.js

const mongoose = require('mongoose');

const taskSchema = new mongoose.Schema({
    title: { type: String, required: true },
    description: { type: String },
    completed: { type: Boolean, default: false }
});

module.exports = mongoose.model('Task', taskSchema);

ログイン後にコピー

ここで、taskSchema は、タイトル、説明、および完了のフィールドを含むタスクモデルを定義します。

ステップ 4: コントローラーを作成する

コントローラは、アプリケーションロジックを処理し、ユーザー入力を処理し、モデルと対話し、データをレンダリングするようにビューに指示します。

// controllers/taskController.js

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

exports.getTasks = async (req, res) => {
    const tasks = await Task.find();
    res.render('tasks', { tasks });
};

exports.createTask = async (req, res) => {
    const { title, description } = req.body;
    await Task.create({ title, description });
    res.redirect('/tasks');
};

exports.deleteTask = async (req, res) => {
    await Task.findByIdAndDelete(req.params.id);
    res.redirect('/tasks');
};

ログイン後にコピー

このコントローラーは 3 つの主要なアクションを定義します:

getTasks: データベースからすべてのタスクを取得します。
createTask: 新しいタスクをデータベースに追加します。
deleteTask: ID に基づいてタスクを削除します。

ステップ 5: ビューを設定する

この例では、EJS を使用して HTML ビューをレンダリングします。これにより、タスクデータをブラウザーに動的に表示できるようになります。

ホームページ用のindex.ejsファイルとタスクを表示するためのtasks.ejsファイルを作成します。

<!-- views/index.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Manager</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <h1>Welcome to Task Manager</h1>
    <a href="/tasks">View Tasks</a>
</body>
</html>

ログイン後にコピー

tasks.ejs ファイルはタスクのリストを表示し、タスクを追加または削除するためのフォームを提供します。

<!-- views/tasks.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
</head>
<body>
    <h1>Tasks</h1>

    <ul>
        <% tasks.forEach(task => { %>
            <li><%= task.title %> - <a href="/delete/<%= task._id %>">Delete</a></li>
        <% }) %>
    </ul>

    <form action="/add" method="POST">
        <input type="text" name="title" placeholder="Task Title" required>
        <input type="text" name="description" placeholder="Description">
        <button type="submit">Add Task</button>
    </form>
</body>
</html>

ログイン後にコピー

ステップ 6: ルートを設定する

メインの app.js ファイルでルートを定義し、各 URL エンドポイントを関連するコントローラー関数に接続します。

// app.js

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const taskController = require('./controllers/taskController');

const app = express();
app.set('view engine', 'ejs');

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

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

// Routes
app.get('/', (req, res) => res.render('index'));
app.get('/tasks', taskController.getTasks);
app.post('/add', taskController.createTask);
app.get('/delete/:id', taskController.deleteTask);

const PORT = 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

ログイン後にコピー