<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Workspace on AI2CORE - AI技術ブログ</title>
    <link>https://www.ai2core.com/tags/workspace/</link>
    <description>Recent content in Workspace on AI2CORE - AI技術ブログ</description>
    <generator>Hugo -- 0.146.4</generator>
    <language>ja</language>
    <lastBuildDate>Fri, 20 Feb 2026 08:00:00 +0900</lastBuildDate>
    <atom:link href="https://www.ai2core.com/tags/workspace/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>GitHub Copilot Workspace活用術：仕様書から実装まで一気通貫</title>
      <link>https://www.ai2core.com/posts/2026-02-20-copilot-workspace/</link>
      <pubDate>Fri, 20 Feb 2026 08:00:00 +0900</pubDate>
      <guid>https://www.ai2core.com/posts/2026-02-20-copilot-workspace/</guid>
      <description>Copilot Workspaceを使って、IssueからPR作成までを自動化するフロー。</description>
      <content:encoded><![CDATA[<h1 id="github-copilot-workspace活用術仕様書から実装まで一気通貫">GitHub Copilot Workspace活用術：仕様書から実装まで一気通貫</h1>
<h2 id="はじめに">はじめに</h2>
<p>ソフトウェア開発の現場にいる皆さん、日々の業務フローを思い返してみてください。</p>
<ol>
<li>GitHub Issue や Jira のチケットで仕様を確認する。</li>
<li>内容を理解し、ローカルで新しいブランチを作成する。</li>
<li>関連ファイルを特定し、エディタで開く。</li>
<li>仕様に沿ってコードを書き、修正する。</li>
<li>動作確認のためのテストコードを記述する。</li>
<li>ローカルでテストを実行し、問題ないことを確認する。</li>
<li>変更をコミットし、リモートにプッシュする。</li>
<li>ブラウザで GitHub を開き、Pull Request (PR) を作成する。</li>
</ol>
<p>この一連の流れは、私たちエンジニアにとって日常茶飯事です。しかし、このプロセスには多くのコンテキストスイッチ（思考の切り替え）が含まれており、特にプロジェクトの初期段階や、新しいコードベースに触れる際には、仕様の理解や関連ファイルの特定といった「準備運動」に多くの時間が費やされます。</p>
<p>「Issue の内容を理解したら、あとはAIが自動でコードを書いてPRまで作ってくれたら最高なのに…」</p>
<p>そんな未来の夢物語が、<strong>GitHub Copilot Workspace</strong> の登場によって、現実のものとなりつつあります。この記事では、GitHub がテクニカルプレビューとして公開した Copilot Workspace を徹底的に解説し、Issue（仕様書）を起点として、AIと共に実装計画を立て、コードを生成し、Pull Request を作成するまでの一気通貫の開発フローを実践的なハンズオン形式で紹介します。</p>
<p>この記事を読み終える頃には、あなたは Copilot Workspace の強力な機能を理解し、自身の開発プロセスを劇的に効率化させるための具体的なイメージを描けるようになっているでしょう。</p>
<hr>
<h2 id="なぜ今copilot-workspaceが重要なのか">なぜ今、Copilot Workspaceが重要なのか？</h2>
<p>GitHub Copilot が登場し、私たちのコーディング体験は大きく変わりました。関数名やコメントから意図を汲み取り、驚くほど的確なコードを補完してくれる Copilot は、もはや手放せない相棒となっているエンジニアも多いでしょう。その後、Copilot Chat が登場し、エディタ内で対話形式でコードに関する質問やリファクタリングの相談ができるようになりました。</p>
<p>しかし、これまでの Copilot は、あくまで「コーディング」という実装フェーズに特化した支援ツールでした。開発プロセス全体を見渡すと、実装の前には「仕様の理解」「設計」「実装計画」といった上流工程が存在し、実装の後には「テスト」「PR作成」「レビュー」といった下流工程が存在します。</p>
<p>ここに、現代の開発プロセスが抱える根深い課題があります。</p>
<ul>
<li><strong>コンテキストスイッチのオーバーヘッド:</strong> Issue、設計ドキュメント、エディタ、ターミナル、ブラウザ… 開発者は複数のツールやウィンドウを絶えず行き来する必要があり、そのたびに集中力が削がれます。</li>
<li><strong>定型作業の繰り返し:</strong> ブランチ作成、ボイラープレートコードの記述、基本的なテストケースの作成など、創造的とは言えない定型作業に多くの時間が奪われています。</li>
<li><strong>オンボーディングの壁:</strong> 新しいメンバーがプロジェクトに参加した際、広大なコードベースのどこから手をつければ良いのかを把握するのは非常に困難です。</li>
</ul>
<p>GitHub Copilot Workspace は、これらの課題を解決するために生まれました。それは単なるコード補完ツールではありません。<strong>Issue を起点として、開発タスクの全体像をAIが把握し、人間と対話しながら「仕様の明確化」「実装計画の立案」「コード生成」「テスト」までを半自動的に実行する、いわば「AI搭載の開発環境」</strong> なのです。</p>
<p>Copilot Workspace は、開発プロセスの上流から下流までをシームレスに繋ぎ、エンジニアを煩雑な作業から解放します。これにより、エンジニアはより創造的で、本質的な価値を生み出す「設計」や「アーキテクチャの検討」「複雑なビジネスロジックの実装」に集中できるようになるのです。これは、開発の生産性を根底から覆すポテンシャルを秘めた、大きなパラダイムシフトと言えるでしょう。</p>
<hr>
<h2 id="copilot-workspaceによる開発フロー徹底解説">Copilot Workspaceによる開発フロー徹底解説</h2>
<p>それでは、実際に Copilot Workspace を使って Issue から PR 作成までを駆け抜けるプロセスを、具体的なハンズオン形式で見ていきましょう。</p>
<h3 id="copilot-workspace-の全体像">Copilot Workspace の全体像</h3>
<p>Workspace のフローは、大きく分けて以下の3つのステップで構成されています。この概念を理解することが、Workspace を使いこなすための鍵となります。</p>
<pre tabindex="0"><code class="language-mermaid" data-lang="mermaid">graph TD;
    A[📝 GitHub Issue] --&gt; B(🚀 Copilot Workspaceを起動);
    B --&gt; C{1. Spec&lt;br&gt;(仕様の確認・編集)};
    C -- AIと対話し仕様を洗練 --&gt; D{2. Plan&lt;br&gt;(実行計画の生成・編集)};
    D -- 計画に基づき実行 --&gt; E{3. Implementation&lt;br&gt;(コードの自動生成・修正)};
    E -- 人間によるレビュー・微修正 --&gt; F[✅ Pull Request作成];
</code></pre><ol>
<li><strong>Spec (仕様):</strong> Workspace はまず Issue の内容を読み込み、タスクの目的や要件を自然言語でまとめた「仕様」を生成します。開発者はこの仕様を確認し、AI とのチャットを通じて内容をより正確かつ詳細なものに洗練させていきます。</li>
<li><strong>Plan (計画):</strong> 洗練された仕様に基づき、AI は「どのファイルを新規作成するか」「どのファイルをどう変更するか」「どのコマンドを実行するか」といった具体的な「実行計画」を立案します。この計画はステップバイステップで表示され、開発者は内容を確認・編集できます。</li>
<li><strong>Implementation (実装):</strong> 開発者が計画を承認すると、Workspace は計画に沿ってファイルの作成、コードの生成・編集、コマンドの実行などを自動で行います。生成されたコードの差分（diff）は即座に確認でき、必要に応じて Workspace 内のエディタやターミナルで直接修正を加えることが可能です。</li>
</ol>
<p>この**「仕様定義 → 計画立案 → 実装」**という反復的なプロセスこそが、Copilot Workspace の中核です。</p>
<h3 id="実践issueからpr作成までのハンズオン">実践！IssueからPR作成までのハンズオン</h3>
<p>今回は、簡単な REST API を提供する Node.js (Express) プロジェクトを例に、新しいエンドポイントを追加するタスクを Workspace で実行してみましょう。</p>
<p><strong>前提:</strong></p>
<ul>
<li>GitHub Copilot Workspace のテクニカルプレビューにアクセスできること。</li>
<li>Node.js と Express で作られたシンプルな Web API のリポジトリが存在すること。</li>
</ul>
<h4 id="step-0-課題となる-issue-の準備">Step 0: 課題となる Issue の準備</h4>
<p>まずは、開発の起点となる Issue を作成します。AI が理解しやすいように、具体的かつ明確に記述することがポイントです。</p>
<p><strong>Issue Title:</strong> <code>feat: GET /api/v1/users エンドポイントを追加</code></p>
<p><strong>Issue Body:</strong></p>
<div class="highlight"><div style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-markdown" data-lang="markdown"><span style="display:flex;"><span><span style="color:#75715e">### 概要
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>ユーザーの一覧を取得するための新しいAPIエンドポイント <span style="color:#e6db74">`GET /api/v1/users`</span> を追加します。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">### 背景
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>クライアントアプリケーションがユーザー情報を一覧表示するために、このAPIが必要です。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">### 受け入れ条件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">-</span> HTTP GETリクエストを <span style="color:#e6db74">`/api/v1/users`</span> パスで受け付けること。
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">-</span> レスポンスはJSON形式であること。
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">-</span> レスポンスボディは、<span style="color:#e6db74">`data`</span> というキーを持つオブジェクトであること。
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">-</span> <span style="color:#e6db74">`data`</span> の値は、以下の構造を持つユーザーオブジェクトの配列であること。
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">-</span> <span style="color:#e6db74">`id`</span> (number)
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">-</span> <span style="color:#e6db74">`name`</span> (string)
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">-</span> <span style="color:#e6db74">`email`</span> (string)
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">-</span> 現状、データベース連携は不要。モックデータとして3人分のユーザー情報を返すこと。
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">-</span> エラーハンドリングは考慮しなくてよい。
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">-</span> 既存のルーティングファイル (<span style="color:#e6db74">`src/routes/index.js`</span>) に新しいルートを追加すること。
</span></span></code></pre></td></tr></table>
</div>
</div><h4 id="step-1-workspace-の起動">Step 1: Workspace の起動</h4>
<p>作成した Issue ページにアクセスすると、Copilot のアイコンと共に「Open in Workspace」というボタンが表示されます（プレビュー有効時）。これをクリックして Workspace を起動します。</p>
<p><em>(画像はイメージです)</em></p>
<h4 id="step-2-spec---仕様の定義と洗練">Step 2: &ldquo;Spec&rdquo; - 仕様の定義と洗練</h4>
<p>Workspace が起動すると、AI が Issue の内容を解析し、以下のような「Spec」を自動生成します。</p>
<blockquote>
<p><strong>Initial Specification</strong></p>
<p>The goal is to add a new API endpoint <code>GET /api/v1/users</code>.
This endpoint should return a mocked list of users in a specific JSON format.</p>
<p><strong>Acceptance Criteria:</strong></p>
<ul>
<li>The endpoint must handle GET requests to <code>/api/v1/users</code>.</li>
<li>The response should be a JSON object with a <code>data</code> key.</li>
<li>The <code>data</code> key should contain an array of user objects.</li>
<li>Each user object must have <code>id</code>, <code>name</code>, and <code>email</code>.</li>
<li>The implementation should use mock data for three users.</li>
<li>The new route should be added to the existing file <code>src/routes/index.js</code>.</li>
</ul></blockquote>
<p>この時点で、AI がタスクを正しく理解していることが分かります。もし、何か補足したい情報があれば、下部のチャットボックスから AI に指示を出します。</p>
<p>例えば、返すモックデータに具体的な名前を指定したい場合、以下のようにチャットします。</p>
<p><strong>あなた:</strong></p>
<blockquote>
<p><code>Use the following names for the mock data: Alice, Bob, and Charlie.</code></p></blockquote>
<p>すると、AI はこの指示を理解し、Spec を更新します。この対話を通じて、実装に入る前に AI との認識合わせを完璧に行うことができます。</p>
<h4 id="step-3-plan---実行計画の立案">Step 3: &ldquo;Plan&rdquo; - 実行計画の立案</h4>
<p>Spec が固まったら、AI はそれを実現するための具体的な「Plan」を作成します。</p>
<blockquote>
<p><strong>Execution Plan</strong></p>
<p>I will perform the following steps to implement the feature:</p>
<ol>
<li>
<p><strong>Modify file <code>src/routes/index.js</code></strong>: I will add a new route handler for <code>GET /api/v1/users</code>. This handler will define the mock user data and send it as a JSON response in the required format.</p>
</li>
<li>
<p><strong>Create file <code>tests/users.test.js</code></strong>: To ensure the new endpoint works correctly, I will create a new test file. This test will use a library like <code>supertest</code> to make a request to the new endpoint and assert that the response status is 200 and the body matches the expected structure.</p>
</li>
</ol></blockquote>
<p>この計画は非常に理にかなっています。実装ファイルの変更だけでなく、その動作を保証するためのテストファイルの作成まで提案してくれている点は素晴らしいです。もし、テストが不要な場合や、別のファイルにロジックを分割したい場合は、この Plan を手動で編集したり、AI に修正を依頼したりすることも可能です。</p>
<h4 id="step-4-implementation---aiによる自動実装">Step 4: &ldquo;Implementation&rdquo; - AIによる自動実装</h4>
<p>Plan に納得したら、「Run」ボタンをクリックします。すると、Workspace が計画に沿ってコードの生成とファイルの作成を自動的に開始します。処理が完了すると、変更内容が差分（diff）形式で表示されます。</p>
<p><strong><code>src/routes/index.js</code> の変更差分:</strong></p>
<div class="highlight"><div style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">18
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">19
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-diff" data-lang="diff"><span style="display:flex;"><span>  const express = require(&#39;express&#39;);
</span></span><span style="display:flex;"><span>  const router = express.Router();
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>  /* GET home page. */
</span></span><span style="display:flex;"><span>  router.get(&#39;/&#39;, function(req, res, next) {
</span></span><span style="display:flex;"><span>    res.json({ title: &#39;Express&#39; });
</span></span><span style="display:flex;"><span>  });
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">+ router.get(&#39;/api/v1/users&#39;, (req, res) =&gt; {
</span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">+   const mockUsers = [
</span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">+     { id: 1, name: &#39;Alice&#39;, email: &#39;alice@example.com&#39; },
</span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">+     { id: 2, name: &#39;Bob&#39;, email: &#39;bob@example.com&#39; },
</span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">+     { id: 3, name: &#39;Charlie&#39;, email: &#39;charlie@example.com&#39; },
</span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">+   ];
</span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">+
</span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">+   res.status(200).json({ data: mockUsers });
</span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">+ });
</span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">+
</span></span></span><span style="display:flex;"><span><span style="color:#a6e22e"></span>  module.exports = router;
</span></span></code></pre></td></tr></table>
</div>
</div><p><strong><code>tests/users.test.js</code> の新規作成:</strong></p>
<div class="highlight"><div style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">request</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;supertest&#39;</span>);
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">app</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;../src/app&#39;</span>); <span style="color:#75715e">// Express app instance
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">describe</span>(<span style="color:#e6db74">&#39;GET /api/v1/users&#39;</span>, () =&gt; {
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">it</span>(<span style="color:#e6db74">&#39;should return a list of users&#39;</span>, <span style="color:#66d9ef">async</span> () =&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">res</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">request</span>(<span style="color:#a6e22e">app</span>).<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#39;/api/v1/users&#39;</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">expect</span>(<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">statusCode</span>).<span style="color:#a6e22e">toEqual</span>(<span style="color:#ae81ff">200</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">expect</span>(<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">body</span>).<span style="color:#a6e22e">toHaveProperty</span>(<span style="color:#e6db74">&#39;data&#39;</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">expect</span>(Array.<span style="color:#a6e22e">isArray</span>(<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">data</span>)).<span style="color:#a6e22e">toBe</span>(<span style="color:#66d9ef">true</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">expect</span>(<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">length</span>).<span style="color:#a6e22e">toBe</span>(<span style="color:#ae81ff">3</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">expect</span>(<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">data</span>[<span style="color:#ae81ff">0</span>]).<span style="color:#a6e22e">toHaveProperty</span>(<span style="color:#e6db74">&#39;id&#39;</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">expect</span>(<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">data</span>[<span style="color:#ae81ff">0</span>]).<span style="color:#a6e22e">toHaveProperty</span>(<span style="color:#e6db74">&#39;name&#39;</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">expect</span>(<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">data</span>[<span style="color:#ae81ff">0</span>]).<span style="color:#a6e22e">toHaveProperty</span>(<span style="color:#e6db74">&#39;email&#39;</span>);
</span></span><span style="display:flex;"><span>  });
</span></span><span style="display:flex;"><span>});
</span></span></code></pre></td></tr></table>
</div>
</div><p>生成されたコードは、概ね Issue の要件を満たしています。ここで、Workspace 内に組み込まれたターミナルを開き、テストを実行してみましょう。</p>
<div class="highlight"><div style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>$ npm install
</span></span><span style="display:flex;"><span>$ npm test
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&gt; tests/users.test.js
</span></span><span style="display:flex;"><span>✓ should <span style="color:#66d9ef">return</span> a list of users <span style="color:#f92672">(</span>5ms<span style="color:#f92672">)</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>Test Suites: <span style="color:#ae81ff">1</span> passed, <span style="color:#ae81ff">1</span> total
</span></span><span style="display:flex;"><span>Tests:       <span style="color:#ae81ff">1</span> passed, <span style="color:#ae81ff">1</span> total
</span></span><span style="display:flex;"><span>Snapshots:   <span style="color:#ae81ff">0</span> total
</span></span><span style="display:flex;"><span>Time:        0.5s
</span></span></code></pre></td></tr></table>
</div>
</div><p>テストが成功しました。もしコードに修正が必要な場合は、Workspace 上のエディタで直接編集できます。例えば、レスポンスコードを <code>201</code> に変えたい場合、エディタで <code>res.status(200)</code> を <code>res.status(201)</code> に書き換えるだけです。</p>
<h4 id="step-5-prの作成">Step 5: PRの作成</h4>
<p>実装とテストに問題がないことを確認したら、画面上部にある「Create Pull Request」ボタンをクリックします。</p>
<p>すると、PR 作成画面に遷移します。驚くべきことに、PR のタイトルと説明文も、AI が Issue とコードの変更内容を基に自動で生成してくれます。</p>
<p><strong>PR Title (自動生成):</strong> <code>feat: Add GET /api/v1/users endpoint</code></p>
<p><strong>PR Body (自動生成):</strong></p>
<blockquote>
<p>This pull request introduces a new endpoint <code>GET /api/v1/users</code> to fetch a list of users.</p>
<p><strong>Changes:</strong></p>
<ul>
<li>Added a new route to <code>src/routes/index.js</code> to handle the request.</li>
<li>The endpoint returns a hardcoded list of three users as mock data.</li>
<li>Added a new test file <code>tests/users.test.js</code> to verify the functionality of the new endpoint.</li>
</ul>
<p>Closes #123 (Issue番号)</p></blockquote>
<p>内容を確認し、必要であれば追記して PR を作成します。これで、Issue の起票から PR のマージ準備まで、ほとんどの作業を GitHub の中で、AI の支援を受けながら完結させることができました。</p>
<hr>
<h2 id="メリットとデメリット">メリットとデメリット</h2>
<p>Copilot Workspace は革命的なツールですが、万能ではありません。そのメリットと、現時点でのデメリットや注意点を冷静に評価してみましょう。</p>
<h3 id="メリット">メリット</h3>
<ul>
<li><strong>圧倒的な生産性向上:</strong> これまで手作業で行っていたブランチ作成、ファイル検索、ボイラープレートの記述、テストの雛形作成、PR の文章作成といった一連の定型作業がほぼ自動化されます。これにより、エンジニアはタスクの本質的な部分に集中できます。</li>
<li><strong>コンテキストスイッチの撲滅:</strong> Issue の確認から PR 作成まで、すべての作業が Workspace という単一の環境で完結します。ツール間を行き来する必要がなくなり、思考の分断が起こりにくくなります。</li>
<li><strong>スムーズなオンボーディング:</strong> 新しいプロジェクトに参加した際、Issue を Workspace で開けば、AI が関連ファイルを特定し、変更計画まで立ててくれます。これにより、コードベースの全体像を把握し、最初の貢献を行うまでの時間を大幅に短縮できます。</li>
<li><strong>設計と実装の分離:</strong> 「Spec」と「Plan」のステップを踏むことで、いきなりコーディングを始めるのではなく、「何を」「どのように」作るのかを明確にしてから実装に進むという、良い開発習慣が自然と身につきます。</li>
</ul>
<h3 id="デメリット--注意点">デメリット / 注意点</h3>
<ul>
<li><strong>AI が生成するコードの品質:</strong> 生成されるコードは常に完璧ではありません。バグを含んでいたり、プロジェクトのコーディング規約に沿っていなかったり、最適な設計でない場合もあります。<strong>最終的な品質を担保するのは、あくまで人間のエンジニアの役割</strong>であり、コードレビューの重要性は変わりません。</li>
<li><strong>複雑なタスクへの対応限界:</strong> 複数のファイルを横断する大規模なリファクタリングや、ドメイン知識が深く要求される複雑なビジネスロジックの実装など、高度な抽象的思考が必要なタスクにはまだ対応しきれない場面があります。</li>
<li><strong>思考停止のリスク:</strong> AI に頼りすぎることで、エンジニア自身が「なぜこの変更が必要なのか」「他にどんな実装方法があるか」といったことを深く考えなくなる危険性があります。Workspace はあくまで「優秀なアシスタント」であり、思考の主体は人間であるべきです。</li>
<li><strong>テクニカルプレビュー段階:</strong> 現在はまだプレビュー版であり、機能が変更されたり、動作が不安定になったりする可能性があります。本番の重要なプロジェクトに全面的に導入するには、今後の動向を注視する必要があります。</li>
</ul>
<hr>
<h2 id="現場で使える実践的なtips">現場で使える実践的なTips</h2>
<p>Copilot Workspace のポテンシャルを最大限に引き出すための、いくつかの実践的なヒントを紹介します。</p>
<h3 id="1-良いissueが良い実装を生む">1. 「良いIssue」が「良い実装」を生む</h3>
<p>Workspace の出発点は Issue です。AI の性能はインプットの質に大きく左右されるため、精度の高い実装を引き出すためには、AI が理解しやすい Issue を書くことが非常に重要です。</p>
<ul>
<li><strong>背景 (Why) を書く:</strong> 「何をするか (What)」だけでなく、「なぜそれが必要なのか (Why)」を記述することで、AI がタスクの文脈をより深く理解し、適切な実装を提案しやすくなります。</li>
<li><strong>受け入れ条件 (Acceptance Criteria) を明確にする:</strong> 「〜であること」という形式で、タスク完了の定義を箇条書きで具体的に示しましょう。これは AI にとっての仕様書そのものになります。</li>
<li><strong>専門用語やファイル名をヒントとして与える:</strong> 「<code>UserService</code> クラスを使ってデータを取得すること」「設定は <code>config/features.json</code> を参照すること」のように、コードベース固有の情報を与えると、AI の計画 (Plan) の精度が劇的に向上します。</li>
</ul>
<h3 id="2-plan-を対話的に育てる">2. &ldquo;Plan&rdquo; を対話的に育てる</h3>
<p>AI が生成した最初の Plan が完璧であることは稀です。Plan を鵜呑みにせず、レビューし、AI との対話を通じて改善していくプロセスが重要です。</p>
<ul>
<li><strong>ステップの分割・追加を指示する:</strong> 「ステップ2を、ロジック部分とルーティング部分の2つに分割して」「テストを実行するステップを最後に追加して」のように、計画をより細かく、より安全に実行できるように指示します。</li>
<li><strong>代替案を尋ねる:</strong> 「この実装方法以外に、もっと良い方法はありますか？」と尋ねることで、自分では思いつかなかったアプローチを AI が提案してくれることがあります。</li>
</ul>
<h3 id="3-ローカル環境とのハイブリッド活用">3. ローカル環境とのハイブリッド活用</h3>
<p>Workspace は強力ですが、全ての作業をそこで完結させる必要はありません。特にデバッグや複雑な修正には、使い慣れたローカルのエディタが適している場合もあります。</p>
<p>Workspace で大枠の実装（80%）を自動生成させ、その後ローカルにブランチをチェックアウトして、細部の調整やデバッグ（残りの20%）を行う、というハイブリッドな使い方が非常に効率的です。</p>
<hr>
<h2 id="まとめ">まとめ</h2>
<p>GitHub Copilot Workspace は、単なるコーディング支援ツールではなく、<strong>開発プロセスそのものを再定義する可能性を秘めたゲームチェンジャー</strong>です。Issue という「要求」から Pull Request という「成果物」までを、AI と人間が協調しながらシームレスに繋ぐことで、開発の生産性と体験を新たな次元へと引き上げます。</p>
<p>もちろん、このツールはまだ発展途上であり、人間のエンジニアによるレビューや設計、最終的な意思決定の重要性が失われることはありません。むしろ、AI をいかにうまく「操縦」し、その能力を最大限に引き出すかが、これからのエンジニアに求められる新しいスキルセットになるでしょう。</p>
<p>私たちの役割は、「一行一行コードを書く作業者」から、<strong>「AI という優秀な部下を持つプロジェクトマネージャー兼アーキテクト」</strong> へと変化していくのかもしれません。</p>
<p>GitHub Copilot Workspace がもたらす未来の開発スタイルは、もうすぐそこまで来ています。ぜひテクニカルプレビューに登録し、この新しい開発体験をいち早くご自身のプロジェクトで試してみてください。きっと、開発の未来を垣間見ることができるはずです。</p>
]]></content:encoded>
      <category>Coding AI</category>
      <category>GitHub Copilot</category>
      <category>Workspace</category>
      <category>DevOps</category>
    </item>
  </channel>
</rss>
