Cybozu Frontend Monthly #13

イベント概要

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

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

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

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

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

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

開催日

2021年07月27日

イベントページ

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

配信URL

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

メンバー

ゲスト

@jmblog

@yuku

コンテンツ

150万MAUのNuxt.js製サービスを機能開発を止めずに1ヶ月&1人でNext.jsに置き換えた話

共有者: yuku

Ubie の[AI受診相談ユビー]を Nuxt.js から Next.js に置き換えた話。機能開発を止めないリプレイス事例として参考になると嬉しい。

Nuxt.js と Next.js を共存させて1ヶ月で完全移行
インフラ層で path を見て Nuxt と Next にルーティング
Local Storage を通したステートのマイグレーション
0→1の立ち上げにおいてはコミュニケーションコストが課題になる
- コミュニケーションコストのかからない壁打ち相手がいるととってもハッピー

Just-in-Time Mode - Tailwind CSS

共有者: jmblog

業務で Next.js + Tailwind CSS を使っているのですが、Just-in-Time（JIT）モードが便利だったので共有します。

Tailwind CSS は本番ビルド時に PurgeCSS を利用して未使用のスタイルをすべて削除するため、生成されるCSSファイルは最小限になります。
ただし、PurgeCSS は毎回動かすとビルドに時間がかかりすぎるため、開発時には実行されません。
その結果、開発時に生成されるCSSファイルのサイズは非常に大きくなります。場合によっては、Chrome DevTools の動きが遅くなるほど巨大になることもあります。
また、開発と本番で異なるCSSが使われることになるので、PurgeCSS によって意図しないスタイルの削除が行われたとしても、本番でしか気づくことができませんでした。
Just-in-Timeモードを使うとこれらを解決することができます。
また、それ以外にも以下のような利点があります
- active や disabled などの Variants を設定ファイルで有効にしなくても使えるようになる
- top-[-113px], border-[#c1c1c1] みたいなクラスを書くことができるようになる
JITモードは、実験的な機能として @tailwindcss/jit というライブラリとして提供されていましたが、2021/4 にリリースされた Tailwind CSS v2.1 から Tailwind CSS のコア機能として取り込まれています。

なお、Next.js v10.2.0 で JIT モードを試したところ、うまく動きませんでした。v10.2.2 以上、v11 であれば問題ないようです。

Next.js v10でTailwind CSSのJust-in-Timeモードがうまく動かない

Content EditableでWYSIWYGエディタ作るの楽しい！ - maru source

共有者: pirosikick

Ubie Discoveryのカルテエディタの話。Content Editableを使ったWYSIWYGエディタの作り方について。 ProseMirror等のリッチテキストエディタ用のOSSを使わずに、一から作っていてすごい。エディタの話だけではなく、設計の話、設計をどのようにドキュメントに残すかなども書いており、楽しく読めました。

Astro

共有者: yuku

Snowpack チームが作った静的サイトジェネレータ。

フレームワーク非依存で、React でも Vue でも Svelte でも書ける
- Renderer を実装するとなんでも対応できる
独自のコンポーネント記法も持っている
TypeScript や Markdown など色々とデフォルト対応
デフォルトではランタイム JS なしの静的 HTML を出力
JSが必要なコンポーネントは明示することで部分的にハイドレーションできる
- ロード時にハイドレーションしたり <MyComponent client:load />
- IntersectionObserver に引っかかったときにしたり <MyComponent client:visible />

Creating an accessible autocomplete experience

共有者: @sakito

AdobeのデザインシステムであるSpectrumをReact実装したReact Spectrumから出た記事。 ComboBoxとuseComboBoxをリリースしたので、どのようなことを考えて実装されたのか解説されている記事です。

記事では大まかにこのようなことが述べられています。

ComboBoxの難しさ
- ComboBoxは単純なUIに見えるが、タッチ、クリック、キーボード、マウスなどさまざまなイベントでの動作
- 入力フォームと入力候補を表示する2つのUIを制御するタイミングや難しさ
Mobile experience
- iOS Safariのキーボードの出現やページスクロールの挙動について
Accessibility
- WAI-ARIA 1.2 combobox exampleに沿って実装したが、いくつかの問題があった紹介
- リストのUIにReact Portalを使用することで、DOMの最後にポータル化されることによる問題
- モバイル実装時のスクリーンリーダーとの関係
- さまざまなスクリーンリーダーの挙動差
- VoiceOverのサポート

実装時に気をつけたいことが色々と紹介されているので、ComboBoxの実装以外でも参考になる記事でした。

Using WebAssembly threads from C, C++ and Rust

共有者: @b4h0_c4t

WebAssembly を使ってマルチスレッドアプリケーションを構築する話。

前半は Web Worker を用いた WebAssembly 上でのメモリ管理の歴史や WebAssembly atomics と呼ばれる単一の SharedArrayBuffer のアクセス衝突を回避する機能の解説をしています。

後半では、C、C++、Rust を用いたマルチスレッドアプリケーションの例とその解説をしています。解説中では、pthread や std::thread といった各言語の標準スレッドライブラリを利用して解説を行なっている他、各セクション毎にいくつかの要点が記述されているので今後 WebAssembly を介して利用したい言語があれば読んでみることをお勧めします。

petite-vue

共有者: nakajmg

Vue のサブセット的なものがリリースされました。通常の Vue の機能制限版的なものですが、Vueのv1系で行ってたような使い方ができます。scriptでグローバルに PetiteVue　を生やす以外にも、次のように　ESM　で　import　して使うといったこともできます。

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp().mount()
</script>

petite-vue は computed など使えない機能があるので、そのあたりを考慮した上で用途を考える必要がありそうです。

Vue の easy な使い方をカバーする役割としてこういったビルドを出してくるのは面白いアプローチだなと思いました。

Prisma Day 2021

共有者: @mugi_uno

Prismaのオンラインカンファレンス Prisma Day 2021 が 6/29-30 で開催されました。セッションの動画はすべて YouTube にアップされています。

@kanasugi_y さんによる日本語でのワークショップも開催され、同様に動画がアップされているので、Prismaの入門として良さそうです。

最後のセッション “What’s next for Prisma?” では、今後のロードマップに関する紹介がありました。
https://www.youtube.com/watch?v=vTgvePrccas

言及されていたものから幾つか抜粋します。

Data Plane
- 大規模プロジェクトにおいて、複数DBとのコネクションや、サーバーレス利用時のコネクションプーリングといった課題を解決する
- Prisma Data Proxy という名称でアーリーアクセスへ申し込める
Control Plane
- Data Plane と接続し、マイグレーション履歴の参照や、データ・スキーマの閲覧、クエリコンソールといった機能をクラウド上で提供する
- https://cloud.prisma.io/ からアーリーアクセス版を利用できる
Referential actions
- Delete,・Updateに連動し、CascadeやNull/Default値のセットといった処理を可能にする
- 2.26.0 以降、Preview版として利用可能になっている。
MongoDBコネクタのサポート
- @unique の取り扱いなどは今後のロードマップに入ってる。
- 2.27.0 以降、Preview版として利用可能になっている。

上記を含む、現在のロードマップは以下で確認できます。
https://www.notion.so/Prisma-Roadmap-50766227b779464ab98899accb98295f

The performance effects of too much lazy-loading

共有者: @shisama_

画像のlazy-loadingはパフォーマンス向上には有効な方法だが、ページ内のすべての画像をlazy-loadingすると、パフォーマンスが悪くなることもある。 WordPressで作られたページで実験したところ、ファーストビュー内の画像はlazy-loadingしないほうが良いパフォーマンス結果を得られた。

以下、記事本文まとめ

lazy-loadingは画像の読み込みを遅延させてパフォーマンスを改善するためには良い方法だが、使いすぎると逆にパフォーマンスを悪化させることもある
HTTPアーカイブによると、すでにWebサイトの17%でlazy-loadが使われていて、急速に利用拡大している
内訳は84%がWordPress、他のCMSが2%、残り14%となっている
lazy-loadingを使うWordPressサイトは、1年前は1%だったのに今では14%まで増えた
Chrome User Experience Report から収集したレポートによると、ページを閲覧したユーザーの75パーセンタイルの中央値はlazy-loadingありよりlazy-loadingなしのほうが高速にページ表示していた
- lazy-loadingなし: 2,922ms
- lazy-loadingあり: 3,546ms
WordPressサイトに絞り込むと遅くなる傾向があった
- lazy-loadingなし: 3,495ms
- lazy-loadingあり: 3,768ms
WordPressのシングルページとアーカイブページをWebPageTestで計測したらアーカイブがlazy-loadingしているほうが遅いことが判明
ページ内の画像のバイト数の中央値を比較すると、遅延読み込みしているほうがサイズは小さい。
要するに、lazy-loadingは画像サイズの削減には役立つが、LCPの結果的には遅い
ファーストビューでは見えない部分の画像だけをlazy-loadingしてみると結果が改善された
画像のバイト数の中央値に変化はなかった
ただWordPressはどの画像をlazy-loadingさせるかサーバー側で判定しているのでビューポートサイズはわからない
画像の相対的な位置をヒューリスティックな方法で判定するようにした
- 画像が最初の注目すべき画像である場合、またはメインコンテンツの最初の画像の場合はビューポート内（または近い場所）にあると考える
- 見出しの単語数や序盤の段落のテキスト量によっては画像がビューポートに影響するので考慮する
- アンカーリンクを使ってスクロール位置を変更する場合も考慮する
これらの方法は一般的には有効だが、すべてのケースで有効ではないため微調整が必要
LCPの要素がlazy-loadingされた場合はコンソールに警告を出したりして改善するのが良い
lazy-loadingを使っている場合は、実装方法を確認してA/Bテストを実行してパフォーマンスを確認すること
ファーストビューに表示される画像はlazy-loadingではなく、eager loadingすること
WordPressサイトの運営者はWordPress本体にパッチがリリースされることを願う
比較的新しいAPIはリスクとメリットが両方ある。lazy-loadingは厄介な面もあるが、パフォーマンス向上のメリットもある

告知：Ubie Tech Talk #5

共有者: jmblog

明日 7/28 18:00-19:00 に Ubie Tech Talk #5 を開催します

今回は、デザイナー×エンジニアの雑談会のような感じでワイワイ話します。
YouTube Live で配信予定（音声のみ）です。夕方の時間なので、作業しながらのBGMにもどうぞ！

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

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