🌴

styled-components v6 リリースなど: Cybozu Frontend Weekly (2023-07-04号)

2023/07/05に公開

はじめに

こんにちは!サイボウズ株式会社フロントエンドエキスパートチームの BaHo です。

サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。

今回は、2023/07/04 の Frontend Weekly で取り上げた記事や話題を紹介します。

取り上げた記事・話題

Boshen/oxc Linter Roadmap

https://github.com/Boshen/oxc/issues/481

oxc の linter 実装についてのロードマップです。
bike-shedding になりがちな style や convention 以外のルールにフォーカスして、この2ヶ月で実装していくそうです。
プラグインは GraphQL のような DSL を提供してサポート予定のようです。

styled-components/styled-components v6.0.0

https://github.com/styled-components/styled-components/releases/tag/v6.0.0

styled-components の v6 メジャーバージョンアップデートが来ました。
型定義を配布するようになったほか、内部実装の変更がいくつか入ったようです。

社内では Testing Libraray を利用して書いていた Test が落ちるようになったという情報が寄せられていたため、同様の環境でのアップデート作業は腰を据えて実施すると良いかもしれません。

Deno/Bun による CommonJS に関する記事

https://deno.com/blog/commonjs-is-hurting-javascript

https://bun.sh/blog/commonjs-is-not-going-away

Deno と Bun が CJS についての記事を投稿していて話題になっています。
Deno は CJS の辛さについて、Bun は CJS の良さについてそれぞれ記述しており一見対比しているようにも見えます。
それぞれのランタイムで利用するコンテキストが異なるため一概には結論付けられませんが、今後の選択の参考になると良いですね。

WebAssembly - web.dev

https://web.dev/webassembly/

web.dev に WebAssembly 関連のページができました。

Breaking Up with SVG-in-JS in 2023

https://kurtextrem.de/posts/svg-in-js

SVG を JSX に埋め込むことによるバンドルサイズへの影響の話です。
JSX へ SVG を埋め込むと JS サイズが増大するため、<img> での読み込みや SVG スプライトなどでうまくやろうという内容が詳細に解説されています。

The Cost Of JavaScript in 2023

https://www.youtube.com/watch?v=ZKH3DLT4BKw

JS の実行を高速化するために必要なコード分割やハイドレーションなどの幅広いテクニックを俯瞰して見ることができる概論的な資料です。
パフォーマンス改善に興味がある人はぜひ閲覧してみましょう。

Announcing Svelte 4

https://svelte.dev/blog/svelte-4

Svelte 4 がリリースされました。
Svelte をインストールした際のデータ量削減や IDE 機能の改善など、DX に関するアップデートが実施されています。

以前から進んでいた Svelte 内部コードの JavaScript 移行も無事に完了したようですね。

AWS Lambda レスポンスストリーミングの紹介

https://aws.amazon.com/jp/blogs/news/introducing-aws-lambda-response-streaming/

https://aws.amazon.com/jp/blogs/news/implementing-ssr-streaming-on-nextjs-with-aws-lambda-response-streaming/

AWS Lambda で Streaming が利用できるようになりました。

Next.js の App Router でも利用できるようなので、デプロイ先の検討候補が増えそうですね。

Announcing TypeScript 5.2 Beta

https://devblogs.microsoft.com/typescript/announcing-typescript-5-2-beta/

TS 5.2 beta がアナウンスされました。
今回のバージョンでは、一時期話題になっていた using 修飾子の対応が含まれています。

ES2023 was approved by Ecma International

https://www.ecma-international.org/news/ecma-international-approves-new-standards-at-the-125th-general-assembly-27-june-2023/

https://twitter.com/robpalmer2/status/1674416934211952643

Ecma International 125 で採択された ES2023 の新要素です。

  • Array findFromLast()
  • Change Array by Copy
  • Hashbang Grammar
  • Symbols as WeakMap keys
サイボウズ フロントエンド

Discussion