No.
2024-04-30
  • Jan
  • Feb
  • Mar
  • Apr
  • May
  • Jun
  • Jul
  • Aug
  • Sep
  • Oct
  • Nov
  • Dec
  • Sun
  • Mon
  • Tue
  • Wed
  • Thu
  • Fri
  • Sat
  • 27
  • 28
  • 29
  • 30
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Todoアプリ(JSのみ)

1. HTMLで木構造を作る

2. CSSでマークアップ

  • inputなどの要素は、全体で共通のスタイルを当てることが多いので、クラス指定をせず要素全てに適用する
  • 要素が増えていく領域は、min-heightを使うことで、最低値の確保ができ、要素が増えていくと動的に変更させることもできる
  • 生のCSSを扱うことは少ない
    • コンポーネントライブラリやCSSフレームワークを使うことがほとんど

3. JS

AddEventListener

  • 第一引数にアクション
  • 第二引数に実行する関数をとる

getElementByID

  • HTML要素の取得に用いる

createElement

  • HTML要素の作成に用いる

.appendChild

  • HTML要素の階層構造の作成に用いる

.closest

  • 指定したHTML要素から最も近いものを取得する
  • 削除ボタンで特定の要素を削除する場合などで使える
  • 変数として宣言されたタイミングの要素が保存されるのではなく、画面上の要素の動きと同期して変化する

動作が循環してしまう、ってなったらその動作を関数化して、再起的に呼び出すことで実装できる 同じ動作を実現するのに、複数の方法が存在する

感想

クソめんどくさい HTMLのidベースで要素の取得、削除を行なっているので、元のHTMLが編集されるとやばそう 上記の理由から、削除ボタンなどを単純に使い回すことができない。それぞれのボタンに親要素のIDを指定しないと他のものを消してしまいそう