導入 ✨
「まずは動くアプリを作ってみたい！」
そんなときにぴったりなのが TODOアプリ です。
前記事では LocalStorage を使ってデータを保存しました。
でも実際のアプリ開発では、サーバ側にある データベース を使うのが一般的です。
なぜでしょうか？
- 端末やブラウザが変わっても同じデータを共有できる
- データが増えても整理や検索がしやすい
- バックアップや復元がしやすい
- 壊れにくく信頼性が高い
つまり、LocalStorageは「机の引き出し」、データベースは「ちゃんとした倉庫」。
規模が大きくなればなるほど、倉庫の出番です。
まずは動きを見てみよう 🎯
完成形のアプリは、以下のことができます。
- 一覧表示: 起動時に登録済みのTODOが並ぶ
- 追加: タスクを入力するとリストに1件追加
- 完了切り替え: チェックボックスで完了済み/未完了を切り替え
- 削除: 不要になったタスクを消す
👉 これはまさに「TODOアプリの基本セット」です。
シンプルですが、この流れの中に Webアプリの基本サイクル（表示→操作→保存→再表示） が詰まっています。
次の動画のように動きます。
仕組みを理解する 🔧
登場人物の対応関係（店のたとえ）
- 店（Webサイト）
- 顧客（ユーザー）
- 売り場とレジUI（index.html）
- 店員・レジシステム（server.js）
- 倉庫（データベース）
- 店の裏にある小さな倉庫＝todo.db（SQLite）
- 伝票（APIリクエスト：GET/POST/PUT/DELETE）
- 倉庫への指示書（SQL：SELECT/INSERT/UPDATE/DELETE）
店が動く流れ（画面→サーバ→倉庫→サーバ→画面）
- 顧客が売り場UI（index.html）で操作し、伝票（API）を切る
- 店員（server.js）が伝票を受け取り、倉庫に指示書（SQL）を出す
- 倉庫（todo.db）が応答し、結果がサーバを経由して画面に返る
処理ごとの流れ
- 在庫一覧を見る（GET /api/todos）
- 伝票: 「在庫を新しい順に見せて」
- 指示書: SELECT … ORDER BY id DESC
- 画面: リストを描画
- 新しい商品を入れる（POST /api/todos）
- 伝票: 「この商品を入庫して」
- 指示書: INSERT … → last_insert_rowid() で確認
- 画面: 返ってきた1件をリストに追加
- ラベルを付け替える（PUT /api/todos/:id）
- 伝票: 「この商品に完了ラベルを付ける／タイトルを直す」
- 指示書: UPDATE … SET title=…, completed=… WHERE id=…
- 画面: 打ち消し線の見た目を切り替え
- 廃棄する（DELETE /api/todos/:id）
- 伝票: 「この商品を廃棄して」
- 指示書: DELETE … → changes() で削除件数を確認
- 画面: 行を削除
コードとたとえの対応
- index.html（売り場・レジUI）
- 入庫・在庫確認・ラベル変更・廃棄のボタンや入力欄
- fetch で伝票（API）を発行
- server.js（店員・レジシステム）
- 伝票をSQLに変えて実行
- 結果をJSONで返す
- 学習用にSQLを直接書いて「見える化」
- todo.db（倉庫）
- 棚（テーブル）と仕切り（カラム）を用意
- 例: id（番号）、title（商品名）、completed（完了フラグ）、created_at（入庫日時）
コードを書いてみよう 💻
学習のしやすさを優先して、SQLiteを使います。todo.db というファイルをプロジェクトと同じフォルダに置き、server.js に直接SQLを書いて「どんな命令を送っているか」が分かるようにしています。
次のURL先にコードを置いています。
https://github.com/daiki3027/todo/tree/server_and_database
次のようなディレクトリ構成にしてください。
index.html, server.jsを同じディレクトリに置いてください。
todo
|--- index.html
|--- server.js実行してみよう 🖱️
Node.js がある前提で進めます。
① SQLiteをインストール（WSLの場合）
sudo apt-get update && sudo apt-get install -y sqlite3② プロジェクトを準備
npm init -y
npm i express better-sqlite3③ サーバを起動
node server.js
# Server running on http://localhost:3000④ ブラウザで確認
http://localhost:3000/ を開いて操作！
👉 todo.db を削除するとデータは初期化されます。
コメント