知識ゼロの未経験エンジニアが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 で画面とデータを同期
new Sortable(taskList, {
animation: 120,
onEnd: e => {
// 画面上の要素は動くけれど、データ配列も動かないとズレる！
const [moved] = tasks.splice(e.oldIndex, 1);
tasks.splice(e.newIndex, 0, moved);
save(); // localStorage に保存
}
});
2. GA4 の測定IDを正しく設定
<script async src="https://www.googletagmanager.com/gtag/js?id=G-R0PYZSP0YC"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-R0PYZSP0YC');
</script>
-
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