知識ゼロの未経験エンジニアがTodo アプリを作った話 ✨

こんにちは！Web 開発を始めたばかりの駆け出しエンジニア、k33です。
コードの知識はまだ浅いですが、「使いやすくて見た目もかっこいい Todo リストを自分で作りたい！」と思い立ち、ChatGPT を相棒にプロトタイプを完成させました。

⭐ はじめに
Enter でタスク追加、Shift+Enter で改行
タスクは ドラッグ＆ドロップ で並び替え（SortableJS）
ダーク／ライトモード 切替 ＋ 背景画像 のアップロード
タスクの 完了チェック・編集・削除
GA4 （gtag.js） でアクセス計測
完全クライアントサイド × localStorage で永続化
Vercel で静的ホスティング
制作から公開まで約1週間。分からないことは ChatGPT に質問しながら進めたら、いつの間にか形になっていました。

デモ👉 https://todo-static.vercel.app
ソース👉 https://github.com/k33-dev/todo-static

🎣 作ろうと思ったきっかけ
学習のモチベーションを保つために「自分だけの成果物」を作りたくて
最初は「localStorage にタスクを保存するだけ」のシンプル版からスタート
触ってみたら思いのほか面白くなり、機能をどんどん追加
特に「ChatGPT にコード例を聞く→コピペ→動作確認」を繰り返したら、一人でも高速に学べました
🛠 環境 & 技術スタック
言語／ライブラリ
HTML / CSS / JavaScript (Vanilla)
SortableJS
アクセス計測
Google Analytics 4 (gtag.js)
データ永続化
localStorage
ホスティング
Vercel

🐞 実装のハマりどころ

1. SortableJS で画面とデータを同期
   
2. GA4 の測定IDを正しく設定
   

Point: ?id= と gtag('config', ...) の値を同一にしないと計測されません。

🎨 カスタマイズポイント
テーマカラー変更: CSS の --accent を書き換えるだけで雰囲気を一新できます。
アニメーション速度調整: transition-duration や animation の値を変えて、スムーズさを好みの速さに。
背景画像アップロード: 自分だけのオリジナル背景を設定して個性を演出。

📊 GA4 で見える化
ページビューやユーザー数をリアルタイムレポートでチェック
タスク追加・削除はイベント計測も実装
gtag('event', 'add_task');
gtag('event', 'delete_task');
ユーザー行動を分析し、今後のアップデートや機能改善に活かせます。

💡 まとめ
駆け出しエンジニアでも、ChatGPT のサポートでここまで作り込める！
完全クライアントサイド設計でシンプル＆高速。
SortableJS × Vanilla JS の組み合わせは軽量ながら高機能。
GA4 を導入すればユーザー動向をデータとして蓄積・分析可能。
ぜひデモを触ってみて、GitHub でスター・フォーク、コメントをお待ちしています 🌟

SNS
Twitter(X): @toe78560468

Xでも絡んでいただけると嬉しいです！
一緒に頑張りましょう！