JavaScript ToDoアプリ
皆さんJavaScriptでToDoアプリを作成できることをご存じでしょうか？JavaScriptは、Webサイトやアプリケーションの開発に欠かせないプログラミング言語です。JavaScriptを使うことで、Webページの動的な振る舞いを実現したり、ユーザーとのインタラクションを追加することができます。
今回作成するToDoアプリの機能は以下の通りです。
- やることを入力してEnterを押すと入力したやることがリストにが追加されるようにする
- リストをクリックするとやることに取り消し線を引き完了したことがわかるようにする
- リストを右クリックすると完全に削除する
- リストの内容をローカルストレージに保存する
今回の記事ではJavaScripを使用して上記のようなWebアプリを作成する方法をご紹介します。
JavaScript ToDoアプリ
では、早速ですがJavaScriptで初心者でも作れるものとしてToDoアプリをご紹介していきます。実際のコードを以下に書いていきます。まず、HTMLを作成します。いかのHTMLのコードをtodo.htmlという名前で保存してください。HTMLについては今回は詳しくはご紹介しません。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>TODOアプリ</title>
<!--Bootstrapのスタイルシートを読み込む。スタイルシートとはhtmlのデザインをするものです-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body class="bg-light">
<div class="container w-75">
<!--見出しを書いている部分-->
<h1 class="text-center text-info my-4">TODOアプリ</h1>
<form id="form" class="mb-4">
<!--テキストボックスを表示している部分-->
<input type="text" id="input" class="form-control" placeholder="TODOを入力" autocomplete="off">
</form>
<!--Todoリストを作成する部分-->
<ul class="list-group text-secondary" id="ul"></ul>
</div>
<!--script タグでJavaScriptのソースコードのファイルを読み込みます。-->
<script src="todo.js"></script>
</body>
</html>次にJavaScriptのソースを書いていきます。以下のソースコードをtodo.jsというファイル名で保存してください。ソースコードの隣にコードの意味を記載していますが、コメントアウトしているのでそのまま貼り付けてもらって構いません。
const form = document.getElementById("form"); // htmlのフォーム要素を取得
const input = document.getElementById("input"); // htmlのフォームの入力欄を取得
const ul =document.getElementById("ul"); // htmlのul要素を取得
const todos = JSON.parse(localStorage.getItem("todos")); // ローカルストレージからtodosを取得し、JSON形式の文字列をJavaScriptのオブジェクトに変換する
if(todos){
todos.forEach(todo => {
add(todo); // todosに格納されたtodoをadd関数を呼び出して表示する
})
}
form.addEventListener("submit",function(event){ // フォームがサブミットされたら以下の処理を行う
event.preventDefault(); // デフォルトの送信処理をキャンセル
add(); // 入力欄に入力されたtodoを追加するためのadd関数を呼び出す
});
function add(todo){ // todoを表示するための関数
let todoText = input.value; // 入力欄に入力された文字列を取得
if(todo){ // もし引数として渡されたtodoがあれば、そのtextを使ってtodoTextを上書きする
todoText = todo.text;
}
if(todoText){ // 入力欄に文字列が入力されていれば以下の処理を行う
const li = document.createElement("li"); // li要素を作成
li.innerText = todoText; // li要素に入力された文字列を表示
li.classList.add("list-group-item"); // li要素にBootstrapのクラスを追加する
if(todo && todo.completed){ // もし引数として渡されたtodoがあり、かつcompletedがtrueであれば、li要素に取り消し線のクラスを追加する
li.classList.add("text-decoration-line-through");
}
li.addEventListener("contextmenu",function(event){ // li要素が右クリックされた場合の処理
event.preventDefault(); // デフォルトの右クリックメニューをキャンセル
li.remove(); // li要素を削除する
saveData(); // ローカルストレージに保存されているtodoを更新する
});
li.addEventListener("click",function(){ // li要素がクリックされた場合の処理
li.classList.toggle("text-decoration-line-through"); // li要素に取り消し線のクラスを追加・削除する
saveData(); // ローカルストレージに保存されているtodoを更新する
});
ul.appendChild(li); // li要素をul要素に追加する
input.value = ""; // 入力欄を空にする
saveData(); // ローカルストレージに保存されているtodoを更新する
}
}
function saveData(){ // ローカルストレージにtodoを保存するための関数
const lists = document.querySelectorAll("li"); //// li要素を全て取得
const todos = []; // todoを格納するための配列を作成
lists.forEach(list => {
let todo = {
text: list.innerText,
completed: list.classList.contains("text-decoration-line-through") // li要素に取り消し線のクラスがあれば、completedをtrueにする
};
todos.push(todo); // todoをtodos配列に追加する
});
localStorage.setItem("todos",JSON.stringify(todos)); // todos配列をJSON形式の文字列に変換し、ローカルストレージに保存する
}今回使用した関数の用途をまとめておきます。add()関数は、リストに新しいTODOアイテムを追加するために使用されます。この関数は、フォームから入力されたTODOアイテムを取得し、リストに追加します。また、リストからTODOアイテムを削除するイベントを処理し、TODOアイテムの完了状態を管理します。
saveData関数は、全てのli要素を取得して、それぞれのテキストとcompleted状態をJavaScriptオブジェクトにまとめ、todos配列に追加します。そして、todos配列をJSON形式の文字列に変換し、ローカルストレージに保存します。これにより、ブラウザを閉じても保存されたtodoを再表示することができます。しかし、キャッシュクリアを行うと保存されているデータは消えてしまうので注意。
上記のhtmlとJavaScriptを同じ階層のフォルダに配置することで以下のよなToDoアプリを作成することができます。
ソースコードに解説も記載しているのでぜひご覧になって勉強してみてください。こちらのコードの意味が理解できるようになればJavaScriptの基本は完璧です。できるだけ細かく解説するようにしているので見ていただけると幸いです。
JavaScriptの操作方法は実際に手を動かし、身につけていきましょう
今回の記事ではJavaScriptで初心者でも作れるものとしてTodoアプリをご紹介しました。JavaScriptは、初心者でも比較的簡単に学習できるプログラミング言語の一つです。インターネット上には多くの無料の教材やチュートリアルがありますので、自己学習が可能です。
JavaScriptなどのプログラミング言語を勉強するうえで一番重要なことは実際に手を動かし簡単なソースコードから書いてみることです。プログラミング言語についての記事を見て勉強することも重要ですが、実際に手を動かして初めて理解が深まります。
コメント