Cybozu Frontend Monthly #15

イベント概要

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

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

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

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

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

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

開催日

2021年09月28日

イベントページ

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

配信URL

https://www.youtube.com/watch?v=4O3mVeUC-u0

メンバー

ゲスト

@nabeliwo

@zoshigayan

コンテンツ

Internet Explorer への対応が8月17日で終了します

共有者: zoshigayan

SmartHRは昨年末にIE対応終了PJを発足して活動を続け、ついに先日IE対応を終了しました。それをどう進めていったかという話をしましょう。

やったこと
- 「やるぞ」と言う
- お知らせを出す
- お問い合わせ方針を統一する
- フロントエンド内での足並みを揃える
- お客様対応の中でメンバーから寄せられた質問にひたすら答える
難しかったこと
- SPメンバーに推奨環境の根拠を説明する場面があった
  - 「まずレンダリングエンジンっていうのがあって…」から始めるつらさ
- いざ対応終了という場面で具体的に何をするのかを決める必要があった
  - 「IEでの動作担保をやめる」という消極的な対応終了
  - パッケージのアップデートやスクリプトのビルド対象バージョンを上げる積極的な対応終了

タイピングゲームを作りました

共有者: nabeliwo

SmartHR 社のエンジニア向けオンライン採用イベントのコンテンツとしてタイピングゲームを作りました。
イベントの1日のために1ヶ月使って作ったものですが、もったいないので共有させていただきます。

技術的な部分は次のようになっています。

背景に Canvas を敷いて上に React の UI を置いている
- GoogleChromeLabs の proxx を参考にした
タイピングのロジックはこのあたりを参考にした
- タイピングガチ勢が本格的タイピングゲーム（ローマ字入力）を実装してみた
OffscreenCanvas を使って canvas の処理はワーカースレッドで行って React と相互に影響を与えないようにした
React 側のロジックはほぼ hooks に閉じ込めている
- タイピング
- 音源の再生
- worker とのイベントの管理

後々ちゃんとした形で一般公開したりソースコード公開したりなどをする予定です。

フロントエンドのテストは皆のためのもの

共有者: nakajmg

フロントエンドでのテストの種類と、テストの種類ごとにカバーする領域や目的を紹介しています。何をどうやって何のためにテストするかが簡潔に書かれているので、これからテストについて知りたい人も、フロントエンドのテストを何のためにどこまでやればいいか悩んでいる人にもおすすめの記事です。

Why are hyperlinks blue?

共有者: sakito

リンクのデフォルトスタイルはなぜ青いのか、それを歴史から解説している記事です。

結論から話すと、急に青いハイパーリンクが登場したらしいです。このことについて記事の最後に考察があります。最初に青いハイパーリンクになったのはモザイクからなのですが、カラーモニターが流行ってたからという結論になってました。その後モザイクが標準ブラウザになり、モザイクの UI が Web のデファクトになった流れが IE や Netscape に受けつがれたという見解。

あと、WWW ができたときに、ブラウザは白黒しかなく、白黒の濃淡だけでリンクを示していたので色覚障害のために下線が引かれたのも面白かったです。

ブラウザの歴史を簡易的に知ることもでき、「なぜこのようなUIになっているのか」について深く考えたことがなかったので、歴史から学ぶことができて面白い記事でした。

JavaScript eventing deep dive

共有者: b4h0_c4t

preventDefault や stopPropagation が何をしているのかを解説している記事。いずれも主にイベントバブリング周りで用いられることが多いメソッドですが、実際にこれらがどのような動作をしているのか気になったので読んでみました。

イベントキャプチャーとイベントバブリングについて

イベントキャプチャーとイベントバブリングはどちらもイベントが DOM ツリーに伝搬していくことを指しますが、両者の違いはそれぞれがイベントをリッスンするタイミングにあります。

イベントハンドリングにはキャプチャーフェーズ、ターゲットフェーズ、バブリングフェーズの 3 つの段階があります。

例えば、イベントがディスパッチされた際には window からイベントターゲットへ向かって DOM ツリーを下るようにイベントが起動していきます。このようにイベントターゲットから下向きにイベントが適用されていく段階がキャプチャーフェーズと呼ばれます。 DOM ツリーを降り切った後、イベントターゲットとなる DOM にてイベントが発火する段階をターゲットフェーズと呼びます。最後にイベントターゲットから window に向かって DOM ツリーを登るようにイベントが起動します。これがバブリングフェーズです。

開発者は addEventListener の第 3 引数等で、キャプチャーフェーズとバブリングフェーズのどちらでイベントを認識するか設定をすることができます。

event.stopPropagation と event.preventDefault

stopPropagation は呼び出された時点以降のイベントが伝搬するのを停止させます。例えばキャプチャーフェーズでこれが呼び出された場合、それ以降のキャプチャーフェーズとターゲットフェーズ、バブリングフェーズに登録されたイベントは一切発火しなくなります。

一方、preventDefault はイベントが持つデフォルトの挙動を抑制します。例えば、 <a> タグのクリックイベントには href 属性で指定された URL へページ遷移をする挙動が含まれますが、 preventDefault を呼び出すことでその動作を抑制できます。(元記事では他にもいくつかのわかりやすい例が書かれているのでより詳細に知りたい方は見ることをお勧めします。)

これらのことから、stopPropagation と preventDefault は不審な挙動の解決策としてよく同列に扱われる一方で、それぞれ全く別の用途であることが理解できると思います。どちらもイベントハンドリングの挙動に関して何かを抑制する挙動をしていますが、実際に抑制されるものは全くの別物なので今後扱う場面があった場合には念頭におきたいですね。

Reducing The Need For Pseudo-Elements

共有者: mugi

疑似要素である :before :after を利用したCSSでのスタイリングをモダンなCSSプロパティを使うことで一部を代替する方法について、具体例を交えて解説している記事。

例1: 右側が三角になってるボタン

疑似要素を使う → 三角部分を疑似要素で描画する
疑似要素を使わない → clip-path を使って一部を切り抜く

ホバー時などのスタイルの適用箇所が減る / 複数行表示になった場合に崩れない / 右側の三角だけでなく、複数アングルでの切り取りも表現できるといったメリットがある

例2: ワイプ効果のあるコンテンツ

疑似要素を使う → ホバー時に疑似要素を transform を駆使してオーバラップする形で描画
疑似要素を使わない → background-image や linear-gradient をアニメーションさせることで描画

例3: カラーなどのオーバレイ表現

疑似要素を使う → 疑似要素を上に重ねる。アスペクト比の維持は padding を使ったテクニックでカバーする
疑似要素を使わない → background-blend-mode で表現する。アスペクト比は aspect-ratio で対応

z-index による重なり制御が不要となるメリットもある。

notes/meetings/2021-08 · tc39/notes

共有者:　@sosukesuzuki

Stage 3 -> 4

proposal	example	note
`Array.prototype.at`	`[1, 2, 3].at(-1); // 3`	link
`Object.hasOwn`	`Object.hasOwn({ bar: 3 }, "bar");`	link
Class Static Blocks	`class Foo { static { console.log("HI!"); } }`	link

Stage 1 -> 2

proposal	example	note
Change array by copy	`[1, 2, 3].withPushed(4); // [1, 2, 3, 4]`	link
Pipeline operators	`value \|> foo(^) \|> bar(^)`	link

Stage 0 -> 1

proposal	example	note
String is USV String	???	link
`Array.asyncFrom`	`await Array.fromAsync(function* () { for (let i = 0; i < 4; i++) yield i; }()); // [0, 1, 2, 3]`	link
BigInt Math	`Math.abs(-1n); // 1n`	link
Get Intrinsic	`const $String = getIntrinsic("%String%");`	link
Fixed Layout Objects	`struct class Foo { x; constructor(x) { this.x = x; } }`	link

Stage 0

proposal	example	note
RegExp Feature Parity	???	link

その他

with文が仕様書上で legacy とマークされるように
- https://github.com/tc39/notes/blob/bb3c92b6db94be6b10350a257057facab6ff6540/meetings/2021-08/aug-31.md#mark-with-as-legacy
- https://github.com/tc39/ecma262/pull/2441
Realms の名前が ShadowRealm に
- https://github.com/tc39/notes/blob/bb3c92b6db94be6b10350a257057facab6ff6540/meetings/2021-08/aug-31.md#realms-renaming-bikeshedding-thread
- https://github.com/tc39/proposal-shadowrealm/issues/321#issuecomment-900523250

Web Vitals patterns

共有者: shisama

カルーセルなどよくあるUIコンポーネントに関するCore Web Vitals最適化の実例をまとめたページです。このページでは次のコンポーネントについて、どういう実装が問題になってどうすればいいか簡単な説明とデモが用意されています。

カルーセル
フォント
画像
無限スクロール
バナーや通知
プレースホルダ
動画

コードも載っているので、実際にどういうふうに実装されているかわかりやすくなっていると思います。また、それぞれさらに詳しく解説されているページが用意されており、そのページへのリンクも掲載されています。

SmartHR はエンジニアを募集しています

共有者: nabeliwo

TypeScript, React, Redux が好きな方、 Ruby on Rails にアレルギーがない方、長期間使われるサービスを運用していきたい方など、良かったら気軽にカジュアル面談しましょう！

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

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