こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。
はじめに
サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。
今回は、2023/10/10 の Frontend Weekly で取り上げた記事や話題を紹介します。
取り上げた記事・話題
Announcing TypeScript 5.3 Beta - TypeScript
TypeScript 5.3 Beta がアナウンスされました。
現在 Stage3 のプロポーザルである Import Attributes のサポートや switch(true) 内の各 case で型を絞り込むといった機能が追加される予定です。またインレイヒント(コード上に省略された情報を表示する機能)に出てくる型の定義へのジャンプをサポートする Interactive Inlay Hints for Types などは開発者として便利な機能と言えそうです。
The State of Vite
先日開催された、Vite Conf で Evan You 氏の発表したスライドが公開されています。
昨年末に v4.0 がリリースされてからの振り返りや v5.0 beta のアナウンス、今後サポートするフレームワークやツールについて記載されています。
また今後の課題として「rollup を利用した production build 時のパフォーマンス改善」を挙げており、rollup の互換の Rust 製コンパイラ「rolldown」を新しく開発していることを発表しています。
TypeScript performance made easy
TypeScript のパフォーマンス改善のためのツールを開発中のようです。まだ詳細は出ていませんが、今後に期待したいところです。
Auto-install – Runtime | Bun Docs
Bun では作業ディレクトリやその上層に node_modules が見つからなかった場合、自動で install する挙動の実装を予定しています。自動で install される場所は Bun install で使用されるものと同じグローバルモジュールキャッシュです。
Speeding up the JavaScript ecosystem - The barrel file debacle
フロントエンドのパフォーマンス改善について解説している一連の記事の part7 が公開されました。
この回では数千・数万ファイルになるようなアプリケーションで module を re-export するような書き方が lint/test/bundler などのパフォーマンス悪化につながるという話をしています。実際の書き方の例や計測結果などが詳しく載っていてわかりやすい記事になっています。
Photoshop is now on the web!
近年実装された新しい WebAPI を利用することで、ブラウザでも Photoshop の機能が実装できるという記事です。具体的には以下のような比較的新しい技術を利用して作成しています。
- Origin Private File System API を使って、ファイルの読み取りと書き込みを高速で行えるように
- 画像タイルの処理などタスクを並列実行するために worker スレッドを利用
- C/C++で書かれた既存のグラフィック処理を WebAssembly モジュールに移植
- 新しい color() プロパティを利用する。
- Service Worker を使用したアセットコードのキャッシュ
- 巨大な WebAssembly モジュールをストリーミングとキャッシュで対応
近年のブラウザ進化と API 充実によって、今ままでローカルでしか動かせなかったようなアプリケーションも web で動かせるようになっていることがわかる記事です。
Chrome now shows each active tab’s memory usage!
Chrome でアクティブなタブのメモリ使用量が表示されるようになりました。合わせて非アクティブなタブにおけるメモリセーブや devtool でメモリ利用状況のモニタリングなども紹介されています。
Accessible, Typesafe, Progressively Enhanced Modern Web Forms
Kent C Dodds 氏による ProgressiveEnhancement を意識したフォーム実装の解説記事です。エラー処理や a11y 、型安全性をなども考慮した Form の実装方法を解説しています。途中 Remix を中心に話が進む部分もありますが、後半の Zod と Conform の利用によるフォーム値の型安全な Validation については Remix 参考になるケースが多そうです。
Next.js 13 vs Remix: An In-depth case study
Remix v2 と Next.js の App Router で X(旧 Twitter) のようなアプリケーションを作りながら両者の違いについて見ていく記事です。それぞれでの Layout や Data fetch, React18 の Streaming への対応,ステート更新などの観点から比較しています。
Discussion