Zenn Cybozu Frontend
zenn.dev/p/cybozu_frontend
Storybook公式MCPの解説とその先 - Design Systems with Agentsの提案について -
この記事では、Storybookの公式MCP Addonについて解説しています。このアドオンは、AIエージェントがStorybookのコンポーネント情報にアクセスし、活用できるようにするものです。MCP Addonを使用することで、Storybookのベストプラクティスに基づいたStoryファイルを簡単に作成でき、バージョン更新やテスト機能をフル活用できます。具体的なセットアップ手順も示されており、pnpmを使用して必要なパッケージをインストールし、設定ファイルに追加する方法が説明されています。MCPを使用することで、Storyのパターン数が増え、テストコードも自動生成されることが強調されています。 • Storybook MCP AddonはAIエージェントがコンポーネント情報にアクセスできるようにするアドオンである。 • MCP Addonを使用すると、Storybookのベストプラクティスに基づいたStoryファイルを簡単に作成できる。 • セットアップにはpnpmを使用し、必要なパッケージをインストールする手順が示されている。 • MCPを使用することで、Storyのパターン数が増え、テストコードが自動生成される。 • 現在はClaude Codeでのみ動作検証が行われている。
WebKit Features in Safari 26.0など: Cybozu Frontend Weekly (2025-09-15号)
この記事では、2025年9月15日に開催されたサイボウズのFrontend Weeklyで取り上げられたフロントエンド関連のニュースや話題を紹介しています。主な内容として、CloudflareのダッシュボードとAPIの障害に関するバグレポート、Chromeの17周年を記念した歴史的な記事、Safari 26.0の新機能に関する情報、Learn CSSコースの刷新、pnpm 10.16の新機能、Prisma 6.16.0のリリース、HTMLの整合性に関する調査結果、クリックしやすいターゲットエリアの実装方法が挙げられています。特にCSSに関する話題が多く、新機能や技術的なポイントが詳しく解説されています。 • Cloudflareのダッシュボードでのバグに関する詳細と対応方法 • Chromeの歴史とAIの状況についての解説 • Safari 26.0の新機能、特にCSS関連の機能 • Learn CSSコースの新しいモジュールの追加 • pnpm 10.16のminimumReleaseAgeオプションの導入 • Prisma 6.16.0のDBアダプタの移行とパフォーマンス向上 • 世界の人気サイトのHTML整合性に関する調査結果 • クリックしやすいターゲットエリアの実装テクニック
Interop 2026提案募集開始など: Cybozu Frontend Weekly (2025-09-09号)
この記事では、Interop 2026の提案募集が開始されたこと、React Native v1.0のリリースが近づいていること、TypeScriptプロジェクトにおけるuseMemoのパフォーマンス問題、JavaScriptのProxyを用いたWindow間RPCの実装、Denoのサンドボックス環境の開発、Scoped Focusgroupの再設計、WCAG 2.2におけるアクセシブルな認証要件、Temporal APIの運用事例、Remix 3の発表予定、Chrome 140の新機能、CSS Snapshot 2025の公開について紹介されています。これらの情報は、フロントエンド開発における最新の動向や技術的な課題に関する重要な知見を提供しています。 • Interop 2026の提案募集が開始され、ブラウザ間の相互運用性向上を目指す。 • React Native v1.0のリリースが近づいている。 • TypeScriptプロジェクトでのuseMemoがコンパイル時間を大幅に延ばす原因となっていた事例。 • JavaScriptのProxyを使用したWindow間のRPC実装手法が紹介されている。 • Denoが信頼できないコードを実行するためのサンドボックス環境を開発中。 • WCAG 2.2でのアクセシブルな認証要件についての解説。 • Temporal APIのPolyfillを社内システムで運用している事例が紹介されている。 • Chrome 140の新機能がリリースされた。
AIによる大量コードのマイグレーションスクリプト作成の試行錯誤と知見
この記事では、AIを用いた大量コードのマイグレーションスクリプト作成の試行錯誤とその知見について述べています。特に、1000ファイル以上の書き換えをAIに任せる際の課題として、実行の遅さや期待通りの結果が得られないこと、再現性の無さが挙げられています。これらの問題に対処するために、AIに直接書き換えを命じるのではなく、マイグレーション用のスクリプトを作成させるアプローチが効果的であると提案されています。具体的な事例として、HugoからAstroへのマイグレーションの過程が紹介され、変換の仕様や実際のプロンプトの例も示されています。 • AIによる大量ファイルの書き換えには実行の遅さや結果の不安定さがある。 • 期待通りの結果が得られない場合、再実行が必要で時間がかかる。 • マイグレーションの実行結果が毎回異なるため、全ファイルの精査が必要。 • AIに直接書き換えを命じるのではなく、マイグレーション用のスクリプトを作成させることが効果的。 • HugoからAstroへのマイグレーションの具体例が紹介され、変換の仕様が説明されている。
フロントエンドのモジュールを共有する手法を考える
この記事では、サイボウズのkintoneプロダクトにおけるフロントエンドのモジュール共有手法について述べています。2021年から進められているフロントエンド刷新の一環として、モノリス構成からの脱却を目指し、各チームが独立したMonorepo構成を採用しています。しかし、チーム間でのモジュール共有が課題となっており、この記事では3つの共有パターンを提案しています。1つ目はnpmパッケージとして公開する方法で、バージョニングによる独立した開発が可能ですが、オーナーシップの明確化が必要です。2つ目は1つのMonorepoにまとめる方法で、共通モジュールの即時反映が可能ですが、依存管理の集約によるコンフリクトが懸念されます。3つ目は共通モジュールを直接扱う方法で、Monorepo構成でなくても利用可能ですが、運用の柔軟性が求められます。 • フロントエンドのモジュール共有の課題を解決するための手法を提案 • npmパッケージとして公開する方法は独立した開発が可能だが、オーナーシップの明確化が必要 • 1つのMonorepoにまとめる方法は共通モジュールの即時反映が可能だが、依存管理の集約によるコンフリクトが懸念される • 共通モジュールを直接扱う方法はMonorepo構成でなくても利用可能だが、運用の柔軟性が求められる • 各手法のメリット・デメリットを考慮した意思決定が必要