こんにちは、マイクです！今日は2025年6月12日、木曜日ですね。今日も「zenncast」をお届けしますよ。さて、今日はZennでのトレンド記事をいくつかご紹介します。
それでは、早速今日の内容に入っていきましょう！.
今日紹介する記事は全部で5本です！それぞれの内容をじっくりお話ししていきますので、お楽しみに！.
まずは一つ目の記事からです。
タイトルは「Claude Codeを20万円分使ってバイブコーディングの生産性を更に向上させるツールを作った」です。
著者は、Claude Codeを活用してGit worktreeを効率的に管理するCLIツール「Phantom」を開発しました。このツールは、Dockerのように特定のワークツリー内でコマンドを実行できる機能や、tmuxやfzfとの統合機能を提供します。開発は完全にバイブコーディングのスタイルで行い、ソースコードやドキュメントはすべてClaude Codeに生成させました。開発期間はおよそ1週間で、最終的にv1.0.0をリリースしました。
Phantomの基本的な仕組みは、指定したブランチ名で新しいGit worktreeを作成し、管理を容易にすることです。CLIの使いやすさとともに、シェル補完機能を備え、tmuxやfzfとの連携も実現しています。開発中は思いついたことをIssueとして記録し、Claude Codeがその内容を元に高品質なIssueを生成しました。
開発コストは約20万円で、主にClaude Codeの利用にかかりました。並行して複数のインスタンスを立ち上げ、タスクを進めることで生産性を大幅に向上させています。Phantomは簡単にインストールでき、VSCodeやCursorとも連携可能。また、Gitで管理していないファイルのコピーや、ワークツリー作成時のセットアップコマンドの自動実行など、便利な機能が満載です。
このツールを活用することで、開発者は従来の数倍の生産性を実現できると著者は期待しています。興味のあるエンジニアは、Phantomを試してみることをお勧めします。
次は二つ目の記事です。
タイトルは「AI領域における組織の強みを活かすアーキテクチャ設計」です。
AI Shiftでは、AIエージェント開発を通じて組織の強みを最大限に活かすためのアーキテクチャ設計を模索しています。特に、自然言語処理に強みを持つAIチームと開発チームの連携が重要であり、LLMの進化によって両者の責任が曖昧になりつつある現状を背景にしています。2025年には「AIエージェント元年」とされる市場の変化を受け、AIチームはよりアプリケーション層に関与する必要が生まれています。
AI Workerプラットフォームは、エージェントを利用、構築、実行する3つのサービスに分かれており、AIチームが主に実行サービスを担当します。開発チームとAIチームが責任を明確に分担し、協力して開発を進めることが求められています。また、開発言語の統一（TypeScriptへの移行）を行い、ナレッジ共有や開発速度の向上を図っています。
AIエージェントのフレームワークとしてMastraを採用し、エージェントの設計や自律性の確保に注力しています。フレームワーク選定は将来的な選択肢を考慮に入れつつ、依存性の逆転を意識した疎結合なアーキテクチャを実現しています。Feature Flagを利用して、迅速な検証サイクルを構築し、開発と実装のスピードを高めることが重要とされています。
このように、組織の強みを活かしながら、AIエージェント開発におけるアーキテクチャ設計の重要性が強調されています。今後も市場の変化に迅速に対応できる体制を整え、開発のスピード感を維持することが求められています。
さて、次は三つ目の記事です。
タイトルは「Mastra×RAG×構造化ストリーミングの開発事例 - 先生検索AIエージェントの詳細解説」です。
オンライン家庭教師マナリンクが開発した「先生検索エージェント」は、AIを活用した先生検索機能を提供します。この機能では、AIのレスポンスが1文字ずつストリーミング表示され、ユーザーが自然言語で入力した条件を基に、構造化データを用いたリッチなUIで検索結果を表示します。AIは、科目や学年に加え、非構造化データも考慮しながら先生を推薦します。
この実装にあたっては、MastraをAIエージェントフレームワークとして選択し、Next.jsやReact Nativeを用いたアプリケーションでのストリーミングを実現しました。EmbeddingやRAGを用いた類似度検索により、データの処理効率を高め、進捗状況をリアルタイムで表示することでユーザーの体感時間を短縮しました。
ストリーミング表示の必要性は、ユーザーの待機時間を短縮し、期待値の変化に応えるためです。また、構造化データによりリッチなUIの実現や、アプリケーション内での柔軟な処理連携が可能になります。具体的な実装方法として、Vercel AI SDKのフック`useObject`を活用し、構造化データのストリーミングを行いました。
開発においては、エージェントの動きやツール設計の柔軟性を考慮し、機械的なフィルタリングとLLMを組み合わせたアプローチが取られました。全体の開発工数は2人月で、Webエンジニアと私の2名で完結しました。AIエージェントに対する理解を深めるための勉強会や実践も行い、今後の開発に活かしていく意向です。
次は四つ目の記事です。
タイトルは「Next.js App RouterのコンポーネントをVS Codeでサーバー・クライアント別に可視化する」です。
Next.js v13以降、サーバーコンポーネントとクライアントコンポーネントの境界が重要な課題となっています。誤った実行環境を意識せずに開発を進めると、セキュリティリスクやバンドルサイズの肥大化を招く恐れがあります。この記事では、VS CodeのUIを活用して、各コンポーネントの実行環境を可視化する取り組みが紹介されています。
Next.jsでは、コンポーネントがサーバーコンポーネントとクライアントコンポーネントに分かれ、それぞれの実行環境や利用可能なAPIが異なります。コンポーネントの種類は、`use client`ディレクティブの有無によって決まりますが、特にプロジェクトが大規模になると、どのコンポーネントがどの環境で実行されるかの判断が難しくなります。これが開発効率の低下やエラーの原因になり得ます。
そこで、AST（抽象構文木）を利用し、ts-morphを用いてコンポーネントの依存関係を解析し、実行環境を可視化する拡張機能「Next.js Component Boundary Visualizer」を開発しました。この拡張機能では、ファイルのアイコン表示によって、クライアントコンポーネントや両方の役割を持つコンポーネントを明示化し、リアルタイムで実行環境の変化を把握できるようにしています。
この仕組みにより、開発者は実装中にエラーを未然に防ぎ、適切な修正を早期に行えるようになります。拡張機能の開発にはパフォーマンスの課題も残っていますが、今後の改善に期待が持てます。
そして最後の記事です。
タイトルは「Playwright MCPを使ってNotebookLMに自動でソースを流し込む」です。
本記事では、Playwright MCPを活用してNotebookLMに自動でソースを流し込む方法について解説しています。NotebookLMはGoogleが提供するAI搭載のノート機能ですが、現時点ではAPIが未提供のため、ソースを手動でアップロードする手間がかかります。この記事では、Notion MCPとPlaywright MCPを組み合わせることで、NotionからNotebookLMへのソースの一括流し込みを実現する手法が紹介されています。
まず、Playwright MCPを用いてNotebookLMに正常にアクセスできるかを確認し、その後Notion MCPを使用してNotion内のコンテンツをNotebookLMへ登録する流れが示されています。具体的には、Notionで作成した議事録をPlaywright MCPを通じてNotebookLMに流し込む手順が示されており、最終的にはNotebookLM側での登録確認も行われます。
記事では、実際のコード例も提供されており、Playwright MCPのバージョン指定や環境設定方法が詳述されています。特に、MCPの連携に関する情報が豊富で、他のMCPとの組み合わせによる活用可能性も示唆されています。将来的にAPIが正式に提供されるまで、この手法を利用してNotebookLMをより効果的に活用していくことが提案されています。
さて、今日ご紹介した記事を駆け足でおさらいしますと、まずは「Phantom」というCLIツールの開発、次にAIエージェント開発のアーキテクチャ設計、そして「先生検索エージェント」の開発、次がNext.jsのコンポーネント可視化、最後にNotebookLMへのソース流し込み手法についてお話ししました。
次回またお会いできるのを楽しみにしています！詳しい内容はショーノートに書いてありますので、ぜひチェックしてくださいね。また、番組の感想もお待ちしています！それでは、今日はここまで！お疲れ様でした！