家にいることが多くなったこのご時世。
比較的自由な時間が増えたので、全然触っていなかったJavaScriptを思い出すため、基礎の復習に最適だと聞くTodoアプリを作ってみました。
todoアプリに実装する機能
todoアプリに実装する機能は、以下の通りです。
- テキストボックスに入力した文字を取得する
- addボタンを押した時
- テキストボックスに入力した内容がToDoリストに表示される
- 一項目を削除するボタン、全ての項目を削除するボタンを表示する
- ToDoリストに追加される項目の隣に✅（完了ボタン）を表示
- ✅（完了ボタン）を押した時
- Doneリストにその項目を表示する
- 項目の隣に削除ボタン、✅を押した日時を表示する
- Doneリストにその項目を表示する
こちらが完成図になります。
こんな条件で、todoアプリを作ってみます。
Step1.まずは見た目から
まずはHTMLとCSSで、見た目の部分だけ作ります。
HTMLは、
todoappforjs
<body><header><h1>ToDoアプリ</h1></header><divclass="addli"><inputid="add-area"type="text"placeholder="To Do"><spanclass="add-btn">add</span></div><divid="todo-app"><ulclass="lists"id="todo"><p>ToDo</p></ul><ulclass="lists"id="done"><p>Done</p></ul></div></body>以上がHTMLです。CSSは割愛します。
見た目はこんな感じ。
Step2.textboxに入力した内容がToDoに表示されるまで
ここからJavaScriptを記述します。
//class 'add-btn' を取得vare=document.getElementsByClassName('add-btn');e[0].addEventListener('click',function(){varlistText=document.getElementById('add-area');vartext=document.createTextNode('listText.value');varli=document.createElement('li');varlist=document.getElementById('todo');//作成したliタグにtextboxに入力した値textを追加li.appendChild(text);list.appendChild(li);});addボタンをクリックした時に、inputタグに入力されている値のvalueを取得し、新たにliタグをToDoリスト内に作り、そこに先ほどのinputタグに入力した値を追加するという内容です。
step3.削除ボタン、完了ボタンの実装まで
続いて、作成したliタグに削除ボタン、完了ボタンを追加します。ちなみに、ゴミ箱のアイコンとチェックマークは、Font Awesomeを使っています。同様にJavaScriptから、
e[0].addEventListener('click',function(){varli=document.createElement('li');//削除ボタンvartrash=document.createElement('span');trash.classList.add('trash');trash.innerHTML='削除 <i class="fas fa-trash-alt"></i>';li.appendChild(trash);//完了ボタンvarcheck=document.createElement('span');check.classList.add('check');check.innerHTML='完了 <i class="far fa-check-square"></i>';li.appendChild(check);varlist=document.getElementById('todo');list.appendChild(li)})ここまでのJavaScriptはaddボタンを押した時のイベントを記述しているので、中身を一つの関数にまとめます。
functionaddElement(){vartext=document.createTextNode('listText.value');varli=document.createElement('li');varlist=document.getElementById('todo');//作成したliタグにtextboxに入力した値textを追加li.appendChild(text);list.appendChild(li);//削除ボタンvartrash=document.createElement('span');trash.classList.add('trash');trash.innerHTML='削除 <i class="fas fa-trash-alt"></i>';li.appendChild(trash);//完了ボタンvarcheck=document.createElement('span');check.classList.add('check');check.innerHTML='完了 <i class="far fa-check-square"></i>';li.appendChild(check);};削除ボタン、完了ボタンにそれぞれクラスを割り当てたのは、判別化を図るためです。innerHTMLプロパティはそのままHTMLを書くことができるので便利ですね。
step4.要素を削除する
続いて、削除ボタンを押した時に要素を削除するイベントを記述します。押した要素を判別するのにfor文を使います。
functiontrashBox(){vartrash=document.getElementsByClassName('trash');for(vari=0;i<trash.length;i++){trash[i].addEventListener('click',function(){this.parentNode.remove();});}}削除ボタンを押すことで、その押したリストのみが削除される、といった内容の関数です。
step5.Doneリストに要素を移動する
続いて、完了ボタンを押した時、Doneリスト内に移動する、というイベントを記述します。
こちらも、削除ボタンと同様にfor文でまわします。
functioncheckBox(){varcheck=document.getElementsByClassName('check');vardone=document.getElementById('done');for(vari=0;i<check.length;i++){check[i].addEventListener('click',function(){done.appendChild(this.parentNode);});}}JSのコードまとめ
最後に、まとめとしてこれまでのコードの記述の一覧を載せます。
vare=document.getElementsByClassName('add-btn');e[0].addEventListener('click',function(){addElement();trashBox();checkBox();});functionaddElement(){varlistText=document.getElementById('add-area');vartext=document.createTextNode(listText.value);varli=document.createElement('li');li.appendChild(text);// li要素にボタンを追加vartrash=document.createElement('span');trash.classList.add('trashPosition');trash.classList.add('trash');trash.innerHTML='削除 <i class="fas fa-trash-alt"></i>'li.appendChild(trash);varcheck=document.createElement('span');check.classList.add('checkPosition');check.classList.add('check');check.innerHTML='完了 <i class="far fa-check-square"></i>'li.appendChild(check);varlists=document.getElementById('todo')lists.appendChild(li);};// todoリスト内の削除ボタンfunctiontrashBox(){vartrash=document.getElementsByClassName('trash');// クリックしたliタグの配列数を取得for(vari=0;i<trash.length;i++){trash[i].addEventListener('click',function(){// thisはtrash[i]にあたるvarli=this.parentNode;li.remove();// console.log(i);});};};functioncheckBox(){varcheck=document.getElementsByClassName('check');vardone=document.getElementById('done');for(vari=0;i<check.length;i++){check[i].addEventListener('click',function(){varli=this.parentNode;done.appendChild(li);this.remove();});};};終わりに
以上がJavaScriptのみで作るTodoアプリでした。基礎的な部分のみを理解して作ったものなので、どこか間違ってる箇所や、より効率的にかけるところがあれば、ご指摘いただけるとありがたいです。