node-js todo-list

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 -ypackage.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 を使うと、コードを変更するたびにサーバーが自動でリスタートします。

確認事項

  1. コマンドはプロジェクトディレクトリ内で実行してください。
  2. ブラウザから http://localhost:3000 へアクセスして動作確認ができます。

投稿者: chosuke

趣味はゲームやアニメや漫画などです

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です