Cybozu Frontend Monthly #41

タイトル画像

イベント概要

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

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

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

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

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

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

開催日

2023年11月28日

イベントページ

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

配信URL

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

メンバー

@nakajmg@nakajmg
@nus3_@nus3_
@b4h0_c4t@b4h0_c4t

コンテンツ

👀 Notable Articles

Vue Fes Japan 2023 にスポンサーとして参加しました

2023 年 10 月 28 日にVue Fes Japan 2023が開催されました。サイボウズはシルバースポンサーとして協賛し、スポンサーブースの出展を行いました。

今後もスポンサーや登壇などを通してコミュニティに貢献していければと思います。カンファレンス関係者の方々、参加者のみなさまありがとうございました。

@storybook-test: more streamlined and powerful testing

Storybook7.6 で追加予定の@storybook/jestと@storybook/testing-libraryを統合した@storybook/testの紹介です。

この@storybook/testには Vitest の spy や expect ユーテリティも含まれています。これら Vitest のユーテリティを採用することで、パッケージサイズの削減やパフォーマンスの向上が見込まれるとのことです。

また、@storybook/testで提供されるfn()を使って onClick などのアクションをモックできます。

import { Button } from "./Button"
import { fn } from "@storybook/test"

export default {
  component: Button,
  args: {
    onClick: fn(),
  },
}

この記事内で紹介されているモダンフロントエンドでのテストの記事では、Interaction tests が実装された 200 以上のコンポーネント、1000 以上のストーリーに対して、CI 上で 6 並列でテストを実行すると約 3 分で完了するとのことです。

個人的に Storybook のテストランナーを用いたテストの実行コストが気になっていたので、この記事通りであるならば、今回の@storybook/testと合わせて Interaction tests の採用をもっと検討してみても良さそうに感じました。

WebAssembly Garbage Collection (WasmGC) now enabled by default in Chrome

WasmGC (WebAssembly Gabage Collection)が Chrome にてデフォルトで有効化されました。

従来、Java のよう高級言語を WebAssembly へ移植する際、GC のような VM が備える機能も含めて WebAssembly へ移植する必要がありました。 WasmGC は、WebAssembly 側の VM が持つ GC の機能をポートすることで高級言語を移植した際に GC の移植コストを削減するためのプロポーザルです。

WasmGC の仕組みとして、まず WebAssembly VM が理解できる構造体や配列型が定義され、それらのインスタンスの生成といった操作が紐づけられます。 次に、移植元のコードは、定義された型に沿ってコードを置き換えます。 これによって WebAssembly VM が移植元コードの値を認識して管理できるようになります。

言語が持つ GC を含めて WebAssembly へ移植する従来の手法と比較して、移植コードの容量が削減されることはもちろん、JavaScript への適切な参照を提供できる他、メモリフラグメンテーションのリスクを抑えることができるといった利点があります。

🗓 Monthly Articles

📖 Framework, Library

💬 Languages

🖥 Browsers

🦆 Others

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

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