Cybozu Frontend Monthly #46
イベント概要
サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。
その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエキスパートチームのメンバーが共有していきます。
このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。
※フロントエンドウィークリーとは
毎週火曜の 17:00 〜 18:00
で社内向けに行っているフロントエンドの気になる記事を紹介する会です。2016年3月15日から行われています。
ハッシュタグ
#サイボウズフロントエンドウィークリー
で実況しています。
zennのpublicationにてウィークリーのまとめも投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend
開催日
2024年04月30日
イベントページ
https://cybozu.connpass.com/event/315490/
配信URL
https://www.youtube.com/watch?v=cVLPKaS8fO0
メンバー
コンテンツ
👀 Notable Articles
fetchLater API オリジン トライアル
- 共有者: @nakajmg
ビーコン送信のようなウェブページからサーバへとデータを送信する新しい API である fetchLater API のオリジントライアルが Chrome で開始されています。
fetchLater API はデータ解析などに必要なデータをサーバに送信する際の信頼性の向上を目的としています。従来pagehideやvisibilitychangeといったページイベントや、sendBeacon()などを使って送信するといった方法をとっていましたが、これらはブラウザやデバイスによっては著しく信頼性が低い状態にあります。
この問題は fetchLater API を使うことでブラウザがビーコンを送信することが保証されるようになります。（ただし現状の実装ではブラウザのクラッシュした場合にはビーコンの送信が行われないなどの制限事項もあるようです。
TypeScript 5.5 Iteration Plan
- 共有者: @sajikix
TypeScript 5.5 では多くの便利で意欲的な機能が追加される予定です。その中でも特に注目しているものを紹介します。
1 : Infer type predicates from function bodies using control flow analysis
一時期 x などでもかなり話題になった機能です。制御フロー解析を利用して、boolean を返す関数に対する型述語を推論できるようになります。これにより今までユーザー定義型ガードでしか推論できなかった Array.filter() などでも推論が効くようになります。細かい挙動などに関しては以下の記事がわかりやすかったです。
2 : Isolated declarations errors
Isolated declarations は以前から提案されているコンパイラオプションで、今まで型検査およびそのための型依存解決と同時に行なってきた型定義ファイルの出力を独立させるオプションです。これにより型定義の出力と各ファイルでの検査を並列に行うことができ、大幅な検査の高速化とファイル単位でのキャッシュが行えるとしています。
一方で型検査をせずに型定義ファイルを出力するためには今まで推論に頼ってきた多くの型情報を明示的に書かなくてはならず、大きな制限が生まれるオプションとなりそうです。また型定義の出力を TS 内部でどう行うかなどは議論中でありアップデートを待っている状態です。
今回はその先駆けとして、--isolatedDeclarations が有効な際に明示的なアノテーションがないと容易に推論できない要素に対してエラーが発生するようになります。
この変更により正規表現に対して構文チェックが行われるようになります。具体的には無効な正規表現フラグや無効なエスケープの記法などをチェックし、report してくれるようになります。またこの構文チェックは以下の二つの新しい EcmaScript Proposal もサポートしています。
- Duplicate Named Capturing Groups (TC39 の 101st meeting で Stage 4 になった)
- Regular Expression Pattern Modifiers (Stage 3)
構文自体も複雑で、フラグも多く存在する正規表現に対してこのようなチェックを行なってくれるのはユーザーとして非常にありがたいのではないでしょうか。
Learn JavaScript
- 共有者: @b4h0_c4t
web.dev の Learn コンテンツに JavaScript が追加されました。 web.dev Learn はこれまでも HTML や CSS といった Web 開発の根本的な知識からプライバシーやアクセシビリティといった観点まで学習コンテンツを提供してきました。
今回追加された JavaScript のコンテンツは全 28 章で構成されており、大きく 6 部に分けられています。
- データ型と構造
- 比較演算子と制御フロー
- 関数
- オブジェクト
- コレクション
- クラス
それぞれ参考となるプログラムだけでなく可読性を高めるプラクティスについても言及されており、全てを網羅するのは少々重いですが学習者は一件の価値があると思います。
最近では、MDN の Web 開発を学ぶや React の Rules of React など学習者に向けたコンテンツが多くリリースされ始めているのでこの機会に学び始めるのはタイミングが良いかもしれません。
🗓 Monthly Articles
📖 Framework, Library
- Bun 1.1
- Bun 1.1 リリース。Windows 対応や Node.js 互換性の向上、WebSocket サポートといったアップデートが盛り込まれています。
- React Server Components now in RedwoodJS
- RedwoodJS が Bighorn エポックのプレビューにて RSC をサポート
- Deno 1.42: Better dependency management with JSR
- Deno 1.42 リリース。JSR での依存管理や npm との互換性についてのアップデートが盛り込まれています。
- tailwindcss-signals : Signals for Tailwind CSS
- Tailwind で style queries を利用したカスタマイズを可能にするプラグイン
- Pragmatic drag and drop
react-beautiful-dndの開発元である Atlassian が新たにリリースした D&D ライブラリ
- ESLint v9.0.0 released
- ESLint の v9 リリース。FlatConfig のデフォルト化など
- tailwindcss-mixins
- Tailwind CSS で、複数の要素に同時に適用するユーティリティのグループを定義できるプラグイン
- pnpm v9.0.0-rc.0
- pnpm の v9.0.0-rc.0 リリース。Node v16 のサポート終了や
pnpm licenses list --jsonの出力変更など
- pnpm の v9.0.0-rc.0 リリース。Node v16 のサポート終了や
- node-unicode-data
- JavaScript 互換の Unicode データジェネレータ
- next-view-transitions
- Next.js の App Router で View Transitions API を使うためのライブラリ
- Biome v1.7
- Biome v1.7 リリース。ESLint や Prettier から Biome
- Next.js 14.2
- Next.js 14.2 リリース。パフォーマンスの向上や、キャッシュ機能の強化など
⚡️ Services
- Making state easy with D1 GA, Hyperdrive, Queues and Workers Analytics Engine updates
- Cloudflare の D1 と Hyperdrive が GA に。価格も発表されており、無料枠については今後有料化の予定はないと明言しています。
- How we built JSR
- The JavaScript Registry で採用されている技術構成を紹介している記事
- In Slidev 0.49 (currently in beta), we will get draggable elements just like what you have in Keynote/PowerPoint!
- Slidev の v0.49 beta にて、ドラッグで回転・移動・サイズ変更ができる要素が利用可能に
- Vitest - Visual Studio Marketplace
- Vitest の VSCode 拡張。Vitest のテストを実行、デバッグ、監視などができます。
💬 Languages
- ECMAScript excitement in TC39 101st meeting
- ４月に開催された TC39 101st meeting で決定された proposal stage アップデートまとめ
🖥 Browsers
- Release Notes for Safari Technology Preview 192
- Safari Technology Preview 192 リリース。View Transitions サポートなど
- Intent to Ship: CSS Anchor Positioning
- Chrome 125 にて実装予定である CSS Anchor Positioning の仕様に関する記録
- Firefox Release Notes 125.0.1
- Firefox 125 がリリース。popoverAPI や Intl.Segmenter のサポートなど
🦆 Others
- 【2024 年 4 月 1 日の TypeScript ニュース】次期バージョンでオブジェクト型に追加される新機能の紹介
- TypeScript の新機能追加を元にしたエイプリルフール記事。バージョン 5.5.555 に実装予定の Arranged Field Definition という存在しない機能の紹介をしています。
- 【告知】「フロントエンドカンファレンス北海道 2024」を、2024 年 8 月 24 日（土）に開催します！
- 2024 年 8 月 24 日土曜日に北海道札幌市にて「フロントエンドカンファレンス北海道 2024」が開催されます。
- On disabled and aria-disabled attributes
- disabled と aria-disabled 属性の使い分け方について解説している記事
- Introducing “pages router”
- RSC のミニマムフレームワーク Waku がファイルベースルーティングをサポート
- React フレームワークの 動向と選定基準
- React フレームワークの動向と選定基準について解説しているスライド
- CSS color-scheme-dependent colors with light-dark()
- CSS Module Level 5 で追加された
light-dark()でダークモード対応をするための記事
- CSS Module Level 5 で追加された
- Power of Partial Prerendering with Bun
- Bun の Prerendering macro プラグインを使って Next.js の Partial Prerendering のような挙動を実現できるという記事
- SPA モードの Remix を GitHub Pages にデプロイする
- SPA モードの Remix を GitHub Pages にデプロイする GitHub Actions の紹介
- !important で上書きできないブラウザのスタイルとは
- 強力なスタイルの適用優先度をもつ
!importantでも上書きができない場合があるImportant user agent declarationsやその他の優先度に関するルールの紹介
- 強力なスタイルの適用優先度をもつ
- New Flow Language Features for React
- Flow が React 向けに追加した独自構文についての紹介
- フロントエンドにおけるフィーチャーフラグ標準化のための「OpenFeature Web SDK v1」がリリース。CNCF から
- Cloud Native Computing Foundation が Feature flag の標準化を目指す一環として OpenFeature Web SDK v1 をリリース
- SolidStart now works with Deno
- Deno が SolidStart サポートを開始
- Learn JavaScript | web.dev
- web.dev の公開している講義シリーズに JavaScript のコースが追加
- History of JS interop in Dart
- Dart 3.3 で WasmGC に対応したのを機に Dart がこれまで実施してきた JS との相互運用性の取り組みをまとめた記事
- Japanese Svelte Companies
- Svelte/SvelteKit を採用している日本企業がまとめられた記事
- Trip report: Node.js collaboration summit (2024 London)
- Node.js のコントリビュータやコミュニティメンバーが集まる Node.js コラボレーションサミットで話された内容のまとめ