初学者のためのJavaScriptで簡単ToDoListチュートリアル #JavaScript

前提知識

関数が書ける、if文、switch文、HTMLを理解している。
以上を踏まえた上でのチュートリアルだと思ってください。
尚、この記事でのチュートリアルはフロントのみとなります。
リストをローカルやサーバーに記憶するなどの実用的機能は、
別にNode.jsなどのサーバーサイドやapiの知識が必要になります。

必要なメソッドの知識

document

　ウェブページそのものを表し、ページ内のDOMにアクセスするための入口を提供します。

getElementById

　HTMLから特定のIDを持つ要素を取得。該当する要素がない場合は**null**を返す。

createElement

　指定されたタグ名のHTML要素を新しく生成。新しい要素はDOMには追加されない。

　追加をしたい場合は**appendChild**や**instertBefore**のようなメッソドを使用します。

appendChild

　既存の要素に新しい子要素を追加。

textContent

　要素のテキスト内容を取得または設定。このプロパティを使用すると、要素とその子孫のテキスト内　容を変更または更新できる。

hasChildNodes

　子要素を持つ親要素から子ノードを確認する。子要素があればture / なければfalseを返す。

removeChild

　要素から子ノードを削除します。指定された子ノードをDOMから削除する。

firstChild / lastChild

removeChildの引数にfirstChildなら先頭から削除・lastChildなら後方から削除を設定する。

１. HTMLを作成。

まず最初にHTMLで簡単なインプットフォームを作成します。

<body>

 <input id="inputer" type="text">
 <button onclick="「後に作成する追加用の関数が入る」">追加</button>
 <button onclick="「後に作成する削除用の関数が入る」">削除</butoon>
 <button onclick="「後から作成する一斉削除関数が入る」">クリア</button>
 <ol id="list">
 </ol>
 
</body>

インプットフォームと追加する削除するクリアのボタンとアウトプット用のolを作成します。

ブラウザ画面

2.リスト追加用の関数を定義する

①　インプットフォームのプロパティを取得。inputer 要素を取得する変数を定義

②　olのlistidを取得する変数を定義

③　createElementメソッドを使い子要素として追加する要素を設定し、変数に代入

④　③の変数の生成された要素がinputer から取得されるたびに代入される変数を定義

⑤　②の変数の要素の子ノードとして④の変数が追加されるように定義

<script>
function addList() {
 let inputer = document.getElementById("inputer").value; //1
 let setList = document.getElementById("list"); //2
 let item = document.createElement("li"); //3
 item.textContent = inputer; //4
 setList.appendChild(item); //5
  }
</script>

3.削除用の関数を定義する

①　list 要素を取得するsetListを変数を定義

② 　if文を使い①の変数に子ノードがあるかを確認し、ture時の条件式を定義

③ ②の条件式がtureなら子要素を削除。引数にfirstChilを持たせ追加した順にsetListを

　　削除とする。※最後から削除したい場合はlastChildを持たせる。

<script>
function removeList() {
 let setList = document.getElementById("list"); //1
	 if( setList.hasChildNodes() ) {  //2
			setList.removeChild(setList.firstChild);   //3
		    }
		}
</script>

4.一斉クリア機能を持つ関数を定義

　　③では追加したリストを追加した順に削除していく関数を定義しました。

　　それとは別に一斉に追加したリストを削除する関数を作ります。

① 変数setListに要素listを代入する

② textContentを持ちいてnullを代入で削除。

function clearList() {
	let setList = document.getElementById("list"); //1
	setList.textContent = ""; //2
				}

5.関数をbuttonに設定

1で作成したHTMLのボタン機能に追加用と削除用の関数を設定。

<body>

 <input id="inputer" type="text">
 <button onclick="addList()">追加</button> 
 <button onclick="removeList()">削除</butoon>
 <button onclick="clearList()">クリア</button>
 <ol id="list">
 </ol>
 
</body>

これで追加をクリックすればリストが作成され、
削除をクリックすれば追加した順番に削除され、
クリアを押せば追加した項目が一斉に削除されます。
以上でチュートリアルは終わります。

コードの全体図

<!DOCTYPE html>
<html lang="ja">
    <head>
        <script>
            function addList() {
                let inputer = document.getElementById("inputer").value;
                let setList = document.getElementById("list");
                let item = document.createElement("li");
                item.textContent = inputer;
                setList.appendChild(item);
            }

            function removeList() {
                const setList = document.getElementById("list");
                if( setList.hasChildNodes() ) {
                    setList.removeChild(setList.lastChild);
                }
            }

            function clearList() {
                let setList = document.getElementById("list");
                setList.textContent = '';
            }
        </script>       
    </head>

    <body>
        <div class="container">
        <input id="inputer" type="text">
        <button onclick="addList()" class="but">追加</button>
        <button onclick="removeList()" class="but">削除</button>
        <button onclick="clearList()" class="but">クリア</button>
        <ol id="list">         
        </ol>
    </div>
    </body>
</html>