みなさん、こんにちは！マイクです！今日は2025年3月29日、土曜日です。今日も楽しい「zenncast」にお越しいただきありがとうございます！さて、今日はZennでトレンドの記事をいくつかご紹介していきますよー！
今日も皆さんからのお便りはいただいていないので、さっそく今日の内容紹介に移りますね。今日ご紹介する記事の本数は、なんと5本です！では早速、最初の記事から行ってみましょう！
まず1つ目の記事は「Figma MCP × Cursorで加速するUI実装とその先の工夫」です。近年、プロダクト開発では「Design to Code」が注目されていて、Figma社が開発者向けのDev Modeやコードとデザインの同期機能を提供しています。この記事では、最近話題の「Figma MCP」とAI搭載コードエディタ「Cursor」を組み合わせた開発事例が紹介されています。
Figma MCPの導入背景は、UIコンポーネントの工数削減と少人数チームでも開発速度向上を目指すことです。しかし、APIキーの共有問題が発生しました。そこで、チームメンバーは個人のAPIキーを設定する手法を採用しましたが、スマートさに欠けると感じています。この組み合わせによってUI実装の高速化や視覚的な一致度の向上が実現できたそうです。
ただし、生成されるコードが巨大なコンポーネントになることや、コーディング規約に従わない点といった課題が残っているようです。Cursorの`cursor_rules`を活用することで、AIにプロジェクト固有のコーディング規約を理解させることができ、コードの品質向上が期待されています。実際の開発では約40%の作業時間短縮が体感されているとのこと。AIの導入が効率化に寄与していますが、デザインシステムとの連携には改善の余地があるようです。
さて、続いて2つ目の記事は「Sentryのカスタムスパン計測機能を活用してフロントエンドのパフォーマンスを可視化する」です。このSentryは主にエラー監視ツールとして知られていますが、パフォーマンスモニタリングにも大変役立つんです。カスタムスパンを使うことで、特定の処理のパフォーマンスを詳細に測定し、ボトルネックを特定することができるんですよ。
著者が担当するプロダクトでは、ユーザーが選択したコンテンツをシステムに取り込む際の処理時間が長くて、ユーザー体験に悪影響が出ていたそうです。これを改善するために、処理の実行時間を記録することになりました。Sentryのカスタムスパン計測は簡単に設定でき、具体的な処理の時間を計測するために`startSpan`関数を使います。
具体的なユースケースとして、ファイルの変換処理における各ステップの計測が挙げられていて、これにより特定の処理が遅い場合やファイルサイズによる最適化が可能になります。Sentryのカスタムスパン計測機能を導入することで、フロントエンドの処理パフォーマンスを簡単に可視化し、ユーザー体験の向上が図れるんです。
。...。...
さて、3つ目の記事は「ターミナルセッションを録画するツールVHSでのtips」です。VHSはターミナルセッションを録画するための便利なツールなんですね。特に長時間のデモやプレゼンテーションに適していて、録画ファイル形式にはアニメーションGIF、WebP、MP4が選べます。フォントサイズや画面サイズ、カラーテーマの設定が可能で、SSH経由でのリモート録画もサポートしています。
macOSではHomebrewを使って簡単にインストールでき、他のプラットフォームでも利用可能です。操作は簡単なDSL（ドメイン特化言語）を用いて記述され、ターミナルコマンドの入力を記録することができます。自動録画機能の`record`モードを使えば、即座に操作をテープファイルに保存し、後で再生することも可能です。
VHSを使用する際のtipsとして、設定ファイルを活用すると共通設定を効率的に管理できます。長時間のデモにはタスクを分割したテープファイルを用意し、ffmpegを使って後で結合する方法もおすすめです。セキュリティに配慮したパスワード入力時には、`Hide`と`Show`コマンドを利用して録画内容から秘匿情報を避けることができます。
。...。...
続いて4つ目の記事は「MCP Routerを公開します！」です。MCP（Model Context Protocol）は、LLM（大規模言語モデル）にコンテキスト情報を渡すためのプロトコルです。新しく開発されたMCP Routerは、複数のMCPサーバを一元管理できるアプリです。これにより、各アプリケーションごとに個別にMCPサーバを管理する手間が省けます。
MCP Routerはログを自動記録して、LLMと統合されたアプリケーションの利用状況をモニタリングできます。また、MCPサーバを登録する機能「MCP Index」があり、ユーザーは簡単にMCPサーバを登録できます。このアプリを使うことで、登録されたMCPサーバをワンクリックでインストールし、環境変数の設定がUIからできるんです。
現在、MCP RouterはMacとWindows版がリリース予定で、今後2週間以内に利用可能になるとのこと。最新情報はTwitterで発信されるそうです。
。...。...
最後に5つ目の記事は「Looker Studio & Dataformで実現するデータ分析プロダクトPoC開発」です。ダイニーのデータチームのエンジニアがLooker StudioとDataformを使ったデータ分析プロダクトのPoC（概念実証）開発の手法を紹介しています。データの可視化や分析ニーズが多様化する中、PoC開発は顧客の要求を迅速に検証するために重要なんです。
Looker Studioの利点として、高速なBI構築や豊富なテンプレート、シンプルな権限管理が挙げられます。また、Googleフォームやスプレッドシートとの連携により、データを即座に取得し可視化することが可能です。PoCの開発フローはデータ準備から始まり、Dataformでデータを加工し、Looker Studioでダッシュボードを作成します。
実装結果として、従来の3ヶ月から約1週間での構築が実現し、顧客への迅速な対応が可能になったとのこと。ダイニーは、データ分析ニーズが高まる中でスピーディなPoC開発を通じて顧客の価値を最大化することを目指しています。
さて、今日もたくさんの記事を紹介しましたが、最後におさらいをしてみましょう！最初は「Figma MCP × Cursor」でUI実装を加速するお話、次に「Sentry」を使ったパフォーマンス可視化、そして「VHS」でのターミナル録画について。さらに「MCP Router」の一元管理、最後に「Looker Studio & Dataform」でのデータ分析プロダクトのPoC開発でしたね。
次回もお会いできるのを楽しみにしています！詳しい内容はショーノートに書いてありますので、ぜひチェックしてくださいね。そして、番組の感想もお待ちしています！それでは、また次回お会いしましょう！バイバイ！