`list-style-type:none`が当たっている時の注意点

list-style-type:noneを利用するとアクセシビリティツリー状でリストとして認識されなくなります。

リセットCSSを利用している場合、リストのデフォルトスタイルがキャンセルされていることが多いと思います。

アクセシビリティを意識する場合はrole="list"を付与してください！

JSXの中で文字列を展開するときは…

ブラウザのdevツールで確認した際の見え方まで意識できていませんでした…

表示が変わるわけではないのですが、不要なものがレンダリングされてしまうのは不本意ですよね…

実際のコードで書くと下記の通りです！

- ※{number}
+ {`※${number}`}

少し冗長的に感じるかもしれませんが、綺麗な方がいいですよね！
詳細は下記の記事に書いてありますのでよろしければご覧ください！

1つ目は「1」、2つ目は2番目の「1」、3番目は1番目の「2」が返る。

alert( 1 || 0 ); // 1
alert( null || 1 ); // 1
alert( 2 || null || 1 ); // 2

設置位置が違うだけで数値の増減のタイミングが違います。

前置呼び出し

let counter = 1;
let a = ++counter;

alert(a); // 2

++counterはcounterを増加させ、2という新しい値を返します。

後置式

let counter = 1;
- let a = ++counter;
+ let a = counter++;

alert(a); // 1

後置式counter++はcounterを増加させますが、増加する前の値を返します。そのため、alertは1を表示します。

インクリメント/デクリメントの記述は変数に対してのみ有効なので、5++のように値に対して使おうとするとエラーになります…