「AI」タグの記事が7件件あります

こんにちは。開発二部の箕浦です。

このブログでは Claude Code を何度か取り上げてきました。
今回はその流れで、OpenAIの 「Codex(コーデックス)」 を整理してみます。

Codexというと「コーディング特化のツール」という印象が強いかもしれませんが、最近触ってみたら機能が一気に増えていて、 画像生成・音声入力・スライド作成・簡単な動画作成まで こなす“万能AIエージェント”に化けていました。
発表当初に比べると話し方や実行時間といった弱点もかなり改善されていて、今は一般的な業務にもおすすめしやすいツールになっています。情報量が多いので、現時点(2026年6月)の全体像をカテゴリーごとに整理しておきます。

Codexとは何か​

Codexは、コーディングだけでなく さまざまなタスクをこなすOpenAIのAIエージェント です。ざっくり言うと「デジタル上のほとんどの仕事を自分で考えて完遂してくれるツール」という立ち位置です。

主にできることは以下のとおりです。

• 表計算ソフトでの データ集計・グラフ作成・スライド作成
• 高性能な画像生成機能 「GPT Image 2」 による画像づくり
• 簡単な動画作成
• さまざまな形式のデータを読み込み、 自ら思考して新しいデータを生成

単にテキストを返すだけでなく、与えられたデータをもとに考え、成果物としてアウトプットまで持っていける汎用性の高さが特徴です。

料金とOS対応​

PlusとProの主な違いは 利用制限(レート) です。
まずはPlusプランで使い勝手を確かめて、制限に物足りなさを感じたらProを検討する、という流れが無難だと思います。

他のAIエージェントと比べたときの強み​

Codexならではの強みとして、digestや実際に触った感触で挙がってくるのは次のあたりです。

• レート制限が緩め ─ 他社製品と比べて利用量の上限が緩やかで、ガンガン回しやすい
• 最強クラスの画像生成「GPT Image 2」(GPT-Image-2) ─ 低価格でこの品質はかなりお得。複数画像を一度の指示でまとめて生成できる
• 高精度な音声入力 ─ 音声入力ソフトとしても使える
• 「Computer Use」が優秀 ─ デスクトップアプリを操作できる(リスクは伴う / 後述)
• GPT-5.5 + エージェント性能 ─ 複雑な要件のタスクでもミスなくこなす安心感がある

一方で、 ClaudeとCodexは使い分けるのが現実的 です。
Claude Codeで数時間かかったタスクがCodexであっさり解決したこともあれば、その逆もあります。UIデザインや文章の自然さではClaudeのほうが好まれる場面もあります。
タスクの性質によって得意・不得意が分かれるので、両方を持っておいて使い分けるのが良さそうです。とはいえ画像生成のコスパまで含めると、Codexは特に「人にすすめやすい」ツールだと感じます。

デスクトップアプリの基本​

ここからは、Codexデスクトップアプリの使い方を整理していきます。

インストールとプロジェクト​

1. 指定ページからインストーラーをダウンロードし、指示に従ってインストール
2. 最後に ChatGPTアカウントでログイン
3. 作業の単位となる 「プロジェクト」 を作成する(左上のフォルダーアイコン →「最初から始める」→ フォルダー名を入力)

プロジェクトはフォルダーのようなもので、 作業履歴がそこに蓄積 されていきます。

基本的なタスク実行の流れ​

実際の使い方は、チャット欄に自然文で指示を出すだけです。たとえばこんな流れが組めます。

1. リサーチ → Markdown化
   「Codexデスクトップアプリの現状の機能を網羅的にリサーチし、Markdownファイルに結果をまとめてください」と入力すると、Web検索を踏まえた解説を .md で生成してくれます。
2. Markdown → スライド化
   チャット欄で @ファイル名 を指定して先ほどのMarkdownを読み込ませ、「この資料をもとにスライドをHTMLで作成して」と指示すると、HTML形式のスライドを生成してブラウザで開いてくれます。
3. スライドに画像を生成して差し込み
   「画像を足すページを指定して、そのページに合った画像を生成してスライドに差し込んで」と頼めば、画像生成まで一気通貫でやってくれます。

Codexの動作原理​

Codexの仕事の流れは、AIエージェントの基本パターンそのものです。

人間の指示(プロンプト) → 思考(情報収集・作業) → 結果確認 → 再思考 → 完了判断

このループを回しながら、Web検索やPC内のファイルから情報を集め、MarkdownやHTMLとして成果物を出力します。
機能群も、この流れに沿って 「指示の出し方」「考え方・進め方」「情報の取得先・作業対象」「成果物の確認しやすさ」 の4カテゴリーで捉えると見通しが良くなります。以降はこの観点で各機能を見ていきます。

チャット欄の機能​

指示出しの起点となるチャット欄には、地味に便利な機能が詰まっています。

ファイル添付とAppshot​

• PCからのファイルアップロード、チャット欄への画像・ファイルの コピペ渡し が可能
• Appshot … 直前に使っていたアプリのスクリーンショットを撮って渡せる機能。Webサイトの内容なども正確に把握させられます。 現状はMacのみ 対応で、ショートカットキー(左+右コマンドキー)からも呼び出せます

権限とサンドボックス​

Codexが操作できる範囲は サンドボックス で制御されます。デフォルトでは「開いているプロジェクト内のみ読み書き可、範囲外の操作は承認が必要」という安全側の設定です。

権限モードは3種類あります。

繰り返しの承認(認証疲れ)を避けつつ安全性も保てる 「自動レビュー」が一番バランスが良い とされています。

インテリジェンス・モデル・速度​

• インテリジェンス(思考レベル) … 低 / 中 / 高 / 非常に高い の4段階。高いほど賢いが時間もかかる。普段は 「高」か「中」、複雑な設計時に「非常に高い」が有効
• モデル … 基本は GPT-5.5 を選んでおけばOK
• 速度 … 標準 / 高速の2種類。高速は作業が1.5倍速になる代わりに 利用制限の消費が2.5倍。レートに余裕があり速さを優先したいときだけ選ぶ

音声入力と作業場所​

• 音声入力 … チャット欄のボタンから高精度な音声入力が使える。ショートカットを設定すればCodex以外のアプリでも利用可能
• 作業場所 … 実行するプロジェクトや、 ローカル(PC) / クラウド環境 の切り替え、ブランチの切り替えが可能。クラウドやブランチを使うにはGit / GitHubの知識が必要

知っておくと便利な小技​

• ステア / キュー … AIが作業中にメッセージを送ったときの挙動を選べる。 ステア は割り込ませて現行作業に反映(成果物の途中修正に便利)、 キュー は保留して作業完了後に自動送信。デフォルトはステア
• 会話の分岐 … メッセージにホバーして表示される分岐アイコンから、特定の時点を起点に新しいセッションを作れる
• スラッシュコマンド … チャット欄で / を入力すると各種機能を呼び出せる

Codexを賢く働かせる機能​

ここからは、より高度・効率的に動かすための機能です。

プランモードとゴールモード​

• プランモード … 着手前に綿密な計画を立てる機能。プラスボタンからオンにして指示を送ると要件確認の質問が来て、回答をもとに詳細なプランを作成 → 人間がレビュー・修正できます。認識ズレを防ぎたい大きめの仕事に有効です
• ゴールモード … 設定したゴールを達成するまで 数日間でも稼働し続ける モード。Codex Features Enable コマンドで有効化し、プラスボタンから「目標を目指す」を選択。長時間タスクや、明確な終了基準があって自己検証できる仕事に向きますが、 利用制限の消費は増えやすい ので注意

メモリーとAGENTS.md​

Codexに“記憶”を持たせる方法は2系統あります。

• メモリー … 過去の作業から役立つ情報(繰り返しの手順、プロジェクトの癖、過去の落とし穴など)を 自動で記憶・持ち越す 機能。デフォルトはオフで、設定画面から有効化します。中身はユーザーが直接コントロールはできません
• AGENTS.md … プロジェクトの“取扱説明書”として ユーザーが明示的に書く ファイル。構成や必ず守ってほしい事項を記述しておきます。これはClaude CodeのSkillsで扱った「手順を明文化して読み込ませる」発想に近く、 絶対に守らせたいルールはこのファイルに書く のが定石です

コンパクション(会話履歴の要約)​

会話が長くなると、AIが一度に読めるメッセージ長の制限に当たります。これに対応するのが コンパクション です。

• 一定量を超えると 自動で要約 が走り(「コンテキストを圧縮中」と表示)、重要な情報を保ったままセッションを継続できる
• スラッシュコマンドの「圧縮」から 手動で強制実行 することも可能

サイドパネルによる作業補助​

サイドパネルは、人間がCodexの作業を理解し、自分の作業を進めるための機能群です。

• ファイル確認 / サイドチャット … プロジェクトのフォルダー・ファイルを確認でき(アプリ内では閲覧のみ・編集は不可)、内容をチャットに追加可能。メイン作業とは別に 並列でやり取りできるサイドチャット もあり、ステアで本筋を止めずに進捗確認などができます
• アプリ内ブラウザ / 注釈 … アプリ内ブラウザでサイトを開け、Codexの生成物確認や検索に使えます。ブラウザ内の要素を選んで 注釈 を付ければ、「このタイトルを小さく」のようにピンポイントで指示でき、ボタン一つでスクリーンショットも撮れます
• レビュー / ターミナル … Codexが加えた 変更点だけ を表示して箇所を指定したフィードバックができ、アプリ内のターミナルから開発サーバーの起動などのコマンド操作も可能です

能力拡張：プラグインとスキル​

Codexは、外部サービスとの連携や業務マニュアルの付与によって能力を拡張できます。

プラグイン​

外部サービス連携やアプリ連携をまとめたものが プラグイン です。アプリ左上のプラグイン一覧から選んでインストールし、チャット欄で @プラグイン名 を指定して使います。

代表的なものとして、

• Computer Use … Codexが他のデスクトップアプリを操作できる機能。自動化に強力ですが、操作権限の付与・ 機密情報の漏えい・悪意ある指示の実行といったリスクがあるため慎重に
• Remotion … プログラミングで動画を作成できるツール。スライドを元に動画を作る例が紹介されています

スキル​

スキル は、AIエージェント向けの“業務マニュアル”です。仕事の手順や品質基準を書いておくと、Codexがそれを読み込んで作業します。画像生成・スキル作成・ブラウザ操作などが標準で用意されています。

• 作成 … スキル用のディレクトリにスキルごとのフォルダーを作り、手順を書いたMarkdownを置きます。全プロジェクト共通の グローバル と プロジェクト固有 の置き場所があり、Codex自身が「スキルを作るスキル」を持っているので、フォーマットどおりに作成を依頼できます
• 利用 … 生成したスキルを読み込めば同じ手順を再現でき、スラッシュコマンドでスキル名を明示すると確実に呼び出せます

このあたりは、Claude CodeのSkillsとほぼ同じ思想で、 「人に仕事を教えるようにAIへ手順を渡す」 流れが各ツールで共通になってきているのが面白いところです。

操作の起点を増やす：自動化とモバイル​

最後に、Codexを動かす“きっかけ(トリガー)”を増やす機能です。

• オートメーション(定期実行) … 指定時刻にタスクを自動実行。たとえば「毎朝10時にAI関連ニュースを集めて楽しく読める感じでまとめて」と設定すれば、毎日その時間に収集・要約してくれます。ただし 実行時にPCとCodexアプリが起動している必要がある ため、自分が起きている・働いている時間帯にセットするのが現実的です
• Codexモバイル … スマホからPC上のCodexを操作する機能。ChatGPTアプリで同じアカウントにログイン → QRコードで認証 → PCが緑マークになれば接続完了で、外出先から画像生成などの指示をPC側で実行できます。 PCが常時稼働している前提 の機能です

外出先からPC作業を進められるのは便利な反面、digestでは「人間として大事な何かを失う可能性がある」という(半分冗談まじりの)注意喚起もありました。便利さと“常時つながり続けること”のバランスは、各自で意識しておきたいところです。

まとめ​

かつてのCodexは「コーディング性能は高いが、話し方や実行時間にクセがある」ツールでした。
それが今では弱点が大きく改善され、 画像生成・音声入力・スライド作成といった一般ユーザー向けの機能まで充実した万能AIエージェント になっています。

特に、

• レート制限が緩く ガンガン使える
• GPT Image 2 による低価格・高品質な画像生成
• プランモード / ゴールモード / スキル / プラグインといった エージェントを賢く働かせる仕組み が一通りそろっている

あたりは、Claude CodeやCopilotと並べて持っておく価値が十分にあると感じます。
ClaudeとCodexは得意分野が分かれるので、 「タスクごとに使い分ける」 のが今の正解だと思います。
弊社でも実案件で回してみて、知見がたまったらまた続報をお届けします。

こんにちは。開発二部の箕浦です。

2026年5月28日、Anthropicが Claude Opus 4.8 と同時に、Claude Codeの新機能 「Dynamic Workflows(ダイナミックワークフロー)」 を発表しました(公式ブログ)。
ひとことで言うと、 「Claude自身がオーケストレーションスクリプトを書いて、多数のサブエージェントを走らせ、結果を自己検証してから1つの答えにまとめてくれる」 という機能です。

これまでこのブログでは、Claude Code導入ガイドや仕様駆動開発(SDD)入門、Skillsでエージェントを強化するといったテーマを扱ってきましたが、Dynamic WorkflowsはまさにそれらのAIエージェント路線の最新形です。発表されたばかりで日本語の情報もまだ少ないので、現時点(2026年6月)で分かっていることを整理してみます。

なぜ「ワークフロー」が必要なのか​

Claude Codeは賢くなりましたが、それでも 「1人のエージェントが1パスで処理する」には大きすぎるタスク があります。

• サービス全体・リポジトリ全体にまたがる バグ探索 や セキュリティ監査
• 数百〜数千ファイルに触れる 大規模なマイグレーション(フレームワーク移行、API廃止対応、言語ポート)
• コミット前に あらゆる角度からストレステストしておきたい 設計や変更

こうした作業は、人間がやれば「四半期単位」の計画になることもあります。
従来のサブエージェント機能でも並列化はできましたが、 「どう分割し、どう検証し、どう統合するか」を毎回人間が組み立てる 必要がありました。Dynamic Workflowsは、その オーケストレーション(指揮)そのものをClaudeに任せてしまおう という発想です。

Dynamic Workflowsとは何か​

公式の「How it works」を要約すると、こういう流れです。

1. プロンプトを受け取ると、Claudeが 動的に計画を立て、タスクをサブタスクに分解する
2. サブタスクを 並列で動くサブエージェント群 にファンアウト(分散)する
3. 各エージェントが 独立した角度から問題に取り組み、別のエージェントがその結果を 反証(refute) しようとする
4. 答えが 収束(converge)するまで反復 する
5. 結果は統合前に検証され、利用者には 1つの整理された答え だけが返る

ポイントは、Claudeが裏側で JavaScriptのオーケストレーションスクリプトを生成 し、ランタイムがそれを実行するという仕組みです。
調整(コーディネーション)が会話の外側で行われるため、タスクがどれだけ大きくなっても 計画が脱線しにくい という特徴があります。

なお、エージェントの規模には公式ドキュメントで上限が決められています。
同時に走るのは最大16エージェント(CPUコアが少ないマシンではさらに少なくなります)で、 1回の実行で生成できるエージェントは累計最大1,000 までです。後者は暴走ループを防ぐためのストッパーという位置づけです。

さらに、 途中経過が保存される ので、停止しても完了済みのエージェントはキャッシュ結果を返し、残りだけを実行する レジューム(再開) が可能です。
ただし再開できるのは 同一のClaude Codeセッション内に限られ、Claude Codeを一度終了するとワークフローは次回最初からやり直しになる点には注意が必要です。数時間〜数日に及ぶ長時間タスクを想定した設計です。

従来の「サブエージェント」や「Skills」との違い​

過去記事を読んでくださった方向けに、立ち位置を整理します。

CyberAgentのエンジニアの方も公式ブログで 「単一サブエージェントを撃つことと、本格的なエージェントチームを組むことの“あいだ”を埋めてくれる」 とコメントしていて、この表現が立ち位置をうまく言い当てていると思います。

使い方​

対象プランと提供形態​

現時点では リサーチプレビュー として、Claude Code CLI・デスクトップアプリ・IDE拡張・非対話モード(claude -p)・Agent SDKで利用できます。
利用には Claude Code v2.1.154 以降 が必要です。

• 全有料プランで利用可能。ただし Proプランはデフォルト無効 で、/config の「Dynamic workflows」行から自分でオンにします
• 組織(Enterprise等) では管理者がマネージド設定で組織全体のオン/オフを制御できます
• Claude API / Amazon Bedrock / Google Cloud Vertex AI / Microsoft Foundry でも利用可能

起動方法​

公式は auto modeをオンにした状態での利用を推奨 しています。その上で、起動方法は2通りです。

1. Claudeに直接ワークフローを作るよう頼む(例: 「Create a workflow」「ワークフローを作って」)
2. ultracode という新設定をオンにする ─ effort(努力度)メニューからアクセスでき、effortレベルを xhigh に設定しつつ、 ワークフローを使うかどうかはClaudeが自動判断 してくれます

初めてワークフローがトリガーされるときは、Claudeが 「これから何を実行するか」を提示して確認を求めてくれます。いきなり大量のエージェントが暴走することはありません。

ワークフローが起動中は、/workflows コマンドを実行すると
以下のように起動中のエージェントがいくつ立ち上がって、それぞれのエージェントが何をしているかが確認可能です。

ユースケース​

公式やアーリーアクセスのユーザーが挙げている使いどころです。

• コードベース全体のバグ探索 / 最適化監査 / セキュリティ監査
  並列で探索した上で、 個々の発見を独立に再検証 するため、レポートに上がるのは“本物の問題”だけになります。認証チェック・入力バリデーション・危険なパターンの洗い出しといったハードニング作業にも同じ形が使えます。
• 大規模なマイグレーション / モダナイゼーション
  フレームワーク移行、API廃止対応、言語ポートなど、数千ファイルにまたがる作業をエンドツーエンドで。
• 二重チェックが必要なクリティカルな作業
  間違いのコストが高い場面で、Claudeに 独立した複数の試行 をさせ、 敵対的(adversarial)なエージェント に結果を壊しにかからせてから人間が確認できます。

実際、Klarnaのエンジニアリングマネージャーは 「デッドコードの特定や、静的解析では見つからなかったクリーンアップ箇所の洗い出しに効いた」 とコメントしています。

圧巻の実例: Bunを Zig → Rust に移植​

インパクトが大きい事例として、ランタイム Bun の言語移植が紹介されています。

Jarred Sumner氏がDynamic Workflowsを使って、BunをZigからRustへ移植したというものです。

• 既存テストスイートの 99.8% がパス
• 約75万行のRustコード
• 最初のコミットからマージまで わずか11日

流れもエージェント的で、

1. あるワークフローがZigコードの全構造体フィールドに対して 正しいRustのライフタイムをマッピング
2. 次のワークフローが各 .zig を 挙動が同一な .rs に移植(数百のエージェントが並列で動き、各ファイルにレビュアーが2人)
3. ビルドとテストが通るまで回し続ける fixループ
4. 移植後、 夜間のワークフロー が不要なデータコピーを直し、それぞれPRを起票

…という、まさに「四半期仕事が数日で終わる」を体現した事例になっています(※本番投入はこれからとのこと)。

試すときの注意点​

実際に使ってみる前に、押さえておきたい点です。

1. トークン消費が桁違いに増える
   公式が繰り返し警告しているとおり、Dynamic Workflowsは 通常のClaude Codeセッションよりも大幅にトークンを消費 します。いきなり巨大タスクで回すのではなく、 スコープを絞った小さなタスク で使用感を確かめるのが推奨です。
2. リサーチプレビュー段階である
   仕様や挙動は今後変わる可能性があります。社内の標準フローに組み込むのは、もう少し成熟を待ってからが安全でしょう。
3. Enterpriseはデフォルト無効
   組織で使う場合は管理者による有効化が必要です。逆に、管理設定でワークフローを 明示的に無効化 することもできます。

まとめ​

Dynamic Workflowsは、AIコーディングの主役を 「AIにコードを書いてもらう」から「AIエージェント群の指揮系統ごとAIに任せる」 へと一段押し進める機能だと感じます。
前回のSDDの記事で引用したKarpathyの "The programmer is increasingly not just a code writer, but an orchestrator of agents." という言葉が、いよいよ製品機能として降りてきた、という印象です。

とはいえ現状はリサーチプレビューで、トークンコストも相応にかかります。
まずは ultracode をオンにして、コードベースのちょっとしたバグ探索や監査 あたりの“小さく試せるタスク”から触ってみるのが良さそうです。
弊社でも実案件で回してみて、また知見がたまったら続報をお届けしようと思います。

1部3課 福永です。

私の担当している作業では、周辺機器と通信するプログラムを作成することが多くあります。
しかし、周辺機器ごとに通信仕様が異なるため、毎回仕様を確認しながら個別に対応する必要があります。
似たような仕様のコードをネットで検索しても、なかなか見つからなかったり、見つかっても不要なコードが多く含まれていて、修正に手間がかかることがよくあります。
そこで、ある程度の仕様を自分で整理し、それをもとにCopilotにコードを作成させてみるのはどうか？と考え、実際に試してみました。

Copilotとは？​

Copilotは、Microsoftが提供するAIアシスタントで、高度なAI技術を活用し、情報検索、文章作成、画像生成、データ分析など、さまざまな作業をサポートします。
Windows 11には標準で搭載されており、インストール不要ですぐに利用できます。

仕様を纏める​

Copilotに正確なコードを生成してもらうためには、あらかじめ仕様を整理しておくことが重要です。
今回は「ソケット通信」を行うプログラムを、C# 4.8で作成することを想定しています。
なお、通信方式や使用言語を変更するだけで、他の環境にも柔軟に対応できる構成にすることが可能です。

今回の使用は以下にします
後で気づいたのですが、いくつか間違えがありますがCopilotがうまく処理をしてくれている箇所もあります。

「ソケット通信」を行うプログラム

• .Net4.8のC#で作成

• ServerとClientを作成

• コメントやログメッセージ等は英語で明記

• ServerとClient通信

  • ① Address:127.0.0.1
  • ② Port:50001

• 通信情報

  • ① リクエスト
    • リクエストはClient➡Serverへの送信データで128Byte
      内訳は以下
      • SeqNo:4Byte
      • Cmd:4Byte
      • ReqData:64Byte
      • Reserved:上記の余りByte
  • ② レスポンス
    • レスポンスはServer➡Clientへの返信データで128Byte
      内訳は以下
      • SeqNo:4Byte
      • Cmd:4Byte
      • Result:4Byte
      • ResData:64Byte
      • Reserved:上記の余りByte

• Server要望

  • ① 接続待ちをしてClientからリクエスト受信する
  • ② 受信した命令で各命令の処理へ遷移
  • ③ Clientへレスポンスを返す。
    レスポンス内容は以下
    • (ア) SeqNo:リクエストのSeqNoを設定
    • (イ) Cmd:リクエストのCmdを設定
    • (ウ) Result:Result一覧のOKを設定
    • (エ) ResData:とりあえず全て”0”
  • ④ 受信ループはExitフラグで抜けれるように設定。Exitフラグは別のスレッドなどから制御
  • ⑤ 各命令の処理は命令一覧のメソッドが用意され受信時に呼ばれる
  • ⑥ 命令一覧のメソッドはDictionaryでCmd,メソッドが用意され、受信時に検索して呼ばれる

• Client要望

  • ① 各命令Methodが呼び出されるとServerへリクエスト送信
  • ② Serverへリクエスト送信は各命令の処理で設定
    リクエスト内容
    • (ア) SeqNo:グローバルにあるSeqNoを加算して設定
    • (イ) Cmd:各命令を設定
    • (ウ) ReqData:とりあえず全て”0”
  • ③ レスポンス受信時はリクエストしたSeqNoとレスポンスのSeqNoを比較して異なる場合はエラー
  • ④ 各命令の処理は命令一覧のメソッドが用意され、この処理を呼ぶとリクエスト要求される
  • ⑤ 命令一覧のメソッドはDictionaryでCmd,メソッドが用意され、受信時に検索して呼ばれる

• 命令一覧

  • ① リクエスト/レスポンスの命令は以下が用意される。命令はConst Classで定義される
    • Start:"0001" 測定開始
    • GetValue:"0002" 現在の測定値を取得
    • End:"0003" 測定終了
  • ② 各命令Methodは命令一覧にある命令がServer/Clientに対し全て用意される

• Result一覧

  • ① ResultはConst Classで定義される
    • OK:”0000”
    • NG:”0000”

Spec in, code out!​

Copilotにコード生成を依頼する際は、以下の手順で進めます。

まず、Copilotに次のように入力します。
「Socket通信の雛形を以下の要件で作成してもらえますでしょうか？」
この文の直後に、整理した仕様をそのまま貼り付けます。

一旦テキストエディタに貼り付けて送るのが良いかもしれませんね。

入力後、数十秒かからずコードが生成されます。

Check the code​

Copilotが指定通りC#でコードを生成してくれました。
では、見てみましょう！

C#でコードを生成し、コメントも指定通り英語表記になっています。

Common​

まずは結果報告があるようです。仕様の概要を明記してくれています。

その後に共通個所となりえるCommand/Result/ Messageクラスを纏めて返してくれています。

• 命令一覧：Command constants/ Result一覧：Result constants/通信情報のリクエスト：Request message/通信情報のレスポンスResponse messageがほぼ仕様書通りに作成してくれています。命令一覧でも、Server/Clientに対しての命令は共通でないと判断したのかここでは書かれておりません。 仕様書では、NG:”0000”と間違えて明記していたのですが、”9999”にしてくれています。
• Byte変換等も考慮してくれています。ありがたいです。

using System;
using System.Net;
using System.Net.Sockets;
using System.Text;
using System.Collections.Generic;

namespace SocketSample
{
	// Command constants
	public static class Commands
	{
		public const string Start = "0001";
		public const string GetValue = "0002";
		public const string End = "0003";
	}

	// Result constants
	public static class Results
	{
		public const string OK = "0000";
		public const string NG = "9999";
	}

	// Request message (128 bytes)
	public class RequestMessage
	{
		public string SeqNo { get; set; } = "0000";
		public string Cmd { get; set; } = "0000";
		public string ReqData { get; set; } = new string('0', 64);
		public string Reserved { get; set; } = new string('0', 56); // 128 - (4+4+64)

		public byte[] ToBytes()
		{
			string msg = SeqNo + Cmd + ReqData + Reserved;
			return Encoding.ASCII.GetBytes(msg.PadRight(128, '0'));
		}

		public static RequestMessage FromBytes(byte[] data)
		{
			string msg = Encoding.ASCII.GetString(data);
			return new RequestMessage
			{
				SeqNo = msg.Substring(0, 4),
				Cmd = msg.Substring(4, 4),
				ReqData = msg.Substring(8, 64),
				Reserved = msg.Substring(72, 56)
			};
		}
	}

		public static RequestMessage FromBytes(byte[] data)
		{
			string msg = Encoding.ASCII.GetString(data);
			return new RequestMessage
			{
				SeqNo = msg.Substring(0, 4),
				Cmd = msg.Substring(4, 4),
				ReqData = msg.Substring(8, 64),
				Reserved = msg.Substring(72, 56)
			};
		}
	}

	// Response message (128 bytes)
	public class ResponseMessage
	{
		public string SeqNo { get; set; } = "0000";
		public string Cmd { get; set; } = "0000";
		public string Result { get; set; } = Results.OK;
		public string ResData { get; set; } = new string('0', 64);
		public string Reserved { get; set; } = new string('0', 56);

		public byte[] ToBytes()
		{
			string msg = SeqNo + Cmd + Result + ResData + Reserved;
			return Encoding.ASCII.GetBytes(msg.PadRight(128, '0'));
		}

		public static ResponseMessage FromBytes(byte[] data)
		{
			string msg = Encoding.ASCII.GetString(data);
			return new ResponseMessage
			{
				SeqNo = msg.Substring(0, 4),
				Cmd = msg.Substring(4, 4),
				Result = msg.Substring(8, 4),
				ResData = msg.Substring(12, 64),
				Reserved = msg.Substring(76, 52)
			};
		}
	}
}

Server​

次にServerクラスを返してくれています。 指定していなくても、Server/Clientと共通箇所を判断して分けてくれています。

• 指定したAddressとPortを使用し受信処理を行い、受信ループはExitフラグで抜けるように作成されています。
• 各命令用のメソッドとDictionaryでCmd, 各命令用のメソッドが用意され、受信時に検索して呼ばれています。
• 呼び出し後にClientへレスポンスを返す要件を代入して返しています。

using System;
using System.Net;
using System.Net.Sockets;
using System.Text;
using System.Threading;
using System.Collections.Generic;

namespace SocketSample
{
	public class Server
	{
		private TcpListener listener;
		private bool exitFlag = false;

		// Command dictionary
		private Dictionary<string, Action<RequestMessage>> commandHandlers;

		public Server()
		{
			commandHandlers = new Dictionary<string, Action<RequestMessage>>
			{
				{ Commands.Start, HandleStart },
				{ Commands.GetValue, HandleGetValue },
				{ Commands.End, HandleEnd }
			};
		}

		public void StartServer()
		{
			listener = new TcpListener(IPAddress.Parse("127.0.0.1"), 50001);
			listener.Start();
			Console.WriteLine("Server started. Waiting for connection...");

			while (!exitFlag)
			{
				if (!listener.Pending())
				{
					Thread.Sleep(100);
					continue;
				}

				TcpClient client = listener.AcceptTcpClient();
				Console.WriteLine("Client connected.");

				NetworkStream stream = client.GetStream();
				byte[] buffer = new byte[128];

				while (!exitFlag)
				{
					int read = stream.Read(buffer, 0, buffer.Length);
					if (read == 0) break;

					RequestMessage req = RequestMessage.FromBytes(buffer);
					Console.WriteLine($"Received Cmd={req.Cmd}, SeqNo={req.SeqNo}");

					// Call handler
					if (commandHandlers.ContainsKey(req.Cmd))
						commandHandlers[req.Cmd](req);

					// Build response
					ResponseMessage res = new ResponseMessage
					{
						SeqNo = req.SeqNo,
						Cmd = req.Cmd,
						Result = Results.OK,
						ResData = new string('0', 64)
					};

					stream.Write(res.ToBytes(), 0, 128);
					Console.WriteLine("Response sent.");
				}

				client.Close();
			}

			listener.Stop();
			Console.WriteLine("Server stopped.");
		}

	// Command handlers
	private void HandleStart(RequestMessage req) => Console.WriteLine("Start command executed.");
	private void HandleGetValue(RequestMessage req) => Console.WriteLine("GetValue command executed.");
	private void HandleEnd(RequestMessage req) => Console.WriteLine("End command executed.");
	public void StopServer() => exitFlag = true;
	}
}

Client​

次にClientクラスを返してくれています。

• 指定したAddressとPortを使用し送信処理を行うように作成されています。
• レスポンス受信時にリクエストしたSeqNoとレスポンスSeqNoの比較を行いエラーチェックを行ってくれています。
• リクエスト要求用の各命令用のメソッドがあります。
• DictionaryでCmd, 各命令用のメソッドが用意されています。Response受信後に検索して呼ばれるように想像していたのですが、“受信時に検索して呼ばれる“ が良くなかったのか、リクエストメソッドを指定しており宣言のみになっています。こういう場合は、引き続き “commandMethods のメソッドは各命令のResponse受信後処理用を用意し、ClientのResponse受信後にcommandMethodsのメソッドが呼ばれるように変更して！” とCopilotに明記すると変更してくれると思います。

using System;
using System.Net.Sockets;
using System.Text;
using System.Collections.Generic;

namespace SocketSample
{
	public class Client
	{
		private TcpClient client;
		private NetworkStream stream;
		private int globalSeqNo = 0;

		private Dictionary<string, Action> commandMethods;

		public Client()
		{
			commandMethods = new Dictionary<string, Action>
			{
				{ Commands.Start, Start },
				{ Commands.GetValue, GetValue },
				{ Commands.End, End }
			};
		}

		public void Connect()
		{
			client = new TcpClient("127.0.0.1", 50001);
			stream = client.GetStream();
			Console.WriteLine("Connected to server.");
		}
		private void SendRequest(string cmd)
		{
			globalSeqNo++;
			RequestMessage req = new RequestMessage
			{
				SeqNo = globalSeqNo.ToString("D4"),
				Cmd = cmd,
				ReqData = new string('0', 64)
			};

			stream.Write(req.ToBytes(), 0, 128);
			Console.WriteLine($"Request sent. Cmd={cmd}, SeqNo={req.SeqNo}");

			byte[] buffer = new byte[128];
			int read = stream.Read(buffer, 0, buffer.Length);

			ResponseMessage res = ResponseMessage.FromBytes(buffer);
			if (res.SeqNo != req.SeqNo)
				Console.WriteLine("Error: SeqNo mismatch!");
			else
				Console.WriteLine($"Response OK. Cmd={res.Cmd}, SeqNo={res.SeqNo}");
		}

		// Command methods
		public void Start() => SendRequest(Commands.Start);
		public void GetValue() => SendRequest(Commands.GetValue);
		public void End() => SendRequest(Commands.End);

		public void Close()
		{
			stream.Close();
			client.Close();
		}
	}
}

How to use​

さて、上記のクラスがCopilotで生成されました。
生成されるだけでなく、使用方法も教えてくれます。
“上記を元に色々機能を追加しますよ！”みたいな提案もしてくれます。今回はStart/GetValue/Endの命令の為、測定器と判断したのでしょうか、測定値を入れる提案をしてくています。

まとめ​

結構使えるかなと思います。

今回は「ソケット通信」を行うプログラムを作成対象にしましたが、簡単な雛形や汎用クラスなどを作成、複数のクラスを指定し共通化できる箇所を見つけてもらったりする時等にも有効と思います。

難しい雛形を作成するより、初めに仕様を複雑にせず、“ソケット通信のServerとClientをC#で！“と明記して大まかな雛形を作成してもらい、仕様を徐々に明記していく手順もあります。

使用していて以下の問題がありましたので、気を付ける必要があります。

• 貼り付けるごとに違う結果が返ることもあります。
• 書き方が悪かったりすると判断されていないのか仕様が反映されません。

Bonus Track​

Copilotでが出力を覚えていますので、上記の後、”上記のServer/Clientのフローをシーケンス図 (Markdown + Mermaid) で明記してもらえますか？” と入力するとシーケンス図 (Markdown + Mermaid) を作成してくれます。
同様にフロー等も作成可能です。

どの様の動作をするか、視覚的に確認できるのは便利です。

こんにちは。開発二部の箕浦です。

2025年は「vibe coding(雰囲気でAIに書かせる)」が流行語のように使われた1年でした。
ところが2026年に入ってからは、その揺り戻しのように 「仕様駆動開発(Spec-Driven Development、以下SDD)」 という言葉を頻繁に見るようになっています。

GitHub・AWS・Anthropic・Cursorなど大手プレイヤーが揃って「仕様を先に書く」流儀のツールを出してきており、社内でも一度整理しておく価値があると思ったので、代表的な3ツールを比較してみます。

そもそも「仕様駆動開発」とは​

実は「Spec-Driven Development」という言葉自体は新しくありません。
2010年代にはAPI開発の文脈で、OpenAPI/Swaggerを先に書いてからコードを生成する Design-First / Contract-First のことを指していました。

ところが2025年以降の使われ方はこれと少し違います。
AIコーディングの文脈では、SDDは

自然言語で書いた 「要件 → 設計 → タスク」という仕様 をsource of truthとして扱い、コードはそこから派生的に生成・検証されるもの

として再定義されています。

GitHubのSpec Kit公式ドキュメント(spec-driven.md)の表現はかなりドラスティックで、

Spec-Driven Development (SDD) inverts this power structure. Specifications don't serve code—code serves specifications.

と書かれています。「コードが正、仕様は付属物」だった関係を逆転させようというわけです。

背景にあるのはやはりvibe codingの限界です。
LLMに「いい感じに作って」と頼むと、小さなプロトタイプは秒で動くのに、いざ本番投入しようとするとコンテキスト不足で破綻したり、後から要件を聞かれて困ったり、という経験はみなさんもあるはずです。
そこで 「仕様を先に明文化し、AIにはその仕様に従って書かせる」 というスタイルが見直されている、というのが大筋の流れです。

代表ツール3本を比較する​

1. GitHub Spec Kit ─ OSSの“型”を提供するツールキット​

2025年9月にGitHubがOSSとして公開したのが github/spec-kit です。
CLI(Specify)とテンプレート群からなり、Claude Code / Cursor CLI / Gemini CLI / Codex CLI など30以上のAIコーディングエージェントから利用できます。

ワークフローはスラッシュコマンドで段階的に進める形式で、現行版は概ね次の流れになっています。

/speckit.constitution  ← プロジェクト憲法(非交渉な原則)
   ↓
/speckit.specify       ← 要件(What/Whyのみ。技術スタックは書かない)
   ↓
/speckit.clarify       ← 曖昧点を質問形式で洗い出し
   ↓
/speckit.plan          ← 設計・データモデル・契約・research を一括生成
   ↓
/speckit.tasks         ← ユーザーストーリー単位のタスク分解
   ↓
/speckit.analyze       ← 整合性チェック
   ↓
/speckit.implement     ← 実装

「何でも乗せるFW」ではなく、 仕様ドキュメントの構造とフローだけ規定して、AIエージェントは自由に選ばせる のがSpec Kitの設計思想です。手元のClaude Code等にそのまま被せて使える点で導入コストが低いのが強みです。

2. AWS Kiro ─ SDDをコア体験に据えたIDE​

Kiro はAWSが2025年7月にpreview公開、2025年11月17日にGA した agentic IDE です。VS Code(Code-OSS)ベースで、バックエンドはAmazon Bedrock経由でClaude Sonnet系などを利用しています。

機能を1コマンドで立ち上げると、Kiroは以下3ファイルを自動生成します。

• requirements.md ─ ユーザーストーリー + 受け入れ条件を EARS記法 で記述
• design.md ─ アーキテクチャ、シーケンス図、データフロー
• tasks.md ─ 連番付きの実装タスクチェックリスト

公式トップの一文がコンセプトをよく表しています。

Bring engineering rigor to agentic development.

vibe codingとの対比も明確で、Introducing Kiroブログには

Kiro is great at 'vibe coding' but goes way beyond that—Kiro's strength is getting those prototypes into production systems with features such as specs and hooks.

とあります。「vibe codingの楽しさは残しつつ、specs と hooks で本番投入できる強度を持たせる」という立て付けです。
半面、クレジット課金($20/月のProプランで1,000クレジット〜)なので、長時間の試行錯誤にはコスト感の見極めが必要になります。

3. Claude Code(Plan Mode + Skills)─ いま手元にあるもので“軽量SDD”​

専用ツールを入れなくても、Claude Codeの Plan Mode だけでSDD的な使い方は始められます。

Shift + Tab を2回押すか /plan を打つと、Claudeはファイル変更や実行を行わない read-only モードに入り、コードベースを読み込んだ上で構造化された計画を出力します。
これを人間がレビュー・修正してから実装フェーズに移れる、というシンプルな仕掛けです。

さらに2025年10月に登場した Skills (SKILL.md を持つ再利用可能な手順書) を組み合わせれば、「ブレストする」「仕様を書く」「実装する」といった工程をスキルとして固定化できます。
実際このブログ記事も、brainstorming スキルで要件整理 → 3つの調査エージェントを並列で走らせる、というSDD的な流れで書きました。

Spec KitとClaude Codeは併用も普通にできるので、 「まずはClaude CodeのPlan Modeで肌感をつかみ、本格運用ではSpec KitかKiroを選ぶ」 という入り方が現実的だと思います。

実務で取り入れるときの勘所​

1. すべての変更にSDDを被せない ─ ちょっとした修正にまでconstitution→specify→…をやると、HackerNewsで議論された「Waterfallの逆襲」になります。粒度の大きい新機能や、後で他人が読む必要のある変更にだけ適用するのが現実的です。
2. 仕様の解像度を上げるのは人間の仕事 ─ SDDツールは仕様を「書いてくれる」ように見えますが、本質は エンジニア側が要件を言語化する補助 です。ぼんやりした要件を投げると、出てくる仕様もぼんやりします。
3. ツール選定を急がない ─ Spec Kitは無料で軽量、KiroはIDE体験まで揃った代わりに課金、Claude Codeは既存の延長線。プロジェクト規模とチーム構成で選び分ければOKです。

まとめ​

AIコーディングの主役は、いつのまにか「AIにコードを書いてもらう」から 「AIエージェント群に何をさせるかを人間が仕様で指示する」 へと変わりつつあります。
Andrej Karpathyが2026年のSequoia Ascent talkで語った "The programmer is increasingly not just a code writer, but an orchestrator of agents." という表現が、今のリアルな手触りに近いと感じます。

すべてをSDDに振り切る必要はありませんが、 「コードの前に仕様を書く」 という基本動作は、これから数年のスタンダードになっていきそうです。
まずはお使いのClaude CodeのPlan Modeから、軽く試してみてはいかがでしょうか。

こんにちは、箕浦です。

「このファイルをリファクタリングして」と伝えたら、関連ファイルを探し、コードを書き換え、テストを通すところまで勝手にやってくれる
それがAnthropicの自律型AIコーディングエージェント 「Claude Code」 です。

この記事では、導入手順から普段の使い方、知っておくと得する活用テクニックまで、2026年4月時点の情報をもとにまとめました。

第一章：Claude Codeとは？​

概要​

Claude Codeは、Anthropicが公開した 自律型のAIコーディングエージェント です。
コンピュータ上で直接コードを書き、実行し、デバッグまでこなします。

これまでのAIチャット（ChatGPTやGeminiなど）は「コードを生成して画面に表示する」だけで、コピー＆ペーストや実行はユーザー自身が行う必要がありました。
Claude Codeはそこから一歩踏み込み、ファイルの作成・編集・削除、ターミナルコマンドの実行、Gitの操作などを自律的に行います。

他のAIコーディングツールとの違い​

「GitHub Copilotやカーソル（Cursor）と何が違うの？」という疑問を持つ方も多いと思います。
主要ツールとの違いを表にまとめました。

最大の違いは 自律性の高さ です。
Claude Codeは「ここを直して」と伝えるだけで、関連するファイルを自分で探し、修正し、テストを実行して結果を確認するところまで一気に実行します。

料金プラン​

Claude Codeの利用には、以下のいずれかのプランが必要です（2026年4月時点）。

気軽に試す場合はProプラン、本格的に開発に組み込む場合はMaxプランまたはAPI利用がおすすめです。

第二章：Claude Codeの導入とインターフェース​

Claude Codeを利用するためのインターフェースは主に5つあります。
それぞれの導入手順と特徴を詳しく見ていきましょう。

1. CLI（コマンドラインインターフェース）​

全機能が使えて、CI/CDへの組み込みにも対応できる、一番柔軟な使い方です。

動作要件​

• OS: macOS / Linux / Windows（Git for Windowsが必要）
• Anthropicアカウント: Pro以上のプラン、またはAPIキー

インストール手順​

macOS / Linux / WSLの場合：

# 1. ネイティブインストーラーでインストール（推奨）
curl -fsSL https://claude.ai/install.sh | bash

# 2. プロジェクトディレクトリに移動
cd /path/to/your/project

# 3. Claude Codeを起動
claude

Windows PowerShellの場合：

# 1. ネイティブインストーラーでインストール
irm https://claude.ai/install.ps1 | iex

# 2. プロジェクトディレクトリに移動
cd C:\path\to\your\project

# 3. Claude Codeを起動
claude

ネイティブインストーラーを使うと、バックグラウンドで自動アップデートが行われるため、常に最新版を利用できます。

初回起動時にブラウザが開き、Anthropicアカウントでの認証が求められます。
認証が完了すると、ターミナル上で対話的にClaude Codeを利用できるようになります。

CLIの特徴​

• Claude Codeの 全機能にアクセス可能
• ローカルファイルの直接操作に最適
• パイプやリダイレクトなど、シェルとの連携が可能
• claude -p "質問" のようにワンショットで実行することも可能

2. デスクトップアプリ​

Claudeの公式デスクトップアプリ（macOS / Windows対応）内で利用できるモードです。

利用手順​

1. claude.ai からデスクトップアプリをダウンロード
2. アプリを起動し、ログイン
3. チャット画面の入力欄にある 「コード」ボタン をクリック
4. Claude Codeモードに切り替わる

デスクトップアプリの特徴​

• CLIよりも 視覚的で直感的 なインターフェース
• チャット形式で自然言語による指示が可能
• ファイルのドラッグ＆ドロップに対応
• ターミナル操作に慣れていなくても、チャット感覚で始められる

3. Webブラウザ​

ブラウザ版Claude（claude.ai）からもClaude Codeにアクセス可能です。

Webブラウザ版の特徴​

• GitHubリポジトリとの連携 が前提となる
• クラウド上の仮想環境（サンドボックス）で作業が実行される
• ローカル環境を汚さずに試せるので、まず雰囲気を見たい方にちょうどいい
• ただし、ローカルファイルへの直接アクセスは不可

4. VS Code拡張機能​

VS Code内でネイティブなGUIパネルとしてClaude Codeを利用できる 推奨インターフェース です。

インストール手順​

1. VS Code 1.98.0以上を用意
2. 拡張機能マーケットプレイスで「Claude Code」を検索してインストール
3. Sparkアイコン（✱）をクリックしてClaude Codeパネルを開く

VS Code拡張の特徴​

• インラインdiff表示 でコード変更を視覚的にレビュー
• @ファイル名 でファイルや選択範囲を直接参照
• 複数タブ・複数ウィンドウで並列会話が可能
• CLI機能への統合ターミナルからのアクセスも可能

5. JetBrains IDEプラグイン​

IntelliJ IDEA、PyCharm、WebStormなど主要なJetBrains IDEで利用可能なプラグインです。

インストール手順​

1. Settings → Plugins から「Claude Code」を検索してインストール
2. IDEを再起動
3. 統合ターミナルで claude を実行

JetBrains版の特徴​

• IDEのdiffビューアでコード変更を表示
• 選択中のコードやエディタのコンテキストを自動共有
• IDE内の診断エラー（lint、構文エラー等）を自動共有

インターフェース選択のガイド​

第三章：Claude Codeの基本機能​

1. コンテキストウィンドウの管理​

Claude Codeを使いこなす上で 一番差がつくの がコンテキストウィンドウ（≒記憶容量）の管理です。

コンテキストウィンドウとは？​

AIモデルが一度に参照できる情報量の上限のことです。
Claude Codeでは作業中に以下の情報がコンテキストに蓄積されます。

• ユーザーとの会話履歴
• 読み込んだファイルの内容
• 実行したコマンドの結果
• AIが生成したコードや思考プロセス

この容量が上限に近づくと、古い情報が参照できなくなったり、回答の精度が低下します。

コンテキストを溢れさせないコツ​

1. タスク単位で/clearする: 1つの作業が完了したら会話をリセット
2. /compactで圧縮する: 途中経過は不要だが結論は保持したい場合に使用
3. 巨大なファイルを丸ごと読ませない: 必要な部分だけを指定して読み込ませる
4. 複雑なタスクは分割する: 1回のセッションで1つの明確な目標を設定

2. 基本的な操作と「Planモード」​

通常モードと Planモードの切り替え​

Claude Codeにはパーミッションモードという仕組みがあり、AIの自律度を段階的に制御できます。

Shift + Tab キーを押すと、有効化されているモードを順番に巡回します。

上記4モードの他に、CI/CD向けで許可済みツールのみ実行する dontAsk モードと、サンドボックス環境専用の bypassPermissions モードも存在します。

Planモードが有効なケース​

• 複数ファイルにまたがる大規模な変更
• アーキテクチャの設計判断が必要な作業
• 失敗するとリカバリが大変な操作（データベースのマイグレーション等）

実践例：Planモードの活用​

# Planモードで指示を出す例
> [Plan] React + TypeScriptで、ユーザーのTODOリストを管理するアプリを作ってください。
> 要件：
> - TODOの追加・削除・完了切り替えができること
> - ローカルストレージに保存すること
> - Tailwind CSSでスタイリングすること

Planモードでは、Claude Codeが以下のような計画を提示します。

計画:
1. プロジェクトの初期セットアップ（Vite + React + TypeScript）
2. Tailwind CSSの設定
3. TODOの型定義を作成
4. useLocalStorageカスタムフックを実装
5. TodoItemコンポーネントを作成
6. TodoListコンポーネントを作成
7. Appコンポーネントに統合
8. 動作確認

この計画でよろしいですか？

ユーザーが「OK」と返すと、計画に沿って順番に実装を進めます。

3. スラッシュコマンド一覧​

/ から始まるコマンドで様々な操作が可能です。
主要なコマンドをカテゴリ別にまとめました。

セッション管理​

情報・設定​

ファイル・コード操作​

4. CLAUDE.md（指示書ファイル）​

CLAUDE.mdは、プロジェクトごとのルールやコーディング規約、ユーザーの好みをAIに伝えるための 設定ファイル です。

CLAUDE.mdの配置場所と優先順位​

CLAUDE.mdは複数の場所に配置でき、すべてが読み込まれます。

CLAUDE.mdの記述例​

# プロジェクトルール

## コーディング規約

- TypeScriptを使用し、`any`型の使用を禁止する
- 関数コンポーネントとhooksパターンを使用する
- テストは必ずVitest + Testing Libraryで書く

## コミットメッセージ

- Conventional Commitsの形式に従う
- 日本語で記述する

## プロジェクト構成

- src/components: UIコンポーネント
- src/hooks: カスタムフック
- src/utils: ユーティリティ関数
- src/types: 型定義

## 注意事項

- 回答は必ず日本語で行うこと
- 既存のコードスタイルを尊重すること

/init コマンドを実行すると、Claude Codeがプロジェクトの構成を分析し、適切なCLAUDE.mdを自動生成してくれます。

5. 5つの主要拡張機能​

Claude Codeには機能を広げる5つの仕組みがあります。それぞれ見ていきましょう。

(1) MCP（Model Context Protocol）​

外部ツールやサービスとClaude Codeを連携 させるためのプロトコルです。

具体的な連携例：

• GitHub MCP: Issue・PRの作成、レビューコメントの投稿
• データベースMCP: PostgreSQLやMongoDBのクエリ実行
• Slack MCP: チャンネルへのメッセージ送信
• ブラウザMCP: Webページの取得・スクレイピング
• AWS MCP: AWSドキュメントの参照

MCPを設定することで、Claude Codeが 開発に必要な外部サービスに直接アクセス できるようになります。

(2) Skills​

Skillsは、特定のタスクに関する 詳細な手順書・マニュアル をClaude Codeに読み込ませる仕組みです。

例えば：

• UIデザインのガイドライン
• テストの書き方のベストプラクティス
• コードレビューのチェックリスト

SKILL.md というファイルに手順を記述し、特定のタスクが要求されたときに自動で読み込まれるよう設定できます。

(3) Hooks​

Hooksは、Claude Codeの特定のイベントに対して 自動で実行される処理 を定義する仕組みです。 現在20以上のフックイベントが用意されています。主要なものを紹介します。

例：タスク完了時に通知音を鳴らす設定

{
  "hooks": {
    "Notification": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "afplay /System/Library/Sounds/Glass.aiff"
          }
        ]
      }
    ]
  }
}

(4) Subagent​

Subagentは、メインのClaude Codeセッションから 特定のタスクに特化した子AI を呼び出す仕組みです。

• 大量のコード検索を並列で行う
• 独立したリサーチタスクを委託する
• 複雑な作業を分割して効率化する

メインのコンテキストを汚さずに別タスクを実行できるのが便利な点です。

(5) Plugins​

Pluginsは、上記のMCP・Skills・Hooksなどを 1つのパッケージにまとめて配布 する仕組みです。
チームや組織で共通の設定を簡単に共有できます。

第四章：実践テクニック​

1. 効果的なプロンプトの書き方​

Claude Codeへの指示は、具体的に書くほど意図どおりの結果になります。

悪い例：

ログイン機能を作って

良い例：

Next.js App Routerでメールアドレスとパスワードによるログイン機能を実装してください。
- 認証にはNextAuth.jsを使用
- バリデーションはzodで行う
- エラーメッセージは日本語で表示
- ログイン成功後は/dashboardにリダイレクト

2. タスクの分割戦略​

大きな機能を一度に依頼するより、小さなタスクに分割して段階的に進める ほうがうまくいきます。

Step 1: データベースのスキーマ定義 → /clear
Step 2: APIエンドポイントの実装 → /clear
Step 3: フロントエンドのUI実装 → /clear
Step 4: テストの追加 → /clear
Step 5: 統合テストとバグ修正

各ステップの完了後に /clear でコンテキストをリセットし、次のステップに集中させます。

3. よくあるトラブルと対処法​

まとめ​

Claude Codeは更新ペースが速く、頻繁に新機能が追加されています。
この記事で紹介した内容をまとめると：

• Claude Codeとは: ファイル操作やコマンド実行まで自律的に行うAIコーディングエージェント
• 5つの利用方法: CLI、VS Code、JetBrains、デスクトップアプリ、Webブラウザ
• コンテキスト管理が鍵: /clear と /compact を活用して精度を保つ
• Planモード: 大規模な変更前には必ず計画を立てさせる
• CLAUDE.md: プロジェクトルールを記述して一貫性のある出力を得る
• 拡張機能: MCP・Skills・Hooks・Subagent・Pluginsで機能を拡張

Proプラン（月$20）から始められます。公式ドキュメント（code.claude.com/docs）に目を通して、まずは小さなタスクから試してみてください。

こんにちは、箕浦です。

フロントエンド開発をしていると、「Figma でデザインを確認 → エディタに戻ってコード実装 → また Figma で確認…」という往復作業に時間を取られていませんか？
デザイナーとの連携では「デザインファイルのバージョン管理ができない」「最新版がどれかわからない」といった課題も、よく耳にします。

今回は、そんな開発者の悩みを根本から解決してくれる新しいデザインツール Pencil（pencil.dev）を紹介します。

Pencil とは​

Pencil は "Design on canvas. Land in code."（キャンバスでデザインし、コードに着地する）をコンセプトに掲げるデザインツールです。

最大の特徴は、IDE の中で直接デザインができること。
VSCode や Cursor の拡張機能として統合されるほか、macOS / Linux / Windows 向けのデスクトップアプリも提供されており、デザインツールとエディタを行き来する必要がなくなります。

しかも 現在完全無料 で利用できます。

従来のデザインツールとの違い​

「Figma や Sketch と何が違うの？」という疑問に、一覧表で答えます。

Pencil はエンジニアの開発ワークフローに自然に溶け込むことを最優先に設計されています。

主な機能​

1. IDE 統合デザインエディタ​

Pencil は IDE の拡張機能、またはスタンドアロンのデスクトップアプリとして動作します。
無限キャンバス上でフレーム、テキスト、シェイプなどのベクター要素を自由に配置でき、Figma と同様のレイヤーパネルも備えています。

利用方法は以下の通りです。

コードを書いている最中に、すぐ隣のタブでデザインを調整できるため、コンテキストスイッチのコストが大幅に削減されます。

2. Git ネイティブなファイル管理​

Pencil のデザインファイルは .pen という拡張子の JSON ベースのテキストファイルです。
これにより、以下のことが当たり前にできます。

• git diff でデザインの変更差分を確認
• ブランチ を切ってデザインのバリエーションを試す
• プルリクエスト でデザインレビュー
• マージ でデザイン変更を統合

# デザインファイルの差分を確認
git diff design/dashboard.pen

# デザイン変更をコミット
git add design/dashboard.pen
git commit -m "ダッシュボードのサイドバーレイアウトを更新"

デザインファイルがコードと同じリポジトリで管理できるため、「デザインの最新版はどこ？」という問題が解消されます。

3. AI エージェント連携（MCP）​

Pencil の最も革新的な機能が、MCP（Model Context Protocol） を通じた AI エージェントとの連携です。

対応する AI プラットフォームは以下の通りです（2026年2月時点）。

• Claude Code（CLI・IDE 版）
• Claude Desktop
• Cursor
• Windsurf IDE
• Codex CLI
• Antigravity IDE
• OpenCode CLI

自然言語でデザインの指示を出すだけで、AI が .pen ファイルを直接操作します。

> 「サイドバー付きのダッシュボード画面を作成して」
> 「このフォームにメールアドレスの入力フィールドを追加して」
> 「カラーテーマをダークモードに切り替えて」

全ての処理はローカルで実行されるため、デザインデータがクラウドに送信されることはありません。

4. コンポーネントシステムとデザイントークン​

再利用可能なコンポーネントを作成でき、メインコンポーネントを変更すると全てのインスタンスに自動反映されます。
Figma のコンポーネント機能に馴染みがある方なら、直感的に使えるはずです。

また、バリアブル（変数）システム により、デザイントークンを一元管理できます。
CSS カスタムプロパティや Tailwind の設定値と連動させれば、デザインとコードの間でトークンが常に同期された状態を保てます。

5. プリビルトUIキット​

ゼロからコンポーネントを作らなくても、すぐに使える UI キットが用意されています。

特に Shadcn UI キットは、Next.js + Tailwind CSS のプロジェクトとの相性が抜群です。

実践：開発ワークフローに組み込む​

Pencil を日常の開発に取り入れると、ワークフローがどう変わるかを見てみましょう。

Before（従来）​

1. Figma でデザインを確認
2. エディタに切り替えてコーディング
3. ブラウザで動作確認
4. Figma に戻ってデザイン調整
5. デザイン変更をスクリーンショットで共有
6. 以上を何度も繰り返す

After（Pencil 導入後）​

1. IDE 内で .pen ファイルを開いてデザインを確認・編集
2. 同じ IDE でコーディング
3. AI に「このコンポーネントのレイアウトを修正して」と指示
4. 変更を git commit でまとめて管理
5. プルリクエストでデザイン・コード両方をレビュー

コンテキストスイッチが激減し、デザインとコードの整合性が自然に保たれるようになります。

実際に使ってみた​

Pencilのデスクトップアプリをインストールして起動した画面がこちら。
Figmaを触ったことある人であれば、なじみある画面構成です。

デザインシステムとして最初からいくつか組み込まれています。
今回は「Shadcn」を使って、簡単なログインフォームを作成してみます。

画面左下にプロンプトを入力します。

AIが「Shadcn」を使ってログインフォームを作成してくれます。

作成されたログインフォームがこちら。
ここまでは正直Figmaでもできます。

Claude Code に移って、先ほど作成したフォームを選択した状態で、Reactのコードを作成してもらいます。

コードが作成されました。
テストコードも作成してくれています。

ブラウザで確認するとこちら。 忠実とまではいかないですが、だいたいこんな感じです。

まとめ​

Pencil は「デザインとコードを一つの世界に統合する」という明確なビジョンを持ったツールです。

Figma がデザイナーのためのツールだとすれば、Pencil は明確にエンジニアのためのデザインツールです。
フロントエンド開発の効率化を考えている方は、ぜひ試してみてください。

公式サイト: https://pencil.dev

こんにちは、箕浦です。

最近、AIコーディングエージェント（Claude Code、GitHub Copilot など）を使う場面がどんどん増えてきていますが、
「毎回同じような指示を出すのが面倒」「特定の分野でもっと精度の高いサポートが欲しい」と感じたことはないでしょうか？

今回は、そんな悩みを解決してくれる Skills という仕組みを紹介します。

Skillsとは​

Skills は、AIエージェントの能力を拡張するためのモジュール型パッケージです。
簡単に言うと「AIに特定分野の専門知識やワークフローを教え込むプラグイン」のようなものです。

たとえば以下のようなスキルがあります。

スキルをインストールすると、AIエージェントがそのスキルに記載されたルールや知識を自動的に参照するようになります。
結果として、毎回細かいプロンプトを書かなくても、目的に合った質の高い出力が得られるわけです。

スキルの探し方​

スキルの管理には skills CLI を使います。
Node.js（18以上）がインストールされていれば、npx で手軽に実行できます。

キーワードで検索する​

npx skills find "検索キーワード"

たとえば、テスト関連のスキルを探したい場合はこうです。

npx skills find "testing"

実行すると、名前・URLの一覧が表示されます。

Install with npx skills add <owner/repo@skill>

onewave-ai/claude-skills@technical-writer
└ https://skills.sh/onewave-ai/claude-skills/technical-writer

スキルの公式サイト https://skills.sh/ でもブラウザから検索できます。

よく使う検索キーワード​

目的に合わせて、以下のようなキーワードで探すと見つかりやすいです。

スキルのインストール方法​

気に入ったスキルが見つかったら、add コマンドでインストールします。

npx skills add <owner/repo@skill> -g -y

• -g : グローバル（ユーザーレベル）にインストール
• -y : 確認プロンプトをスキップ

実際にインストールしてみる​

記事作成を支援するスキルを3つインストールする例です。

# 記事の構成案作成
npx skills add onewave-ai/claude-skills@technical-writer -g -y

# 日本語の表現改善
npx skills add ronantakizawa/japanese-copywriting@japanese-copywriting -g -y

# 技術的な事実確認
npx skills add daymade/claude-code-skills@fact-checker -g -y

インストール先は ~/.agents/skills/ 配下になります。
対応しているAIエージェント環境にインストールされます（環境やオプション指定により対象は変わります）。

インストール済みスキルの確認・更新​

# アップデートがあるか確認
npx skills check

# すべてのスキルを最新版に更新
npx skills update

実践：テックブログ執筆でのスキル活用​

弊社のテックブログ執筆でも、上記3つのスキルを導入して活用しています。
以下のようなフローで記事を作成しています。

1. 企画メモを作る​

まずは記事のテーマ・対象読者・伝えたいことを簡単にメモします。

テーマ: Claude Skills
対象読者: AIツールを使い始めたエンジニア
ゴール: スキルの探し方・導入・活用を自分でできるようになる

2. technical-writer でアウトラインを作成​

「この企画メモで記事のアウトラインを作って」とAIエージェントに指示すると、
technical-writer スキルが自動的に適用され、構成案が出力されます。

見出しの順序や粒度を調整するだけで、記事の骨格が完成します。

3. 下書きを作成​

アウトラインをもとに、本文を書いていきます。
コード例やスクリーンショットも入れると読みやすくなります。

4. japanese-copywriting で校正​

書き終えたら「この記事を校正して」と指示します。
冗長な表現、不自然な言い回し、読みにくい箇所を指摘してくれます。

5. fact-checker で技術的な確認​

「この記事の技術的な記述を確認して」と指示すると、
コマンドの書式やバージョン情報、仕様の正確性をチェックしてくれます。

6. front matter を整えて投稿​

最後に記事ファイルの先頭にある front matter（slug、title、date、authors、tags）を確認し、
リポジトリにプッシュすれば完了です。

自作スキルを作ることもできる​

既存のスキルで足りない場合は、自分でスキルを作ることもできます。

npx skills init my-custom-skill

生成されるスキルファイルは Markdown ベースの YAML フロントマター付きファイルで、
特別なプログラミング知識がなくても記述できます。

たとえば「社内コーディング規約に沿ったレビューを自動で行うスキル」や
「特定フレームワークの設計方針を教え込むスキル」など、
チーム固有のノウハウをスキルとして共有できるのが大きなメリットです。

まとめ​

• Skills は AIエージェントに専門知識を追加するプラグイン的な仕組み
• npx skills find で検索、npx skills add でインストールするだけで使える
• 記事作成なら technical-writer / japanese-copywriting / fact-checker の組み合わせが効果的
• 自作スキルでチーム固有の知見も共有可能

AIエージェントを「汎用アシスタント」から「チーム専属の専門家」に変えてくれる仕組みなので、
ぜひ一度試してみてください。

参考リンク​

• Skills CLI: https://skills.sh/
• Claude Code: https://docs.anthropic.com/en/docs/claude-code