こんにちは、ユミクソンです。今回はJavaScriptを使った「ToDoリスト」の制作方法についての説明です。
「色々やる事あって忘れちゃいそうだな…」と思った用事をリストアップして、完了したら消す。日々の雑用などの管理にうってつけの機能ですよね。スマホのアプリなどでも活用されている方多いのではないでしょうか？
さて、このToDoリスト「JavaScriptを使って作ってください」と言われたら作れますか？
「どこから始めていいか分からない！」
「リストならHTMLで作れるけど…、JavaScriptでは一体何がどう違うの？」
と思っている方。確かにHTMLやCSSと比べて、最初JavaScriptは難解に見えますよね。
「誰か手取り足取り説明してくれたらなぁ」
というあなたの為に、簡単なステップを詳しくお伝えします。この記事の最後にはJavaScriptを使った「ToDoリスト」、あっという間に作れるようになりますよ。
目次
完成したToDoリスト
まず始めに、完成版のToDoリストがどんな物かイメージを掴みましょう。
See the Pen
ToDoList by Yumi (@yumixon)
on CodePen.
非常にシンプルな作りですよね。「登録」ボタンでやる事を登録して、「完了」ボタンをクリックすると打ち消し線が入り、何が完了しているタスクなのかが一目でわかる様になっています。
試しになんでも良いのでボックスの中にタイプして「登録」ボタンを押してみて下さい。そして「完了」ボタンもぜひ機能を確かめてみてください。
今回はわかりやすい制作方法をお伝えするのが目的なので、この簡素なバージョンを「ひとまず作ってみる」ことを目標にしましょう！
ToDoリストに必要な言語
ToDoリスト制作に必要な言語はズバリ、
- HTML
- CSS
- JavaScript
の3つです。今回はある程度HTMLとCSSの基礎知識があるものとして、進めさせていただきますね。
ご存知の通り、HTMLとはコンテンツ（テキストや画像）を記述するもの、そしてCSSはそのHTMLのコンテンツのデザインを決めるものです。両方ともマークアップ言語と呼ばれます。
一度ブラウザに表示されたら何も変化がないHTMLとCSSを、リアルタイムに書き換えたりして操作できるのがプログラミング言語のJavaScriptです。その事をイメージしながら進めると少し理解しやすいかもしれません。
それぞれのコードの段階的な制作
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ToDoリスト</title> </head> <body> <ol></ol> <input type="text" id="yarukoto"><button id="touroku">登録</button> </body> </html> |
まずHTMLでシンプルなコンテンツを作りましょう！
<body>タグの内容を説明します。<ol>タグで番号付きのリストを表示（順序のないリストの場合は<ul>タグ）する機能を使い、ToDoリストを作成できるように準備しておきます。
<input type=“text”>は単一行の入力欄の表示をします。これはToDoリストを自分で入力する目的で設定します。ちなみに<input>タグは空要素なので終了タグは必要ないです。ここはidで「固有の識別名を指定」します、例えるならば”yarukoto”という名札をつけてすぐに探し当てられる様にしておきます。
<button>タグはクリックできるボタンの表示をします。「登録」と書いてあるボタンを作り、ここも”touroku”というidをつけておきます。
ここまでのHTMLコードで、ToDoリストに「やる事」が一つ一つ登録ができる画面が完成しました。ただ、入力してボタンを押しても、このままではまだ何も起こりません。
CSS
|
1 2 3 |
.yokosen { text-decoration: line-through; } |
ここでは「完了」ボタンを押した際の状態を表現します。タスクを完了した事を表したいので、タスクの上に横線を引く「打ち消し線」、「line-through」をプロパティ値として設定します。
プロパティはテキストの装飾なので「text-decoration」ですね。後々JavaScriptから操作したい部分のセレクタは「.yokosen」というクラス名をつけておきます。
JavaScript
さていよいよこの記事のメイン、JavaScriptの構築です。理解を深めるために細かいセクションに分けて、それぞれ何を意味するのかをみてみましょう！
変数とdocument.getElementById
|
1 |
const button = document.getElementById('touroku'); |
constは「変数」を新しく作成するときに利用します。そして「変数」とは、同じ値を何回も繰り返して利用する事を前もって分かっている時に付けます。よって、このconst buttonの部分はざっくりと「buttonという名前の変数を新しく作るよ」という意味があります。
！注意
ここでは詳細は省きますが、「変数」は命名する時にいくつかルールがあるので注意が必要です。
document.getElementByIdはHTML内に指定されたId名を見つけ、その要素を取得してきます。ここまで総合すると「tourokuというIdを見つけて、その要素をbuttonという変数に関連付けてね」となります。ちなみに要素とはWebページのそれぞれの部品を意味します。
関数とaddEventListener
|
1 2 |
button.addEventListener('click', () => { const input = document.getElementById('yarukoto'); |
addEventListenerはイベントが発生した時点でプログラムを実行するよ、という意味があります。これは「clickというイベントが起きたときに文字を表示する」機能を追加するのが目的です。
「（）」は引数なし、で「=>」は「関数を作る」と意味があります。() => { } で関数を設定できます。関数はプログラムの一部に名前を付ける、という意味があり、何度も呼び出せるので同じ内容を繰り返し書く必要がなくなります。（引数に関しては今回は詳細は省きます。）
上記と同じconst が出てきたので、const inputは「input」という変数を新しく作ってね、という指示なのはもう分かりますね。そうするとこの部分は大体意味がわかってきます。
ここの一連の設定で、クリックした時に関数を連動して動作させることが出来ます。
innerTextとdocument.createElement
|
1 2 |
const li = document.createElement('li'); li.innerText = input.value; |
タグをJavaScript内で作成します。新しい変数liに、document.createElementはHTMLタグ名を指定して新しい要素を作る、という意味があります。これでテキストを入力するとli内に表示されるようになります。
appendChild
|
1 2 3 |
const doneButton = document.createElement('button'); doneButton.innerText = '完了'; li.appendChild(doneButton); |
li（リストのそれぞれの項目）に完了ボタンを追加したいのでappendChildを使います。これでliの末尾（項目の最後）にボタンを付けることが事ができます。
document.querySelector
|
1 2 3 4 |
doneButton.addEventListener('click', () =>{ const li = doneButton.closest('li'); li.classList.add('yokosen'); }); |
変数doneButtonに対してクリックというイベントが発生した時に、CSSで設定した打ち消し線が表示されるように指示します。この設定で完了ボタンから一番近いli要素を見つけてきて、CSSのスタイルがつきます。
|
1 2 3 |
const ol = document.querySelector('ol'); ol.appendChild(li); }); |
この部分はolの末尾にliを追加していくようにする指示です。
まとめ
どうでしょうか？今回はJavaScriptを使った「ToDoリスト」の制作方法でした。
「意外と簡単かも」と感じて頂けましたか？「まだ完全に理解出来ていない」という方も実践あるのみなので、是非コードをコピーしてご自身で何回も試してみてください。
少しでもJavaScriptを学ぶ足掛かりになれば幸いです。
