Node.js での Todo リストの基本的なファイル構造と実装例を示します。
ファイル構造
javaコードをコピーする/todo-app
├── /node_modules // npmパッケージ
├── /public // 静的ファイル（CSS, JSなど）
│ └── style.css
├── /views // テンプレートファイル（HTML, EJSなど）
│ └── index.ejs
├── /routes // ルーティングファイル
│ └── todos.js
├── app.js // メインのアプリケーションファイル
├── package.json // npmパッケージ設定ファイル
└── README.md // 説明書
1. package.json
jsonコードをコピーする{
"name": "todo-app",
"version": "1.0.0",
"description": "Simple Todo app with Node.js",
"main": "app.js",
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "^4.18.0",
"ejs": "^3.1.6",
"body-parser": "^1.19.0"
}
}
2. app.js
jsコードをコピーするconst express = require('express');
const bodyParser = require('body-parser');
const app = express();
const todoRoutes = require('./routes/todos');
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.use('/', todoRoutes);
app.listen(3000, () => {
console.log('Todo app running on port 3000');
});
3. routes/todos.js
jsコードをコピーするconst express = require('express');
const router = express.Router();
let todos = [];
router.get('/', (req, res) => {
res.render('index', { todos });
});
router.post('/add', (req, res) => {
const newTodo = req.body.todo;
if (newTodo) {
todos.push(newTodo);
}
res.redirect('/');
});
router.post('/delete/:index', (req, res) => {
const index = req.params.index;
if (index >= 0 && index < todos.length) {
todos.splice(index, 1);
}
res.redirect('/');
});
module.exports = router;
4. views/index.ejs
htmlコードをコピーする<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo App</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>Todo List</h1>
<form action="/add" method="POST">
<input type="text" name="todo" placeholder="Add a new task" required>
<button type="submit">Add</button>
</form>
<ul>
<% todos.forEach((todo, index) => { %>
<li>
<%= todo %>
<form action="/delete/<%= index %>" method="POST" style="display:inline;">
<button type="submit">Delete</button>
</form>
</li>
<% }) %>
</ul>
</body>
</html>
5. public/style.css
cssコードをコピーするbody {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
h1 {
margin-top: 20px;
}
form {
margin-bottom: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 5px 0;
display: flex;
justify-content: center;
align-items: center;
}
button {
margin-left: 10px;
}
このコードは、Node.js を使用してシンプルな Todo リストを作成する基本構造を示しています。 express フレームワークを使ってルーティングを行い、 ejs を使ってテンプレートを表示しています。
4o
あなた:
コマンド
ChatGPT:
ChatGPT
以下は、Node.js での Todo リストアプリを実行するためのコマンドの手順です。
1. プロジェクトの初期化
最初に新しいプロジェクトフォルダを作成し、その中でプロジェクトを初期化します。
bashコードをコピーするmkdir todo-app
cd todo-app
npm init -y
npm init -y で package.json ファイルが自動生成されます。
2. 必要なパッケージのインストール
express, ejs, body-parser などの必要なパッケージをインストールします。
bashコードをコピーするnpm install express ejs body-parser
3. アプリケーションの起動
app.js を実行して、アプリケーションを起動します。
bashコードをコピーするnode app.js
このコマンドを実行後、ブラウザで http://localhost:3000 にアクセスして Todo リストアプリを確認できます。
4. 開発中に自動的に再起動させたい場合 (オプション)
開発中に変更を加えるたびにサーバーを自動的に再起動させたい場合は、nodemon を使用すると便利です。
bashコードをコピーするnpm install -g nodemon
nodemon app.js
nodemon を使うと、コードを変更するたびにサーバーが自動でリスタートします。
確認事項
- コマンドはプロジェクトディレクトリ内で実行してください。
- ブラウザから
http://localhost:3000へアクセスして動作確認ができます。
