こんにちは! サイボウズ株式会社フロントエンドエンジニアの おぐえもん（@oguemon_com） です。
はじめに
サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。
今回は、2023/04/11 の Frontend Weekly で取り上げた記事や話題を紹介します。
取り上げた記事・話題
Powering a serverless Web: Vercel joins AWS Marketplace – Vercel
4/5 に Vercel が AWS Marketplace で利用できるようになりました。
これにより、AWS アカウントを通じて Vercel を導入することが可能になりました。
New http://nextjs.org just dropped
4/6 に Next.js のサイトが新しくなりました。
新しいサイトでは、Masonry レイアウトが導入されるなどの変更が加えられております。
The future of Chakra UI
3/27 に投稿された本記事では、Chakra UIの今後の開発計画について取り上げられています。
- ゼロランタイム CSS-in-JS の導入
- State Machine を用いたコンポーネントのモデル化
- Headless Component System への移行
などの計画が述べられていました。
Chrome ships WebGPU - Chrome Developers
5/2 に安定版のリリースが予定されている Chrome 113 で WebGPU がデフォルトで使えるようになります。
WebGPU は、WebGL よりも柔軟かつ高度な GPU プログラミングを可能にする API 仕様です。
機械学習ライブラリのTensorFlow.jsや、3DCG ライブラリのThree.jsなどで WebGPU 対応が進められています。
フロントエンドテスト、モジュールモックで Storybook のインタラクションテストの開発コストを下げる
Storybook 上でのモジュールのモックを可能にするライブラリstorybook-addon-module-mockの紹介記事です。
Storybook は、ブラウザで動作を確認しながらテストコードを確認できるメリットを持ちますが、一方でモジュールのモック機能を持たないため、Jest でいうjest.mockのような機能を実現するために独自の実装が必要でした。このライブラリはそうした課題の解決にアプローチしてくれます。
この記事は、具体的な実装例を通じてライブラリの利用方法をわかりやすく解説しています。
Next.js 13.3
4/7 にNext.js 13.3がリリースされました。
本バージョンでは、<head>タグの中に記す情報を扱う Metadata API の拡充や、App Router における静的エキスポートの対応などの数多くの機能追加が行われています。
unjs/magicast
4/5 にAnthony Fuさんが、ライブラリ Magicast をリリースしました。
読みやすいプログラムによって JavaScript や TypeScript のソースコードに変更を加えることを可能にします。
CSS Creator Håkon Wium Lie Interview by Evrone
CSS の生みの親の一人として知られるHåkon Wium Lieさんのインタービュー記事です。
CSS を提案するまでの彼の人生や、HTML と CSS を手書きで直接実装することがほとんどなくなった現状に対する私見など、様々な話題について触れられています。
⚛️ Dan Abramov explores React Server Components with us! [VOD]
Redux などの開発で知られる開発者Dan Abramovさんが、React Server Components について説明している動画です。動画は 3 時間 55 分あります。
図やコードを交えながら説明しているため、決して英語が得意でなくともおおよその内容を把握できるようになっています。
Largest Contentful Paint change in Chrome 112 to ignore low-entropy images
4/6 リリースの Chrome112 から、LCP の計測において画像 px 数に対して情報量の少ない画像を無視するようになりました。具体的には「画像のデータ量 / px 数 < 0.05 bits」の画像が対象です。
今までこうした画像が極めて早い段階で描画されていたために LCP が短く評価されていたようなサイトは、LCP が増大する可能性があります。
WebAssembly tail calls · V8
末尾呼出し最適化（Tail Call Optimization）は、関数の呼び出し階層が深くなりすぎた時に呼び出し情報のスタックがオーバーフローすることを防ぐために行われる最適化処理の一つです。
この記事では、V8 における末尾呼出し最適化の技術的工夫について扱っています。
あとがき
サイボウズでは毎月、最終火曜日の 17 時から Frontend Monthly というイベントを YouTube Live で開催しています。その月のフロントエンド注目ニュースや、ゲストを呼んでの対談など、フロントエンドに関する発信をしていますので是非どうぞ！
また、サイボウズでは一緒にサイボウズのフロントエンドをより良くする仲間を募集しています。興味ある方はこちら ↓ から！
【フロントエンドエキスパート】
サイボウズのフロントエンドを最高にするためのチームです。
【フロントエンドエンジニア（kintone アーキテクチャ刷新 PJ）】
クラウドサービス「kintone」のフロントエンドを新しくしています。
Discussion