LoginSignup
2
1

知っていると良い実装ができるかもしれない小ネタ集

Last updated at Posted at 2023-12-14

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++のように値に対して使おうとするとエラーになります…

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1