itochan/todo.html

## todo.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ToDoリスト</title>
        <script src="todo.js"></script>
    </head>
    <body>
        <h1>ToDo</h1>
        <p>
            <input type="text" id="taskName" placeholder="タスク">
            <input type="button" value="追加" onclick="addTask();"><br>
            <input type="button" value="最初を削除" onclick="removeFirstTask();">
            <input type="button" value="最後を削除" onclick="removeLastTask();">
        </p>
        <ul id="taskList"></ul>
    </body>
</html>

## todo.js
var tasks = [];

// タスクを追加
function addTask() {
    var taskName = document.getElementById("taskName").value;
    tasks.push(taskName);
    updateTasks();
}

// 最初のタスクを削除
function removeFirstTask() {
    tasks.shift();
    updateTasks();
}

// 最後のタスクを削除
function removeLastTask() {
    tasks.pop();
    updateTasks();
}

// 配列の中身を見てタスクリストを更新
function updateTasks() {
    document.getElementById("taskList").innerHTML = "";
    for (var i = 0; i < tasks.length; i++) {
        document.getElementById("taskList").innerHTML += "<li>" + tasks[i] + "</li>";
    }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ToDoリスト</title>
	<script src="todo.js"></script>
	</head>
	<body>
	<h1>ToDo</h1>
	<p>
	<input type="text" id="taskName" placeholder="タスク">
	<input type="button" value="追加" onclick="addTask();"><br>
	<input type="button" value="最初を削除" onclick="removeFirstTask();">
	<input type="button" value="最後を削除" onclick="removeLastTask();">
	</p>
	<ul id="taskList"></ul>
	</body>
	</html>
	var tasks = [];

	// タスクを追加
	function addTask() {
	var taskName = document.getElementById("taskName").value;
	tasks.push(taskName);
	updateTasks();
	}

	// 最初のタスクを削除
	function removeFirstTask() {
	tasks.shift();
	updateTasks();
	}

	// 最後のタスクを削除
	function removeLastTask() {
	tasks.pop();
	updateTasks();
	}

	// 配列の中身を見てタスクリストを更新
	function updateTasks() {
	document.getElementById("taskList").innerHTML = "";
	for (var i = 0; i < tasks.length; i++) {
	document.getElementById("taskList").innerHTML += "<li>" + tasks[i] + "</li>";
	}
	}