Cybozu Frontend Monthly #56
イベント概要
サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。
その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエンジニアのメンバーが共有していきます。
このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。
※フロントエンドウィークリーとは
毎週火曜の 17:00 〜 18:00
で社内向けに行っているフロントエンドの気になる記事を紹介する会です。
2016年3月15日から行われています。
ハッシュタグ
#サイボウズフロントエンドウィークリー
で実況しています。
zennのpublicationにてウィークリーのまとめも投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend
開催日
2025年03月25日
イベントページ
https://cybozu.connpass.com/event/347604/
配信URL
https://www.youtube.com/watch?v=39q0LvjYLRo
メンバー
コンテンツ
👀 Notable Articles
ESLint now officially supports linting of CSS
- 共有者: @b4h0_c4t
eslint 公式から CSS サポートとして @eslint/css がリリースされました。
このプラグインにはビルトインで以下のルールが含まれています。
no-duplicate-imports@importルールの重複を許可しない
no-empty-blocks- 空ブロックを許可しない
no-invalid-at-rules- 無効な@ルールを許可しない
no-invalid-properties- 無効なプロパティを許可しない
require-baseline- ベースライン機能の利用を強制する
use-layers@layerの利用を強制する
また、構文中にエラーがあってもブラウザと同様にエラー箇所を切り出して同ファイルの他コードを解析したり、Tailwind 等のカスタムシンタックスにも対応しています。
個人的には今まで逐一調べたりプロジェクトごとの利用可否の判断を確認しながら利用していたベースライン周りを lint 側で担保できる require-baseline が強力な機能に感じています。
詳しくは Web.dev の記事「https://web.dev/blog/eslint-baseline-integration」でも紹介されています。
Deno v2.2 で OpenTelemetry がビルトインされた話
- 共有者: @nus3_
Deno v2.2 のリリースで、unstable ですが OpenTelemetry がビルトインされました。
v2.2 時点では、OpenTelemetry の integration を有効にすることで、コードを変更せずともDeno.serveやfetchを使った際のトレース、メトリクス、またconsole.logなどのログの収集が可能になりました。
OpenTelemetry 用のドキュメントが追加されており、Quick start ですぐに試せるようになっています。
個人的に OpenTelemetry が気になっていたのですが、今回のリリースで Deno でサッと試せて、理解を深められて良かったです。
CLINE に全部賭けろ
- 共有者: @mugi_uno
今月はこちらの記事に触れないわけにはいかないかなと思い、持ってきました。
mizchi さんによる、自律型の AI コーディングエージェントである Cline 自体についての解説や考察を交えつつ、 AI を活用したこれからの開発において、プログラマに求められる知識やスキルについての意見が綴られているエントリです。
GitHub Copilot に代表されるような AI によるコーディング支援ツールとは異なり、エントリ内では “暴走列車” と表現もされていますが、 人間と同等レベルのコンテキストを持った状態で自律的に開発を行うことで、従来と大きく異なる開発フローになり得ることについて言及されています。
以前から AI とプログラマの将来性については議論される機会も多かったですが、 この記事をきっかけに、より身近かつ遠くない未来の話として認識されるケースが出てきたのではないかと思います。 （2025/03/14 現在では、Zenn の Ideas / AllTime の全記事の中でも最上位となっており、注目度が伺えます）
私自身も、Cline は名前を知っていただけだったのですが、実際に触れるきっかけになりましたし、 触ってみたうえで、もう少し解像度高く理解できる部分がありました。
特に “Cline AI 時代のプログラマに必要なこと” として挙げられている
- コンテキストを記述する能力
- ドメインを記述する能力
- AI の性能に対する直感
については体験として感じる部分がありました。
A 10x Faster TypeScript
- 共有者: @oguemon
Microsoft が TypeScript のコンパイラとツールのネイティブ実装に取り組んでいることが 3/11 に発表されました。
従来は JavaScript ベースで実装されていましたが、ネイティブ実装は Go 言語が使用されており、GitHub レポジトリも公開されています（microsoft/typescript-go）。
ネイティブ実装により、ビルド時間が最大 10 倍短縮され、エディターの起動も高速化、メモリ使用量も削減される見込みです。
2025 年半ばにコマンドライン版「tsc」のプレビュー版が公開され、年末までに完全なソリューションが提供される予定です。
🗓 Monthly Articles
📖 Framework, Library
- 「Next.js の考え方」の v15 対応改訂
- 「Next.js の考え方」が Next.js v15 に対応
- Tailwind CSS v4.0
- Tailwind CSS v4.0 がリリース
- このリリースには新しい高性能なビルドエンジンの導入や、Cascade Layers や Custom properties など CSS のモダンな機能の採用、シンプルなインストールや CSS で完結する設定などが含まれる
- Vercel Remote Cache is now free
- Turborepo の機能の一つである Remote Caching が、Vercel と連携している全ての Turborepo プロジェクトで無料で利用可能に
- Move on to ESM-only
- ESM のみのパッケージ配布へ移行するタイミングについて考察した記事
- Sunsetting Create React App
- Create React App が非推奨となり、新規アプリケーションの作成には Next.js、React Router、Expo などのフレームワークや、Vite ベースのツールを使用することが推奨
- State of React 2024
- Next.js 15.2
- Vitest Browser Mode を活用してブラウザをモックするコードを削除した話
- フロントエンドのユニットテストにおいて、Vitest と jsdom を組み合わせていた部分を Vitest Browser Mode に置き換えた事例の紹介
- The TypeScript AI framework - Mastra
- TypeScript ベースの AI エージェント開発フレームワーク「Mastra」が公開
- Prisma 6.4 がリリース
🖥 Browsers
- Intent to ship: Customizable select
- カスタマイズ可能な
<select>要素の実装を Chrome 134 でリリースする計画を発表
- カスタマイズ可能な
- Opera introduces Opera Air
- Opera 社が新しいブラウザ Opera Air を発表
- Intent to Prototype: Smooth corners
- スムースな角丸を実現する corner-shape プロパティのプロトタイプ実装が提案
- New to the web platform in January
- 2025 年 1 月に、安定版およびベータ版のブラウザに搭載された機能の紹介
- Intent to Experiment: Interest Invokers
- interesttarget 属性を利用することで、要素に「興味を示した」際（hover や割り当てた hotkey 押下などの際）に特定のアクションをトリガーできるようになる機能が experimental に追加された
- Interop 2025: another year of web platform improvements
- Interop2025 がローンチされた
- Intent to Ship: CSS if() function
- Intent to Ship: CSS Custom Functions (@function)
- Intent to Experiment for Longer — Roma’s Unpolished PostsIntent to Experiment for Longer
- CSS の if() 関数と Custom Functions の Ship が早すぎることに関するブログ記事
- DevTools に搭載されたパフォーマンス AI アシスタントを NEWT に使ってみる
- Chrome DevTools に搭載されたパフォーマンス計測の AI アシスタントを使って、パフォーマンス改善を行った事例の紹介
- Intent to Ship: Invoker Commands; the command and commandfor attributes
- WebDriver BiDi Becomes the Default for Cypress with Firefox
- Cypress が Firefox での WebDriver BiDi プロトコルをサポート
- Intent to Prototype: CSS sibling-index() and sibling-count()
- CSS の新しい関数として sibling-index()と sibling-count()の実装が提案
- So, you want to push a web platform feature?
- ブラウザへの機能実装に関心のある開発者向けに包括的なガイド
💬 Languages
- Everything You Need to Know About Node.js Type Stripping
- Node.js v23.6.0 から実験的機能として導入された Type Stripping について、その背景や技術的詳細の解説
- TypeScript 5.8 の erasableSyntaxOnly フラグ。enum や namespace が消える日が来た
- TypeScript 5.8 で導入される erasableSyntaxOnly フラグについて解説している記事
- Announcing TypeScript 5.8 RC - TypeScript
- TypeScript 5.8 の RC 版が公開
- Deno Update: 最近のフロントエンド向け機能
- Deno のフロントエンド開発に関する機能の紹介
- Deno 2.2: OpenTelemetry, Lint Plugins, node:sqlite
- Deno2.2 がリリース
- A 10x Faster TypeScript
- TypeScript のコンパイラとツールのネイティブ実装に向けた取り組みが Microsoft から発表
🦆 Others
- Oracle justified its JavaScript trademark with Node.js—now it wants that ignored
- Deno が提出していた JS 商標取消申立てに対して、Oracle が正式に却下申立てを提出
- Documentation tool of choice for Open UI Design System
- Open UI のデザインシステムのドキュメント化ツールについての Issue
- The simple way to resolve/infer TypeScript types. Useful to type-aware linting in Rust.
- TypeScript の型推論を Rust で実装する新しいプロジェクト
- Claude Code 概要
- Anthropic から、ターミナルに常駐してコードベースを理解し、自然言語コマンドでコーディングを支援するエージェント型ツール「Claude Code」が発表
- Speeding up the JavaScript ecosystem - Rust and JavaScript Plugins
- Deno Linter などにすでに導入されている、デシリアライズのコストを削減する新しいアプローチを紹介
- CLINE に全部賭けろ
- Cline などのコーディングエージェントが、プログラミングの未来を大きく変えるという予測と、その理由を解説した記事
- 自動テストの世界に、この 5 年間で起きたこと
- Next.js の脆弱性 CVE-2024-46982 の改修が不十分との指摘
- LINE ヤフーのフロントエンド技術を明らかにする State of LY Frontend 2024 実施レポート
- LINE ヤフー社のフロントエンド技術の現状についての調査結果レポートが公開