2025.09.21

【完全初心者向け】JavaScriptでTODOリストを作ってるみる！１５行で動くシンプル版から始めよう

ゆうち

こんにちは。JavaScriptを勉強中のゆうちです。

今回はTODOリストアプリを作成してみたので、その学びを発信します。

この記事でつくるもの

たった１５行で動く、超シンプルなTODOリストアプリです。

機能は最小限：

タスクを入力できる
追加ボタンでリストに表示できる

これが、理解できれば積み木を重ねるように機能の追加が可能

まずは完成コードから（動かしてみよう）
- コードを分解して理解していく

まずは完成コードから（動かしてみよう）

私は、「とりあえず動くものを見たい」タイプです。まずは、このコードをコピーして、todo.htmlとして保存してください。

<!DOCTYPE html>
<html>
<body>
    <h1>私のTODOリスト</h1>
    <input type="text" id="taskInput" placeholder="タスクを入力">
    <button onclick="addTask()">追加</button>
    <ul id="taskList"></ul>
    
    <script>
        function addTask() {
            const input = document.getElementById('taskInput');
            const list = document.getElementById('taskList');
            list.innerHTML += '<li>' + input.value + '</li>';
            input.value = '';
        }
    </script>
</body>
</html>

保存したら、ブラウザで開いて何かを入力して追加ボタンを押してみて下さい。リストに追加されましたか？
動いたなら、第一歩クリアです。

コードを分解して理解していく

HTML部分（見える部分）

<input type="text" id="taskInput">  <!-- 入力欄（俳優が立つ場所） -->
<button onclick="addTask()">追加</button>  <!-- ボタン（合図を出す人） -->
<ul id="taskList"></ul>  <!-- リスト（結果を表示するスクリーン） -->

ポイント：

onclick=”addTask()”は、「クリックしたらaddTask関数を実行して」という指示
id=”◯◯”は、JavaScriptから「これを操作したい」と指定するための名札

JavaScript部分（動く仕組み）

難しい部分ですが、コメントをつけながら順に日本語で理解するようにしました。

function addTask() {
    // 1. 「taskInput」という名札の付いた入力欄を探す
    const input = document.getElementById('taskInput');
    
    // 2. 「taskList」という名札の付いたリストを探す  
    const list = document.getElementById('taskList');
    
    // 3. リストの中身に、新しい項目を追加
    list.innerHTML += '<li>' + input.value + '</li>';
    
    // 4. 入力欄を空っぽにする
    input.value = '';
}

つまずいたポイント

「innerHTML」がわからなかった

これは、要素の中身という理解

// 箱があって
<ul id="taskList">
    // ここの中身がinnerHTML
</ul>

// だから
list.innerHTML += '<li>新しいタスク</li>';
// は、箱の中に新しいものを追加するイメージ

「＋＝」の意味が分からなかった

list.innerHTML += '<li>タスク</li>';

// これは
list.innerHTML = list.innerHTML + '<li>タスク</li>';
// と同じ。今あるものに追加する、という意味です

// だから
list.innerHTML += '<li>新しいタスク</li>';
// は、箱の中に新しいものを追加するイメージ

なぜ「input.value = ” “」が必要？

これをしないと、追加ボタンを押しても入力欄に文字が残ったままになる。

console.logで確認する癖をつける

function addTask() {
    const input = document.getElementById('taskInput');
    console.log('入力値：', input.value);  // これで確認
    // 以下省略
}

F12キーで開発者ツールを開いて、Consoleタブを見ると、何が起きているかわかります。

最後まで読んでいただき、ありがとうございました。同じように学習されている方、何か質問があればコメントでお聞かせください。一緒に学んでいきましょう⭐

エラー: コンタクトフォームが見つかりません。

#40代挑戦記録 #未経験からのエンジニア

ABOUT ME