タスク管理（ToDo）

便利ツールのまとめサイトトップ
タスク管理（ToDo）

自分のWebブラウザーだけでタスク管理（ToDo）ができます。自分の端末にしか保存されないため、他の人には見られません。

期限

タスク管理（ToDo）の注意事項

予告なく閲覧できなくなる可能性があります。
タスク管理（ToDo）などに関して当サイトは一切責任を負いません。

タスク管理（ToDo）ツールについて

タスク管理（ToDo）ツールはJavaScriptで制作しています。掲載しているソースコードは解説のために改変や省略をしているので、タスク管理（ToDo）ツールで実際に使用しているソースコードとは異なります。

使用しているJavaScriptのライブラリ

jQuery v3.3.1
flatpickr v4.6.3

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>

ローカルストレージが利用可能か確認

タスクの保存先としてローカルストレージを使用するため、まずはローカルストレージを使用できるかどうかを確認します。

JavaScript

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;
    }
}

出典：Web Storage API を使用する - Web API | MDN

期日を設定するデータピッカー

期日フィールドがクリックされた時に表示されるデータピッカーを設定します。初期値として現在の日付をセットします。

JavaScript

$('#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;
}

タスクを登録して表示

追加するボタンが押された時にタスクを登録し、表示します。

JavaScript

$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データをオブジェクトに変換して変数に格納します。

JavaScript

let task = localStorage.getItem('task');

if (task === null) {
    task = [];
} else {
    task = JSON.parse(localStorage.getItem('task'));
}

登録する内容を変数に追加

登録する内容をpushメソッドを使用して変数に追加します。オブジェクトをJSON文字列に変換してからローカルストレージ内のタスク一覧を更新します。

JavaScript

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);
}

タスクを表示

ローカルストレージ内のタスク一覧を更新したらタスクを表示します。

JavaScript

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文字列として変数に格納します。

JavaScript

let task = localStorage.getItem('task');
    
if (task !== null) {
    task = JSON.parse(task);
}

タスクを期限順で並び替え

取得したタスクを期限順で昇順します。

JavaScript

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を組み立てて変数に格納します。登録されている内容は不具合を防ぐために特殊文字をエスケープします。

JavaScript

$.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 = {
            '<': '&lt;',
            '>': '&gt;',
            '&': '&amp;',
            '"': '&quot;',
            "'": '&#39;',
            '`': '&#x60;'
        };
        return escape[match];
    });
}

HTMLをタスク一覧の表示箇所に追加

すでに表示済みのタスクをemptyメソッドで空にしてから、組み立てたHTMLをappendメソッドを使用して追加し表示します。

JavaScript

$('#task-list').empty().append(html);

タスク追加の入力フィールドを初期化

タスクを続けて登録できるように、入力フィールドを初期化します。

JavaScript

$('#task-content').val('');
$('#task-deadline').val(getNowDate());

タスクを削除

完了ボタンが押された時にタスクを削除します。

JavaScript

$('#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などの偽とみなされる値以外の一覧を生成することができます。

JavaScript

task = task.filter((v) => {
    return v.id !== removeData;
});

localStorage.setItem('task', JSON.stringify(task.filter(Boolean)));

タスクの編集用ボックスを表示

編集が押された時に編集用ボックスを表示します。

JavaScript

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()]
    });
}

タスクの編集

保存するボタンが押された時に、編集用ボックスに入力された内容でタスクを編集して再登録します。

JavaScript

$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メソッドを使用して生成します。

JavaScript

task = task.filter((v) => {
    return v.id !== editDataId;
});

編集したタスクを登録

上記で生成したタスク一覧にpushメソッドを使用して編集したタスクを追加し、JSON.stringifyメソッドを使用してJSON文字列に変換してからローカルストレージに保存します。

JavaScript

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）

自分のWebブラウザーだけでタスク管理（ToDo）ができます。

エクセル関数

エクセル関数を検索できます。

麻雀の点数計算

麻雀の和了時の点数（符数／翻数／役）を計算することができます。

便利なショートカット一覧

Windows 10やExcelなどで使用できる便利なショートカットを確認できます。

電気料金計算

消費電力、使用時間、使用日数、1kWh単価から電気料金を計算できます。

パスワード生成（作成）

大文字・小文字・数字・記号を含むランダムなパスワードを生成できます。

名前	きょうみくん
身長	181.1cm
誕生日	1月21日
所属	日本ＰＣサービス株式会社
コメント	パソコン、インターネット、サーモン、ミルクティーが好きです。猫ではありません。エクセル家計簿の作り方など、技術的なコラムを書いているTech Blogも運営しています。

自分のWebブラウザーだけでタスク管理（ToDo）ができます | ちょっとした時にあると便利なWebブラウザー上で使用できるツール集です。

タスク管理（ToDo）

タスク管理（ToDo）の注意事項

タスク管理（ToDo）ツールについて

使用しているJavaScriptのライブラリ

HTML

ローカルストレージが利用可能か確認

期日を設定するデータピッカー

タスクを登録して表示

登録済みのタスクを変数に格納

登録する内容を変数に追加

タスクを表示

ローカルストレージから登録済みのタスクを取得

タスクを期限順で並び替え

タスクを1つずつHTMLで組み立てて変数に格納

HTMLをタスク一覧の表示箇所に追加

タスク追加の入力フィールドを初期化

タスクを削除

タスク一覧から対象のタスクを削除

タスクの編集用ボックスを表示

タスクの編集

編集するタスク以外のタスク一覧を生成

編集したタスクを登録

おわりに