MENU
  1. ホーム
  2. JavaScript
  3. JavaScriptでローカルストレージを活用したプロジェクト管理ツールの実装方法

JavaScriptでローカルストレージを活用したプロジェクト管理ツールの実装方法

JavaScript

JavaScriptを使ったウェブ開発において、クライアント側でデータを保存する手段としてローカルストレージが注目されています。ローカルストレージを活用することで、サーバーとの通信なしにデータを永続的に保存でき、ユーザー体験を向上させることが可能です。本記事では、ローカルストレージを活用したプロジェクト管理ツールの実装方法について詳しく解説します。このツールを通じて、ローカルストレージの基本操作から、プロジェクト管理のための各種機能の実装まで、実践的なスキルを身につけることができます。

目次
  1. ローカルストレージとは
  2. プロジェクト管理ツールの要件定義
    1. 1. プロジェクトの追加機能
    2. 2. プロジェクトの編集と削除機能
    3. 3. 進捗管理機能
    4. 4. ローカルストレージを利用したデータ保存
  3. HTMLとCSSでの基本構造の作成
    1. 1. HTMLの構造
    2. 2. CSSでのスタイル付け
  4. JavaScriptでのローカルストレージ操作
    1. 1. ローカルストレージにデータを保存する
    2. 2. ローカルストレージからデータを取得して表示する
    3. 3. ローカルストレージからデータを削除する
  5. プロジェクトの追加機能の実装
    1. 1. プロジェクト追加フォームのイベント処理
    2. 2. プロジェクトの表示更新
    3. 3. エラーハンドリングとフォームのリセット
  6. プロジェクトの編集と削除機能
    1. 1. プロジェクト編集機能の実装
    2. 2. プロジェクト削除機能の実装
    3. 3. プロジェクトリストの更新表示
  7. プロジェクトの進捗管理機能
    1. 1. 進捗の入力インターフェース
    2. 2. 進捗バーの表示
    3. 3. 進捗管理機能のデザイン調整
  8. ローカルストレージデータのバックアップと復元
    1. 1. データのエクスポート機能の実装
    2. 2. データのインポート機能の実装
    3. 3. バックアップと復元のUI追加
    4. 4. デザイン調整とユーザビリティ向上
  9. 応用例：タグによるプロジェクト分類
    1. 1. タグ入力フィールドの追加
    2. 2. タグの保存と表示
    3. 3. タグによるフィルタリング機能
    4. 4. タグフィルタのUI追加
    5. 5. タグ機能のデザイン調整
  10. まとめ

ローカルストレージとは

ローカルストレージは、ブラウザ内でデータを保存するためのクライアントサイドのストレージ機能です。JavaScriptを使用して、キーと値のペアでデータを保存でき、データはブラウザを閉じても消えずに残るため、ユーザーが次回サイトを訪問した際にも利用可能です。これにより、サーバーとの通信を減らし、よりスムーズなユーザー体験を提供できます。さらに、ローカルストレージは最大5MBのデータを保存でき、セッションストレージと異なり、セッションの終了後もデータが保持される点が特徴です。

プロジェクト管理ツールの要件定義

プロジェクト管理ツールを構築する際には、まずその要件を明確に定義することが重要です。このツールでは、以下の機能が必要とされます。

1. プロジェクトの追加機能

新しいプロジェクトをユーザーが追加できるインターフェースが必要です。プロジェクト名、開始日、終了日、進捗状況などの情報を入力できるようにします。

2. プロジェクトの編集と削除機能

既存のプロジェクトを編集したり、不要になったプロジェクトを削除する機能が求められます。これにより、ユーザーは柔軟にプロジェクトを管理できます。

3. 進捗管理機能

プロジェクトの進行状況を視覚的に管理するための機能が必要です。進捗バーやステータス表示を利用して、各プロジェクトの状態を一目で把握できるようにします。

4. ローカルストレージを利用したデータ保存

ユーザーが追加したプロジェクトデータはローカルストレージに保存され、ブラウザを閉じてもデータが保持されるようにします。これにより、データの永続性が確保されます。

これらの機能を実装することで、ユーザーが効率的にプロジェクトを管理できるツールを作成することが目指されます。

HTMLとCSSでの基本構造の作成

プロジェクト管理ツールのユーザーインターフェースを構築するためには、まずHTMLとCSSを使用して基本的な構造を作成する必要があります。このセクションでは、プロジェクト管理ツールのフレームワークとなる基本的なレイアウトを定義します。

1. HTMLの構造

HTMLを使って、プロジェクト管理ツールの基盤となる各要素を配置します。以下の要素が必要です：

  • プロジェクトを追加するための入力フォーム（プロジェクト名、開始日、終了日など）
  • 追加されたプロジェクトを表示するためのリストエリア
  • 各プロジェクトの編集や削除ボタンを含むコンテナ

以下は、基本的なHTML構造の例です：

<div class="container">
  <h1>プロジェクト管理ツール</h1>
  <form id="project-form">
    <input type="text" id="project-name" placeholder="プロジェクト名">
    <input type="date" id="start-date">
    <input type="date" id="end-date">
    <button type="submit">追加</button>
  </form>
  <div id="project-list"></div>
</div>

2. CSSでのスタイル付け

CSSを使って、上記のHTML構造にスタイルを適用し、見やすく整えます。ここでは、レイアウトの基本的なスタイルと、ユーザーインターフェースの視覚的な要素を整えます。

以下は、基本的なCSSスタイルの例です：

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 8px;
}

h1 {
  text-align: center;
  color: #333;
}

form {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

input[type="text"],
input[type="date"] {
  flex: 1;
  padding: 10px;
  margin-right: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

button {
  padding: 10px 20px;
  background-color: #5cb85c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #4cae4c;
}

#project-list {
  margin-top: 20px;
}

このHTMLとCSSを基に、次のステップでJavaScriptを用いたロジックの実装に進み、実際に機能するプロジェクト管理ツールを構築します。

JavaScriptでのローカルストレージ操作

JavaScriptを使用して、プロジェクト管理ツールのデータをローカルストレージに保存、取得、削除する方法を実装します。ローカルストレージを活用することで、ユーザーがブラウザを閉じてもデータが保持され、次回アクセス時に再利用できるようになります。

1. ローカルストレージにデータを保存する

まず、ユーザーがプロジェクトを追加した際、そのデータをローカルストレージに保存する方法を実装します。以下は、プロジェクトを追加し、ローカルストレージに保存する基本的なコードです：

document.getElementById('project-form').addEventListener('submit', function(event) {
  event.preventDefault();

  const projectName = document.getElementById('project-name').value;
  const startDate = document.getElementById('start-date').value;
  const endDate = document.getElementById('end-date').value;

  const project = {
    name: projectName,
    start: startDate,
    end: endDate
  };

  let projects = JSON.parse(localStorage.getItem('projects')) || [];
  projects.push(project);

  localStorage.setItem('projects', JSON.stringify(projects));

  displayProjects();
});

このコードは、プロジェクトを追加するフォームが送信されたときに実行され、フォームに入力されたデータをオブジェクトとしてローカルストレージに保存します。すでに保存されているプロジェクトデータは配列に保持され、新しいプロジェクトが追加されると、その配列に追加されます。

2. ローカルストレージからデータを取得して表示する

保存されたプロジェクトをユーザーに表示するためには、ローカルストレージからデータを取得し、それをHTMLに反映する必要があります。以下のコードは、ローカルストレージからプロジェクトリストを取得し、表示する方法を示します：

function displayProjects() {
  const projects = JSON.parse(localStorage.getItem('projects')) || [];
  const projectList = document.getElementById('project-list');

  projectList.innerHTML = '';

  projects.forEach((project, index) => {
    const projectItem = document.createElement('div');
    projectItem.className = 'project-item';
    projectItem.innerHTML = `
      <h3>${project.name}</h3>
      <p>開始日: ${project.start}</p>
      <p>終了日: ${project.end}</p>
      <button onclick="deleteProject(${index})">削除</button>
    `;
    projectList.appendChild(projectItem);
  });
}

// ページ読み込み時にプロジェクトを表示
document.addEventListener('DOMContentLoaded', displayProjects);

この関数は、ローカルストレージからプロジェクトデータを取得し、それをループでHTML要素として生成し、表示します。ユーザーがページを再読み込みするたびに、保存されたプロジェクトがリストとして表示されるようにしています。

3. ローカルストレージからデータを削除する

最後に、ユーザーがプロジェクトを削除する機能を実装します。以下のコードは、指定されたプロジェクトをローカルストレージから削除し、画面からも消す方法です：

function deleteProject(index) {
  let projects = JSON.parse(localStorage.getItem('projects')) || [];
  projects.splice(index, 1);
  localStorage.setItem('projects', JSON.stringify(projects));

  displayProjects();
}

この関数は、プロジェクトリスト内の特定のインデックスに基づいて、対応するプロジェクトを削除します。削除後、更新されたプロジェクトリストが再表示されます。

これらの基本的なローカルストレージ操作を組み合わせることで、データの保存と管理が可能なプロジェクト管理ツールが実現できます。次のステップでは、さらに高度な機能を実装し、ツールの利便性を向上させます。

プロジェクトの追加機能の実装

プロジェクト管理ツールの基本機能として、新しいプロジェクトを追加する機能を実装します。この機能では、ユーザーが入力したプロジェクト名や開始日、終了日などの情報を取得し、それをローカルストレージに保存する処理を行います。

1. プロジェクト追加フォームのイベント処理

まず、ユーザーがプロジェクトを追加するためにフォームに入力した内容を処理するためのイベントリスナーを設定します。フォームが送信されると、JavaScriptがこのデータを取得し、プロジェクトとして保存します。

document.getElementById('project-form').addEventListener('submit', function(event) {
  event.preventDefault();

  const projectName = document.getElementById('project-name').value;
  const startDate = document.getElementById('start-date').value;
  const endDate = document.getElementById('end-date').value;

  if (projectName === '' || startDate === '' || endDate === '') {
    alert('全てのフィールドを入力してください。');
    return;
  }

  const project = {
    name: projectName,
    start: startDate,
    end: endDate,
    progress: 0  // 初期進捗は0％
  };

  let projects = JSON.parse(localStorage.getItem('projects')) || [];
  projects.push(project);

  localStorage.setItem('projects', JSON.stringify(projects));

  displayProjects();

  // フォームのリセット
  document.getElementById('project-form').reset();
});

このコードでは、ユーザーがフォームを送信すると、projectName、startDate、endDateの値が取得されます。全ての入力フィールドが埋められていることを確認した後、新しいプロジェクトオブジェクトを作成し、それをローカルストレージに保存します。保存後、プロジェクトリストを更新表示し、フォームをリセットします。

2. プロジェクトの表示更新

新しいプロジェクトが追加された後、画面に反映されるように表示を更新します。これには、ローカルストレージからデータを再取得し、画面にプロジェクトリストを再描画する処理を行います。

function displayProjects() {
  const projects = JSON.parse(localStorage.getItem('projects')) || [];
  const projectList = document.getElementById('project-list');

  projectList.innerHTML = '';

  projects.forEach((project, index) => {
    const projectItem = document.createElement('div');
    projectItem.className = 'project-item';
    projectItem.innerHTML = `
      <h3>${project.name}</h3>
      <p>開始日: ${project.start}</p>
      <p>終了日: ${project.end}</p>
      <p>進捗: ${project.progress}%</p>
      <button onclick="deleteProject(${index})">削除</button>
    `;
    projectList.appendChild(projectItem);
  });
}

この関数は、ローカルストレージからプロジェクトデータを取得し、HTML要素として生成、表示する処理を行います。プロジェクトが追加されるたびに、最新のリストが画面に反映されるようになります。

3. エラーハンドリングとフォームのリセット

ユーザー体験を向上させるために、入力が不完全な場合のエラーメッセージ表示や、プロジェクト追加後のフォームリセット機能も実装しています。これにより、ユーザーがスムーズに操作できるよう配慮しています。

このようにして、ユーザーが簡単に新しいプロジェクトを追加できるような機能を実装することで、プロジェクト管理ツールの基本的な操作性が向上します。次に、編集や削除などの機能を追加して、ツールをさらに充実させます。

プロジェクトの編集と削除機能

プロジェクト管理ツールでは、既存のプロジェクトを編集したり、不要になったプロジェクトを削除する機能が求められます。このセクションでは、これらの機能を実装し、ユーザーが柔軟にプロジェクトを管理できるようにします。

1. プロジェクト編集機能の実装

まず、ユーザーが既存のプロジェクトを編集できるようにする機能を実装します。編集ボタンをクリックすると、プロジェクトの現在の情報がフォームに入力され、編集可能な状態になります。

function editProject(index) {
  const projects = JSON.parse(localStorage.getItem('projects')) || [];
  const project = projects[index];

  document.getElementById('project-name').value = project.name;
  document.getElementById('start-date').value = project.start;
  document.getElementById('end-date').value = project.end;

  // フォームの送信ボタンを「更新」に変更
  const submitButton = document.querySelector('form button');
  submitButton.textContent = '更新';

  submitButton.onclick = function(event) {
    event.preventDefault();

    // フォームから新しい値を取得
    project.name = document.getElementById('project-name').value;
    project.start = document.getElementById('start-date').value;
    project.end = document.getElementById('end-date').value;

    projects[index] = project;
    localStorage.setItem('projects', JSON.stringify(projects));

    displayProjects();

    // ボタンとフォームを元の状態に戻す
    submitButton.textContent = '追加';
    submitButton.onclick = null;

    document.getElementById('project-form').reset();
  };
}

このコードでは、編集ボタンがクリックされると、選択されたプロジェクトのデータがフォームに入力され、ユーザーはそれを編集できます。フォームの送信ボタンが「更新」に変更され、更新後に新しいデータがローカルストレージに保存されます。その後、プロジェクトリストが再表示され、フォームとボタンは元の状態にリセットされます。

2. プロジェクト削除機能の実装

次に、プロジェクトを削除する機能を実装します。削除ボタンをクリックすると、該当するプロジェクトがローカルストレージから削除され、表示からも消えます。

function deleteProject(index) {
  let projects = JSON.parse(localStorage.getItem('projects')) || [];
  projects.splice(index, 1);
  localStorage.setItem('projects', JSON.stringify(projects));

  displayProjects();
}

この関数は、指定されたインデックスのプロジェクトをローカルストレージから削除します。削除後、更新されたプロジェクトリストが画面に再表示され、ユーザーは現在のプロジェクトの状況をすぐに確認できます。

3. プロジェクトリストの更新表示

プロジェクトの編集や削除が行われた後に、最新のプロジェクトリストを表示するために、displayProjects関数が再度呼び出されます。これにより、ユーザーが実行した操作が即座に反映されます。

function displayProjects() {
  const projects = JSON.parse(localStorage.getItem('projects')) || [];
  const projectList = document.getElementById('project-list');

  projectList.innerHTML = '';

  projects.forEach((project, index) => {
    const projectItem = document.createElement('div');
    projectItem.className = 'project-item';
    projectItem.innerHTML = `
      <h3>${project.name}</h3>
      <p>開始日: ${project.start}</p>
      <p>終了日: ${project.end}</p>
      <p>進捗: ${project.progress}%</p>
      <button onclick="editProject(${index})">編集</button>
      <button onclick="deleteProject(${index})">削除</button>
    `;
    projectList.appendChild(projectItem);
  });
}

この機能によって、ユーザーはプロジェクトを自由に編集・削除でき、プロジェクト管理ツールの操作性が大幅に向上します。次に、プロジェクトの進捗管理機能を追加し、ツールをさらに機能的にします。

プロジェクトの進捗管理機能

プロジェクト管理ツールのもう一つの重要な機能として、プロジェクトの進捗を管理する機能を実装します。この機能により、各プロジェクトがどの程度完了しているかを視覚的に把握できるようになります。

1. 進捗の入力インターフェース

ユーザーがプロジェクトの進捗を手動で更新できるようにするための入力インターフェースを作成します。進捗をパーセンテージで表し、フォームで進捗状況を入力できるようにします。

function editProgress(index) {
  const projects = JSON.parse(localStorage.getItem('projects')) || [];
  const project = projects[index];

  const newProgress = prompt('進捗を更新してください（%で入力）:', project.progress);

  if (newProgress !== null && !isNaN(newProgress)) {
    project.progress = parseInt(newProgress);
    projects[index] = project;
    localStorage.setItem('projects', JSON.stringify(projects));

    displayProjects();
  } else {
    alert('有効な数値を入力してください。');
  }
}

このコードでは、editProgress関数が呼び出されると、ユーザーに進捗状況を入力するよう促すプロンプトが表示されます。ユーザーが入力した値が有効であれば、その値をプロジェクトの進捗として保存し、プロジェクトリストを更新します。

2. 進捗バーの表示

各プロジェクトの進捗を視覚的に表示するために、進捗バーを追加します。この進捗バーは、プロジェクトごとに進捗状況を反映し、直感的に把握できるようにします。

function displayProjects() {
  const projects = JSON.parse(localStorage.getItem('projects')) || [];
  const projectList = document.getElementById('project-list');

  projectList.innerHTML = '';

  projects.forEach((project, index) => {
    const projectItem = document.createElement('div');
    projectItem.className = 'project-item';
    projectItem.innerHTML = `
      <h3>${project.name}</h3>
      <p>開始日: ${project.start}</p>
      <p>終了日: ${project.end}</p>
      <p>進捗: ${project.progress}%</p>
      <div class="progress-bar">
        <div class="progress" style="width: ${project.progress}%;"></div>
      </div>
      <button onclick="editProject(${index})">編集</button>
      <button onclick="deleteProject(${index})">削除</button>
      <button onclick="editProgress(${index})">進捗更新</button>
    `;
    projectList.appendChild(projectItem);
  });
}

進捗バーは、プロジェクトの進捗に応じて幅が動的に変化します。これにより、各プロジェクトの進行状況が一目で分かるようになります。

3. 進捗管理機能のデザイン調整

進捗バーの視覚的なデザインをCSSで調整し、ユーザーにとって見やすく、使いやすいインターフェースを提供します。

.progress-bar {
  background-color: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 10px;
}

.progress {
  height: 20px;
  background-color: #76c7c0;
  width: 0;
  transition: width 0.3s ease-in-out;
}

このCSSコードでは、進捗バーが滑らかにアニメーションしながら幅を変更するように設定しています。バーの背景色と進捗部分の色も調整し、全体のデザインにマッチさせています。

この進捗管理機能により、ユーザーはプロジェクトの進行状況を簡単に把握し、必要に応じて迅速に対応できるようになります。これで、プロジェクト管理ツールの基本機能が完成し、次のステップではデータのバックアップや復元方法を実装します。

ローカルストレージデータのバックアップと復元

プロジェクト管理ツールに保存されたデータの安全性を確保するためには、ローカルストレージのデータをバックアップし、必要に応じて復元できる機能が重要です。このセクションでは、データのエクスポートとインポート機能を実装し、ユーザーが自分のデータを簡単に保存および復元できるようにします。

1. データのエクスポート機能の実装

まず、ローカルストレージに保存されたデータをJSON形式でエクスポートし、ユーザーが自分のデバイスに保存できるようにする機能を実装します。

function exportData() {
  const projects = JSON.parse(localStorage.getItem('projects')) || [];
  const dataStr = JSON.stringify(projects, null, 2);
  const blob = new Blob([dataStr], { type: "application/json" });
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = 'projects_backup.json';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

このコードでは、exportData関数を使用してローカルストレージのデータをJSON形式でエクスポートし、ユーザーのデバイスに保存できるようにしています。エクスポートされたデータは、projects_backup.jsonというファイル名でダウンロードされます。

2. データのインポート機能の実装

次に、ユーザーが保存したバックアップファイルをアップロードし、そのデータをローカルストレージに復元する機能を実装します。

function importData(event) {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = function(e) {
    const projects = JSON.parse(e.target.result);
    localStorage.setItem('projects', JSON.stringify(projects));
    displayProjects();
  };

  reader.readAsText(file);
}

このコードでは、ユーザーが選択したバックアップファイルを読み込み、その内容をローカルストレージに保存します。読み込みが完了すると、プロジェクトリストが更新され、インポートされたデータが表示されます。

3. バックアップと復元のUI追加

これらの機能をユーザーが利用できるように、エクスポートとインポート用のボタンをインターフェースに追加します。

<div class="backup-controls">
  <button onclick="exportData()">データをエクスポート</button>
  <input type="file" id="file-input" onchange="importData(event)">
</div>

このHTMLコードでは、データをエクスポートするためのボタンと、インポートするためのファイル選択フィールドを追加しています。ユーザーは「データをエクスポート」ボタンをクリックしてバックアップを作成し、ファイル入力フィールドで保存されたファイルを選択してデータを復元できます。

4. デザイン調整とユーザビリティ向上

UI要素のデザインを調整し、ユーザーが簡単にバックアップと復元機能を利用できるようにします。

.backup-controls {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.backup-controls button {
  padding: 10px 20px;
  background-color: #337ab7;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.backup-controls button:hover {
  background-color: #286090;
}

.backup-controls input[type="file"] {
  display: none;
}

このCSSでは、エクスポートボタンのデザインを改善し、ファイル選択フィールドを隠すことでUIをシンプルに保っています。

このバックアップと復元機能により、ユーザーは自分のプロジェクトデータを安全に保存し、必要に応じて簡単に復元できるようになります。次のセクションでは、プロジェクトをタグ付けして分類する応用機能を実装します。

応用例：タグによるプロジェクト分類

プロジェクト管理ツールにタグ付け機能を追加することで、ユーザーがプロジェクトを効率的に分類・整理できるようになります。このセクションでは、タグ付け機能を実装し、プロジェクトを特定のカテゴリに分類する方法を紹介します。

1. タグ入力フィールドの追加

まず、プロジェクトにタグを付けるための入力フィールドをフォームに追加します。ユーザーはプロジェクトを作成する際に、タグを入力することができます。

<form id="project-form">
  <input type="text" id="project-name" placeholder="プロジェクト名">
  <input type="date" id="start-date">
  <input type="date" id="end-date">
  <input type="text" id="project-tags" placeholder="タグ (カンマ区切り)">
  <button type="submit">追加</button>
</form>

このHTMLコードでは、project-tagsというIDを持つ新しい入力フィールドを追加し、ユーザーがプロジェクトに関連するタグを入力できるようにします。

2. タグの保存と表示

次に、ユーザーが入力したタグをプロジェクトデータに保存し、それを表示する機能を実装します。タグはカンマ区切りで入力され、配列として保存されます。

document.getElementById('project-form').addEventListener('submit', function(event) {
  event.preventDefault();

  const projectName = document.getElementById('project-name').value;
  const startDate = document.getElementById('start-date').value;
  const endDate = document.getElementById('end-date').value;
  const tags = document.getElementById('project-tags').value.split(',').map(tag => tag.trim());

  if (projectName === '' || startDate === '' || endDate === '') {
    alert('全てのフィールドを入力してください。');
    return;
  }

  const project = {
    name: projectName,
    start: startDate,
    end: endDate,
    progress: 0,
    tags: tags  // タグを追加
  };

  let projects = JSON.parse(localStorage.getItem('projects')) || [];
  projects.push(project);

  localStorage.setItem('projects', JSON.stringify(projects));

  displayProjects();
  document.getElementById('project-form').reset();
});

function displayProjects() {
  const projects = JSON.parse(localStorage.getItem('projects')) || [];
  const projectList = document.getElementById('project-list');

  projectList.innerHTML = '';

  projects.forEach((project, index) => {
    const projectItem = document.createElement('div');
    projectItem.className = 'project-item';
    projectItem.innerHTML = `
      <h3>${project.name}</h3>
      <p>開始日: ${project.start}</p>
      <p>終了日: ${project.end}</p>
      <p>進捗: ${project.progress}%</p>
      <p>タグ: ${project.tags.join(', ')}</p>
      <div class="progress-bar">
        <div class="progress" style="width: ${project.progress}%;"></div>
      </div>
      <button onclick="editProject(${index})">編集</button>
      <button onclick="deleteProject(${index})">削除</button>
      <button onclick="editProgress(${index})">進捗更新</button>
    `;
    projectList.appendChild(projectItem);
  });
}

このコードでは、プロジェクトデータにtagsフィールドを追加し、タグを配列として保存します。表示時には、タグをカンマ区切りで表示するようにしています。

3. タグによるフィルタリング機能

ユーザーが特定のタグでプロジェクトをフィルタリングできる機能を実装します。これにより、特定のカテゴリに属するプロジェクトだけを表示することが可能になります。

function filterProjectsByTag(tag) {
  const projects = JSON.parse(localStorage.getItem('projects')) || [];
  const filteredProjects = projects.filter(project => project.tags.includes(tag));

  const projectList = document.getElementById('project-list');
  projectList.innerHTML = '';

  filteredProjects.forEach((project, index) => {
    const projectItem = document.createElement('div');
    projectItem.className = 'project-item';
    projectItem.innerHTML = `
      <h3>${project.name}</h3>
      <p>開始日: ${project.start}</p>
      <p>終了日: ${project.end}</p>
      <p>進捗: ${project.progress}%</p>
      <p>タグ: ${project.tags.join(', ')}</p>
      <div class="progress-bar">
        <div class="progress" style="width: ${project.progress}%;"></div>
      </div>
      <button onclick="editProject(${index})">編集</button>
      <button onclick="deleteProject(${index})">削除</button>
      <button onclick="editProgress(${index})">進捗更新</button>
    `;
    projectList.appendChild(projectItem);
  });
}

このfilterProjectsByTag関数を使って、ユーザーが特定のタグを選択すると、そのタグに関連するプロジェクトのみが表示されるようにします。

4. タグフィルタのUI追加

ユーザーがタグでプロジェクトをフィルタリングできるように、タグ選択用のUIを追加します。

<div class="tag-filters">
  <button onclick="filterProjectsByTag('仕事')">仕事</button>
  <button onclick="filterProjectsByTag('個人')">個人</button>
  <button onclick="filterProjectsByTag('勉強')">勉強</button>
  <button onclick="displayProjects()">全て表示</button>
</div>

このUIでは、特定のタグを持つプロジェクトだけを表示するフィルタボタンを配置しています。また、「全て表示」ボタンを押すと、すべてのプロジェクトが表示されるようにします。

5. タグ機能のデザイン調整

タグ表示やフィルタリングのUIを視覚的に整えるため、CSSを調整します。

.tag-filters {
  margin-top: 20px;
}

.tag-filters button {
  margin-right: 5px;
  padding: 5px 10px;
  background-color: #5bc0de;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tag-filters button:hover {
  background-color: #31b0d5;
}

.project-item p {
  margin: 5px 0;
}

このCSSでは、タグフィルタボタンを見やすく配置し、プロジェクトリストのタグ表示を整えています。

タグ機能を追加することで、ユーザーはプロジェクトを効果的に整理し、目的に応じた管理が容易になります。次のセクションでは、この記事のまとめを行います。

まとめ

本記事では、JavaScriptを使用したローカルストレージを活用したプロジェクト管理ツールの実装方法について詳しく解説しました。ローカルストレージの基本操作から、プロジェクトの追加、編集、削除、進捗管理、そしてタグによるプロジェクトの分類といった機能まで、段階的に実装してきました。

このツールを通じて、クライアントサイドでのデータ管理の基礎と応用的なテクニックを学ぶことができました。特に、データのバックアップと復元機能により、データの安全性を確保し、タグ機能によってプロジェクトを柔軟に整理・管理する方法を理解できたと思います。

このプロジェクト管理ツールをさらに発展させ、より高度な機能やデザインを追加することで、実際の業務や個人プロジェクトにも役立つツールに進化させることが可能です。ぜひ、自分のニーズに合わせてカスタマイズし、活用してみてください。

JavaScript
プロジェクト管理 ローカルストレージ JavaScript

コメント

コメントする

目次
  1. ローカルストレージとは
  2. プロジェクト管理ツールの要件定義
    1. 1. プロジェクトの追加機能
    2. 2. プロジェクトの編集と削除機能
    3. 3. 進捗管理機能
    4. 4. ローカルストレージを利用したデータ保存
  3. HTMLとCSSでの基本構造の作成
    1. 1. HTMLの構造
    2. 2. CSSでのスタイル付け
  4. JavaScriptでのローカルストレージ操作
    1. 1. ローカルストレージにデータを保存する
    2. 2. ローカルストレージからデータを取得して表示する
    3. 3. ローカルストレージからデータを削除する
  5. プロジェクトの追加機能の実装
    1. 1. プロジェクト追加フォームのイベント処理
    2. 2. プロジェクトの表示更新
    3. 3. エラーハンドリングとフォームのリセット
  6. プロジェクトの編集と削除機能
    1. 1. プロジェクト編集機能の実装
    2. 2. プロジェクト削除機能の実装
    3. 3. プロジェクトリストの更新表示
  7. プロジェクトの進捗管理機能
    1. 1. 進捗の入力インターフェース
    2. 2. 進捗バーの表示
    3. 3. 進捗管理機能のデザイン調整
  8. ローカルストレージデータのバックアップと復元
    1. 1. データのエクスポート機能の実装
    2. 2. データのインポート機能の実装
    3. 3. バックアップと復元のUI追加
    4. 4. デザイン調整とユーザビリティ向上
  9. 応用例：タグによるプロジェクト分類
    1. 1. タグ入力フィールドの追加
    2. 2. タグの保存と表示
    3. 3. タグによるフィルタリング機能
    4. 4. タグフィルタのUI追加
    5. 5. タグ機能のデザイン調整
  10. まとめ