28日目: 初めてのエラーに直面する

田中一郎は、前日にJavaScriptで動的機能を追加してインタラクティブなページを作成したことで、大きな達成感を感じていた。
今日はさらに進めて、より高度な機能を追加することに挑戦するつもりだったが、ここで一郎は初めて深刻なエラーに直面することとなる。エンジニアとして避けては通れない試練が一郎を待ち受けていた。

新たな機能の実装に挑戦

一郎は、ユーザーが複数のタスクを同時に管理できるように、タスク管理アプリにフィルタリング機能を追加しようと考えた。
具体的には、タスクの状態（完了、未完了）に応じてリストを絞り込む機能を実装する予定だった。

早速、一郎はJavaScriptのコードを改良し始めた。
まずは、タスクリストの各項目にクラスを追加し、それに基づいてフィルタリングを行うコードを実装した。

document.getElementById('filterTasks').addEventListener('change', function() {
    const filter = this.value;
    const tasks = document.querySelectorAll('#taskList li');
    
    tasks.forEach(task => {
        switch(filter) {
            case 'all':
                task.style.display = 'block';
                break;
            case 'completed':
                if (task.querySelector('input[type="checkbox"]').checked) {
                    task.style.display = 'block';
                } else {
                    task.style.display = 'none';
                }
                break;
            case 'uncompleted':
                if (!task.querySelector('input[type="checkbox"]').checked) {
                    task.style.display = 'block';
                } else {
                    task.style.display = 'none';
                }
                break;
        }
    });
});

エラーの発生

一郎は、コードを書き終えるとすぐにブラウザでテストを行った。
しかし、タスクリストをフィルタリングする機能が期待通りに動作しないことに気付いた。
リストを絞り込むはずの機能がまったく機能せず、すべてのタスクが表示され続けたままだった。

さらに、コンソールを確認すると、いくつかのエラーメッセージが表示されていた。「Uncaught TypeError: Cannot read property ‘checked’ of null」というエラーが頻繁に発生しており、
一郎は困惑した。コードを見直しても、自分ではどこが問題なのか理解できなかった。

エラーに直面する

一郎は、これまで学んできたことを総動員してエラーの原因を探ろうとしたが、なかなか解決策が見つからなかった。
次第に焦りが募り、エラーが解消されないまま時間だけが過ぎていった。一郎は初めて、本格的なプログラミングの壁にぶつかった感覚を味わった。

「これがプログラミングの難しさか…」と一郎はつぶやき、挫折感を覚えた。
しかし、一度はエンジニアとしての道を選んだ自分に対して、簡単に諦めるわけにはいかないと感じた。

冷静に原因を探る

一郎は、鈴木英二の「エラーは成長のチャンスだ」という言葉を思い出し、再び冷静さを取り戻した。エラーメッセージを一つ一つ読み解き、問題の箇所を特定することに集中した。

最初に見つけた問題は、タスクリストが空の状態でフィルタリング機能を実行しようとしていたことだった。そのため、querySelectorで要素が見つからずにエラーが発生していたのだ。
一郎は、タスクリストが空でないかをチェックする条件を追加し、このエラーを解消した。

document.getElementById('filterTasks').addEventListener('change', function() {
    const filter = this.value;
    const tasks = document.querySelectorAll('#taskList li');
    
    if (tasks.length > 0) {
        tasks.forEach(task => {
            switch(filter) {
                case 'all':
                    task.style.display = 'block';
                    break;
                case 'completed':
                    if (task.querySelector('input[type="checkbox"]').checked) {
                        task.style.display = 'block';
                    } else {
                        task.style.display = 'none';
                    }
                    break;
                case 'uncompleted':
                    if (!task.querySelector('input[type="checkbox"]').checked) {
                        task.style.display = 'block';
                    } else {
                        task.style.display = 'none';
                    }
                    break;
            }
        });
    }
});