TypeScriptで作る！おしゃれなチェックリストアプリ｜ローカル保存＆編集機能付き
デモサイト
HTML・CSS・TypeScriptを使って、シンプルでスタイリッシュな「チェックリストアプリ」を作成しました。
このアプリはローカルストレージで保存でき、編集・削除・チェック管理も可能。
モバイルファースト設計で、スマホでも快適に使えます！
この記事では、主な機能や使い方・実装のポイントを紹介します。
コードはすべて CodePen で公開中 なので、すぐに確認・カスタマイズ可能です。
📌 アプリの特徴
このチェックリストアプリでは、以下のような機能が実装されています。
✅ 基本機能
- タスクの追加（Enterキー対応）
- Shift+Enterで改行入力
- チェックで取り消し線＆背景色変更
- チェック済みタスクはリスト下に移動
- 削除ボタンでリストから除去
✅ 拡張機能
- ローカルストレージに自動保存
- ページを閉じてもタスクが残る
- タスクの編集機能
editボタンでいつでも内容変更
- モバイルファースト + ダーク系UI
- スタイリッシュで操作性の良いデザイン
💡 使用技術
| 技術 | 内容 |
|---|---|
| TypeScript | 型安全なロジック記述 |
| HTML5 / CSS3 | 構造とデザイン |
| JavaScript（ES2022） | ビルド済みJSでブラウザ対応 |
| ローカルストレージ | 永続的なデータ保存を実現 |
| GitHub + CodePen | 公開・管理もラクに |
🔧 開発時のポイント
- 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の理解が深まり、今後の開発にも役立つはずです。
初めてのアプリ制作にもおすすめですし、これをベースに
「カテゴリ機能」「期限」「クラウド保存」など、どんどん強化していくのも楽しいですよ！