Cybozu Frontend Monthly #10

イベント概要

サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。

その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエキスパートチームのメンバーが共有していきます。

このイベントのハッシュタグは #サイボウズフロントエンドマンスリーです。

※フロントエンドウィークリーとは

毎週火曜の 17:00 〜 18:00 で社内向けに行っているフロントエンドの気になる記事を紹介する会です。2016年3月15日から行われています。
ハッシュタグ #サイボウズフロントエンドウィークリーで実況しています。

zennのpublicationにてウィークリーのまとめも投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend

開催日

2021年04月27日

イベントページ

https://cybozu.connpass.com/event/211827/

配信URL

https://www.youtube.com/watch?v=LssNt4WtnyA

メンバー

ゲスト

@lacolaco

コンテンツ

MDN のフレームワークガイドに Angular チュートリアルが追加された

共有者: lacolaco

Understanding client-side JavaScript frameworks - Learn web development | MDN にはこれまで React, Ember, Vue, Svelte のチュートリアルがあったが、そこに Angular も追加された。

Angular tutorials

Google の Angular Docs チームがチュートリアルを作成して提供したらしい。

adding angular docs by chrisdavidmills · Pull Request #3972 · mdn/content

E2E テストツールの Protractor の開発終了計画

共有: lacolaco

Future of Angular E2E & Plans for Protractor · Issue #5502 · angular/protractor

2013 年から Angular チームが開発してきた E2E ツール Protractor を 2022 年をもって終了する計画。

v12 (今年 5 月) から新規プロジェクトへのデフォルト導入を廃止
v15 (来年冬）にメンテナンス終了

Angular CLI の ng e2e コマンドは互換性のあるサードパーティ E2E ツールの導入によって機能するようになり、デフォルトでは実体を持たない予定。（ng deploy と AngularFire、ng lint と angular-eslint のような関係になる）

背景:

2013 年当初、まだ WebDriver API が標準化されていない時期、非同期処理をサポートした E2E テストのために Protractor を開発した
- Promise による非同期コールバック地獄をどう克服するかが焦点
- （WebDriver って W3C に Spec あったの初めて知った https://www.w3.org/TR/webdriver/)
WebDriverJS(Selenium)や Protractor は Promise Manager（あるいは Control Flow）と呼ばれる機能を実装し、E2E テストケースの記述に Promise が登場しないようにした
- テストケース上は同期的に書けるような API
- https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs#introduction
- Puppetter や Cypress の書き味のベースになっているのがよくわかる
async/await の登場
- Promise Manager なしでも同期処理のような書き方でテストが書けるようになった
- async/await には JavaScript からフックできないため、Promise Manager とは互換性がない
2013 年からメンテナンスされてきた Protractor を ES2017 ベースに作り変えるのは非常に労力がかかるため、サポートを終了する
- もともと AngularJS アプリの E2E テストのために作ったが AngularJS も今年で EOL なので、維持する理由がほぼなくなった

共有: lacolaco

Best practices for cookie notices

web.dev より、パフォーマンスやユーザー体験をできるだけ損なわないように Cookie の利用表示を出すためのプラクティス

Cookie 通知スクリプトは非同期で読み込む
- できるだけ Resource Hints も使って先読みする
Testing cookie notices with WebPageTest
- WebPageTest の機能で Cookie 通知のボタンを押すところまでをテストできる
Testing cookie notices with Lighthouse
- Clear Storage でテストすれば Cookie 通知が出る状態をテストできる
- CLI の場合は --extra-headers で任意の Cookie を無理やりつけてテストできる
Placement
- ヘッダーかフッターが一般的
  - 特にフッターはレイアウトシフトも起こさないので推奨
- インラインも有効だが実装の組み込みが容易じゃない場合が多く選択されにくい
- モーダル
  - 小さい部分モーダルなら CLS を引き起こさず邪魔にならない通知を出す手段になる可能性
  - 全画面モーダルはユーザーの脱落が起こりやすいため注意
    - フルスクリーンの Cookie 同意モーダルの使用を検討している場合は、cookie wallsに関する法律に注意する必要があります。

サードパーティスクリプトをコントロール下に置く

共有: lacolaco

Keeping third-party scripts under control

サードパーティスクリプトをコントローラブルな状態で利用するためのガバナンス設計
Tag governance process
- コンプライアンス
- 必要性の確認
- オーナーシップの明確化
- 利用用途の明確化
  - Furthermore, have there been any commercial vs performance trade-off discussions? If there is a tag that is deemed as “required” because it brings in revenue, has there been an analysis to the potential revenue lost through speed regression
- 定期的なレビュー
  - Web サイトのスクリプトのサイズやサードパーティスクリプトの数など、気づかないうちに肥大化することを防ぐ
  - パフォーマンスバジェットとして定義して CI などで確認することもできるかもしれない

April 2021 #73 - babel/proposal

共有者: sosukesuzuki

Google の Justin Ridgewell が TC39 ミーティングがあるたびにプロポーザルの変動を教えてくれる Issue 2021 年 4 月版。

今回の見どころ

Class Features が Stage 4 になり ES2022 となる初めての提案に
object.has が今回初登場にも関わらず Stage 1 を飛ばして一気に Stage 2 へ

0 -> 1

Read-only ArrayBuffer
- freeze できる ArrayBuffer
Fixed view of ArrayBuffer
- DataView から .buffer が読めない ArrayBuffer
Change Array by copy
- イミュータブルな配列操作メソッド

0 -> 2

object.has
- hasOwnProperty のスタティックメソッド版

1 -> 2

Symbols as WeakMap keys
- WeakMap のキーとしてシンボルを使えるようになる

3 -> 4

ES2022 に入るはじめての提案

Slow and Steady: Converting Sentry’s Entire Frontend to TypeScript

共有者: sakito

Sentry を 12 人で 1 年間かけて 1100 ファイル(9,500 行)を TS に置き換えたはなしです。

TS に置き換える話は昨今よくある話ですが、この記事では取り組みについて啓蒙活動から具体的なアクションまで説明されています。

チームの教育 => 開発しやすいように基盤の構築 => 戦略を立てていく(頻繁に使用するファイルから倒していく) => モチベの維持(slackbot で進捗を可視化など)の流れで進めたとのことです。

TS の置き換えが終わるまで、React の hooks 化やライブラリーのアップデートを行わず集中してやったとも書かれています。

TS に置き換える以外でも参考になる話でした。

Solving a Mystery Behavior of parseInt() in JavaScript

共有者: pirosikick

小ネタ。parseInt(0.000005)は0を返すのに、parseInt(0.0000005)は5を返す件について。最近、別件で parseInt 関数の仕様を調べる機会があったので紹介。

parseInt 関数の仕様は、かなりざ〜っくり説明すると以下のとおり。

parseInt(string, radix)
inputString = ToString(string)
inputString の先頭のスペースを trim する
radix が0 or undefinedの場合は、radix = 10 とするけど、string の先頭が”0x” or “0X”の場合は radix = 16
radix が16の場合、string は”0x” or “0X で始まってもいい
radix < 2 || radix > 36 → return NaN
先頭の+,-（プラス、マイナス）は取り除いて、 radix 進数の範囲外の文字が見つかったらその文字の前までの文字列を評価する
- 例）radix が2で"0101012"が入力された場合、"010101"を評価する
先頭が-の場合は、-1 を掛ける

parseInt 関数の第 1 引数はToStringされるので、0.0000005は"5e-7"になる（ちなみに、String(0.000005)は"0"）。「radix 進数の範囲外の文字が見つかったらその文字の前までの文字列を評価する」ので"5"だけ評価され、5を返す。

ちなみに、「radix 進数の範囲外の文字が見つかったらその文字の前までの文字列を評価する」という仕様は、"10px"のような数字 + suffix の文字列から数字だけを取り出すときに便利。

parseInt("10px"); // => 10

今月の IE11 関連情報

共有者: nakajmg

今月も IE サポートを終了したり終了の予告を出すサービスや会社がありました。

IE11 関連の動きが気になる方はIE11 サポート終了の歴史をチェック。

deps: add Yarn 1.22.5 by arcanis · Pull Request #37277 · nodejs/node

共有者: shisama

yarn v1をNode.js本体に追加するPRが出ています。

これがマージされれば、npmで個別にyarnをインストールしなくてもNode.jsをインストールするだけでyarnも使えるようになります。

ただ、yarnはすでにv2がリリースされていて、今後はyarn v2がメンテされていきます。そのため、v1すでにレガシーという意見もありますが、現状npm install yarnではv1がインストールされる現状やv1は今でも利用者が多いことや、yarn v2を使いたいユーザーにとっても価値のあるものとしてyarn v1を選んだとのこと。

Yarn 1 isn’t legacy https://github.com/nodejs/node/pull/37277#issuecomment-775586604

yarnを加えること自体に賛否があります。 yarnはnpmよりパフォーマンスなど優れているんだからyarnは入れるべきという意見や、メンテコストが上がるから増やすべきではないという意見があります。そもそもNode.js本体にパッケージマネージャーは入れなくてもいいのではという意見もあります。

しかし現行のnpmはyarn v1と同じぐらい優れているし、yarn v1には修正されない重大なバグもある、複数パッケージがあると初心者は混乱するのではないかと指摘があります。 https://github.com/nodejs/node/pull/37277#issuecomment-817898794

もう一案としてはcorepack経由でyarnをNode.js本体に含めるという案もあります。 https://github.com/nodejs/node/pull/37277#issuecomment-819824338

corepackはyarnとかpnpmなどnpm以外のパッケージマネージャーを一括管理するツールです。現在はnodejs管理下に置かれています。今でもnpmからインストールして使えます。 https://github.com/nodejs/corepack

corepackをNode.js本体に入れるPRも出ています。 https://github.com/nodejs/node/pull/35398

今週末にTSCのMTGがあって、この件もAgendaに載っているので何らかの動きがありそう。

Node.js関連だと4/20にNode.js v16がリリースされました。 M1 MacでもNode.jsが動くようになったり、timers/promisesが便利だったりします。あと、Node.js v10が4/30でEnd-of-Lifeなので、移行してください。

CSS is a Strongly Typed Language

共有者: b4h0_c4t

名前から強めの思想を感じ取ったので共有。

最近 TypeScript のような強い型付け言語がはやっているけど、CSSも強い型付け言語なんだよ、という話しの読み物系記事。 CSSプロパティの型リストが書いてあったり、CSSのレジリエンスについて幾つかのエラーケースをもとにCodePenで解説していたりと学びも多いと思います。

フロントエンドエキスパートチームについて

https://speakerdeck.com/cybozuinsideout/frontendexpert-team