Zenn Cybozu Frontend
zenn.dev/p/cybozu_frontend
アニメーションのフレームをテストしない。その理由を解説します。
この記事では、UIアニメーションのフレーム単位でのテストが非現実的である理由と、代わりに取るべきテスト方法について解説しています。フレーム単位のテストは、タイミングの不確実性、環境の非一貫性、保守性の問題、膨大なデータとリソースの問題から、実行環境によって結果が変わる「フレーキー」なテストになりがちです。代わりに、アニメーションの目的達成を確認する「正当性のテスト」を提案し、PlaywrightやCypressなどのツールを用いて、初期状態、アクション、最終状態を確認する方法を示しています。 • フレーム単位のテストはタイミングの不確実性があり、成功率が低い。 • 環境によってアニメーションのパフォーマンスが異なるため、テスト結果が一貫しない。 • 保守性の観点から、アニメーションの変更に伴いテストコードの修正が必要になる。 • フレームごとのテストは膨大なデータを生成し、実行時間やストレージに負担をかける。 • 代替として、アニメーションの目的達成を確認する正当性のテストを推奨。
この夏押さえておきたいJavaScriptの文字列操作コレクション
この記事では、JavaScriptにおける文字列操作の基本的なテクニックを紹介しています。文字列はプリミティブとオブジェクトの2種類があり、プリミティブは等価判定が可能で、オブジェクトはメソッドを持つことが特徴です。文字列の長さは`str.length`で取得でき、UTF-16のコード単位でカウントされるため、特定の文字は複数カウントされることがあります。文字列の連結には`+`演算子や`concat`メソッドが使え、テンプレートリテラルを用いることで文字列に変数や計算結果を埋め込むことも可能です。さらに、文字列を分割する方法や、文字列の操作に関する便利なメソッドも紹介されています。 • JavaScriptの文字列はプリミティブとオブジェクトの2種類がある。 • プリミティブは等価判定が可能で、オブジェクトはメソッドを持つ。 • 文字列の長さは`str.length`で取得でき、UTF-16のコード単位でカウントされる。 • 文字列の連結には`+`演算子や`concat`メソッドが使用できる。 • テンプレートリテラルを使うことで文字列に変数や計算結果を埋め込むことができる。
State of HTML 2025 の開始など: Cybozu Frontend Weekly (2025-07-29号)
この記事では、2025年7月29日に開催されたサイボウズのFrontend Weeklyで取り上げられたフロントエンド関連のニュースや話題を紹介しています。Stylusがnpmレジストリから一時的に削除された件について、メンテナーのアカウントがBANされたことが原因であると説明されています。また、ユーザーがコードを投稿し、他のユーザーがブラウザ上で実行できるサービスのセキュリティ対策についても言及されています。OSS貢献のためのIssueやPRの書き方、文字コントラストに関する基準についての考察、State of HTML 2025のサーベイ開始、React Server Componentsのアーキテクチャの変遷とそのメリット、Tailwind Plusの新機能についても触れられています。 • Stylusがnpmレジストリから削除されたが、再びアクセス可能になった。 • ユーザーがコードを投稿し、他のユーザーがブラウザ上で実行する際のセキュリティ対策が説明されている。 • OSS貢献のためのIssueやPRの書き方についてのガイドラインが提供されている。 • 文字コントラストに関するWCAG基準についての説明がある。 • State of HTML 2025のサーベイが開始された。 • React Server Componentsのアーキテクチャの変遷とそのメリットが解説されている。 • Tailwind Plusに新しいインタラクティブなコンポーネントが追加された。
Next.js 15.4リリースなど: Cybozu Frontend Weekly (2025-07-22号)
サイボウズのフロントエンドエンジニアによる2025年7月22日のFrontend Weeklyでは、Next.js 15.4のリリースが取り上げられ、主な変更点としてTurbopackビルドの導入、プロダクション向けの結合テストの通過、安定性の向上が挙げられています。また、NuxtLabsがVercelに参画したことや、React RouterとReact Server Componentsの統合に関する記事も紹介されています。PR TIMESによるRecoilからの段階的移行の事例や、ダークパターン撲滅に向けた「誠実なWebサイト」認定制度の開始についても言及されています。さらに、npmパッケージのフィッシング攻撃による乗っ取りや、Node.jsのリリースサイクルの変更提案についても触れられています。 • Next.js 15.4がリリースされ、Turbopackビルドが導入された。 • プロダクション向けの結合テストが全て通過し、安定性が向上した。 • NuxtLabsがVercelに参画した。 • React RouterとReact Server Componentsの統合についての今後の展開が議論された。 • PR TIMESがRecoilからの段階的移行を進めている事例が紹介された。 • ダークパターン撲滅に向けた「誠実なWebサイト」認定制度が開始された。 • npmパッケージがフィッシング攻撃により乗っ取られ、マルウェアが仕込まれた。 • Node.jsのリリースサイクルを変更する提案がされている。
a11y 上の理由で Deprecated になった HTML と ARIA まとめ
この記事では、アクセシビリティ（a11y）の観点から非推奨（Deprecated）となったHTML要素とARIAロールについてまとめています。非推奨の定義は、MDNにおいて非推奨と表示されているものを指し、特にa11y上の理由で非推奨となった要素に焦点を当てています。具体的には、<marquee>、<blink>、<bgsound>、<frameset>、<frame>、<noframes>、<dir>などのHTML要素や、directoryロール、aria-grabbed属性が取り上げられています。これらの要素は、WCAGの基準に違反するため、アクセシビリティの向上を目的として非推奨とされています。代替手段や新しい技術についても言及されています。 • a11y上の理由で非推奨となったHTML要素とARIAロールをまとめている • MDNに基づく非推奨の定義を使用 • 具体的な非推奨要素として<marquee>、<blink>、<bgsound>、<frameset>などを挙げている • WCAGの基準に違反するため、これらの要素はアクセシビリティの観点から問題がある • 代替手段や新しい技術の使用を提案している
自力で時差計算をしろと言われたら。あるいはDSTによる変換の曖昧性について。
この記事では、JavaScriptを使用して異なるタイムゾーン間の時差を計算する方法について解説しています。まず、Dateオブジェクトを使ってシステムのタイムゾーンとUTCの時差を簡単に計算できることを説明し、異なるタイムゾーンの時差を計算するためにはライブラリの利用が一般的であると述べています。具体的には、date-fnsの拡張パッケージであるdate-fns-tzを使用することで、特定のタイムゾーンの時差を考慮した日時を計算する方法を示しています。また、IANA Time Zone Databaseに基づくタイムゾーンデータの取得方法や、サマータイムの影響についても触れています。最終的に、UTC時刻とタイムゾーンから時差を得る関数の実装方法についても言及しています。 • JavaScriptのDateオブジェクトを使用してUTCとシステムのタイムゾーンの時差を計算できる。 • 異なるタイムゾーンの時差を計算するには、date-fns-tzなどのライブラリを利用することが一般的。 • IANA Time Zone Databaseからタイムゾーンデータを取得し、サマータイムの影響を考慮する必要がある。 • サマータイムの開始と終了時の時差の変化について具体的な例を挙げて説明している。 • UTC時刻とタイムゾーンから時差を得る関数の実装方法についても解説している。
Vitest3.2のリリースなど: Cybozu Frontend Weekly (2025-06-24号)
この記事では、2025年6月24日に開催されたサイボウズのFrontend Weeklyで取り上げられたフロントエンド関連のニュースやリリース情報が紹介されています。主なトピックには、Vitest 3.2のリリース、Roo Code 3.21.4の更新、Scroll-driven Animationsに関するWebKitのガイド、FirefoxのView Transitions APIのサポート、Playwrightの新機能、Cloudflare Containersのオープンベータ版の開始、Prettier 3.6の新機能、Design Token Systemの提案などが含まれています。これらの情報は、フロントエンド開発者にとって重要な技術的進展や新しいツールの利用方法を示しています。 • Vitest 3.2がリリースされ、workspaceがdeprecatedになりprojectsに統一された。 • Roo Code 3.21.4がリリースされ、Claude Maxプランが利用可能になった。 • WebKitからScroll-driven Animationsのガイドが公開され、Safariでの利用が可能になった。 • FirefoxのNightly buildでView Transitions APIがサポートされた。 • Playwrightの新機能により、APIをモックする際の開発者体験が向上した。 • Cloudflare Containersのオープンベータ版がリリースされた。 • Prettier 3.6がリリースされ、experimentalなハイパフォーマンスCLIが利用可能になった。 • Design Token Systemが提案され、デザインシステムの構築が容易になる。
CSSDay 2025 Report
CSSDay 2025は、オランダのアムステルダムで開催された世界最大級のCSSカンファレンスで、著名なエンジニアや仕様策定者が登壇しました。セッションでは、CSSのスクロール実装のベストプラクティスや、CSSの哲学、Sassとの違い、カスタマイズ可能なフォームコントロール、マルチカラムレイアウトとフラグメンテーションについてのトークが行われました。特に、CSSの新機能を活用した実装方法や、CSSの進化に関する考察が印象的でした。各トークでは、実際のデモやスライドが公開され、参加者とのディスカッションも行われました。 • CSSDay 2025は、世界最大級のCSSカンファレンスである。 • 著名なエンジニアによるCSSのスクロール実装のベストプラクティスが紹介された。 • CSSの哲学についての考察が行われ、CSSの基本原則が提唱された。 • Sassとの違いを解説し、CSSの新機能に関する知見が深まった。 • カスタマイズ可能なフォームコントロールの進展が紹介された。 • マルチカラムレイアウトとフラグメンテーションの課題についてのトークが行われた。
Safariの `contrast-color()` など: Cybozu Frontend Weekly (2025-06-10号)
この記事では、2025年6月10日のサイボウズ社のフロントエンドニュース「Frontend Weekly」で取り上げられた話題を紹介しています。主な内容には、React Aria ComponentsをベースにしたUIライブラリや、Microsoft EdgeのAria Notify機能、CSS Modulesへの移行についてのPR TIMESのブログ、Safariでの新しい色選択機能、contrast-color()のCSS機能、React Server ComponentsをViteで動かすためのPR、WebAssemblyベースのJVMであるCheerpJの新バージョン、TanStack/dbのalpha版、段階的なフロントエンドリプレイスの実践、透明度付き動画フォーマット「Lava」の解説、CSS Function and Mixins Moduleの標準化に関する情報が含まれています。特にアクセシビリティに関する話題が多く取り上げられています。 • React Aria ComponentsをベースにしたUIライブラリの紹介 • Microsoft EdgeのAria Notify機能により、UIの変更をスクリーンリーダーに通知可能 • PR TIMESがEmotionからCSS Modulesに移行した背景と方法 • Safariでの新しい色選択機能により、色空間とアルファ透明度がサポートされる • contrast-color()を使用して、コントラスト比の高い色を選択するCSS機能の紹介 • React Server ComponentsがViteで動作するようになるPRの発表 • WebAssemblyベースのJVM CheerpJの新バージョンがJava11をサポート • TanStack/dbのalpha版が公開され、バックエンドとの連携が容易に • 段階的なフロントエンドリプレイスの実践に関する記事 • 透明度付き動画フォーマット「Lava」の解説
Fit-to-Width , CSS Carousel など: Cybozu Frontend Weekly (2025-05-20号)
2025年5月20日のサイボウズフロントエンドウィークリーでは、フロントエンドに関する最新の話題が取り上げられました。React CompilerのRelease Candidateがリリースされ、メモ化の自動化やESLintプラグインの簡素化が行われました。また、WebdriverIOのVisual Testing機能がメジャーバージョン7.0.0にアップデートされ、モバイルデバイスでのタブ実行がサポートされました。freee社はE2Eテスト基盤をPlaywrightとGitHub Actionsに移行し、動的スケーリングが容易になったと報告しています。Tiptap Editor 3.0 Betaがリリースされ、拡張性やUIコンポーネントが改善されました。VitestのIn-Source Testing機能により、テストコードをソースファイル内に直接記述できるようになり、テストの更新が容易になりました。Microsoft Edgeではconsole.context()メソッドによるコンテクスト別ログ出力機能が提案され、Storybook 9 Betaではコンポーネントテスト機能が強化されました。 • React CompilerのRelease Candidateがリリースされ、メモ化の自動化が可能に。 • WebdriverIOのVisual Testing機能が7.0.0にアップデートされ、モバイルデバイスでのタブ実行がサポート。 • freee社がE2Eテスト基盤をPlaywrightとGitHub Actionsに移行し、動的スケーリングが容易に。 • Tiptap Editor 3.0 Betaがリリースされ、拡張性やUIコンポーネントが改善。 • VitestのIn-Source Testing機能により、テストコードをソースファイル内に直接記述可能。 • Microsoft Edgeでconsole.context()メソッドによるコンテクスト別ログ出力機能が提案。 • Storybook 9 Betaでコンポーネントテスト機能が強化され、React NativeのWebサポートが追加。
Introducing Zod 4 beta など : Cybozu Frontend Weekly (2025-04-22号)
フロントエンドカンファレンス東京の開催決定など : Cybozu Frontend Weekly (2025-04-15号)
Reactの2025年トレンド予測など: Cybozu Frontend Weekly (2025-04-01号)
