こんにちは！今週のAKARI Tech Blogは、DX Solution事業部の田川が担当します！

ものづくり産業などにフォーカスしている燈では、日々の開発において図面データを扱うことが非常に多いです。

そこで今回は、パッと図面を見れるツールをVSCode 拡張機能で実現してみました。また、この拡張機能では私は一切コードを書くことなく全てAIにて開発を完結することができています。

本記事では、この拡張機能を題材に、VSCode 拡張機能のAIを用いた作り方を具体的にご紹介します。

TL;DR
なぜ「VSCode拡張機能」を自作したのか
開発
まとめ
- We're Hiring!

TL;DR

課題: 図面を見るためにCADソフトを開く必要があり、集中力が削がれる。
解決策: VSCode内で図面を直接プレビューできるVSCode 拡張機能を開発した。
開発手法: 実装はGemini・Claude Code・GitHub Copilotに全て任せ、自分ではコードを書かない
成果: VSCode内で図面とコードを並べて表示可能になり、開発スピードが向上した。

なぜ「VSCode 拡張機能」を自作したのか

ものづくり産業のデータを扱う燈では、図面データの中身を確認する必要がしばしばあります。しかし、既存のAutoCADなどのCADソフトでは、以下のようなフローが頻発し、開発効率を下げていました。

VSCodeで開発
「この図面とこの図面どっちだっけ？」
CADソフトを起動（起動に数秒〜十数秒待つ）
確認して閉じる
VSCodeに戻る

一回一回作業が完全に分断されてしまうのが最大のストレスでした。

また、以前私が執筆したこちらのGASを使ったWebアプリケーションの開発を応用し、図面の見れる社内向けアプリケーションを開発してみたのですが、それでもアプリを開いて図面を読み込む必要があるという手間は捨てきれず、活用しきれませんでした。

tech.akariinc.co.jp

「VSCodeから一歩も出ずに図面が見たい」というところで、既存のVSCodeの拡張機能を探しましたが、求めているものはなかったため、「じゃあ自分で作るか！」という考えに至りました。

開発

今回の開発におけるルールは「自分では極力コードを書かない」ことです。そもそもVSCodeの拡張機能は作ったことがなかったため、全て以下のツールにお願いしました。

Gemini: 実現可能性の検討・方針立て、VSCode拡張の開発の仕方の把握
Claude Code: 全体の実装
GitHub Copilot: 細かい修正や、VSCode上で拡張機能をビルドして確認する際の質問など

1. Geminiへの質問

Prompt: 2次元の図面のDXFファイルを簡単にプレビューするようなVSCodeの拡張を作成したいのですが方法を教えて下さい。

これだけで、GeminiはYeomanを使った開発手順を提示してくれました。

実際の出力例

2次元の図面（DXFファイル）をプレビューするVSCode 拡張機能を作成するのは、非常に実用的で素晴らしいアイデアです！

VSCodeにはCustom Editor APIという機能があり、これを使うことでテキストエディタ以外の独自のUI（今回は図面ビューア）を表示することができます。

以下に、開発の全体像と具体的な実装ステップを解説します。

1. 開発のアプローチと構成

DXFをレンダリング（描画）するためには、以下の技術スタックが一般的です。

VSCode側: Custom Text Editor API（DXFはテキスト形式が多いため）または Custom Readonly Editor API。
表示（WebView）側: HTML Canvas または SVG。
ライブラリ: DXFの解析と描画をゼロから書くのは大変なので、既存のライブラリを利用します。
解析: dxf-parser (DXFをJSONなどの扱いやすい形式に変換)
描画: three.js (または three-dxf というラッパー) を使うと、ズームやパン（移動）の実装が楽になります。

2. プロジェクトの作成

まず、VSCode 拡張機能のひな形を作成します。Node.jsがインストールされている前提です。

# YeomanとVS Code Extension Generatorのインストール
npm install -g yo generator-code

# プロジェクトの生成
yo code

What type of extension...?: New Extension (TypeScript) を選択
Name: dxf-preview (任意)

3. package.json の設定

拡張機能が「.dxf ファイルを開いたとき」に起動するように設定します。

package.json の contributes セクションを以下のように編集します。

"contributes": {
  "customEditors": [
    {
      "viewType": "dxf-preview.dxfEditor",
      "displayName": "DXF Preview",
      "selector": [
        {
          "filenamePattern": "*.dxf"
        }
      ],
      "priority": "default"
    }
  ]
},
"activationEvents": [
  "onCustomEditor:dxf-preview.dxfEditor"
]

4. エディタプロバイダーの実装

拡張機能のメインロジックです。ファイルの中身を読み取り、WebView（HTMLを表示する画面）に渡す役割を担います。

src/DxfEditorProvider.ts というファイルを作成し、以下のようなクラスを実装します。

import * as vscode from 'vscode';

export class DxfEditorProvider implements vscode.CustomTextEditorProvider {

    public static register(context: vscode.ExtensionContext): vscode.Disposable {
        const provider = new DxfEditorProvider(context);
        const providerRegistration = vscode.window.registerCustomEditorProvider(
            DxfEditorProvider.viewType,
            provider
        );
        return providerRegistration;
    }

    private static readonly viewType = 'dxf-preview.dxfEditor';

    constructor(
        private readonly context: vscode.ExtensionContext
    ) { }

    /**
     * DXFファイルが開かれたときに呼ばれるメソッド
     */
    public async resolveCustomTextEditor(
        document: vscode.TextDocument,
        webviewPanel: vscode.WebviewPanel,
        _token: vscode.CancellationToken
    ): Promise<void> {
        // WebViewの初期設定
        webviewPanel.webview.options = {
            enableScripts: true,
        };

        // 初期HTMLのセット
        webviewPanel.webview.html = this.getHtmlForWebview(webviewPanel.webview);

        // ドキュメントの内容をWebViewに送信
        this.updateWebview(webviewPanel, document);

        // ファイルが変更されたらWebViewを更新するリスナー
        const changeDocumentSubscription = vscode.workspace.onDidChangeTextDocument(e => {
            if (e.document.uri.toString() === document.uri.toString()) {
                this.updateWebview(webviewPanel, document);
            }
        });

        // パネルが閉じられたらリスナーを破棄
        webviewPanel.onDidDispose(() => {
            changeDocumentSubscription.dispose();
        });
    }

    private updateWebview(webviewPanel: vscode.WebviewPanel, document: vscode.TextDocument) {
        webviewPanel.webview.postMessage({
            type: 'update',
            text: document.getText(), // DXFのテキストデータを送る
        });
    }

    private getHtmlForWebview(webview: vscode.Webview): string {
        // WebView内で実行するスクリプトのパスを取得
        const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(
            this.context.extensionUri, 'media', 'dxfRender.js'));

        // ライブラリ（例: dxf-parser, three.js）も同様にパス解決して読み込む必要があります

        return `
            <!DOCTYPE html>
            <html lang="ja">
            <head>
                <meta charset="UTF-8">
                <style>
                    body { margin: 0; padding: 0; overflow: hidden; width: 100vw; height: 100vh; }
                    #dxf-container { width: 100%; height: 100%; }
                </style>
            </head>
            <body>
                <div id="dxf-container"></div>
                
                <script src="${scriptUri}"></script>
            </body>
            </html>`;
    }
}

5. Extensionの登録 (`extension.ts`)

src/extension.ts で先ほどのプロバイダーを登録します。

import * as vscode from 'vscode';
import { DxfEditorProvider } from './DxfEditorProvider';

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(DxfEditorProvider.register(context));
}

6. 描画ロジック (`media/dxfRender.js`)

プロジェクトルートに media フォルダを作成し、その中に dxfRender.js を置きます。ここで実際に描画を行います。 ※この部分は、別途 dxf-parser などのライブラリを media フォルダに入れて読み込めるようにしておく必要があります。

// media/dxfRender.js

// VSCode APIの取得
const vscode = acquireVsCodeApi();

// DOM要素
const container = document.getElementById('dxf-container');

// メッセージリスナー（拡張機能本体からのデータを受け取る）
window.addEventListener('message', event => {
    const message = event.data;
    switch (message.type) {
        case 'update':
            const dxfContent = message.text;
            renderDxf(dxfContent);
            break;
    }
});

function renderDxf(dxfText) {
    // ここでライブラリを使って描画します
    // 例: 
    // const parser = new DxfParser();
    // const dxf = parser.parseSync(dxfText);
    // drawToCanvas(dxf, container);
    
    container.innerText = "ここにDXFが描画されます。データサイズ: " + dxfText.length;
}

7. 推奨ライブラリ構成

本格的に実装する場合、以下のライブラリを media フォルダに配置（またはWebpackでバンドル）して script タグで読み込みます。

dxf-parser:
DXFのテキストデータをJavaScriptオブジェクトに変換します。
three.js:
2D/3D描画用。DXFの線分（Line）や円弧（Arc）をThree.jsのMeshとして追加していくのが最も近道です。

もし、Three.jsの実装が大変であれば、three-dxf というライブラリが「dxf-parserの出力を受け取ってThree.jsで表示する」という処理をまとめてくれているので、コードを参考にすると良いでしょう。

次のアクション

まずはシンプルな形から動かしてみることをお勧めします。

お手伝いできる次のステップはありますか？

package.json とディレクトリ構成を含めた、コピーペーストで動く最小限のサンプルコードを作成しましょうか？
three.js を使った具体的な描画部分（線を引くなど）のコード例を作成しましょうか？

2. Claude Codeへの指示

Geminiの提示した文章を全てコピペしてClaude Codeにお願いをします。 Geminiのコードを参考にしながら、コマンドの実行・ロジック含め全体を実装してくれました。

3. ビルドしてテスト

VSCode 拡張機能の開発は初めてだったため、Github Copilot Chatに質問をしながらビルドとテストを行いました。結果的にVSCode上部の実行>デバッグの開始で別ウィンドウが開き、そこで確認することができました。

エラーなどはcommand + shift + P > Webview 開発者ツールを開くでコンソールを開き、エラーログをCopilotに貼り付けるだけで解決策が提示されました。

結果、開発開始から1時間足らずで完成しました。また、最終的にはCopilotに聞きながらvsix形式で書き出し、社内に配布することが出来ています。

さらに、手軽にVSCode 拡張機能の開発ができることがわかったので、

コードの中のTODOコメントなどを集めてGithubのissueを作れるTODO管理ツール
動画ファイルをトリミングしてgifに変換できる便利ツール

なども作ってみています。

拡張機能による開発体験の向上

このツールができたことで、開発体験は以下のように改善できました。

タップするだけでなんの図面かわかるため、ストレスが解消された
CADソフトを開く手間がなくなり、無駄な時間の削減・集中力の分断阻止ができた

まとめ

今回は、VSCode 拡張機能の自作により日常の業務の効率化を図りました。

これまでは「ちょっと不便だけど我慢してCADソフトを開く」と我慢していましたが、AIにツールを作らせて解決するという選択肢によって、超便利に快適になりました。

特に図面のようなニッチな領域こそ、まだまだ不便なところがたくさんあると思います。そこをAIを使って自分たちでサクッと改善していく。これこそが、AI時代のエンジニアの楽しみ方ではないでしょうか。

We're Hiring!

燈株式会社では、こうした「なければ作る」精神で開発を楽しめるエンジニア、そしてAIの力で巨大な産業の課題解決に挑みたいエンジニアを募集しています！少しでも興味を持っていただけたら、カジュアル面談でお話しさせていただけると嬉しいです！

akariinc.co.jp

AKARI Tech Blog

燈株式会社のエンジニア・開発メンバーによる技術ブログです

【AI開発】1時間でVSCodeに「図面プレビュー拡張機能」を追加！Gemini×Claudeで爆速実装

TL;DR

なぜ「VSCode 拡張機能」を自作したのか

開発

1. Geminiへの質問

1. 開発のアプローチと構成

2. プロジェクトの作成

3. package.json の設定

4. エディタプロバイダーの実装

5. Extensionの登録 (`extension.ts`)

6. 描画ロジック (`media/dxfRender.js`)

7. 推奨ライブラリ構成

次のアクション

2. Claude Codeへの指示

3. ビルドしてテスト

拡張機能による開発体験の向上

まとめ

We're Hiring!

TL;DR

なぜ「VSCode拡張機能」を自作したのか

開発

1. Geminiへの質問

1. 開発のアプローチと構成

2. プロジェクトの作成

3. package.json の設定

4. エディタプロバイダーの実装

5. Extensionの登録 (extension.ts)

6. 描画ロジック (media/dxfRender.js)

7. 推奨ライブラリ構成

次のアクション

2. Claude Codeへの指示

3. ビルドしてテスト

拡張機能による開発体験の向上

まとめ

We're Hiring!

なぜ「VSCode 拡張機能」を自作したのか

5. Extensionの登録 (`extension.ts`)

6. 描画ロジック (`media/dxfRender.js`)