【ITニュース解説】Full-Stack TodoApp: Node.js, Express, MongoDB, and EJS Guide

Todoアプリケーションは、システムエンジニアを目指す初心者がウェブ開発の基礎を学ぶのに最適な教材である。このニュース記事では、Node.js、Express、MongoDB、そしてHandlebars（記事ではEJSの代わりに使われている）といった主要技術を組み合わせたTodoアプリの構築を通じて、ウェブアプリケーションの基本的な仕組みを解説している。

まず、このアプリケーションが持つ基本的な機能は、新しいTodo項目をリストに追加する、既存のすべてのTodo項目をウェブブラウザに表示する、特定のTodo項目をリストから削除する、そして特定のTodo項目だけを詳細に表示する、という四つだ。これらの機能を永続的に利用するためには、データを保存する場所が必要となり、そこで「MongoDB」というデータベースが利用される。

MongoDBは「NoSQLデータベース」の一種で、データを「BSON」というJSONに似た形式で保存する。これは、柔軟なデータ構造でデータを扱える点が特徴だ。MongoDBを使うには、まずシステムにインストールし、データベースサーバーを起動する必要がある。記事では、mongod --dbpath=dataというコマンドを使って、データを保存するディレクトリを指定してMongoDBサーバーを起動する方法が示されている。サーバーが正しく起動しているかは、http://localhost:27017のような特定のURLにアクセスして確認できる。

次に、Node.jsで書かれたJavaScriptアプリケーションとMongoDBを連携させるために「Mongoose」というライブラリが登場する。MongooseはNode.jsとMongoDBの間の橋渡し役となり、「ODM（Object Data Modeling）」と呼ばれる手法で、JavaScriptのオブジェクトとしてデータベースのデータを操作できるようにする。Mongooseをプロジェクトに導入するには、npm init --yで初期化後、npm i express（ウェブアプリケーションフレームワーク）とnpm install mongooseをインストールする。Mongooseでは、データベースに保存するデータの構造を「スキーマ」として定義する。Todoアプリの場合、「タスク名（taskName）」と「説明（Description）」を持つTodoスキーマを作成する。MongoDBが自動的にユニークなIDを付与するため、IDはスキーマで定義する必要はない。このスキーマに基づいて作成されるのが「モデル」で、これが実際のデータベースのコレクション（関係データベースのテーブルに相当）と対応し、データ操作の窓口となる。

ウェブアプリケーション開発において、コードを機能ごとに分割し管理しやすくすることは非常に重要だ。Node.jsでは、「module.exports」という特別なオブジェクトを使って、あるファイルで定義した機能（関数やオブジェクトなど）を別のファイルから利用できるようにする。例えば、Todoスキーマを定義したファイルをmodule.exportsで公開することで、Todoの追加や削除といった具体的な処理を記述する別のファイルから、そのスキーマを利用してデータベース操作を行うことが可能になる。

ユーザーがブラウザで目にする画面をどのように生成するかも重要なポイントだ。記事では「サーバーサイドレンダリング」という手法を採用し、そのために「Handlebars（hbs）」というテンプレートエンジンを使用している。これは、サーバー側でHTMLファイルを生成する際に、JavaScriptの変数を埋め込んだり、条件によって表示内容を変えたり、リストを繰り返し表示したりできる仕組みだ。静的なHTMLファイルをそのまま提供するよりも、動的なコンテンツを生成する際に非常に効率的である。Handlebarsを使うには、npm install hbsでインストールし、Expressアプリケーションでapp.set('view engine','hbs')と設定する。テンプレートファイルは通常viewsというフォルダに置き、res.render('index')のように記述することで、index.hbsなどのテンプレートファイルをブラウザに送信する。CSSなどの静的ファイルは別のフォルダに置き、app.use(express.static())で提供する。

アプリケーションの基盤が整うと、次は実際にデータを操作する「CRUD操作」（Create:作成、Read:読み込み、Update:更新、Delete:削除）の実装に進む。

Todoの追加（Create）：ウェブページのフォームにタスク名と説明を入力し、「Add Todo」ボタンを押すと、ブラウザからサーバーへ「POSTリクエスト」が送信される。このリクエストはフォームのaction属性で指定されたURLパスに送られ、サーバー側のNode.jsアプリケーションがそれを受け取る。アプリケーションはtodoFun.jsというファイルに定義されたaddTodo関数を非同期に呼び出す。addTodo関数は受け取ったデータを基に新しいTodoをMongooseを使ってデータベースに保存し、処理が成功したことを返す。その後、アプリケーションは通常、基本のURLパス（/）にリダイレクトされ、新しいTodoが追加された状態のページが表示される。

全Todoの取得（Read All）：基本のURLパス（/）にアクセスすると、ブラウザからサーバーへ「GETリクエスト」が送信される。サーバーはtodoFun.jsのgetTodo関数を非同期に呼び出す。このgetTodo関数はMongooseのfind()メソッドを使ってデータベース内のすべてのTodo項目を取得し、そのデータを呼び出し元に返す。取得されたTodoデータのリストは、res.renderメソッドを使ってindex.hbsテンプレートファイルに渡される。index.hbsでは、Handlebarsのループ構文（{{#each todos}}など）を使って、受け取ったTodoデータを一つずつウェブページ上のリストとして表示する。

Todoの削除（Delete）：表示されている各Todoの横に配置された「Delete」ボタンをクリックすると、そのTodoのユニークなIDを含む特定のURLパスへ「GETリクエスト」が送信される。サーバーは、リクエストのURLからそのTodoのID（req.paramsを通じて取得）を抽出し、todoFun.jsのdelTodo関数を呼び出す。delTodo関数はMongooseのdeleteOne()メソッドを使い、指定されたIDに一致するTodoをデータベースから削除する。削除処理が完了すると、アプリケーションは再び基本のURLパスにリダイレクトされ、削除されたTodoがリストから消えた状態のページが表示される。

特定のTodoの取得（Read One）：表示されているTodoのいずれかをクリックすると、そのTodoのIDを含むURLパス（例: /todo/:id）へ「GETリクエスト」が送信される。サーバーはURLからクリックされたTodoのIDを抽出し、todoFun.jsのgetTodo関数を再度呼び出す。今回は、MongooseのfindOne()メソッドを使って、指定されたIDに一致する一つのTodoだけをデータベースから取得する。取得された単一のTodoデータは、res.renderメソッドを通じてindex.hbsテンプレートに渡される。この際、ブラウザのURLパスもtodo/:idのように変化し、選択したTodoの詳細情報だけが表示されるページが生成される。

このようにして、Node.js、Express、MongoDB、そしてHandlebarsを組み合わせて、データの永続化と基本的なCRUD操作が可能なTodoアプリケーションが完成する。この一連の開発プロセスを通じて、ウェブアプリケーションがどのように機能し、ユーザーからのリクエストに応答し、データを管理して表示するのかという、システムエンジニアにとって不可欠な基礎知識を実践的に習得できる。