2713 文字

14 分

Frontend Weekly 2023-03-31

2023-03-31

Tech

Frontend weekly

Q & A#

普段の業務において、質問を受けた際の回答などで有益そうなものをピックアップしています。

div 要素に a 要素を付けると width が 100%になり、button 要素に付けると width が最小幅のように振る舞うのは何故か#

これは a 要素が非置換要素であるのに対して、button 要素が置換要素のように振る舞うからです。

まず HTML 要素において、img や iframe、audio、いくつかのフォーム要素などは置換要素に分類され、それ以外のほとんどの要素は非置換要素に分類されます。置換要素では、まず外的要因を排除した内在サイズと呼ばれるもので大きさが決定されますが、この内在サイズは min-content や max-content を考慮しており、高さや幅が auto として動作するブロック/インラインレベルの置換要素では max-content が使用されます。max-content では基本的にコンテンツの幅、コンテンツのオーバーフローを避けつつ最小の幅に等しくなります。

加えて、置換要素がブラウザによってコンテンツが取得され内容のサイズが決定した後に要素のサイズが計算されるのに対して、非置換要素はブラウザがその要素のサイズを計算する前に子要素のサイズが決定されている必要があります。従って、基本的に置換要素のサイズ計算は、非置換要素のサイズ計算より先に行われます。ただし、再度レイアウトが計算されるケースや、リソースの読み込みを待ってサイズを計算をするケースがあるため、絶対ではありません。

今回のケースでは、非置換要素である a 要素の場合、子要素の div 要素によって width が 100%に拡張されたのに対して、button 要素の場合、まず button 要素のサイズが決定され、その後 div 要素が適用されるため、button 要素の横幅が 100%にならないわけです。また、置換要素ではインラインレベルであっても width や height を持てるため、これは button 要素の display に依存しません。

ここまで button 要素は置換要素であると書きましたが、実際は置換要素ではありません。本来、非置換要素であり、長い間ブラウザにおいて置換要素のように扱われてきたため、中途半端、半置換要素と揶揄されるようなことになっていました。

現在では、WhatWG のレンダリングで Widget に分類され、button 要素のレイアウトについては個別に章立てされています。

ここまでの置換要素及びサイズの計算についての話は恐らく不正確な点がいくつかあるので、詳しくは WhatWG の置換要素の章などを見てください。

React#

react.dev#

2023 年 3 月 17 日に、React の新しいドキュメントサイトである react.dev が正式にリリースされました。

React Hooks がデフォルトとなり、学習と API ドキュメントを兼ねており、豊富なサンプルに加え、より踏み込んだ説明が行われています。特にEscape hatchesやYou Might Not Need an Effectなどは、業務で React をなんとなくで触ってきた全ての人におすすめです。

Safari 16.4#

2023 年 3 月 27 日に Safari 16.4 がリリースされました。2 月に Beta 版を扱っていますが、個人的に Safari 16.4 はもっと話題になるべきだと思うので再度取り上げます。

Web API#

多くの Web API がサポートされるようになりました。モダンブラウザの中で Safari のみがサポートしていなかったものが多く、ブラウザ互換性を見て失望することや、冗長な記述を強いられること、ポリフィルを含める必要がなくなるのは大変ありがたいです。数が多いので、使う機会があるかもしれないと思うものを適当にピックアップして軽く紹介します。

Fullscreen API#

特定の要素を全画面モードで表示したり、それを解除したりできる API です。ブラウザゲームや、賃貸情報サイトの間取り図などの拡大などで有用かもしれません。ただし、これは離脱用の UI を作らない限り、ESC キーなどで離脱する必要があるため、ユーザーのことをよく考え利用した方が良いでしょう。

1
document.addEventListener(
2
  "keydown",
3
  (e) => {
4
    if (e.key === "Enter") {
5
      toggleFullScreen();
6
    }
7
  },
8
  false
9
);
10

11
function toggleFullScreen() {
12
  if (!document.fullscreenElement) {
13
    document.documentElement.requestFullscreen();
14
  } else if (document.exitFullscreen) {
15
    document.exitFullscreen();
16
  }
17
}

Screen Orientation API#

画面の向きを取得できる API です。

1
const orientation = screen.orientation;
2
orientation.addEventListerner("change", () => {
3
  console.log(orientation.type, orientation.angle);
4
});
5

6
rotateBtn.addEventListener("click", async () => {
7
  const oppositeOrientation = screen.orientation.type.startsWith("portrait")
8
    ? "landscape"
9
    : "portrait";
10
  scrren.orientation
11
    .lock(oppositeOrientation)
12
    .then(() => {
13
      console.log(`Locked to ${oppositeOrientation}`);
14
    })
15
    .catch((error) => {
16
      console.error(error);
17
    });
18
});
19

20
unlockBtn.addEventListener("click", () => {
21
  screen.otientation.unlock();
22
});

Screen Wake Lock API#

端末が自動で画面を暗くしたり、ロックしたりするのを防ぐ API です。アプリケーションの継続が必要なケースや、QR コードを表示しておく必要があるアプリなどで有用です。

1
const wakeLock = await navigator.wakeLock.request("screen");
2
wakeLock.addEventListener("release", () => {
3
  console.log("Happy release wakeLock!!");
4
});
5

6
await heavyTask();
7

8
await wakeLock.release();

ページのタブを切り替えるなどでドキュメントの可視性が変化すると解除されてしまう点には注意が必要です。必要に応じて、visibilityChange イベントを監視し、ロックを掛け直しましょう。

1
document.addEventListener("visibilitychange", async () => {
2
  if (wakeLock !== null && document.visibilityState === "visible") {
3
    wakeLock = await navigator.wakeLock.request("screen");
4
  }
5
});

OffscreenCanvas#

OffscreenCanvas は、端的に言えば DOM と Canvas API の分離です。

従来の Canvas を利用した高度なアニメーションの描画はメインスレッドを圧迫するため、ユーザーの阻害するという問題がありました。OffscreenCanvas では、アニメーションの描画を Web Worker の Worker スレッドで行うことで、この問題が解消されます。

今までも、DOM の操作は出来ないものの重いデータ処理を Web Worker などで行うことで、負荷を軽減することは出来ましたが、OffscreenCanvas は Transferable オブジェクトであり、実質オフスクリーンでレンダリングできる DOM から分離された Canvas であるため、描画までを Web Worker で担えます。

1
const offscreenCanvas = canvas.transferControllToOffscreen();
2
const worker = new Worker("worker.js");
3
worker.postMessage({ canvas: offscreenCanvas }, [offscreenCanvas]);
4

5
// worker.js
6
onmessage = (event) => {
7
  const offscreenCanvas = event.data.canvas;
8
  const ctx = offscreenCanvas.getContext("webgl");
9
  // ...
10
};

Web Push API#

今までは Android などでしかサポートされていなかった Web Push が、iOS 16.4 でサポートされました。ホーム画面に追加された Web アプリから、Push API、Notifications API、Service Worker などを駆使して、ユーザーにプッシュ通知を送ることが可能になります。

またホーム画面に追加された Web アプリでカウントを表示できる Badging API などもサポートされ、今後 PWA の利用が広がると期待されます。

https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/

ECMAScript features#

Safari 16.4 は、非常に巨大なリリースです。JavaScritp の多くの機能も新たにサポートされました。

https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes

以下に、サポートされた機能のいくつかを軽く紹介します。

Array.formAsync#

Array.from が for 相当なのに対して、Array.fromAsync は for await と見れば理解しやすいと思います。 Async iterable を処理する方法として、Promise.all などがありますが、Promise.all が並列実行であるのに対して、 Array.fromAsync は for await 相当であり、順次実行されます。

https://github.com/tc39/proposal-array-from-async

Array#group, Array#groupToMap#

Array#group は、配列を指定した関数の戻り値でグルーピングしたオブジェクトを返します。一方、Array#groupToMap は、配列を指定した関数の戻り値でグルーピングした Map を返します。

https://github.com/tc39/proposal-array-grouping

コードを見た方が理解しやすいと思います。

1
const animals = [
2
  { name: "たま", type: "猫" },
3
  { name: "みけ", type: "猫" },
4
  { name: "ぽち", type: "犬" },
5
];
6
console.log(animals.group((animal) => animal.type));
7
/* result
8
{
9
  猫: [
10
    { name: 'たま', type: '猫' },
11
    { name: 'みけ',  type: '猫' },
12
  ],
13
  犬: [
14
    { name: 'ぽち', type: '犬', },
15
  ],
16
}
17
*/
18
console.log(animals.groupToMap((animal) => animal.type).get("猫"));
19
/* result
20
[
21
  { name: 'たま', type: '猫' },
22
  { name: 'みけ',  type: '猫' },
23
]
24
*/

Import Maps#

ブラウザで実行される import によって読み込まれるパッケージの URL を指定する手段です。

https://github.com/WICG/import-maps#multiple-import-map-support

1
<head>
2
  <script type="importmap">
3
    {
4
      "imports": {
5
        "react": "https://unpkg.com/react@18/umd/react.development.js",
6
        "react-dom": "https://unpkg.com/react-dom@18/umd/react-dom.development.js"
7
      }
8
    }
9
  </script>
10
</head>
11
<body>
12
  <script type="module">
13
    import { createRoot } from "react-dom/client";
14
    import React from "react";
15
  </script>
16
</body>

TypeScript 5.0#

2023 年 3 月 16 日に TypeScript 5.0 がリリースされました。Beta 版でも取り上げましたが、ネタがあまりないので再度取り上げます。なお、TypeScript はセマンティックバージョニングに準拠していないため、5.0 は重要な変更が含まれていることを意味しません。

実際、allowImportingTsExtensionsやmoduleResolution: "bundler"、verbatimModuleSyntaxなどのフラグや、extendsに複数の設定ファイルを記述できるようになるなどコンパイラ周りの変更には興味深いものが多くあるものの、tsconfig.jsonの変更を滅多にしない多くのライトユーザーにとっては、すぐさま影響のあるバージョンではないと思われます。

以下では、今後誰でも使う機会がありそうな新機能について、いくつか紹介します。

https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-beta/

Decorators 　#

TypeScript 5.0 では、TS39 の Stage3 相当のデコレータの実装がされました。今後、デコレータを利用したライブラリが多く登場すると予想されます。

なお、今までコンパイラフラグの--experimentalDecoratorsで利用できたデコレータ（Legacy Decorators と呼称される）は、古いプロポーザルを元にしたものであり、互換性がないことには注意が必要です。ただしexperimentalDecoratorsが削除される予定はなく、TypeScript 5.0 には、experimentalDecoratorsを有効にした際の挙動改善も含まれています。

1
// Legacy Decorators
2
@register
3
export class Foo {}
4
export class C {
5
  constructor(@inject(Foo) private x: any) {}
6
}
7

8
// New decorators proposal
9
export
10
@register
11
class Foo {}
12
export class C {
13
  // Cannot use decorators as arguments.
14
  constructor(@inject(Foo) private x: any) {}
15
}

const Type Parameters#

今まで、あるオブジェクトのプロパティを取得する関数を実装した際に、具体的な型が欲しければ、呼び出す度に毎回引数へas constを付ける必要がありました。

TypeScript 5.0 では、型パラメータにconst修飾子を付けることで、引数側でas constを付ける必要がなくなります。

1
/*
2
TypeScript 4.9
3
*/
4
type HasNames = { readonly names: string[] };
5
function getNamesExactly<T extends HasNames>(arg: T): T["names"] {
6
  return arg.names;
7
}
8

9
// Inferred type: string[]
10
const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"] });
11

12
// Inferred type: readonly ["Alice", "Bob", "Eve"]
13
const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"] as const });
14

15
/*
16
TypeScript 5.0
17
*/
18
type HasNames = { names: readonly string[] };
19
function getNamesExactly<const T extends HasNames>(arg: T): T["names"] {
20
  return arg.names;
21
}
22

23
// Inferred type: readonly ["Alice", "Bob", "Eve"]
24
// Note: Didn't need to write 'as const' here
25
const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"] });