はじめに
こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの じまぐ です。
サイボウズでは毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。
今回は、2023/06/13 の Frontend Weekly で取り上げた記事や話題を紹介します。
取り上げた記事・話題
Astroがドキュメントサイト作成のためのテンプレートを公開
Astroでドキュメントサイトを作成するためのテンプレートであるStarlightが公開されました。
Starlightのサイト自体もStarlightを使って作られています。StarlightのドキュメントにはWebサイトが環境へ与える影響などについて触れられているのが特徴的です。
Astro 2.6リリース
Astroの2.6がリリースされました。
Middlewareが追加されたり、hybridモードがstableになりました。静的なサイトだけでなく、動的なサイトでもAstroが活躍できそうな機能がそろってきています。
EznoがOxcで使えるように
Rustで書かれた型チェッカーであるEznoが Oxc で使えるようになりました。OxcはJavaScript/TypeScriptのlinter・formatter・minifierなどを担おうとしているツール群です。
JSConf JP 2023が 11/19にオフラインで開催予定
JSConf JP 2023が11/19に九段下でオフラインで開催されます。
CfPの募集もオープンしています。
フロントエンドリアーキテクトの話 （ZOZO Tech Meetup発表資料より）
@yosuke_furukawa氏による「ZOZO Tech Meetup」での発表資料です。
フロントエンドのリアーキテクトについて、組織の技術継承や取りうるアプローチのメリットデメリットなどを紹介しています。
State of Node.js Performance 2023
Node.js のv16・v18・v20 のベンチマークを比較した記事です。v20 ではいくつかのリグレッションが見つかっていますが、以前のバージョンと比較するとおおむねパフォーマンスが向上しているようです。
Safari 17 beta に入る機能のまとめ
WebサイトをmacのDockに追加する機能や、CSSやJS APIの追加など盛りだくさんの内容になっています。
リリースノートも合わせて参照するとよさそうです。
WebAssemblyのPolyfill
このPolyfillのユースケースとしては、iOS や macOS の Lockdown モード環境等での動作や、 WebAssembly のランタイムに手を加えたい場合などがあるようです。
DockerコンテナをWebブラウザで実行可能にする container2wasm 0.3 リリース
DockerイメージをWASMに変換し、Webブラウザ上で動かせるようになるcontainer2wasmの0.3がリリースされました。デモページでは実際にブラウザ上でNode.jsなどの動作が試せます。
モダンCSSをふんだんに使って button/card/pagination/navigation を作るサンプル
モダンなCSSを利用してコンポーネントを作るサンプル集です。頻出するUIのパターンを、具体的なコードを見ながら学べます。
自動テスト用のChromeのバイナリがバージョンごとにダウンロードできるように
開発者がテスト用に使うためのChromeをバージョン指定してダウンロードできるようになりました。これまでよりも安定して自動テストの環境構築や実行が行えるようになりそうです。
次のようなコマンドを実行することで特定のバージョンをダウンロードできます。
npx @puppeteer/browsers install chrome@116.0.5793.0
Watch Out for Layout Shifts with ‘ch’ Units
CSSの単位として ch を使った場合に起こりうるレイアウトシフトの紹介と、修正の仕方を紹介する記事です。
幅の異なるフォントを切り替えて使っている場合などには注意が必要です。
WebPerf Snippets – Nextra
パフォーマンス関連のデータを取得するスニペットのまとめです。
Discussion