プログラミング学習で「何を作ればいいかわからない」と悩んでいませんか？私も全く同じ状況でした。そこで、バニラJavaScriptでタスク管理アプリの開発に挑戦し、2週間でv1.0からv2.0まで完成させることができました。フレームワークに頼らず基礎から学ぶことで、プログラミングの本質的な理解が深まりました。
この記事では、実際に辿った学習ロードマップを全て公開します。つまずいたポイント、解決方法、そして次のステップまで、具体的な実践記録として残しました。これから学習を始める方、挫折しそうな方の参考になれば幸いです。
制作物：https://izurusugizaki.github.io/Deliverables/
なぜタスク管理アプリを選んだのか
プログラミング学習でアプリを選ぶとき、初心者が最も悩むのが「何を作るべきか」という問題です。タスク管理アプリを選んだことで、段階的に成長できる最適な学習パスを見つけることができました。
初心者に最適な3つの理由
タスク管理アプリは、一見シンプルに見えますが、実はプログラミングの基礎をすべて学べる優れた教材です。CRUD操作、状態管理、DOM操作など、実務で必要な技術がすべて含まれています。
理由1: 基礎がすべて学べる
タスク管理アプリを作ることで、CRUD操作（Create, Read, Update, Delete）、DOM操作とイベント処理、localStorageでのデータ永続化といった、実務で必須の技術を一通り経験できます。特にカレンダー機能を含めることで、Dateオブジェクトの扱いやロジカルな思考も鍛えられました。
理由2: 段階的に機能追加できる
v1.0では基本機能（登録・表示・削除）のみを実装し、v2.0でリファクタリングとデザイン改善を行い、v3.0ではReactで再実装する計画です。このように、同じアプリを段階的に改善していくことで、成長が実感でき、モチベーションも維持できます。
理由3: ポートフォリオになる
タスク管理アプリは実用的で、実際に自分でも使えるアプリです。また、v1.0からv2.0への改善過程を見せることで、コード品質への意識や成長過程をアピールできます。
実装した機能
アプリを作り始める前に、明確な機能要件を定義することが重要です。私は最初、曖昧なまま始めて失敗しました。要件を明確にしてから再スタートしたことで、迷わず開発を進められるようになりました。
v1.0で実装した機能：
- カレンダー表示（月の切り替え）
- 今日の日付強調
- タスク登録・表示・削除
- localStorageでの永続化
v2.0での改善内容：
- コードのリファクタリング
- 関数・ファイルの分割
- デザインの改善
Week 1: 基礎実装の流れ（v1.0完成まで）
プログラミング学習の第1週間は、最も重要な期間です。この週に、基本機能をすべて実装し、動くアプリを完成させました。完璧でなくても「動くもの」を作ることが、モチベーション維持の鍵でした。
Day 1-3: カレンダー機能の実装
カレンダー機能は、このアプリで最も難しい部分でした。Dateオブジェクトの扱いに苦戦し、前月・次月の余白表示で1日悩みました。しかし、ロジックを紙に書いて整理したことで、突破口が見えました。
最も理解に苦しんだのは、前月の余白を計算する以下のコードでした：
let num = lastMonthEndDate - startDayOfWeek + dayIndex + 1;
この計算式を理解するために、実際の日付を紙に書き出し、手で計算を追いました。例えば、1月1日が水曜日（startDayOfWeek = 3）の場合、カレンダーの最初の3マスには前月の29, 30, 31日が入るべきです。この具体例を図にすることで、ようやく計算式の意味が理解できました。
学んだこと：
- Dateオブジェクトは最初は難しいが、紙に書いて整理すれば理解できる
- Stack Overflowは神（同じ悩みを持つ人が必ずいる）
- 複雑なロジックこそ、図や表に書き出すことが重要
Day 4-5: タスク登録と表示
カレンダーができたら、次はタスク登録機能です。最初は個別にlocalStorageに保存していましたが、データ管理が複雑になり失敗しました。配列で一元管理する方法に切り替えたことで、シンプルになりました。
当初は localStorage.setItem('task_' + Date.now(), taskData) のように個別に保存していましたが、後から取得・削除する際に非常に面倒でした。以下のように配列で管理する方法に変更しました：
const tasks = [
{ id: 1, date: "2024-12-15", name: "勉強", desc: "数学" },
{ id: 2, date: "2024-12-16", name: "買い物", desc: "" }
];
localStorage.setItem('tasks', JSON.stringify(tasks));
この方法なら、配列のfilterやmapメソッドを使って簡単にデータを操作できます。
重要な学び：
- データ構造は実装前にしっかり設計する
- JSONの stringify と parse の理解は必須
- 配列で管理すると後の操作が楽
Day 6-7: 削除機能とデバッグ
最後に削除機能を実装し、徹底的な動作確認を行いました。実際に使ってみると、想定外のバグがたくさん見つかりました。しかし、すべて修正し、「動くアプリ」が完成した瞬間は、大きな達成感がありました。
特に困ったのは、タスクが0件の日をクリックするとエラーが出る問題と、削除後にモーダルが閉じない問題でした。前者は tasks.length > 0 のチェックを追加し、後者はイベントリスナーの設定を見直すことで解決しました。
デバッグには Console.log() を大量に使いました。変数の中身を確認しながら、どこで想定外の値になっているかを特定していきます。最初は面倒に感じましたが、これが最も確実な方法だと学びました。
Week 1の成果：
Week 2: リファクタリングで学んだこと（v2.0完成まで）
Week 2では、リーダブルコードを参考に、コード品質の向上に取り組みました。「動くコード」と「良いコード」は別物だと知り、この週の学びが今後の成長の基盤になったと実感しています。
変数名とコメントの改善
リファクタリングの第一歩は、変数名とコメントの改善でした。リーダブルコード第2-6章を読みながら改善したことで、コードの理解しやすさが劇的に向上しました。
変数名の改善例：
| Before | After | 理由 |
|---|---|---|
i | weekIndex | 何のループか明確に |
tasks | arrayTasks | 配列だとわかる |
num | lastMonthDays | 用途が明確に |
変数名を改善しただけで、コードが自己説明的になりました。3ヶ月後に見ても、すぐに理解できるコードになったと思います。
コメントの改善：
不要なコメント（例：// タスクを取得）は削除し、複雑なロジックには「なぜ」を説明するコメントを追加しました。特に前月の余白計算には、具体例を含めたコメントを付けることで、後から見ても理解しやすくなりました：
// 前月の余白を生成（例：1月1日が水曜なら、前月29,30,31を表示）
let lastMonthDays = lastMonthEndDate - startDayOfWeek + dayIndex + 1;
関数とファイルの分割
Week 2の中盤は、関数とファイルの分割に取り組みました。1つのファイルに全部書いていた状態から、責任ごとに分割したことで、保守性が大幅に向上しました。
ファイル分割の結果：
Before: Calendar.js（200行、全部入り）
After:
Calendar.js（カレンダー生成のみ）Form.js（フォーム処理）localStorage.js（データ管理）modal.js（モーダル操作）
各ファイルが単一の責任を持つようになり、どこに何が書いてあるか一目でわかるようになりました。
関数分割の例：
最初は50行以上の showTaskDetail 関数に全てを詰め込んでいましたが、以下のように責任ごとに分割しました：
// After: 責任ごとに分割
function showTaskDetail(date) {
const tasks = getTasksByDate(date);
const html = modalCalendar(tasks, date);
openModal(html);
}
メイン関数を見るだけで、何をしているか一目でわかるようになりました。各関数は1つの責任だけを持ち、テストもしやすくなりました。
v2.0完成とBefore/After
Week 2の最後は、軽いデザイン改善を行い、v2.0が完成しました。機能は同じでも、コードの品質が大幅に向上し、成長を実感できました。
v2.0の完成内容：
Before/After比較：
| 項目 | v1.0 | v2.0 |
|---|---|---|
| ファイル数 | 1個 | 4個 |
| 関数数 | 5個 | 12個 |
| 可読性 | 60点 | 90点 |
数字で見ると、v2.0は関数が増えていますが、各関数が小さく理解しやすくなりました。可読性が大幅に向上したことが最大の成果です。
挫折ポイントと乗り越え方
順調に見える学習記録ですが、実は何度も挫折しそうになりました。カレンダーロジックで1日悩んだ日、ファイル分割で混乱した日、数え切れません。しかし、それぞれに乗り越え方がありました。
カレンダーロジックとファイル分割の壁
前月・次月の余白計算で完全に詰まり、「自分にはプログラミングの才能がない」と思いました。また、ファイル分割では依存関係を理解できず混乱しました。しかし、紙に書いて整理したことで、両方とも突破できました。
問題1: カレンダーロジック
// この計算式が理解できない
let num = lastMonthEndDate - startDayOfWeek + dayIndex + 1;
解決方法：
- 実際の日付を紙に書き出す
- 計算を手で追う
- 図にして視覚化
紙に書いて手を動かすことで、頭の中だけで考えるより遥かに理解が深まりました。
問題2: ファイル分割
ファイルを分割したら、「関数が未定義」というエラーが大量発生しました。読み込み順序を理解していなかったためです。
解決方法：
- 依存関係を図に書く
- 正しい順番で script タグを配置
- 1つずつ動作確認しながら進める
例えば、Calendar.js が getTasksByDate() 関数を使うなら、localStorage.js を先に読み込む必要があります。こうした依存関係を図にすることで、正しい読み込み順序が見えてきました。
モチベーション維持の工夫
2週間継続できたのは、モチベーション管理を意識したからです。毎日小さな成功を積み重ね、記録を残し、自分を褒めることを忘れませんでした。
工夫したこと：
- 毎日30分は必ず触る（完璧を目指さない）
- 小さな成功を祝う（カレンダー表示できた！だけでも喜ぶ）
- 記録を見返す（成長を実感する）
- 70%理解でOK（完璧主義をやめる）
学んだこと：
- エラーは最高の教材（エラーから学ぶことが最も多い）
- アウトプットがすべて（作りながら学ぶのが最速）
- 継続が力になる（毎日少しずつでも進む）
次のステップ：Reactへの挑戦
v2.0が完成し、次はReactでの再実装に挑戦します。同じアプリをReactで作ることで、フレームワークの利点を体感できます。バニラJSで基礎を固めたからこそ、Reactの学習がスムーズに進むはずです。
React学習の計画：
Week 1-2: 基礎学習
書籍「これからはじめるReact実践入門」を使用して、JSX、コンポーネント、Props & State、Hooks（useState, useEffect）といった基礎を学びます。バニラJSで作ったアプリがあるので、Reactでどう書き換えるかイメージしやすいです。
Week 3-4: v3.0実装
タスログのReact版を実装します。カレンダーコンポーネント、タスクコンポーネント、モーダルコンポーネントに分割し、コンポーネント設計の実践を行います。localStorageとの連携も、Reactの方法で実装し直します。
その先の目標：
- TypeScript導入（型安全性の向上）
- Next.js移行（SSRとルーティング）
- バックエンド連携（Node.js + DB）
段階的にステップアップすることで、フルスタック開発者を目指します。各段階で新しい技術を1つずつ学び、焦らず着実に成長していく計画です。
まとめ
プログラミング初心者が2週間でタスク管理アプリを完成させた学習ロードマップを紹介しました。v1.0で基礎を実装し、v2.0でリファクタリングすることで、「動くコード」から「良いコード」への成長を実感できました。完璧を目指さず、70%理解で進み、記録を残すことが成功の鍵です。プログラミング学習に才能は必要ありません。必要なのは、小さく始めること、継続すること、そして楽しむことです。次は、React版（v3.0）の実装記録でお会いしましょう。
関連記事：
コメント