こんにちは! サイボウズ株式会社フロントエンドエンジニアの おぐえもん（@oguemon_com） です。
はじめに
サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。
今回は、2023/02/21 の Frontend Weekly で取り上げた記事や話題を紹介します。
取り上げた記事・話題
Remixing Hydrogen
Shopify 社が開発したコンポーネントライブラリ Hydrogen が、同社が手がける Web フレームワーク Remix との連携をより強化することを表明しています。
Shopify 社は、Remix を手掛けていた Remix 社を2022 年に買収しており、自社のプロダクトとの連携を通じてより良い EC サイトの開発に繋がる環境整備を進めています。
WebContainer API is here.
2 月 14 日、WebContainers の API（WebContainer API）が公開されました。WebContainers は WebAssembly ベースのランタイムで、ブラウザ上で Node.js を動かすことができます。
既に WebContainers を採用しているSvelte のチュートリアルを見ても分かるように、特別な環境構築をしなくとも Node.js のプログラムを簡単に実行することができるのが便利ですね。
Announcing Sandpack 2.0 and a Node.js runtime for any browser
WebContainer API 公開の 2 日後にあたる 2 月 16 日、CodeSandbox 社はブラウザ上で Node.js を実行できるランタイム Sandpack 2.0 を公開しました。
記事の文中では、Sandpack 2.0 の実例として Node.js やサーバーサイドレンダリングを行う Next.js などのコードが実際にブラウザ上で動作することを確認できます。
前述した WebContainers と違って、モダンブラウザの技術を使わずに実装されているため、iOS のブラウザなどでも動作するのが特長です。一方で、スレッド増加によるメモリ消費量や、 Node API との完全な互換性がない点に留意が必要です。
Firefox 110.0, See All New Features, Updates and Fixes
2 月 14 日にリリースされた Firefox 110.0 にて、CSS の Container Queries がサポートされました。
今回の Firefox の対応により、全ての主要ブラウザで Container Queries を利用できます。
Container Queries を利用すると、コンテナと呼ばれる特定の要素のサイズに応じて要素のスタイリングを条件分けできます。コンポーネントベースの開発とも相性が良さそうなので積極的に使っていきたいですね。
Web Push for Web Apps on iOS and iPadOS
2 月 16 日に公開された iOS/iPadOS 16.4 beta 1 にて、ホーム画面に追加した Web アプリ（PWA）からプッシュ通知ができるようになりました。
iPhone/iPad においてモバイルアプリの専売特許だった通知機能が Web アプリでも実現可能になることで PWA の導入が加速するのでは、という声が社内からあがりました。
「Safari 16.4 Beta リリース。盛りだくさんなので、ピックアップしていく」
前項に関連する、Safari 16.4 Beta のリリースノート解説 Tweet です。JSerInfo の運営などで知られるazuさんにより投稿されました。主な新機能がスレッドの中で紹介されています。
リリースノート原文を見ても分かるように、本更新は
など、多くの機能追加を含んでおり、社内でも大きな期待が寄せられてました。
2022/02/13〜2023/02/19 の最新情報 | 週刊 Deno
Node.js の開発者 Ryan Dahl さんが手がける JS/TS ランタイムDenoの最新情報が週次で公開されるサイトです。
Deno のレポジトリの Issue や Pull Request などに基づくニュースが平易な日本語で書かれており、英語が苦手な方でも Deno の動向を容易にキャッチアップできます。
今週は、deno_std/node が Deno 本体に組み込まれたという件、Node-API が安定化した件が報じられていました。
「A super early Stage 0 proposal by @threepointone to add a built-in assertion function to JavaScript 🎉」
ECMAScript でError.assert(condition, message);を利用できるようにする提案が、ECMAScript の仕様を決める委員会 TC39 において Stage 0 (strawperson)に加えられました。
Error.assert()はコードの安全性に寄与するメソッドで、TypeScript では類似するものが既に実装されています。
仕様策定までのステージは、0(strawperson)〜4(maturity)の 5 段階あり、実現までの道のりは決して短くありませんが、今後の動向に要注目です。
State of React Native
モバイルアプリフレームワーク React Native の利用状況に関する統計をまとめたサイトです。
The State of CSSやThe State of JSのように、使用されている機能や開発者の実態などがグラフィカルにまとめられています。
React Native 利用者の出自は、React 利用者がモバイルアプリエンジニア（iOS/Android）の 2 倍以上におよぶなど、興味深い結果が数多く並んでいました。
The IE11 desktop application is permanently disabled beginning today, February 14, 2023
2 月 14 日の Edge アップデートにより、Internet Explorer 11（IE11） が恒久無効化されました。今後 IE11 のexeファイルを実行しても、Edge に強制リダイレクトされて IE11 が開けません。
IE11 は、2022 年 6 月 15 日に Windows 10 におけるサポートが終了し、約 27 年にわたる歴史に終止符が打たれました。今回の処置はサポート終了後の事後処理の一環です。
マイクロソフト社は、今後、6 月 13 日の更新でスタートメニューやタスクバーのアイコンを取り除くことを公表しています。
社内では多くの者が IE との別れを偲んでいました。
Try out CSS Nesting today
CSS でSassのようなネスト記法が利用できる CSS Nesting が Safari に導入されつつあることを報じた記事です。
CSS Nesting は、執筆時点では Google Chrome しか対応しておらず、もし Safari で実装されれば 2 例目になります。
「Vercel Cron Jobs. Next week.」
Vercel の Serverless Function を用いて Cron の実行ができるようになることを予告する Tweet です。
今まで、バッチ処理の実行のためにサーバーを別途用意する必要があったので、それが不要になることによる利便性の向上に社内から期待の声があがっていました。
Why I like Rich Harris by baseballyama
2 月 19 日に開催された Vercel Meetup におけるbaseballyamaさんの登壇資料です。
本資料は、Web フレームワーク Svelte の開発者である Rich Harris さんの好きなところをテーマに掲げていますが、資料の中には日本国内における Svelte、SvelteKit の採用事例がまとまっており、非常に興味深いデータが揃っています。
Popover API - JavaScript 不要、HTML のみでポップオーバー UI
HTML の仕様である HTML Living Standard に取り込まれた新仕様 Popover API の解説記事です。
Popover API はまだ実装されているブラウザが僅かですが、popover属性やpopovertoggletarget属性を利用することで簡単にポップオーバーを作成できるという大きな利便性を有しています。
Frontend Weekly では、この仕様の内容に加えて、新仕様の起案〜仕様への取り込み（WHATWG が管理するレポジトリへのマージ）の一連の流れを追いました。
TanStack Start
TanStack Query などのライブラリで知られる TanStack 社が、新たなライブラリとして TanStack Start というものを準備していることが明らかになりました。
TanStack Start は、SSR フレンドリーで、かつ型安全なフレームワークを謳っており、今後明らかになるであろう具体的な内容に期待が寄せられていました。
[Watch This Space] Angular Reactivity with Signals #49090
Angular が Signals の機能を追加するためのプロトタイプを始めたようです。RFC の公開は進捗によるとしつつも現時点で 2023 年末を予定しています。
Signals の構想にあたって、SolidJS などを手掛けている Ryan Carniato さんから多くのことを教えてもらったと文中に書かれており、主要 OSS 間の交流が垣間見えます。
Release v1.13.0 · remix-run/remix
Remix の v1.13.0 で PostCSS と Tailwind CSS がサポートされました。
導入のためのフラグにunstable_postcssやunstable_tailwindという名称がついていることから、まだ安定版ではないようです。
Introducing Qwik City Server Functions
2022 年にリリースされた Web フレームワーク Qwik におけるサーバサイド関数の記法を紹介した記事です。
サーバサイド関数（Next.js でいうgetSeverSidePropsや、Remix でいうloader）は、Qwik ではloader$ という名前で定義されています。この記事では、loader$は型安全な上、どこでも定義できる、どのファイルからも参照できるなど、Next.js などの既存フレームワークに対する一種の優位性が謳われています。
Vue 経験者向け Vue3 スタートガイド [実行環境付き]
Vue 3 で新たに追加された API や構文が紹介されている記事です。
Codesandbox による実装例がひとつひとつ添えられており、実装とその挙動を確かめながら読み進めることができる丁寧な作りになっています。Vue をゴリゴリ書く方だけでなく、教養的に内容を知りたい方にとっても役立つ内容です。
「Announcing AI Commits – a CLI tool that generates your commit message for you with AI. Available on npm today!」
2 月 14 日、AI Commitsという npm パッケージが公開されました。
AI Commits を使うと、ファイルの変更差分に基づいて、そのコミットメッセージを自動で生成することができます。
自動生成の処理には、ChatGPT などのサービスで知られる OpenAI 社の API が利用されており、近頃話題になっている高度な自然言語 AI モデルの一種の応用例とも言えます。
ブラウザ拡張機能を作るための React フレームワーク『Plasmo』
ブラウザ拡張機能開発のフレームワークplasmoの紹介記事です。
plasmo は、React や TypeScript をサポートしており、フロントエンド開発の技術スタックに近い形でブラウザ拡張機能を開発することができます。これによって、フロントエンドエンジニアによるブラウザ拡張機能開発の敷居が下がることを期待しています。
Speculation Rules API によるプリレンダリングのためのメトリクス設計
プリレンダリングしているサイトにおいて、 LCP を正確に計測するのは決して容易なことではありません。
そこで、この記事では、 Resource Timing API に追加された activationStart について述べつつ、プリレンダリングにおけるメトリクスの取り方について解説しています。
あとがき
個人的には、iOS/iPadOS の Safari における通知対応の記事に心を持っていかれた回でした。モバイル端末において Web アプリケーションがますます活躍する未来に期待ですね！
サイボウズでは毎月、最終火曜日の 17 時から Frontend Monthly というイベントを YouTube Live で開催しています。その月のフロントエンド注目ニュースや、ゲストを呼んでの対談など、フロントエンドに関する発信をしていますので是非どうぞ！
また、サイボウズでは一緒にサイボウズのフロントエンドをより良くする仲間を募集しています。興味ある方はこちら ↓ から！
【フロントエンドエキスパート】
サイボウズのフロントエンドを最高にするためのチームです。
【フロントエンドエンジニア（kintone アーキテクチャ刷新 PJ）】
クラウドサービス「kintone」のフロントエンドを新しくしています。
Discussion