こんにちは、フロントエンドエンジニアのてりーです。
はじめに
JavaScriptでtodoリストを作ってみましょう。
基本的なDOM操作や、関数、配列の使い方あたりの理解だがチェックできます。
完成物
要件
todoアプリ // ・todoの一覧を表示 // ・追加機能でtodoを追加できる // ・todoを削除できる // ・検索機能で一致するtodoだけを表示する // ・動作する旅に「残りのタスクは~個です。」の〜が更新されるレッツチャレンジ！！！
実際に手を動かしてやってみましょう。
大まかな流れ
①htmlで必要な要素を書く
②cssファイルを作り、デザインと整える
③タスク追加機能を作る
④タスク削除機能を作る
⑤検索機能を作る
⑥残りのタスク量を表記する
解説
①htmlで必要な要素を書く
②cssファイルを作り、デザインを整える
htmlを書く前にまずはディレクトリ の構成をみましょう。
今回はこの様に、html、css、jsファイルをそれぞれ1つずつ作る。
htmlファイル内はざっとこんな感じ。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>todoアプリ</h1> <p>todo一覧</p> <ul id='todo-list'> </ul> <div> <p>----------------------------------------------------------</p> <div> <input id="add-new-todo" type="text" placeholder="todo追加"> <button id="add-todo">追加</button> </div> <input id="search-todo" type="text" placeholder="検索ワード"> <button id="search">検索</button> <p id="todo-count"></p> </div> <script src="todo-app.js"></script> </body> </html>cssはこんな感じになる
ul { list-style: none; } li{ display: flex; align-items: baseline } li> p ,input,button{ margin:10px; }③タスク追加機能を作る
さてここから本番。JavaScriptでの処理をちゃんと書いていく形になる。
タスク追加機能の流れとして
・引数にタスク名で、追加されたタスクのDOMを生成する関数を作る
・追加ボタンが押された時に発火するイベントを作る
となる。
引数にタスク名で、追加されたタスクのDOMを生成する関数を作る
関数名をcreateTodoListとして、task名を受け取ったらそれに応じてli、p、buttonを生成する関数を作る。
// タスクをリストに追加 const createTodoList = function(task){ const html=` <li> <p id="todo" class="todo">${task}</p> <button id="todo-delete" class="delete">削除</button> </li> ` todoList.innerHTML += html }使い方はこんな感じ。
const task = "犬の散歩" createTodoList("task")引数にいれた「犬の散歩」をタスク名に入れた、DOMが生成される。
追加ボタンが押された時に発火するイベントを作る
次は追加ボタンで発火するイベントを作る。
//追加でcreateTodoListを発火する document.querySelector('#add-todo').addEventListener('click',function(e){ const task = document.querySelector('#add-new-todo').value.trim() //空での追加を防ぐ if(!task == ''){ createTodoList(task) document.querySelector('#add-new-todo').value = '' } })で、id (add-todo）がクリックされた時に、処理内容を実行するイベントが出来た。
中の処理では、以下のことを行っている。
・taskにinputタグ内の入力値を代入
・if文でtinputの入力値が空の場合を除外
・先ほど作ったcreateTodoLIstにタスク名を渡して実行
・タスクの追加が終わったので、inputタグ内を空にする
//taskにinputタグ内の入力値を代入 const task = document.querySelector('#add-new-todo').value.trim() //if文でtinputの入力値が空の場合を除外 if(!task == ''){ //先ほど作ったcreateTodoLIstにタスク名を渡して実行 createTodoList(task) //タスクの追加が終わったので、inputタグ内を空にする document.querySelector('#add-new-todo').value = '' }これにてタスク追加機能が完成。
④タスク削除機能を作る
次にタスクの削除機能を作ります。
削除機能では以下のことを行います。
・削除ボタンで発火するイベントの作成
・li、p、buttonタグを全て削除する
//削除ボタンで発火するイベントの作成 todoList.addEventListener('click',function(e){ //li、p、buttonタグを全て削除する if(e.target.classList.contains('delete')){ e.target.parentElement.remove(); } })classLIstを使うことでdelteクラスが含まれている要素を親ごと取得して、remove()で削除している。
検索機能を作る
検索機能の大まかな流れとして
・追加されたtodoを配列に格納したtodosを作る
・検索ワードを格納するfiltersを作る
・filtersとtodosが一致した物のみで構成される配列filterTodosを作る
・todos(タスク一覧)、filters(検索ワード)を引数として、それらが一致していたら、新しいタスク一覧であるfilterTodosをレンダリングする関数renderTodosを作る
・filterTodosを作ったら検索ワードは空にする
・タスク一覧のDOM内を空にして、タスクの重複を防ぐ
・filterTodosをforEachで1つずつ出力する
・検索ボタンで発火するイベントを作る
//追加されたtodoを配列に格納したtodosを作る const todos = Array.from(document.querySelectorAll('#todo')) //検索ワードを格納するfiltersを作る const filters = { searchText: '' } //todos(タスク一覧)、filters(検索ワード)を引数として、それらが一致していたら、新しいタスク一覧であるfilterTodosをレンダリングする関数renderTodosを作る const renderTodos =function(todos,filters){ //filtersとtodosが一致した物のみで構成される配列filterTodosを作る const filterTodos = todos.filter(function(todo){ //todoのに格納されたタスク名に、filters.searchTextに格納した文字列が含まれている物だけがreturnされる return todo.textContent.toLowerCase().includes(filters.searchText.toLowerCase()) }) //フィルタリングしたら検索ワードのinputは空にする document.querySelector('#search-todo').value = '' //forEachでfilterTodosの配列を出力する前に、タスク一覧のDOM内を空にして、タスクの重複を防ぐ document.querySelector('#todo-list').innerHTML='' //filterTodosをforEachで1つずつ生成する filterTodos.forEach(function (todo) { createTodoList(todo.textContent) }) }これにより、検索ワードfilters、タスク一覧todos、todosとfiltersの文字列が一緒の物のみタスク一覧に追加するrenderTodosが出来上がった。
これらを使い、検索が押された場合に発火するイベントを作り、その都度、todos、filtersの値を更新しながらrenderTodosを実行する。
//検索ボタンでの発火 document.querySelector('#search').addEventListener('click',function(e){ //todosの配列の値を更新する const todos = Array.from(document.querySelectorAll('#todo')) //検索欄に入力された値が、filterワードとして格納される filters.searchText = document.querySelector('#search-todo').value renderTodos(todos, filters) })これにて検索機能完成！！！
動作する旅に「残りのタスクは~個です。」の〜が更新される
これで最後の機能？です。
大まかな流れとして
・pタグ作る
・pタグにJavaScriptで変数を格納
・各イベント時に変数の更新をする
最初のpタグを作る！はこれだけです。htmlにpタグを作ってidを振っておいてください。
中身はJs側で入れていくので、空で大丈夫です。
<p id="todo-count"></p> Js側では、以下の文言をさいしょのほうと、各イベント内に入れます。
todosの配列が追加、検索の際に更新されてlengthが変わってきます。
const todos = Array.from(document.querySelectorAll('#todo')) document.querySelector('#todo-count').textContent = `残りのタスクは${todos.length}個です`完成
以上でJavaScriptで todoアプリを作る事ができました。
今回の内容が自分1人で出来る様になると、JavaScriptの文法の基礎の、DOM操作、関数、配列、オブジェクトあたりは使いこなせる様になります。
告知
JavaScriptのライブラリのReactに関して、初学者向けのチュートリアルや解説の記事をいくつか作っています。
是非学習の参考にして下さい。
【React+TypeScript】Netflixのクローンを作るチュートリアル
React学習を楽にしてくれるJavaScriptでの関数型プログラミングの基礎知識