こんにちは! サイボウズ株式会社フロントエンドエンジニアの nissy です。
はじめに
サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。
今回は、2023/06/27 の Frontend Weekly で取り上げた記事や話題を紹介します。
取り上げた記事・話題
Next.js App Router Update
App Router の最新状況について共有している記事になっています。現在は、パフォーマンスの改善、安定性の向上、開発者向けの概念や利用方法の解説の 3 つにフォーカスしているようです。
An Introduction to Streaming on the Web
Web Stream の概要の紹介しつつ、Vercel での応用例について触れている記事です。図を交えながら Web Stream の特徴を解説しており、Web Stream にあまり詳しくない人におすすめの記事になっています。
Nuxt 3.6
Nuxt 3.6 がリリースされました 🎉 パフォーマンス改善などが主なリリースになっていそうです。
Say Goodbye to Spread Operator: Use Default Composer
デフォルト値など設定する場合に、スプレッド構文より default composer の利用を進めている記事です。Weekly では、lodash などが引き合いに出されたコメント欄での議論が話題になりました。
Introducing HTTP/3 Prioritization
Cloudflare が HTTP/3 での Prioritization をサポートしたという記事です。ウェブサイトで読み込まれる各リソースの優先度を適切に決めることで、LCP などのメトリクスを改善できる可能性があるようです。この記事では、優先度の設定の方法などについても解説されています。
Web Components を使用してマップ作成時間を短縮
Google Map をサイト上に表示できる Web Components がプレビュー版として利用できるようになりました。Google Map をウェブサイトへ導入する際の開発者体験が改善されそうで、Web Components の良い活用例となりそうです。
New W3C website deployed
以前から予告されていた W3C のウェブサイトが公式にデプロイされました。デザインが刷新されて見やすくなっています。
Weekly では、どのようなフレームワークでウェブサイトが実装されているのかが話題になりました。ソースコードは w3c/w3c-website-frontend で確認することができ、Symfony というフレームワークをベースに実装されているようです。
node_modules の問題点とその歴史 npm, yarn と pnpm
npm、yarn、pnpm のパッケージマネージャーがどのように node_modules をインストールしてきたのかを時系列で振り返る記事です。最近だと pnpm を利用する人が増えている印象がありますが、この記事では pnpm の特徴や解決する課題などを理解することができます。
Zero-config support for Tailwind, MUI, styled-components, and Emotion
TailwindCSS、Material UI などの CSS フレームワーク向けの設定を自動で作成する addon-styling というライブラリが Storybook チームから公開されました。この addon を導入することで、簡単に Storybook の開発を始められそうです。
あとがき
個人的には、学生時代のインターンで WordPress のサイトに Google Map を埋め込む実装に苦労した記憶があるので、Web Components で埋め込めるようになったのは便利だな〜と感じました。どこかで使ってみたいですね。
サイボウズでは毎月、最終火曜日の 17 時から Frontend Monthly というイベントを YouTube Live で開催しています。その月のフロントエンド注目ニュースや、ゲストを呼んでの対談など、フロントエンドに関する発信をしていますので是非どうぞ！
Discussion