0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ミニプロジェクト10連発 | [第9回]: ローカルストレージを使った保存機能

Posted at

1. はじめに:なぜローカルストレージ?

最近のウェブアプリでは「状態を一時的に保存したい」「フォームの入力内容を保持したい」「再読み込みしてもデータを残したい」といったニーズが高まっています。
クラウドやデータベースに保存する方法もありますが、実は ローカルストレージ(LocalStorage) を使えば、軽量かつ素早く実装可能です。

今回は、次のようなミニアプリを一緒に作りながら、ローカルストレージの基本〜実践的な使い方までを解説します。


2. ローカルストレージとは?

🔍 定義と特徴

  • Web Storage API の一部
  • キーと値(どちらも文字列)でデータを保存
  • 永続的にブラウザに保存(明示的に消さない限り残る)
  • 容量はブラウザによって異なるが、概ね 5MB 程度

✅ どんなときに使うのか?

ケース 使用例
ユーザー設定 テーマの明暗、言語、レイアウト
入力補助 フォームの途中保存、下書き保存
軽量な状態管理 トグルのON/OFF、チェックボックスの状態保持

3. ハンズオン:ToDoリスト保存機能の実装

今回は「ローカルストレージで保存するToDoリスト」を作ります。

🧰 使用技術スタック

  • HTML/CSS/JavaScript(フレームワーク不使用)
  • ブラウザ:Chrome, Firefox など

📄 HTML(基本構造)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>ToDo with LocalStorage</title>
</head>
<body>
  <h1>My ToDo List</h1>
  <input type="text" id="taskInput" placeholder="新しいタスクを追加" />
  <button onclick="addTask()">追加</button>
  <ul id="taskList"></ul>

  <script src="script.js"></script>
</body>
</html>

🧠 JavaScript(保存機能の実装)

let tasks = [];

window.onload = () => {
  const saved = localStorage.getItem('todo-tasks');
  if (saved) {
    tasks = JSON.parse(saved);
    renderTasks();
  }
};

function addTask() {
  const input = document.getElementById('taskInput');
  const task = input.value.trim();
  if (!task) return;

  tasks.push(task);
  input.value = '';
  saveTasks();
  renderTasks();
}

function saveTasks() {
  localStorage.setItem('todo-tasks', JSON.stringify(tasks));
}

function renderTasks() {
  const list = document.getElementById('taskList');
  list.innerHTML = '';
  tasks.forEach((t, i) => {
    const li = document.createElement('li');
    li.textContent = t;
    li.onclick = () => removeTask(i);
    list.appendChild(li);
  });
}

function removeTask(index) {
  tasks.splice(index, 1);
  saveTasks();
  renderTasks();
}

✅ 完成!タスクを追加 → ページをリロード → ちゃんと保存されている!


4. 現場で役立つTips&よくある失敗

💡 Tips

  • JSON.stringify() / JSON.parse() を忘れずに(配列やオブジェクトは文字列化が必要)
  • キーの命名には名前空間を使う(例:myapp.todo
  • ブラウザ間で共有できないので、ユーザー単位での使い分けに注意

❌ よくあるミス

ミス内容 解決策
保存できていない localStorage.setItem() の直後に console.log() で確認
値が文字列でしか保存されていない JSON.stringify() / parse() を忘れていないかチェック
スペースや空白タスクが追加される .trim() を追加して防ぐ

5. 応用編:チェック付きToDoや期限付き削除

✅ チェック状態の保存

tasks = [{ text: "Buy milk", done: false }]; // 拡張版

// チェックボックス追加して、状態を保存

⏱ 自動期限切れ(保存から24時間後に削除)

const now = Date.now();
localStorage.setItem('task-data', JSON.stringify({ savedAt: now, tasks }));

// 起動時に有効期限チェック
const saved = JSON.parse(localStorage.getItem('task-data'));
if (Date.now() - saved.savedAt > 86400000) { // 24h
  localStorage.removeItem('task-data');
}

6. まとめ:ローカルストレージの可能性と限界

✅ メリット

  • 簡単で即時反映
  • サーバーレスで動く
  • 高速アクセス(ネットワーク不要)

⚠ デメリット

  • 容量制限あり(5MB前後)
  • セキュリティ上の制限(XSSに注意)
  • マルチユーザーや複数デバイス間での共有は不可

🔭 今後の展望

ローカルストレージは単体でも十分便利ですが、以下のような技術と組み合わせることで、さらにパワーアップできます。

  • IndexedDB:構造化された大規模データを扱いたいとき
  • ServiceWorker+Cache API:オフラインファーストなアプリへ
  • クラウド同期(Firebase等):ログイン時に同期

🏁 最後に

このミニプロジェクトを通じて、「保存機能をちょっとつけたい」ときに、すぐ使える便利な道具としてローカルストレージの活用方法が理解できたかと思います。

「明日すぐにでも実務で使える」ような技術に落とし込めることを目指して、次回も実践的なミニプロジェクトを紹介します。


次回の「ミニプロジェクト10連発」では、「GitHubに作品をアップロード」を予定しています。お楽しみに!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?