JavaScriptとPHPを使って、自分用のTodoリストを作ります。
HTML構造
HTMLはとりあえずこんな感じです。
追加用のinputとタスクを表示するところです。
<main>
<section id="todo-input-section">
<h2>新しいタスクを追加</h2>
<input type="text" id="todo-input" placeholder="入力してください">
<button id="add-todo-btn">追加</button>
</section>
<section id="todo-list-section">
<h2>未完了のタスク</h2>
<ul id="todo-list">
<!-- ここにタスクが追加されます -->
</ul>
</section>
<section id="completed-tasks-section">
<h2>完了したタスク</h2>
<ul id="completed-tasks">
<!-- ここに完了したタスクが表示されます -->
</ul>
</section>
</main>
新しいタスクを追加
未完了のタスク
完了したタスク
HTMLの修正とJavaScript
時間の記録が必須ですね。
spanタグを使って一行内に表示されるようにしましょう。
また、未完了のタスクを完了にするボタンもいります。
マークでもいいし、テキストでもいいし、ボタンを追加しました。
<section id="todo-input-section">
<h2>新しいタスクを追加</h2>
<input type="text" id="todo-input" placeholder="入力してください">
<input type="hidden" id="task-created-time">
<button id="add-todo-btn"><i class="fas fa-plus"></i> 追加</button>
</section>
<section id="todo-list-section">
<h2>未完了のタスク</h2>
<ul id="todo-list">
<!-- タスク例:
<li>
<span class="task-text">タスク内容</span>
<span class="task-time">追加時間: 2023-10-31 12:30</span>
<button class="complete-btn">完了</button>
</li>
-->
</ul>
</section>
<section id="completed-tasks-section">
<h2>完了したタスク</h2>
<ul id="completed-tasks">
<!-- タスク例:
<li>
<span class="task-text">タスク内容</span>
<span class="task-time">追加時間: 2023-10-31 12:30</span>
<span class="completion-time">完了時間: 2023-10-31 13:00</span>
</li>
-->
</ul>
</section>
document.addEventListener('DOMContentLoaded', function() {
// DOM要素の取得
const taskInput = document.getElementById("todo-input"); // タスク入力フィールド
const addButton = document.getElementById("add-todo-btn"); // タスク追加ボタン
const pendingTasksList = document.getElementById("todo-list"); // 未完了タスクリスト
const completedTasksList = document.getElementById("completed-tasks"); // 完了タスクリスト
// タスク追加ボタンのクリックイベントリスナー
addButton.addEventListener("click", function() {
// 入力値を取得してトリム
const description = taskInput.value.trim();
if (description) {
// タスクを追加し、入力フィールドをクリア
addTask(description);
taskInput.value = '';
}
});
// すべてのタスクを取得する関数を呼び出す
getAllTasks();
// タスクを追加する関数
function addTask(description) {
fetch('addTask.php', {
method: 'POST',
body: new URLSearchParams({
'description': description
}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
// タスクを追加した後、すべてのタスクを再度取得
getAllTasks();
} else {
console.error(data.message);
}
});
}
// タスクを完了させる関数
function completeTask(taskId) {
fetch('completeTask.php', {
method: 'POST',
body: new URLSearchParams({
'id': taskId
}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
// タスクを完了した後、すべてのタスクを再度取得
getAllTasks();
} else {
console.error(data.message);
}
});
}
// すべてのタスクを取得する関数
function getAllTasks() {
fetch('getTasks.php')
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
// タスクを取得した後、タスクを表示する関数を呼び出す
renderTasks(data.tasks);
} else {
console.error(data.message);
}
});
}
// タスクを表示する関数
function renderTasks(tasks) {
// タスクリストをクリア
pendingTasksList.innerHTML = '';
completedTasksList.innerHTML = '';
// タスクごとに処理
tasks.forEach(task => {
const taskItem = document.createElement('li');
taskItem.textContent = task.description + " (追加時間: " + task.added_time + ")";
if(task.status === "completed") {
taskItem.textContent += " (完了時間: " + task.completed_time + ")";
completedTasksList.appendChild(taskItem);
} else {
const completeButton = document.createElement('button');
completeButton.textContent = "完了";
completeButton.addEventListener('click', () => completeTask(task.id));
taskItem.appendChild(completeButton);
pendingTasksList.appendChild(taskItem);
}
});
}
});
PHP
データベース
まず、MySQLでデータベースを作成します!
字段名 | データ型 | 説明 |
---|---|---|
id | INT, AUTO_INCREMENT | タスクのID |
description | VARCHAR(255) | タスクの内容 |
added_time | DATETIME | タスクがリストに追加された時間 |
completed_time | DATETIME, NULLABLE | タスクが完了した時間 (タスクが未完了の場合はNULL) |
status | ENUM(‘pending’, ‘completed’) | 現在のタスクの状態 |
tasks
SQL文は以下の通りです。
CREATE TABLE tasks (
id INT AUTO_INCREMENT PRIMARY KEY,
description VARCHAR(255) NOT NULL,
added_time DATETIME NOT NULL,
completed_time DATETIME,
status ENUM('pending', 'completed') NOT NULL DEFAULT 'pending'
);
必要に応じて、さらに拡張や調整を行うこともできます。
たとえば、タスクの優先度を示すための「priority」フィールドを追加したり、タスクの締め切り日を示す「due_date」フィールドを追加するなどが考えられます。
ENUM
データ型を使って、カテゴリーを定義する場合
タブ分類を行うつもりでしたが、少し面倒だったので、このままでやめておきます。
予め定義されたカテゴリーを使う場合、ENUM
データ型を使って、カテゴリーをtasks
テーブルに直接組み込むことができます。
以下は、ENUM
型を使用してcategory
フィールドをtasks
テーブルに追加する例です。
CREATE TABLE tasks (
id INT AUTO_INCREMENT PRIMARY KEY,
description VARCHAR(255) NOT NULL,
added_time DATETIME NOT NULL,
completed_time DATETIME,
status ENUM('pending', 'completed') NOT NULL DEFAULT 'pending',
category ENUM('仕事', '学習', '生活', '娯楽') NOT NULL
);
このテーブル定義では、新たにcategory
列を追加しており、それは仕事
、学習
、生活
、娯楽
の4つの値しか取ることができません。そして、タスクが作成される際には、これらのカテゴリーのいずれかが必ず指定されるようになっています。
db.php
データベース接続にするファイルを作成します。
<?php
$host = "データベースホスト名";
$dbname = "データベース名";
$user = "ユーザー名";
$pass = "パスワード";
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
die("Connection failed: " . $e->getMessage());
}
?>
addTask.php
a. タスクを追加する (addTask.php
)
<?php
include 'db.php';
$description = $_POST['description'];
$added_time = date("Y-m-d H:i:s");
$stmt = $pdo->prepare("INSERT INTO tasks (description, added_time, status) VALUES (?, ?, 'pending')");
$stmt->execute([$description, $added_time]);
echo json_encode(['status' => 'success', 'message' => 'Task added successfully']);
?>
completeTask.php
b. タスクを完成済みにする (completeTask.php
)
<?php
include 'db.php';
$taskId = $_POST['id'];
$completed_time = date("Y-m-d H:i:s");
$stmt = $pdo->prepare("UPDATE tasks SET status = 'completed', completed_time = ? WHERE id = ?");
$stmt->execute([$completed_time, $taskId]);
echo json_encode(['status' => 'success', 'message' => 'Task marked as completed']);
?>
getTasks.php
c. タスクを取得する (getTasks.php
)
<?php
include 'db.php';
$stmt = $pdo->query("SELECT * FROM tasks");
$tasks = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode(['status' => 'success', 'tasks' => $tasks]);
?>
CSSスタイル
最後はCSSファイルを書きます。
HTMLの部分は非常にシンプルなので、タグにスタイルを適用するだけで完成です。
新しいタスクを追加
未完了のタスク
- タスク内容 追加時間: 2023-10-31 12:30
完了したタスク
- タスク内容 追加時間: 2023-10-31 12:30 完了時間: 2023-10-31 13:00
まとめ
これは僕が作った最終版です。
PC
![](https://codinghaku.com/wp-content/uploads/2023/11/todolist-pc-500x350.png)
モバイル
![](https://codinghaku.com/wp-content/uploads/2023/11/todolist-300x649.png)
コメント