Node.js がわからないので雑にやってみる　3　ToDoアプリを作る　その1

good-sun（a03）

これまで

  1. Node.js がわからないので雑にやってみる

  2. Node.js がわからないので雑にやってみる　2 〜Express編

そもそもNode.jsってなんじゃい、触ったことないんじゃい、ということでやって見たのが上記のnoteじゃい。

ToDoアプリ作成のステップ

だいたいこんな感じのステップでやってみるぞい。

  1. Node.jsとプロジェクトのセットアップ

  2. サーバーサイド（Express）でAPIを作成

  3. フロントエンド（HTML, CSS, JavaScript）を作成

  4. データベース（SQLite）を追加

  5. UIの改善と機能の追加

  6. デプロイ

1.Node.jsとプロジェクトのセットアップ

ToDoアプリの作成を進めていくために、Node.jsがちゃんと入ってるかな？関係するファイルをどこに置くかね？っていうのをやります。

今回の環境
MBA M1 2020 16GB
macOS Sonoma 14.6.1

iTerm2
node -v　v20.17.0
npm -v　10.8.2

1.1 Node.jsのインストール確認

node -v
npm -v

1.2 プロジェクトのフォルダ作成

mkdir todo-app
cd todo-app



1.3 プロジェクトを初期化

npm init -y


この辺で　code . で　VS Codeを開いておくことにします。

2.サーバーサイド（Express）でAPIを作成

2.1 Expressのインストール

npm install express　//npm i express　でも同じ。i は install の略

あー、いや、nodemonも入れてみるか
npm i express nodemon

package.jsonにちゃんと入ってんね。

2.2 サーバーファイルの作成
index.jsに書き書き。

// index.js
const express = require('express');
const app = express();
const PORT = 3000;

app.use(express.json()); // JSONデータを処理するためのミドルウェア

// 簡単なテスト用のエンドポイント
app.get('/', (req, res) => {
  res.send('Hello, ToDo App!');
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

//サーバーを起動するために、以下のコマンドを実行
node index.js


2.3 ToDo APIを作成
ToDoリストを管理するためのAPIを作る。

  • GET /todos：ToDoリストの全項目を取得

  • POST /todos：新しいToDoを追加

let todos = [];

// ToDoリストを取得するエンドポイント
app.get('/todos', (req, res) => {
  res.json(todos);
});

// 新しいToDoを追加するエンドポイント
app.post('/todos', (req, res) => {
  const newTodo = req.body;
  todos.push(newTodo);
  res.status(201).json(newTodo);
});

2.4 テストする
curl　とか　Postmanとかでテストする

POSTのテスト

curl -X POST http://localhost:3000/todos \
  -H "Content-Type: application/json" \
  -d '{"task": "Buy groceries", "done": false}'

  • -X POST: POSTリクエストを送信する指定

  • http://localhost:3000/todos: サーバーのエンドポイントのURL

  • -H "Content-Type: application/json": リクエストのデータ形式がJSONであることを指定

  • -d '{"task": "Buy groceries", "done": false}': サーバーに送るデータ

このコマンドを実行すると、サーバーに新しいタスクが送信され、ToDoリストに追加される。



GETのテスト

curl -X GET http://localhost:3000/todos


サーバ起動がうまくいかなかった時は、プロセス殺して再起動した

lsof -i :3000
↓出力例
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME
node 1234 user 12u IPv6 0t0 TCP *:3000 (LISTEN)
↓
kill -9 1234　※-9は強制終了なので注意。今回はテストなのでいいや、と思って安易に使っている。
↓
node index.js

3.フロントエンド（HTML, CSS, JavaScript）を作成

ブラウザからToDoリストを表示・操作できるようにフロントエンドを作る。

  • HTML: ToDoリストのレイアウトやUIの基本構造を作る。

  • CSS: 見た目を整えるためのスタイルを追加する。

  • JavaScript: サーバーとの通信を行い、ToDoの追加や表示を実装する。

3.1　ファイル、フォルダの作成

mkdir public
touch public/index.html public/style.css public/script.js

3.2　HTMLの作成（index.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>My ToDo List</h1>
  <ul id="todo-list"></ul>  <!-- ToDoリストを表示する部分 -->
  <input type="text" id="new-todo" placeholder="New task">  <!-- 新しいタスクの入力欄 -->
  <button onclick="addTodo()">Add</button>  <!-- ToDoを追加するボタン -->

  <script src="script.js"></script>  <!-- JavaScriptファイルを読み込み -->
</body>
</html>

3.3　CSSの作成（style.css）
あとでいくらでも変えられるので、とりあえずって感じで。

body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #f4f4f4;
}

h1 {
  color: #333;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px;
  background: #fff;
  margin: 5px 0;
  border: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input {
  padding: 10px;
  font-size: 16px;
  margin-right: 10px;
}

button {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}


3.4　JavaScriptの作成（script.js）

// ToDoリストをサーバーから取得して表示する関数
async function getTodos() {
    const response = await fetch('/todos');  // サーバーからToDoリストを取得
    const todos = await response.json();  // JSONデータとしてレスポンスをパース
    const todoList = document.getElementById('todo-list');
    todoList.innerHTML = '';  // リストをクリア
  
    // 取得したToDoをリストに表示
    todos.forEach(todo => {
      const li = document.createElement('li');
      li.textContent = todo.task;  // タスク名を表示
      todoList.appendChild(li);  // リストに追加
    });
  }
  
  // 新しいToDoをサーバーに追加する関数
  async function addTodo() {
    const newTodo = document.getElementById('new-todo').value;  // 入力値を取得
    if (newTodo === '') return;  // 空欄の場合は何もしない
  
    await fetch('/todos', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ task: newTodo, done: false })  // 新しいToDoを送信
    });
  
    document.getElementById('new-todo').value = '';  // 入力欄をクリア
    getTodos();  // 更新後にToDoリストを再表示
  }
  
  // ページ読み込み時にToDoリストを取得して表示
  window.onload = getTodos;


3.5　サーバーに反映（index.js）

// 必要なモジュールをインポート
const express = require('express');
const app = express();
const PORT = 3000;

// publicフォルダ内のファイルを提供
app.use(express.static('public')); 

app.use(express.json()); // JSONデータを扱うためのミドルウェア

let todos = []; // ToDoリストを保持する配列

// ToDoリストを取得するエンドポイント
app.get('/todos', (req, res) => {
  res.json(todos); // ToDoリストをJSON形式で返す
});

// 新しいToDoを追加するエンドポイント
app.post('/todos', (req, res) => {
  const newTodo = req.body; // クライアントから送られたデータを取得
  todos.push(newTodo); // 新しいToDoを配列に追加
  res.status(201).json(newTodo); // 追加したToDoを返す
});

// サーバーを起動してポート3000で待ち受け
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});


3.6　サーバー再起動して確認するとめんどいのでnodemon

npm install -g nodemon

nodemon index.js


index.js　直して　出たー


とりあえずここまで。

続き

準備中


#Nodejs
#Express


いいなと思ったら応援しよう！

good-sun（a03）
いただいたサポートで、書籍代や勉強費用にしたり、美味しいもの食べたりします！