list-style-type:none
が当たっている時の注意点
list-style-type:none
を利用するとアクセシビリティツリー状でリストとして認識されなくなります。
リセットCSSを利用している場合、リストのデフォルトスタイルがキャンセルされていることが多いと思います。
アクセシビリティを意識する場合はrole="list"
を付与してください!
JSXの中で文字列を展開するときは…
ブラウザのdevツールで確認した際の見え方まで意識できていませんでした…
表示が変わるわけではないのですが、不要なものがレンダリングされてしまうのは不本意ですよね…
実際のコードで書くと下記の通りです!
- ※{number}
+ {`※${number}`}
少し冗長的に感じるかもしれませんが、綺麗な方がいいですよね!
詳細は下記の記事に書いてありますのでよろしければご覧ください!
ORは最初の真値を返す
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++
のように値に対して使おうとするとエラーになります…