はじめに 「GitHub CopilotやClaude Codeを使えば、もう設計書なんていらないよね？」 そう思っているあなた、ちょっと待ってください。確かにAIコーディングアシスタントの登場で、コーディング速度は飛躍的に向上しました。しかし、速く書けることと正しく作れることは別問題です。 この記事では、AIコーディング時代に真に必要な「仕様駆動開発（SDD）」と、それを実現する究極のツール「MUSUBI」の使い方を、実践を交えながらステップバイステップで解説します。 初心者の方へ: MUSUBIには25の専門エージェントがありますが、最初は @orchestrator（オーケストレーター）だけ覚えればOK です。orchestratorがあなたの代わりに適切な専門エージェントを呼び出してくれます。 Vibe Coding vs SDD（Specification Driven Deve

こんにちは！エンジニアの黒神です！ 今回は「仕様駆動開発(Spec-Driven Development)」を Claude Code 上で手軽に実行できるツール 「cc-sdd」 を触ってみたら開発体験がめちゃ良かったのでご紹介します。 SDD に関しては紹介記事がたくさんあるので省略しますが、簡単にいえば 「仕様（Spec）を先に定義し、その仕様を満たすコードを書いていく開発手法」 のことです。 特に Vibe Coding で作ったプロダクトは、とりあえず動くけど中身の設計やコードがボロボロのパターンが多く、とてもプロダクション運用できる状態ではないことが多いです。 「cc-sdd」を導入することで、ドキュメント整備された環境を簡単に手に入れられ、開発生産性の向上が見込めます。 ツール自体の導入も簡単なので、これを機にぜひ一度触ってみてほしいです。 cc-sdd について Amazo

この記事では最近（2025/08時点）でKurogoma4DがClaude Codeを使うときにどういうフローで使っているかという話をしていきます。 既存プロジェクトの調査のとき serena MCPを導入する 調査結果はMarkdownに出力してもらう serena MCPを導入する 最近話題のやつです。プロジェクトの構造や依存関係を素早く把握できるので、既存プロジェクトに初めて触る時は特に重宝します。 調査結果はMarkdownに出力してもらう 「このプロジェクトの認証フローを調査してMarkdownにまとめて」のように依頼すると、なにかしらの調査レポートが得られます。これを最初からplan modeではなくedit modeでやらせるのが肝です。 結果をファイルとして書き出しておけば、その時点で外部メモリとして機能させることが可能なので、ブラッシュアップがしやすくなります。 また、こ

第1章 Stripe決済の全体像 概要 Stripeを使うことで、従来は複雑だった決済システムの実装ハードルが大幅に下がります。全体像をつかむための最低限必要な知識として、Web決済に的を絞って、Stripe決済の基本構造、単発決済とサブスクリプション決済の違い、テスト環境の使い方を説明します。 Web決済システムの全体像 Stripe決済システムは以下のようなコンポーネントで構成されています： ※最小限の基本的な決済に必要なもの。実際にはもっと複雑で、膨大な構造です 基本概念 商品（Product）: 販売する商品やサービスの基本情報 価格（Price）: 商品の価格設定（金額、通貨、請求間隔） 顧客（Customer）: 購入者の情報を管理 支払いインテント（Payment Intent）: 単発決済の処理を管理 サブスクリプション（Subscription）: 継続課金の管理 アプリ

OpenAI Agents SDK は AI エージェントを構築するためのパッケージです。軽量で使いやすく、抽象化を最小限に抑えているのが特徴です。この記事では、OpenAI Agents SDK の TypeScript バージョンの使用例を紹介します。 OpenAI Agents SDK は AI エージェントを構築するためのパッケージです。軽量で使いやすく、抽象化を最小限に抑えているのが特徴です。以前実験的に公開されていた Swarm を本番環境向けにアップグレードされたものです。Agents SDK には以下のプリミティブな機能が含まれています。 エージェント：instructions とツールを持つ LLM。特定のタスクを完了するまでループを実行する ハンドオフ：エージェントが特定のタスクを他のエージェントに委任する ガードレール：エージェントへの入力を検証する ツール：エージェ

Claude CodeをWindows上で動かすにはWSLの調整が必要ですが大変に辛ですよね。 この記事ではDevContainerを使ってWindows上でもClaude Codeを簡単確実に動かせる方法を説明します。 勿論、DevContainerを使っているので、MacやLinuxなどのGUI環境でも同じように動作します。 事前準備 VS Codeをインストールする Docker Desktopをインストールする DevContainerの構成 まず、作業用のディレクトリを作成しましょう。ここでは、C:\dev\devcontainer-claude とします。 次に、.devcontainerディレクトリを作成し、その中にdevcontainer.jsonを作成します。 つまり、C:\dev\devcontainer-claude\.devcontainer\devcontaine

はじめに みなさん、フォームライブラリは何を使っていますか？ React Hook Formがフォームの一時代を築いた後に、server actionに対応しているConformが登場したり、様々なフォームライブラリがあると思いますが、今回は最近v1になったTanStack Formについてご紹介します。 TanStack Formは、各入力フィールドを独立したコンポーネントとして提供します。これにより、フォーム全体を再描画するのではなく、変更が生じた特定のフィールドのみを選択的に再レンダリングすることが可能となり、パフォーマンスの最適化を実現しています。 TanStack Formの推しポイント👍 まずは、TanStack Formの推しポイントをいくつかご紹介します。 強力な型サポート TanStack系のライブラリ全般の特徴になりますが、TypeScriptでできているため型安全・

概要 Visual Studio Code（バージョン1.99）で、Agent mode機能がリリースされました！ これまで VSCode Insiders のプレビュー機能として利用されていた Agent mode が、正式に Visual Studio Code 上でも利用可能になりました。 本記事では Agent modeの概要、VSCodeでAgent modeを有効化する方法とAgent modeの活用ヒントをご紹介します。 この記事で分かること Agent modeとは何か VSCode上でAgent modeを有効化する方法 Agent modeの活用Tips Agent modeの概要 Agent modeでは、GitHub Copilotが自律的に動作し、ユーザーの要求に対して必要な作業を計画し、関連ファイルやコンテキストを自動的に特定します。 コードベースに編集を加える

1Passwordを使って、ローカルにファイル(~/.configや.env)として置かれてる生のパスワードなどを削除した 最近、コミットはされないがローカルのディレクトリに置かれている.envのようなファイルから生のパスワードやAPI Tokenを削除しました。 これは、ローカルでマルウェアを実行した場合に、ローカルに置かれている生のパスワードやAPI Tokenを盗まれる可能性があるためです。 最近は、npm install時のpostinstallでのデータを盗むようなマルウェアを仕込んだりするソフトウェアサプライチェーン攻撃が多様化しています。 Compromised PyTorch-nightly dependency chain between December 25th and December 30th, 2022. | PyTorch What’s Really Goin

こんにちは、スマートラウンドの開発の渡邊です。 最近MCPサーバーという単語を聞くことが増えたので、自社サービスのデータをMCPサーバー経由で取得した場合の挙動を検証したくなり、PoCの実装をしました。 この記事では、似たような状況の方（自分のようなMCP初心者）を対象に、以下のような目的でMCPサーバーを実装するための知見を共有します。 何らかのWebアプリケーションのデータをMCPサーバー経由で取得してLLMとの連携を検証したい PoCレベルのクオリティで良い（ローカル起動の開発サーバーなどの本番環境以外でのお試し） この記事ではMCPサーバーやプロトコルの詳細な説明はしません。MCPサーバーを実装してお試しで動かすことのみに焦点を当てます。 やることとしては、基本的には公式のQuickstartと似た内容を段階的に実装します。 ただし、実装内容を簡素にすることで、最初の一歩としてなる

はじめに MastraはAIアプリケーションを構築するためのTypeScriptのフレームワークです。ELv2ライセンスで、マネージドサービスとして他社に提供することはNGですが、業務アプリの構築は可能です。なぜELv2なのかドキュメントもありますので詳細はこちらをご参照ください。 The primary limitation is that you cannot provide Mastra as a hosted or managed service that offers users access to the substantial functionality of the software. (訳) 主な制限は、ソフトウェアの重要な機能にユーザーがアクセスできるホスト型または管理型のサービスとして Mastra を提供できないことです。 またAIを活用したTypeScriptツー

はじめに TypeScriptでAIエージェントの開発ができると噂のMastraを試してみたくなり、主要機能をざっと調べてみました。 この記事では、エージェントやワークフロー、RAGなどMastraの基本機能を一通り紹介し、「どんなことができるのか」をざっくり掴めるようまとめてみました。より高度な機能や環境構築、デプロイ方法など詳しい設定方法を知りたい方は、公式ドキュメントを参照してみてください。 Mastraとは Mastraは、AIエージェント、ワークフロー、RAGなどの機能を統合的に提供するTypeScriptフレームワークです。VercelのAI SDKをベースにしており、OpenAI、Anthropic、Google Geminiなど様々なAIプロバイダーとシームレスに連携できます。オープンソースであるため、カスタマイズ性が高く、コミュニティによる継続的な改善が期待できます。 M

2025.04.29 更新！v1.7.2 に対応しています。無料プランが大幅に改善され、ライトユーザーがより使いやすくなりました！ 以前の記事、「AI エージェント エディタ「Windsurf」登場！」で、Windsurf の基本機能や使い方について紹介しました。本記事はそれをさらに拡張し、新機能の詳細、実践における応用例までを網羅的に解説した完全ガイドです。 本記事の目的： Windsurf の基本概念から、セットアップ方法、主要機能の解説、プロジェクトでの応用的な使い方まで、幅広い内容を一挙に解説します。 初心者でも始めやすいように、ステップ・バイ・ステップの解説と具体的な使用例を交え、実用性にフォーカスした情報をお届けします。 こんな方に読んでほしい： 日々のコーディングの中で効率性を追求する方 最新の AI エージェント エディタに興味がある方 直感的な操作性と多彩な機能を持つ A

⚠️ 今回Claude Code MCP Server = Claude Code ということで記事の内容を書いています。 本家としても Claude Code自体を他のアプリケーションが接続できるMCPサーバーとして使用し、それらにClaudeのツールと機能を提供したい場合 という表現を使っていますが、Claude Code内部のエージェント機能を使うわけではないようです（API消費ありません）。 なので、僕の解釈ではClaude Code内部で整備しているClaude Code内Agentが利用するメソッドをMCP ServerのToolsとして一部公開しているだけという認識です。 Agent機能はそららToolsを利用するClaude(Desktop)なり、Clineなり、CursorなりWindsurfなりに譲られる形です（まあ結局Claudeだけどそれぞれsystem promp

3.7 sonnet → drawioが今のところベストな図の作成方法。特にdrawioにすることで修正ができることが従来との違い。パワポ作成やブログなどの際に図を多用できる。これはわかりやすくビジネスマン全員が使える組み合わせ。 https://t.co/GzZRYhgt1V pic.twitter.com/xmWryTqnk6 — 遠藤巧巳 - AIエージェント受託開発 (@ai_agent_dev) March 1, 2025 図の作成のベストは2025年3月時点ではClaude3.7 sonnetです。ChatGPT,Geminiでもできますが、クオリティが低いと人の修正時間が増えます。この図の作成クオリティのためだけにClaudeを契約しても良いと思います。 何が違う？これまでは図の作成はsvgで行うことが普通でした。しかしsvgだと人の修正ができないため、ほんの少しの違和感でも

import { Mastra } from '@mastra/core/mastra'; import { createLogger } from '@mastra/core/logger'; import { weatherAgent } from './agents'; export const mastra = new Mastra({ agents: { weatherAgent }, logger: createLogger({ name: 'Mastra', level: 'info', }), }); エージェントを定義する src/mastra/agents/index.ts では Agent クラスを使用して天気情報を提供するエージェントを定義しています。 import { anthropic } from '@ai-sdk/anthropic'; import { A

articlesTrendingAlltimeLatest

2年くらい前からCopilotやCursorによるコーディングサポートを受けた開発は実際に行なっていたのだけど、先週くらいからコーディングエージェントによる開発にも本腰を入れて調査を始めた。以下はその際に雑に調べた情報まとめ。 そんでこの土日くらいまで毎日、主にCline+Claude(その他versionや派生系クライアントも含む)を使って色々とコード生成させたりして実験したのでその感想を書く。 試してみたこと 最初は簡単なpromptを入力してポン出しで生成させるToDoリストとか管理画面みたいなものを作らせてワイワイしてた。だけど何回かやったら流石に飽きてきたので、もう少し規模の大きなタスクに取り掛からせることにした。 既存プロジェクトへのテスト追加 まず最初に、個人開発してるモンハンnowのTA走者向けのwebサイトが現状テストゼロだったので、これに対してClaude 3.5 so