初心者向け。JavaScriptで簡単に作れるTODOアプリ
1147 回閲覧されました
みなさんこんにちは、エンジニアのjonioです。
今回はJavaScriptで作るTODOアプリの作り方の解説をします。
ProgateでJavaScriptを勉強して次は何を勉強すればいいかわからない方にお勧めです。
ProgateのJavaScriptコースは文法を学ぶだけのコースで具体的に何かを作る訳ではないので何度も何度もやる意味は全くないです。
それでは説明しますがHTMLとCSSは重要ではないのでコードのみを掲載してJavaScriptのコードの解説をします。
「〜のコード」と記載している場合は〜のファイル名の事で「コード」としか記載しない場合はJavaScriptのコードと思ってください。
HTML
コードを↓にします。
CSS
コードを↓にします。
これで↓になります。
これでタスクを追加してそのタスクを削除できる機能を追加します。
JavaScript
まずはコードを↓にします。
これでHTMLの13行目・14行目・18行目のclassを選択しています。
まずはタスクの内容を追加する所までを説明します。
タスクの内容の追加
JavaScriptのコードを↓にします。
これでフォームに内容を追加して「タスクを追加する」ボタンを押せばタスクが増えていきます。
9行目〜13行目ですがフォームに言葉を入力して「タスクを追加する」ボタンを押した時に画面を見ている人に起こる事を記述しています。
10行目ですがliタグを作り11行目でHTMLのコードの18行目のulタグの中にliタグを設置しています。
そして12行目でliタグの中にフォームで入力した文字を入れています。
16行目〜21行目は「タスクを追加する」ボタンを押した時にTODOアプリ側でやっている事です。
17行目は「タスクを追加する」ボタンを押した時に画面リロードになってタスクの内容が消える（画面をリロードするとタスクの内容は消えます）のを防ぐための記述です。
18行目はHTMLの13行目のフォームに対してでフォームの中に書いたタスク（taskValue.value）を「task」と置いてそのtaskを19行目で使います。（19行目のaddTasksの中身は9行目〜13行目ですがこれでフォームの中にタスクを入力して「タスクを追加する」ボタンを押した時にタスクの内容が表示されます）
タスクの内容が表示された後ですが今のままではフォームに入力したタスクがそのまま残っています。
フォームに入力したタスクは消えた方が自然なので20行目の記述がありこれでフォームに入力したタスクは消えます。
最後は表示されているタスクの内容を削除するための記述です。
表示されているタスクの削除
JavaScriptのコードを↓にします。
14行目で削除のボタンを作って15行目で削除のボタンに「削除」と記載されている様にして16行目で追加したタスクの内容の右側に削除ボタンが設置される様にします。
29行目〜32行目はタスクが削除されるための記述ですが30行目は「削除」ボタンの左側にあるタスクを指定するための記述で31行目でタスクを削除しています。
タスクが削除される動作が起きるようにするために18行目〜21行目があります。
19行目は「削除」ボタンを押した時に画面リロードが起きない様にするための記述です。
20行目で「削除」ボタンを押した時にタスクが削除されます。
これで完成です。