今回はHTML、CSS、Java Scriptの基本を押えることが⽬的です。
まずはHTML、CSSを使ってwebブラウザ上でTodoListを作成します。
Chromeでキレイに表⽰できることを⽬標にしてください。
全てコピペしても完成しないので、課題を自分で調べて完成させましょう。
※デザインや⾊、各項⽬の名称は変更可。好きなデザインにしてください。
完成イメージ
ディレクトリ構成
講師から用意していただいたリポジトリをクローンし、そのリポジトリをVSCodeで表示します。
フォルダ分けは特にせず、以下のファイル3つを作成してください。
┬ index.html
├ style.css
└ app.js
1.HTML
まずはhtmlのみでタイトル、⼊⼒部分、表（Table）、ボタンの表⽰を学びましょう。
課題
・<h1></h1>を使⽤し、タイトルを記述すること。（予定表、TodoList、なんでもいいです）
・<table></table> および <tr><th><td> タグを使⽤して表の作成
・<input>を使⽤し、それぞれの項⽬に⾒合った type="" を使⽤すること
・<button> で登録・削除・⼀括削除ボタンをページ内に配置すること
・⽇時・期⽇は時間まで⼊れること
ポイント
・シンプルにしよう！
・インデントをキレイにしよう！
・⾃分で絵や図を描いて、表のイメージをつかんでもOK！ ⾒本を意識しなくても⼤丈夫です！
2.CSS
htmlが終わったら、次はcssを実装していきます。
同じフォルダ内に style.css というファイルを⽣成します。
htmlの内でcssファイルを読み込ませます。
<link rel="stylesheet" href="style.css">
⾒本か⾃分で作図したものを意識しながら調整していきましょう。
課題
・ボタンにカーソルを当てたときに⾊を変える
・予定のテーブルは画⾯中央に
・テーブルデータにおけるテキストの位置
・⾦額表⽰は右寄せ
・チェックボックス、ID、⽇時表⽰・ボタンは中央寄せ
・その他は左寄せ
・登録ボタンと削除ボタンははっきりわかるように配置を離す
ポイント
・⾊をごちゃごちゃさせない！
・統⼀感を出す！
・無駄な記述は書かない！
3.Java Script
CSSの作成が終わったら、次はjavascriptで登録・削除の処理を実装していきます。
同じフォルダ内に app.js というファイルを⽣成します。
htmlの内の最後でファイルを読み込ませます。
<script src='app.js'></script>
課題
・登録する内容を⼊⼒し、⼊⼒した内容を登録ボタンをクリックしてテーブルに表⽰
・「予定」を⼊⼒せずに登録ボタンをクリックした場合に「予定を⼊⼒してください」というアラートを出⼒
・⽇時など⼊⼒していない場合、空⽂字をテーブルに出⼒する（項⽬にお⾦を含める場合は0円と表⽰させる）
・⽇時の表⽰は YYYY-MM-DD HH:mm:ss または YYYY/MM/DD HH:mm:ss の形にする
・全削除をクリックしたときに登録されたすべての予定を削除
・選択削除をクリックしたときにチェックをつけた予定すべてを削除
ポイント
・コピペしない
・課題を上から順に実装していく
・⼀つひとつの処理を実装していき、内容を理解する
「この処理はどういう意味？」と質問されても、答えられるように理解しておきましょう。
処理の流れ
/* 1. use strict が何かを調べよう */
`use strict`;
{
/* 2.⼊⼒したTodoタスクの⼀覧を保持する配列を定義する */
let todolists = []
/*
3.HTMLのID値を使って以下のDOM要素を取得する
→⼊⼒ボックス、登録ボタン、各削除ボタン、Todoリストを⼀覧表⽰するtable
*/
const todo = document.getElementById('todo') // 予定
const memo = document.getElementById('memo') // めも
const addButton = document.getElementById('addButton') // 登録ボタン
const tableBody = document.getElementById('todo-body') // 表
/* 4.「登録」ボタンがクリックされたときの処理 */
addButton.addEventListener('click', () => {
// クリックされた時のそれぞれのvalueを、todoListの中⾝に⼊れ込む
const todoList = {
todo: todo.value,
memo: memo.value,
}
// todoListがtrueの場合の処理
if (todoList) {
todolists.push(todoList) // 最初に定義した配列todolistsの末尾に、上記で⽣成したtodoListの配列を追加していく
todo.value = '' // ⼊⼒されたテキストを空にする
memo.value = ''
showTodos() // showTodosという関数を呼び出す
}
})
/* 5.「todolists」の中⾝を⼀覧表⽰するための関数を⽤意する（まずはチェックボックスなしで考えよう！）*/
const showTodos = () => {
tableBody.textContent = ''
// 値を１つずつ取り出し、繰り返し処理を実⾏
todolists.forEach((todolist, number) => {
// tbody要素に追加するためのtr要素を作成し、⼦要素としてtrを追加
const tableRecord = document.createElement('tr')
tableBody.appendChild(tableRecord) // tr要素に追加するためのtd要素をそれぞれ作成する
const tableId = document.createElement('td')
const tableTodo = document.createElement('td')
const tableMemo = document.createElement('td')
const tableAction = document.createElement('td')
// td要素の中⾝のテキストを表⽰するため、オブジェクトの要素から取得する
tableId.textContent = number + 1 // 配列のindexは0から始まるが、1個めの予定、2個めの予定…と予定表では1から表⽰させる
tableTodo.textContent = todolist.todo
tableMemo.textContent = todolist.memo
// td要素をtr要素の⼦要素として追加する
tableRecord.appendChild(tableId)
tableRecord.appendChild(tableTodo)
tableRecord.appendChild(tableMemo)
tableRecord.appendChild(tableAction)
// ボタン⽣成関数をtd要素の⼦要素として呼び出す
tableAction.appendChild(createDeleteButton(tableRecord))
})
}
/* 6.「削除機能」を管理するボタンを⽣成する関数 */
const createDeleteButton = (tableRecord) => {
const index = tableRecord.rowIndex-1
const deleteButton = document.createElement('button')
deleteButton.textContent = '削除'
deleteButton.addEventListener('click', () => {
todolists.splice(index, 1)
showTodos()
})
return deleteButton
}
}
/*
7.addButtonがクリックされたときの処理の中に、予定が⼊⼒されていなかったらアラートを出⼒しよう！
どこに処理を置くか、考えてみましょう。
*/
if (todo.value !== '') {
alert('予定を⼊⼒してください')
}
/*
8.「3.HTMLのID値を使って以下のDOM要素を取得する」の項⽬を増やしてみよう！
上記の処理では「予定」「メモ」「登録ボタン」のDOM要素の取得のみでした。
予定やメモの他に任意で作られたinput要素を取得していきましょう。
ヒント：
4.「登録」ボタンがクリックされたときの処理 で実装している todoList や todoListがtrueの場合の処理 にも⼿を加えます。
5.「todolists」の中⾝を⼀覧表⽰するための関数 の中の以下の部分でも同様に、追加で取得したDOM要素を記述していきます。
// tr要素に追加するためのtd要素をそれぞれ作成する
// td要素の中⾝のテキストを表⽰するため、オブジェクトの要素から取得する
// td要素をtr要素の⼦要素として追加する
9.⽇時の表⽰は `YYYY-MM-DD HH:mm:ss` または `YYYY/MM/DD HH:mm:ss` の形にする
10.⽇時など、⼊⼒していない場合に空⽂字を出⼒する（項⽬にお⾦を含める場合は0円と表⽰させる）
11.全削除ボタンを実装してみよう
12.テーブルを作成するときに、テーブル左端にチェックボックスを作成してみよう
13.チェックボックスがチェックされているものだけを、「⼀括削除」ボタンで削除する機能を実装してみよう
*/
参考にしてみるといい⽂献集めておきました。
.getElementById()：
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById
.push()：
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push
.appendChild()：
https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild