タスク管理(ToDo)
自分のWebブラウザーだけでタスク管理(ToDo)ができます。自分の端末にしか保存されないため、他の人には見られません。
タスク管理(ToDo)の注意事項
- 予告なく閲覧できなくなる可能性があります。
- タスク管理(ToDo)などに関して当サイトは一切責任を負いません。
タスク管理(ToDo)ツールについて
タスク管理(ToDo)ツールはJavaScriptで制作しています。掲載しているソースコードは解説のために改変や省略をしているので、タスク管理(ToDo)ツールで実際に使用しているソースコードとは異なります。
使用しているJavaScriptのライブラリ
HTML
<div id="task-list" class="task-list"></div>
<div id="task-add-box" class="task-add-box">
<textarea id="task-content" class="task-add-box-content"></textarea>
<div class="task-add-box-meta">
<div class="task-add-box-meta-inner">
<div class="task-add-box-deadline-label">期限</div>
<input type="text" id="task-deadline" class="task-add-box-deadline">
</div>
<button id="task-add" class="task-add-box-add">追加する</button>
</div>
</div>
ローカルストレージが利用可能か確認
タスクの保存先としてローカルストレージを使用するため、まずはローカルストレージを使用できるかどうかを確認します。
if (storageAvailable('localStorage')) {
// 使用できる場合
}
function storageAvailable(type) {
try {
var storage = window[type],
x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return e instanceof DOMException && (
e.code === 22 ||
e.code === 1014 ||
e.name === 'QuotaExceededError' ||
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
storage.length !== 0;
}
}
期日を設定するデータピッカー
期日フィールドがクリックされた時に表示されるデータピッカーを設定します。初期値として現在の日付をセットします。
$('#task-deadline').flatpickr({
defaultDate: [getNowDate()]
});
function getNowDate(type) {
let date = new Date();
let year = date.getFullYear();
let month = ('0' + (date.getMonth() +1)).slice(-2);
let day = ('0' + date.getDate()).slice(-2);
return year + '-' + month + '-' + day;
}
タスクを登録して表示
追加するボタンが押された時にタスクを登録し、表示します。
$taskAddButton.on('click', () => {
addTask();
});
function addTask() {
if ($('#task-content').val() !== '') {
let task = localStorage.getItem('task');
if (task === null) {
task = [];
} else {
task = JSON.parse(localStorage.getItem('task'));
}
task.push({
id: getUniqueStr(),
content: $('#task-content').val(),
deadline: $('#task-deadline').val()
});
localStorage.setItem('task', JSON.stringify(task));
showTask();
}
}
登録済みのタスクを変数に格納
すでに登録されているタスクがある場合は、ローカルストレージから取り出し、JSON.parseメソッドでJSONデータをオブジェクトに変換して変数に格納します。
let task = localStorage.getItem('task');
if (task === null) {
task = [];
} else {
task = JSON.parse(localStorage.getItem('task'));
}
登録する内容を変数に追加
登録する内容をpushメソッドを使用して変数に追加します。オブジェクトをJSON文字列に変換してからローカルストレージ内のタスク一覧を更新します。
task.push({
id: getUniqueStr(),
content: $taskContent.val(),
deadline: $taskDeadline.val()
});
localStorage.setItem('task', JSON.stringify(task));
function getUniqueStr() {
let strong = 1000;
return new Date().getTime().toString(16) + Math.floor(strong * Math.random()).toString(16);
}
タスクを表示
ローカルストレージ内のタスク一覧を更新したらタスクを表示します。
showTask();
function showTask() {
let task = localStorage.getItem('task');
let html = '';
let nowDate = new Date(getNowDate()).getTime();
let taskDate = '';
if (task !== null) {
task = JSON.parse(task);
task.sort(compare);
$.each(task, (key, val) => {
if (val !== null) {
taskDate = new Date(val.deadline).getTime();
html += '<div class="task-box-content">';
html += '<button name="task-complete" data-id="' + val.id + '" class="task-box-content-complete">完了</button>';
html += '<span class="task-box-content-inner">' + nl2br(htmlEscape(val.content)) + '</span><br>';
html += '<a data-id="' + val.id + '" class="task-box-content-edit">編集</a>';
html += '</div>';
if (val.deadline !== '') {
html += '<div class="task-box-deadline">期限 <span class="task-box-deadline-inner">' + htmlEscape(val.deadline) + '</span></div>';
}
html += '</div>';
}
});
$taskList.empty().append(html);
$taskContent.val('');
$taskDeadline.val(getNowDate());
}
}
ローカルストレージから登録済みのタスクを取得
ローカルストレージ内のタスクを取得し、JSON.parseメソッドでJSON文字列として変数に格納します。
let task = localStorage.getItem('task');
if (task !== null) {
task = JSON.parse(task);
}
タスクを期限順で並び替え
取得したタスクを期限順で昇順します。
task.sort(compare);
function compare(a, b) {
if (a.deadline === '') {
return 1;
} else if (b.deadline === '') {
return -1;
} else if (a.deadline > b.deadline) {
return 1;
} else if (b.deadline === '' || a.deadline < b.deadline) {
return -1;
} else {
return 0;
}
}
タスクを1つずつHTMLで組み立てて変数に格納
タスクを$.each関数で繰り返して、表示用のHTMLを組み立てて変数に格納します。登録されている内容は不具合を防ぐために特殊文字をエスケープします。
$.each(task, (key, val) => {
if (val !== null) {
taskDate = new Date(val.deadline).getTime();
html += '<div>';
html += '<div>';
html += '<button name="task-complete" data-id="' + val.id + '">完了</button>';
html += '<span>' + nl2br(htmlEscape(val.content)) + '</span><br>';
html += '<a data-id="' + val.id + '">編集</a>';
html += '</div>';
if (val.deadline !== '') {
html += '<div>期限 <span>' + htmlEscape(val.deadline) + '</span></div>';
}
html += '</div>';
}
});
function htmlEscape(str) {
if (!str) return;
return str.replace(/[<>&"'`]/g, (match) => {
const escape = {
'<': '<',
'>': '>',
'&': '&',
'"': '"',
"'": ''',
'`': '`'
};
return escape[match];
});
}
HTMLをタスク一覧の表示箇所に追加
すでに表示済みのタスクをemptyメソッドで空にしてから、組み立てたHTMLをappendメソッドを使用して追加し表示します。
$('#task-list').empty().append(html);
タスク追加の入力フィールドを初期化
タスクを続けて登録できるように、入力フィールドを初期化します。
$('#task-content').val('');
$('#task-deadline').val(getNowDate());
タスクを削除
完了ボタンが押された時にタスクを削除します。
$('#task-list').on('click', '[name="task-complete"]', (e) => {
deleteTask(e);
});
function deleteTask(e) {
let removeData = $(e.currentTarget).data('id');
let task = JSON.parse(localStorage.getItem('task'));
if (task !== null) {
task = task.filter((v) => {
return v.id !== removeData;
});
localStorage.setItem('task', JSON.stringify(task.filter(Boolean)));
}
}
タスク一覧から対象のタスクを削除
filterメソッドを使用して対象以外のタスクを含む一覧を生成し、JSON.stringifyメソッドでJSON文字列に変換してからローカルストレージに保存します。filterメソッドの引数にBooleanオブジェクトを使用することで、nullなどの偽とみなされる値以外の一覧を生成することができます。
task = task.filter((v) => {
return v.id !== removeData;
});
localStorage.setItem('task', JSON.stringify(task.filter(Boolean)));
タスクの編集用ボックスを表示
編集が押された時に編集用ボックスを表示します。
function showEditTaskBox(e) {
let $editDataId = $(e.currentTarget).data('id');
let task = JSON.parse(localStorage.getItem('task'));
let $beforeEditContent = $(e.currentTarget).parent().find('.task-box-content-inner').html();
let html = '<div id="task-edit-box">';
html += '<textarea id="task-edit-content">' + htmlEscape(br2nl($beforeEditContent)) + '</textarea>';
html += '<div class="task-add-box-meta">';
html += '<div class="task-add-box-meta-inner">';
html += '<div class="task-add-box-deadline-label">期限</div>';
html += '<input type="text" id="task-edit-deadline" class="task-add-box-deadline">';
html += '</div>';
html += '<button id="task-edit" class="task-add-box-add" data-id="' + $editDataId + '">保存する</button>';
html += '</div>';
html += '</div>';
$('#task-edit-box').remove();
$(e.currentTarget).parents('.task-box').after(html);
$('#task-edit-deadline').flatpickr({
defaultDate: [$(e.currentTarget).parents('.task-box').find('.task-box-deadline-inner').text()]
});
}
タスクの編集
保存するボタンが押された時に、編集用ボックスに入力された内容でタスクを編集して再登録します。
$taskList.on('click', '#task-edit', (e) => {
editTask(e);
});
function editTask(e) {
let editDataId = $(e.currentTarget).data('id');
let task = JSON.parse(localStorage.getItem('task'));
if ($('#task-edit-content').val() !== '') {
task = task.filter((v) => {
return v.id !== editDataId;
});
task.push({
id: editDataId,
content: $('#task-edit-content').val(),
deadline: $('#task-edit-deadline').val()
});
localStorage.setItem('task', JSON.stringify(task));
}
}
編集するタスク以外のタスク一覧を生成
編集するために、一旦編集するタスク以外の一覧をfilterメソッドを使用して生成します。
task = task.filter((v) => {
return v.id !== editDataId;
});
編集したタスクを登録
上記で生成したタスク一覧にpushメソッドを使用して編集したタスクを追加し、JSON.stringifyメソッドを使用してJSON文字列に変換してからローカルストレージに保存します。
task.push({
id: editDataId,
content: $('#task-edit-content').val(),
deadline: $('#task-edit-deadline').val()
});
localStorage.setItem('task', JSON.stringify(task));
おわりに
今回はローカルストレージを使用しましたが、MySQLなどのRDBを使用して制作することで他の人と共有できるようなタスク管理ツールを制作することも可能です。タスク管理ツールを自作しようと思っている場合は「javascript タスク管理 制作」などで検索してみてください。
税率を設定して税込/税抜金額の消費税計算ができます。
文字数をカウントできます。
和暦と西暦を相互変換できます。
和暦または西暦から年齢を計算できます。
履歴書に必要な学校の入学年・卒業年を生年月日から計算できます。
キロ、マイル、グラム、華氏などの様々な単位を相互変換(換算)できます。
カラーコード(16進数)とRGB値(10進数)を相互変換できます。
Webタイマー(カウントダウン)です。ストップウォッチ機能もあります。
警察や消防などの緊急連絡先や電話番号案内などの電話番号を確認できます。
自分のWebブラウザーだけでタスク管理(ToDo)ができます。
エクセル関数を検索できます。
麻雀の和了時の点数(符数/翻数/役)を計算することができます。
Windows 10やExcelなどで使用できる便利なショートカットを確認できます。
消費電力、使用時間、使用日数、1kWh単価から電気料金を計算できます。
大文字・小文字・数字・記号を含むランダムなパスワードを生成できます。
名前 | きょうみくん |
---|---|
身長 | 181.1cm |
誕生日 | 1月21日 |
所属 | 日本PCサービス株式会社 |
コメント |
パソコン、インターネット、サーモン、ミルクティーが好きです。 エクセル家計簿の作り方など、技術的なコラムを書いているTech Blogも運営しています。 |