Cybozu Frontend Monthly #62

イベント概要
サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。
その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエンジニアのメンバーが共有していきます。
このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。
※フロントエンドウィークリーとは
毎週火曜の 17:00 〜 18:00
で社内向けに行っているフロントエンドの気になる記事を紹介する会です。
2016年3月15日から行われています。
ZennのPublicationにてウィークリーのまとめを投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend
開催日
2025年09月30日
イベントページ
https://cybozu.connpass.com/event/368435/
配信URL
https://www.youtube.com/watch?v=jrb2xA5fLek
メンバー
コンテンツ
👀 Notable Articles
npm パッケージを利用したサプライチェーンアタックについて
- 共有者: @mugi_uno
ここ最近、npm パッケージを対象に、脆弱性を突かれ、悪意のあるコードが混入された状態で配布されるケースが多く発生しています。
8/24 には、Monorepo の管理ツールである Nx が攻撃対象となり、各種サービスへの認証用トークンなどを窃取しつつ、さらに感染を広げるような不正なスクリプトを仕込んだ形でパッケージが配布されました。
https://github.com/nrwl/nx/security/advisories/GHSA-cxm3-wv7p-598c
9/8 には、debug や chalk といった広く利用されているパッケージを含む 18 のパッケージが対象となり、ブラウザ上での操作をインターセプトし、仮想通貨のやり取りを不正に書き換えるコードが仕込まれました。
https://www.aikido.dev/blog/npm-debug-and-chalk-packages-compromised
そして 9/15 には、tinycolor を含む 40 以上のパッケージがターゲットとなり、Nx への攻撃のように機密情報を窃取し、かつ他のパッケージにも感染を広げるマルウェアも組み込まれています。
https://www.stepsecurity.io/blog/ctrl-tinycolor-and-40-npm-packages-compromised
いずれも npm install 時の postinstall などを利用して利用者に感染させる仕組みとなっており、 性質上、自身が管理しているリポジトリで該当パッケージを利用していなければそれで安全というわけではありません。
これを受けて、各種パッケージマネージャにおいて、リリース後一定期間を過ぎていないと install 自体を許可しないオプションが導入されたりもしています。
- pmpm - minimumReleaseAge
https://pnpm.io/blog/releases/10.16 - yarn - npmMinimumReleaseAge
https://github.com/yarnpkg/berry/pull/6901
これらによってリスクの低減はできますが、昨今では AI ツールも普及しており、 AI 経由で npm パッケージの追加やインストールが実行されるケースも考えられるため、 根本的な対処のためには、Dev Container の利用などが必要になるかもしれません。
フロントエンドで開発をしている以上は npm パッケージの利用は日常的であり避けられないため、 このあたりの動向には注意を払う必要があるな…、と感じた一ヶ月でした。
フロントエンドのモジュールを共有する手法を考えた
- 共有者: @nus3
現状の弊社のプロダクトにおけるフロントエンドでのモジュールを共有する方法を考えて、まとめた記事です。
技術的な手法はいくつかあれど、この記事の反応や、サイフロ通信の組織を横断したフロントエンドの取組での LINE ヤフーの方々と話をしてみて、技術的にどう実現するかも大事だけども、本当にモジュールを横断で共有すべきなのかという観点も大事だなと改めて思いました。
Wasm 3.0 Completed
- 共有者: @sajikix
Wasm の新しい仕様である v3.0 がリリースされました。前回の 2.0 から約 3 年ぶりのメジャーアップデートとなります。
具体的には以下の機能などが策定されました。
- 64-bit address space.
- アドレス空間が 64 ビットになり扱える容量が 4 ギガバイトから理論上 16 エクサバイトにまで拡張。
- Multiple memories
- 一つの WebAssembly モジュールが異なる複数のメモリ空間を定義し操作ができるように
- Garbage collection
- Wasm ランタイムによって自動的に管理される新しい、ガベージコレクションされるストレージ
- ガベージコレクションを備えたプログラミング言語の実行系を WebAssembly に移植しやすく
- Tail calls
- 末尾再帰呼び出しのサポート
- Exception handling
- 今までになかったネイティブな例外処理のサポート
- 例外処理のある言語のコードのを移植しやすくなる
- JS string builtins.
- Wasm 内で外部の JS 文字列値に直接アクセスし、操作することができるプリミティブライブラリの関数
またこのサイトではそれぞれの機能についてブラウザや runtime でのサポート状況も確認できます。
特に GC 機能のサポートなどにより、高水準言語のコードも wasm にコンパイルしやすくなるのは大きなメリットと言えそうです。実際に Java や Kotlin、Scala、Dart などの言語で wasm 向けのコンパイルのサポートが進んでいます。
🗓 Monthly Articles
※AI によって整理・要約されています。
📖 Framework, Library
- トークン不要で npm パッケージを公開できる trusted publishing を試す
- npm のトークンレス publish(Trusted publishing)について実際の使用例とメリットを解説した記事
- 歴代の Web Speed Hackathon の出題から考えるデグレしないパフォーマンス改善
- Web Speed Hackathon の過去の出題を分析し、継続的なパフォーマンス改善の手法について解説
- GitHub - impressivewebs/frontend-feeds: An up to date list of RSS feeds for front-end developers.
- フロントエンド関連の RSS をまとめたリポジトリ
- dahlia/optique: Type-safe combinatorial CLI parser for TypeScript
- zod + commander のような型安全を謳った CLI ツール
- GitHub - catnose99/use-chat-submit: React hook to handle chat textarea submit behaviors (Enter vs Mod+Enter) with IME-safe handling.
- Enter 送信 vs Cmd/Ctrl + Enter 送信を設定できる React hooks
- Fresh 2.0 Graduates to Beta, Adds Vite Support
- Deno 製フレームワーク Fresh が v2 beta に。Vite サポート追加で起動時間が 10 倍向上
- Migration guide for Storybook 10 | Storybook docs
- ESM only になるなど、Storybook v10 への移行方法を解説
- 共同編集アプリが作れる新しい JS ライブラリ「Loro」を紹介
- リアルタイム共同編集機能を Web アプリケーションに実装するためのライブラリの紹介
⚡️ Services
- npm Trusted Publishing で OIDC を使ってトークンレスで CI から npm パッケージを公開する
- GitHub Actions から OIDC を使ってセキュアに npm パッケージを公開する方法
- 1,000+ Devs Lose Their Secrets to an AI-Powered Stealer
- Nx パッケージが攻撃者により改ざんされ、1,000 人以上の開発者の機密情報が流出したセキュリティインシデント
- npm author qix compromised in major supply chain attack
- npm パッケージの作者アカウントが乗っ取られたサプライチェーン攻撃の詳細
- Improve your AI code output with AGENTS.md (+ my best tips)
- AI エージェントがプロジェクトのコンテキストを理解するための AGENTS.md ファイルの作成方法
- replit Agent3
- Replit が発表した新しい AI エージェント機能
🖥 Browsers
- Chrome 140 の新機能
- Popover API で ToggleEvent の拡張、CSS content プロパティの代替テキスト対応など
- Chrome141 Beta
- Aria Notify の追加、speculation rules の eager 設定変更など
- WebKit Features in Safari 26.0
- Safari 26.0 で追加される新機能の詳細
- Defending an open web: What the Google search ruling means for the future
- Google 検索独占判決に対する Mozilla の見解とオープン Web の未来について
💬 Languages
- 知られざる props 命名の関係 アクション編
- react における action prop には onClick より clickAction という命名が良いという提案
- 異世界 JavaScript
- 昔の仕様にあった挙動や、策定途中で夢破れた JavaScript の仕様をまとめた記事
- fetch() では Host ヘッダーを設定できないし話はそこまで単純じゃない
- Fetch の仕様とブラウザ・サーバーサイドでの実装の違いについて
useMemo
1 つ消しただけで tsc が 146 秒から 11 秒になった話- TypeScript のコンパイル時間の問題を
useMemo
の除去で解決した事例
- TypeScript のコンパイル時間の問題を
- ESLint v9.35.0
- preserve-caught-error 追加、no-empty ルールの変更など
- CSS to speech: alternative text for CSS-generated content
- CSS content プロパティのアクセシビリティと代替テキストの設定方法
🤖 Runtimes
- Behind the scenes of Bun install
- Bun install の高速化の裏側を詳細に解説した技術記事
- @deno/sandbox
- Deno で信頼できないコードを安全に実行するサービスが開発中
📝 Specifications
- CSS Snapshot 2025
- 2025 年の CSS 仕様の状況をまとめた W3C のドキュメント
- Add headingoffset & headingreset attributes
- HTML 標準に headingoffset、headingreset プロパティが追加され、見出しレベルの自動調整が可能に
- Intent to Ship: Interest Invokers (the
interestfor
attribute)- Chrome 142 から interestfor アトリビュートによる Interest Invokers が実装予定
🦆 Others
- DOM-based Extension Clickjacking
- パスワードマネージャーを狙った透明フォームを使ったクリックジャッキング攻撃
- サーバーサイドのビルド時間 87 倍高速化
- ビルド時間を劇的に改善した事例とその手法
- UX Fatigue: When Your Website Asks for Too Much (and how to fix it)!
- Web サイトがユーザーに与える疲労感とその対策について
- Accessible Authentication
- WCAG 2.2 の「アクセシブルな認証」要件と実装方法について
- HTML template element deep dive expert guide
- Web Components の template 要素の詳細解説とパフォーマンス最適化
- クリックしやすいターゲットエリアを実装する
- UI の視覚的サイズを変えずにクリック領域を拡大する技術とその是非
- A refresh of Learn CSS with nine new modules
- web.dev の Learn CSS に新しいモジュールが追加、Baseline に到達した機能を中心に拡充
- pnpm 10.16.0 から minimumReleaseAge オプションが導入された
- 公開から指定期間が経過したパッケージのみをインストールできるセキュリティ機能
- A deep dive into Cloudflare’s September 12, 2025 dashboard and API outage
- Cloudflare の useEffect の依存配列ミスによる障害事例
- RSC の理解のメモ Gist
- React Server Components の理解を深めるための図解付きメモ
- Middleware in React Router
- React Router v7.9 で追加された middleware 機能の背景と実装
- LLM が生成したフロントエンドコードの品質評価をするためのツール
- Angular 提供の AI 生成コード品質評価ツール、MCP サーバーとして動作
- Google Chrome at 17 - A history of our browser
- Chrome の 17 周年を記念して Addy Osmani が書いた Chrome の歴史