#2 2020年9月にツイートしたHTML/CSS/JavaScriptのTipsまとめ

2020 年 9 月にツイートした HTML/CSS/JavaScript のツイートまとめです。見出しをクリックするとツイート元に遷移するので、気に入ったらフォロー・ファボ・リツイートお願いします。

1. autofocus属性

お問い合わせフォームやサインイン画面などでは、最初の input 要素に autofocus 属性をつけておくと、ユーザーがすぐに入力できるのでおすすめです。

<input type="text" autofocus>

2. autocomplete属性

input[type="password"] 要素には適切な autocomplete 属性を指定します。

<input type="password" autocomplete="new-password">
<input type="password" autocomplete="current-password">

新規登録フォームやパスワードリセットフォームでは new-password 値を指定し、サインインフォームでは current-password 値を指定するとパスワードマネージャーが自動入力してくれます。

3. imagesrcset属性

link[rel="preload"] 要素を使ったコンテンツの先読みで imagesrcset 属性と imagesizes 属性を使うことにより、画面幅に応じて必要な画像のみ先読みさせられます。

<link
  rel="preload"
  as="image"
  imagesrcset="
    https://picsum.photos/400/300.jpg 400w,
    https://picsum.photos/800/300.jpg 800w,
    https://picsum.photos/1200/300.jpg 1200w"
  imagesizes="100vw">

構文は img 要素の srcset 属性や sizes 属性と同じです。今のところ、Chrome 73 と Edge 79 以降のみ対応しています。

<link rel="preload" as="image" href="https://picsum.photos/400/300.jpg" media="(max-width: 400px)">
<link rel="preload" as="image" href="https://picsum.photos/800/300.jpg" media="not all and (max-width: 400px) and (min-width: 800px)">
<link rel="preload" as="image" href="https://picsum.photos/400/300.jpg" media="(min-width: 800px)">

imagesrcset 属性に対応していないときは media 属性を使って分けて書くこともできます。

4. 上下左右中央揃え

CSS で上下左右中央揃えといえば、display: flex; や display: grid; を指定して、align-items: center; と justify-content: center; を使うことが多いと思います。

<div class="parent">
  <div class="child">...</div>
</div>

.parent {
  display: flex;
}
.child {
  margin: auto;
}

子要素に margin: auto; を指定することで、子要素から上下左右中央揃えの指定を行うこともできます。

5. @property規則

CSS Custom Properties の定義に @property 規則を使うと変数の型を制限できます。syntax プロパティには <image> や <color>、<number> などの型を指定します。

initial-value プロパティには初期値を指定し、inherits プロパティには値を継承するかどうかを指定します。

@property --primary-color {
  syntax: '<color>';
  initial-value: red;
  inherits: false;
}
.sample-1 {
  background-color: var(--primary-color);
  // => red
}
.sample-2 {
  background-color: var(--primary-color, blue);
  // => red
}
.sample-3 {
  --primary-color: blue;
  background-color: var(--primary-color);
  // => blue
}
.sample-4 {
  --primary-color: foo;
  background-color: var(--primary-color);
  // => red
}

.sample-2 では var() のフォールバック値よりも @property の initial-value 値が優先されます。.sample-4 では --primary-color 変数に foo が指定されていますが、 <color> 型ではないため無効な値になり、initial-value 値が使われます。

対応ブラウザ はまだまだ少ないですが覚えておくとよいテクニックです。

6. CSS設計REMM

CSS設計で悩んだら一度 REMM という考え方を見てみるといいかもしれません。

7. String.prototype.replaceAll()

文字列の置換には .replace() を使うことが多いと思いますが、.replaceAll() というのもあります。第 1 引数に文字列を指定すると .replace() は 1 つめのマッチだけを置換するのに対し、.replaceAll() はすべてを置換します。

'a-b-c'.replaceAll('-', '=')
// => 'a=b=c'

'a-b-c'.replaceAll(/-/g, '=')
// => 'a=b=c'

また、.replaceAll() は第 1 引数に正規表現を指定した場合、g フラグをつけないと TypeError になります。

8. if文のショートハンド

&& 演算子は左辺が true のときに右辺を評価し、左辺が false のときには右辺を評価しないので if 文の代わりに使えます。

const a = 'あ'

// Before
if (a === 'あ') {
  doSomething()
}

// After
a === 'あ' && doSomething()

9. ネストされた配列の展開

Array.prototype.flat() を使うとネストされた配列をフラットにできます。

const array = [1, [2, 3, [4, 5, 6, [7]]]]
console.log(array.flat(Infinity))
// => [1, 2, 3, 4, 5, 6, 7]

引数には展開する階層数を指定しますが、すべてのネストを展開したい場合は Infinity を指定します。

10. オブジェクトのキーを削除

オブジェクトのキーを削除するときは delete 演算子を使うのが普通だと思いますが、あえて分割代入を使っています。

// オブジェクトのキーを削除する関数
const omit = (obj, key) => {
  const {[key]: _, ...rest} = obj[key] === null ? {...obj, [key]: 0} : obj
  return rest
}

const object = {
  a: 1,
  b: 2,
  c: 3,
  d: null,
}
console.log(omit(object, 'd'))
// => {a: 1, b: 2, c: 3}

ただ、この方法だとオブジェクトのキーの値が null のときエラーとなってしまうので、null 値のときは適当な値 0 に置換しています。

11. チルダ演算子で小数点以下の切り捨て

チルダ演算子 ~ を使えば簡単に小数点以下の切り捨てができます。

const x = 3.9
// 32ビット整数に型変換されてからビット反転される
const y = ~x  // -(x + 1) = -(3 + 1) = -4
const z = ~y  // -(y + 1) = -(-4 + 1) = 3

// つまり、こうすれば小数点以下を切り捨てられる
console.log(~~x)  // => 3

Math.floor() だと引数に指定された数以下の最大の整数を返すため、負の値のときには意図した挙動になりません。

const x = 3.9
const y = -3.9

console.log(~~x)            // => 3
console.log(Math.floor(x))  // => 3
console.log(~~y)            // => -3
console.log(Math.floor(y))  // => -4

12. お手軽スムーススクロール

scrollIntoView() を使うと簡単にスムーススクロールを実装できます。behavior オプションに 'smooth' を指定することでスムーススクロールされ、block オプションに 'center' を指定するとスクロール先の要素が画面の中央に表示されるようになります。

document.querySelector('.target').scrollIntoView({
  behavior: 'smooth',
  block: 'center',
})

対応ブラウザをみると、IE や Safari で対応していないため、scroll-behavior-polyfill を使うとよいと思います。

13. event.targetとevent.currentTargetの違い

event.target は実際にイベントが発生した要素を返しますが、event.currentTarget はイベントが紐づけられた要素を返します。

<button>
  <span>ボタン</span>
</button>

document.querySelector('button').addEventListener('click', event => {
  console.log(event.target)         // spanかbutton要素
  console.log(event.currentTarget)  // 常にbutton要素
})

14. valueAsNumberプロパティ

<input type="number"> 要素に入力された値を取得するとき、event.target.value の値を parseInt() などで数値に変換しているコードをよく見かけますが、valueAsNumber ならそのまま数値として取得できます。

<input type="number">

document.querySelector('input').addEventListener('input', event => {
  console.log(event.target.value)          // String型
  console.log(event.target.valueAsNumber)  // Number型
})

15. jQueryについて

今から jQuery を学ぶかどうかは自由ですが、一番の懸念点として jQuery プラグインのメンテナンスがされなくなっているということです。有名なプラグインですらここ数年、issue が放置されたりしています。

他のフレームワークに取り込みやすいように jQuery プラグインから jQuery 依存なしのライブラリへと書き換えられていることが多いので、そちらを使えば大丈夫だと思います。

16. Chrome DevToolsで数値の増減

ショートカットキーを使えば簡単に数値の増減ができます。クラス名に数字が含まれていれば、数字部分のみ値の増減を行うこともできます。

増減値	ショートカットキー
±0.1	Alt (⌥) + ↑ / ↓
±1	↑ / ↓
±10	Shift + ↑ / ↓
±100	Ctrl (⌘) + ↑ / ↓

17. Chrome DevToolsでクラスの操作

.cls をクリックするとクラス名ごとにチェックボックスが表示され、オンとオフを切り替えられます。また、テキストボックスに任意のクラス名を入力して追加もできます。

18. ztext.js

ztext.js は立体的な文字を実装できるライブラリです。

19. Vanilla Colorful

Vanilla Colroful は軽量なカラーパレットのライブラリです。

20. nanogallery2

nanogallery2 はモダンな画像や動画のギャラリーを作れるライブラリです。

21. clusterize.js

clusterize.js はリストやテーブルなどの超大量データ DOM 要素のスクロールを滑らかに描画するライブラリです。一度に描画する DOM 数を制限することで描画の負荷を軽減しています。

22. dequal

dequal は超軽量で 2 つの値が等しいかどうかを判定できるライブラリです。

import { dequal } from 'dequal';

dequal(1, 1); //=> true
dequal({}, {}); //=> true
dequal('foo', 'foo'); //=> true
dequal([1, 2, 3], [1, 2, 3]); //=> true
dequal(dequal, dequal); //=> true
dequal(/foo/, /foo/); //=> true
dequal(null, null); //=> true
dequal(NaN, NaN); //=> true
dequal([], []); //=> true
dequal(
  [{ a:1 }, [{ b:{ c:[1] } }]],
  [{ a:1 }, [{ b:{ c:[1] } }]]
); //=> true

dequal(1, '1'); //=> false
dequal(null, undefined); //=> false
dequal({ a:1, b:[2,3] }, { a:1, b:[2,5] }); //=> false
dequal(/foo/i, /bar/g); //=> false

23. linkinator

linkinator は Node.js で Web サイトのリンク切れを検出できるライブラリです。

24. file-type

file-type は Node.js でファイルの種類（拡張子）を特定できるライブラリです。

25. Playwright

Playwright は Node.js で Chromium や WebKit、Firefox での表示を一度に確認できる Microsoft 製のライブラリです。

26. Color.Nunja

Color.Ninja は 2 色間グラデーションの色を生成してくれるオンラインジェネレーターです。

---

#1 ← | → #3

---