こんにちは! サイボウズ株式会社フロントエンドエキスパートチームの Saji (@sajikix) です。
はじめに
フロントエンドエキスパートチームでは毎週火曜日に Cybozu Frontend Weekly という 「1 週間の間にあったフロントエンドニュースを共有する会」 を社内でに開催しています。
今回は、2023/01/24 の FrontendWeekly で取り上げた記事や話題をまとめたものになります。
取り上げた記事・話題
Bun v0.5 | Bun Blog
Bun v0.5 がリリースされました。主なアップデートは以下のようになっています。
-
package.jsonのworkspaces機能に対応 - ドメイン名解決のためのビルドイン API である
Bun.dnsを実装 -
node:readlineのサポート - socket 生成における
node:tls/node:netとの互換性改善 - WebSocket の Custom headers に対応
また Bun が仕様にない機能や Draft 段階の機能を積極的に入れている点が FrontendWeekly では話題になりました。今回のアップデートで言うと Custom headers in WebSocket などがこの例にあたります。
A long-standing feature request on the WebSocket spec is the ability to set custom headers when opening a WebSocket. While this hasn't yet landed in the WebSocket standard, Bun now implements it.
この機能は引用部分に書かれているように WebSocket の spec にない機能ですが、ユーザの要望の多いものは積極的に採用する姿勢のようです。
同様の例として、現在提案段階の JSX の新しい記法にも対応し、TypeScript にサポートの要望を出しています。(TypeScript 側ではサポートしないと言う結論になったようですが。)
昨年からは JS ランタイム製作者も交えて標準化を進める Winter CG といった取り組みも始まる中、仕様にない機能を入れていく姿勢に対しては疑問視する声も上がっています。 今後も Bun の方針には注目していきたいところです。
Wasm で JavaScript を動かす意義
Wasm で JS を動かす大きな意義として「 Wasm で JavaScript 処理系を動かすことで JavaScript のコードを安全に評価できる点」があるという話です。
Wasm が 「明示的に用意された API 経由でしか外にアクセスできない非常に限定されたコンテキストで実行される」と言う利点を生かした活用方法です。ユーザーの定義した JS プラグインを実行する用途などでは今後活用されていくかもしれません。
Ezno in '23
去年の９月ごろに tsc を Rust で置き換えている話を発表した人の続報です。
今現在はプライベートなリポジトリで作業しているものの段階的な公開を目指しており、パーサーがそろそろ公開できそうとのことです。ブログでは最初の発表からのアップデートや苦労した点などを現在開発中のツールが動いてる様子のスクリーンショットを交えつつ説明しています。
バンドラーに Rust を採用する例は増えましたが、TypeScript の型チェックで Rust を利用するライブラリではまだメジャーなものがなく、今後に期待したいところです。
TS 5.0 情報
TypeScript 5.0 に入りそうなアップデートについてです。
Issue を見る限り、TypeScript5.0 の beta は 1 月末ごろに公開予定のようです。今回は上 2 つの記事をもとに注目なアップデートをいくつか紹介します。
ECMAScript Decorators
ここ数バージョンでずっと Iteration Plan に入っていたものの入ることが叶わなかった ECMAScript Decorators がついに入りそうです。
Legacy Flag Deprecation
さまざまな理由から必要がなくなってきた古いオプションを非推奨にし、廃止していくことになりました。
Support .ts as a Module Specifier for Bundler/Loader Scenarios
ESM 環境下では、import の際に拡張子をつける必要があり、今までは import するファイルが TS ファイルであっても.js拡張子で指定する必要がありました。
今回のアップデートでは allowImportingTsExtensions オプションを有効にし、 JavaScript にトランスパイルしないことを条件に.ts拡張子で import できるようになりました。
Declaration Files for Non-JavaScript Files
CSS ファイルや JSON ファイルなど JS でないファイルに対しても型定義ファイルを作成できるようになります。
Allow Arrays in extends for tsconfig.json Files
複数の tsconfig ファイルを配列形式でまとめて継承できるようになります。
Uhyo さんのスライドでも述べられている通り、TypeScript 5.0 は 「ECMAScript Decorator の実装 + 開発者にとってありがたいオプションや機能の追加」 がメインになりそうです。
Chrome113 から WebGPU が Shipping 予定
Chrome113 から WebGPU が Shipping になる予定です。
WebGPU は Web ページ上でシステムの GPU を使用し、処理の重い描画などをより高速化するための Web API です。WebGPU API では描画計算だけでなく、GPU を利用した汎用的な演算をサポートするとしています。
この記事で参照されているデモコードは Next.js で作られており、モダンなフレームワークに慣れた人にとってもわかりやすくなっています。
The truth about CSS selector performance
Edge の DevTools で CSS セレクタの処理にどれくらい時間が掛かっているか計測できるようになり、その利用方法を実例を交えて紹介しています。
記事ではツールの使い方や実例以外にも「セレクタの評価のされ方」や「どういったセレクターだと計算が遅くなりがちか」といったことも解説されているので参考になりそうです。
直近 1 年では CSS の新しい記法や機能追加が目立っており、:hasプロパティのように書き方によってはパフォーマンスを悪化させる可能性のある記法の追加も行われています。CSS の機能が豊富になるほど、CSS セレクタによるパフォーマンスを意識する機会が増えるのではないかといった意見が FrontendWeekly 参加者から寄せられました。
TypeScript performance lessons while refactoring for v10 | tRPC
tRPC で型チェックのパフォーマンスを tsc の --generateTrace を使って改善している話です。
tsc には --generateTrace と言うパフォーマンスとレースのためのオプションがあり、出力されたファイルを Chrome の tracing 機能 (chrome://tracing) などで見ることでどの部分に時間がかかっているかを分析できます。(詳細は公式のドキュメントを参考にしてください。)
今回の記事では --generateTrace 機能の使い方から実際に型推論の遅かった部分の改善までの様子を紹介しています。改善の結果、該当部分の型チェックの時間は 332ms から 136ms に短縮したそうです。プロダクトが大きくなるとどうしても型チェックに時間がかかることが多いですが、一度 --generateTrace オプションを利用して分析してみると良さそうです。
Blink: Intent to Ship: CSS Nesting
CSS のネスト記法が Chrome の v112 から入りそうです。
CSS のネスト記法は名前の通り Sass などで可能だった CSS のネスト(入れ子)ができるようになる記法です。WebKit や FireFox も導入に前向きな仕様ですが、Chrome ではいち早く v109 から DevTrial として実装しており、v112 で正式にサポートする予定です。
Test your React Components with Nightwatch and Testing Library
Nightwatch と Testing Library を組み合わせて、実際のブラウザ上でコンポーネントのテストができるようになったという話です。
Nightwatch による React のコンポーネントテストサポートが改善しました。また Testing Library にも @nightwatch/testing-library プラグインで対応します。Component の テストは Storybook で使われるフォーマットである CSF で記述できます。記事では丁寧にチュートリアルやサンプルが乗っているので試してみるのに良さそうです。
How to Build a GraphQL Server with Deno
Deno 公式が公開した Deno で GraphQL サーバーを構築する方法を解説したブログです。動画も踏まえつつ丁寧に解説しているので Deno で GraphQL を扱いたい、試してみたい人は参考にすると良さそうです。
数を扱うのが苦手な人に向けてのデザイン
数を扱うのが苦手な人に向けて配慮すべき事項をまとめた記事になります。
数を扱うのが苦手な人でも誤解や読みにくいこと少なくなるようにどういった工夫ができるかがまとまっています。数を扱うのが苦手な人を排除しないというのはもちろんのこと、苦手意識のない人にとってもより認識しやすくなるような工夫が多いのでデザインや UI 設計で活かせる部分が多そうです。
Next.js 製アプリケーションのコンパイルを約 100 倍高速化した話
Next.js の trace 機能を利用してパフォーマンスでボトルネックになっている部分を探し大きな改善につなげた話です。
Next.js ではプロセス終了時 .next ディレクトリに trace ファイルを吐き出すのですが、これを next.js/scripts/trace-to-tree.mjs に読み込ませることで各処理にかかっている時間を分析できます。今回の記事ではこの分析から Tailwind CSS の JIT が正しく機能していないことを突き止め、コンパイル時間の大幅な短縮につなげています。
FrontendWeekly 内では trace ファイルの存在やそれを読みやすくしてくれるスクリプトについて「知らなかった」と言う声が多かったです。Next.js を利用していてコンパイルの遅さが気になった時などは試してみましょう。
Astro 2.0
Astro 2 がリリースされました。( FrontendWeekly 開催時はリリース発表会の告知が出ているだけの段階でした。)
大きなアップデート内容は以下になります。
- Content Collections API を追加し、Markdown / MDX への型情報を生成し開発者体験を向上
- SSG SSR を組み合わせた Hybrid Rendering に対応
- エラー表示を改善
- dev server の Hot Module Reloading (HMR) を改善
- Vite 4.0 対応
フロントエンドエキスパートチームではFrontend monthly のサイトを Astro で置き換えたばかりだったのですが、rito さんの PR のおかげもあり、既に v2 へ移行済みです。
React の新しいドキュメントがほぼ完成
React の "beta" ドキュメントとして公開していた新ドキュメントのコンテンツがほぼ全て揃ったそうです。既存の React ドキュメントは古い記述も多く、新ドキュメントでは Learn の部分も充実しています。今後は新ドキュメントを参照する方が良さそうですね。
またコンテンツが揃ったので今度は各言語への翻訳プロジェクトが始まるのでは？といった話も FrontendWeekly ではあがっていました。
ヤフートラベルのシステムリニューアル / 一休.com とのシステム統合
Yahoo トラベルと一休.com のシステム統合について解説した記事になります。執筆者である伊藤直也さん(@naoya_ito) が話した動画もあるので合わせて参照すると良さそうです。
ここまで大きな Web システムを統合した事例は少なく、どのような過程を経て統合したのかが詳しく書かれている記事でもあるので参考になるノウハウも多そうです。
Introducing the WebAssembly JavaScript Promise Integration API · V8
JS の非同期な処理の呼び出しを、Wasm から同期呼び出しのように扱える仕様である JavaScript Promise Integration API (JSPI) が v8 に実装されました。
Web 上の API の多くは、その性質上、非同期型あるのに対して WebAssembly アプリケーションは同期 API を前提に書かれているのが一般的です。また WebAssembly は Promise を直接操作できないため問題はより顕在化します。
これらのギャップを埋めるため JSPI は非同期 API 呼び出しから返された Promise を傍受し、WebAssembly アプリケーションのメインロジックを一時停止します。その後非同期 API が完了するタイミングで、WebAssembly アプリケーションを再開することで API 呼び出しの結果を処理できるようにします。
Node.js でデスクトップアプリを作るツール、Gluon について
Electron や Tauri などと同じく Node.js ベースでデスクトップアプリが作れるツール、「Gluon」 についてです。
先行するライブラリにない大きな特徴として、内部にブラウザをバンドルせずユーザのインストールしているブラウザを利用するという特徴があります。この特徴によりバンドルサイズを大きく減らすことが可能です。サポートブラウザとしては Chromium 以外にも Firefox に対応しており、 Runtime としても今後 Deno や Bun のサポートを予定しています。
「ユーザのインストールしているブラウザを利用する」というアイデアの面白さ・新しさがある一方で「ブラウザ間やバージョン間での挙動差が起きないか不安」といった声も FrontendWeekly 参加者からは上がりました。
あとがき
TypeScript 5.0 や Astro 2.0 、CSS Nesting のサポートなど新しい機能・仕様が増える楽しい話題もありつつ、広がる仕様とその追従に関して独自の方針を持ってそうな Bun には一抹の不安が残りますね。また今回は処理の重い部分を tracing する方法を解説する記事が多く、パフォーマンス周りのツールやライブラリ標準機能の充実を感じました。
フロントエンドエキスパートチームでは毎月最終火曜の 17 時から Frontend Monthly というイベントを Youtube Live で開催しています。その月のフロントエンド注目ニュースやゲストを呼んでの対談などフロントエンドに関する発信をしていますので是非見てくださいね！
YouTubeのvideoIDが不正です
またフロントエンドエキスパートチームでは、一緒にサイボウズのフロントエンドを最高にする仲間を募集しています！ 気になる方は下のリンクをクリック！
Discussion