こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。
はじめに
サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。
今回は、2024/4/9 の Frontend Weekly で取り上げた記事や話題を紹介します。
取り上げた記事・話題
tailwindcss-signals : Signals for Tailwind CSS
Tailwind で style queries(container queries 経由) を利用したカスタマイズを可能にするプラグイン「tailwindcss-signals」が公開されました。
[&>div] のような祖先セレクタを使う代わりに、:signal という記法を Tailwind に導入することで親要素の状態に基づいて要素をスタイリングする方法を提供します。
SPA モードの Remix を GitHub Pages にデプロイする
SPA モードの Remix を GitHub Pages にデプロイする GitHub Actions の紹介記事です。
紹介されている github action を使うと設定ファイル 1 つで簡単に SPA モードの Remix を GitHub Pages にデプロイできます。
!important で上書きできないブラウザのスタイルとは
スタイルの強力な上書き手段として利用される !important 記法ですが、この !important でも上書きできないスタイルがあることを解説した記事です。
ユーザーの !important よりも優先が高く上書きできない以下の２つのスタイルについて詳しく解説しています。
- トランジションのスタイル
- ブラウザのスタイルシートにある
!important
New Flow Language Features for React
flow が react 向けに追加した独自構文について紹介する記事です。
既存の function や const といった関数宣言・変数宣言のキーワードの代わりに、component や hooks の前にそれぞれ component や hook といったキーワードをつける独自の記法となっています。
Pragmatic drag and drop
Drag-and-Drop ライブラリの 1 つ react-beautiful-dnd (現在はメンテナンスモード) を作った Atlassian から新しい Drag-and-Drop ライブラリ pragmatic-drag-and-drop がリリースされました。
このライブラリの特徴として次のような点を挙げています。
- React, Vue, Svelte, Angular で使える
- パフォーマンスに重点を置いたドラッグアンドドロップ
- ファイルサイズが小さく、Headless でフレームワークに依存しない
- Firefox、Safari、Chrome、iOS、Android をサポート
フロントエンドにおけるフィーチャーフラグ標準化のための「OpenFeature Web SDK v1」がリリース。CNCF から
Cloud Native Computing Foundation は「フィーチャーフラグ機能」の標準化を目指す OpenFeature プロジェクトを進めており、その仕様を Web アプリケーションのフロントエンドで実現する SDK がリリースされました。
これらの仕様や SDK を導入することで大型化したソフトウェアや分散したソフトウェアへの集中的なフィーチャーフラグ管理が可能になるとしています。
SolidStart now works with Deno
Solid を利用した web フレームワークである SolidStart が Deno でサポートされるようになりました。
Learn JavaScript | web.dev
web.dev の公開している講義シリーズに JavaScript のコースが追加されました。これにより CSS,HTML,JavaScript が揃いコースがより充実しました。
ESLint v9.0.0 released
ESLint の v9 がリリースされました。FlatConfig が Default 化された他にも Node のサポートバージョン引きあげや Plugin 向けの API 変更など多くの BrakingChange があります。
The fetchLater API Origin Trial | Blog | Chrome for Developers
主に Beacon を確実に送信する用途が想定されている新しい API、fetchLater API が Chrome121 から OriginTrial になりました。
fetchLater API に関しては以下のブログが詳しいです。
History of JS interop in Dart
Dart 3.3 で WasmGC に対応したのを機に Dart がこれまで実施してきた JS との相互運用性の取り組みをまとめた記事です。
2013 年に JS と疎通できるようになってから現在までパフォーマンス改善や使いやすさをアップデートしてきたことを振り返っています。
Discussion