TypeScriptで作る！チェックリストアプリ｜ローカル保存＆編集機能

TypeScriptで作る！おしゃれなチェックリストアプリ｜ローカル保存＆編集機能付き

デモサイト

HTML・CSS・TypeScriptを使って、シンプルでスタイリッシュな「チェックリストアプリ」を作成しました。

このアプリはローカルストレージで保存でき、編集・削除・チェック管理も可能。
モバイルファースト設計で、スマホでも快適に使えます！

この記事では、主な機能や使い方・実装のポイントを紹介します。
コードはすべて CodePen で公開中 なので、すぐに確認・カスタマイズ可能です。

📌 アプリの特徴

このチェックリストアプリでは、以下のような機能が実装されています。

✅ 基本機能

• タスクの追加（Enterキー対応）
• Shift+Enterで改行入力
• チェックで取り消し線＆背景色変更
• チェック済みタスクはリスト下に移動
• 削除ボタンでリストから除去

✅ 拡張機能

• ローカルストレージに自動保存
  • ページを閉じてもタスクが残る
• タスクの編集機能
  • edit ボタンでいつでも内容変更
• モバイルファースト + ダーク系UI
  • スタイリッシュで操作性の良いデザイン

💡 使用技術

🔧 開発時のポイント

• TypeScriptからJavaScriptにビルド（npx tsc）
• textarea でEnter/Shift+Enterの挙動を切り分け
• 編集時は span を input に差し替えるだけのシンプル設計
• 完了済みタスクは opacity と line-through で視認性UP

📱 モバイルにも最適化

• デフォルトは縦並び、横幅100%
• PC時は最大幅600pxに制限して中央寄せ
• ボタンもタップしやすいサイズに調整済み

▶️ デモ・ソースコード（CodePen）

See the Pen check-list by masakazuimai (@masakazuimai) on CodePen.

🔚 まとめ

TypeScriptを使って「しっかり型が効いたチェックリストアプリ」を実装することで、
JavaScriptの理解が深まり、今後の開発にも役立つはずです。

初めてのアプリ制作にもおすすめですし、これをベースに
「カテゴリ機能」「期限」「クラウド保存」など、どんどん強化していくのも楽しいですよ！