はじめに
VSCode拡張を作ってみたいと思ったものの、何から始めればいいのか全く分かりませんでした。
この記事では、そんな私が IBM Bobを利用しながら拡張機能を作成した過程を共有します。
IBM Bobとは？
IBM Bob（以下、Bob）は、IBMが提供するAIコーディングアシスタントです。
「こんな機能が欲しい」と日本語で伝えると、Bobが自動的にコードを書いてくれるツールです。
Bobを使うと、開発時間が大幅に短縮され、対話しながら学べるための高品質なコードが書けます。
作ったもの
作業中に愛犬などの癒しの画像を見られる、サイドバーに常駐するスライドショーを作成しました。
機能
- サイドバーに常駐表示
- 画像を3秒ごとに自動切り替え
- 「前へ」「次へ」「一時停止/再開」ボタン
- jpg/jpeg/png対応
- 画像カウンター表示（例：1/5）
開発環境
- OS: macOS
- Node.js: v16以上
- VSCode: 最新版
- 開発ツール: IBM Bob
- 言語: TypeScript
準備
# npm（Node Package Manager）のバージョン確認
npm -v
# Yeomanとgenerator-codeをインストール
npm install -g yo generator-code
- Yeoman: プロジェクトの雛形を自動生成するツール。必要なファイルやフォルダをまとめて作ってくれます。
-
generator-code: VSCode拡張機能用の雛形生成ツール。
yo codeコマンドで、拡張機能のひな形を作成できます。
VSCode拡張機能の基礎知識
拡張機能の構造
VSCode拡張機能は、主に以下のファイルで構成されます：
拡張機能フォルダ/
├── package.json # 設定ファイル（マニフェスト）
├── src/
│ └── extension.ts # メインプログラム
├── out/ # コンパイル後のファイル
└── node_modules/ # 依存ライブラリ
その中でも基本となる以下の2つのファイルについてご説明します。
1. package.json
拡張機能の設定ファイルです。VSCodeに「この拡張機能は何をするのか」を伝えます。
例：
{
"name": "my-extension", // 拡張機能の名前
"displayName": "My Extension", // 表示名
"version": "0.0.1", // バージョン
"engines": {
"vscode": "^1.74.0" // 対応VSCodeバージョン
},
"main": "./out/extension.js", // メインファイル
"activationEvents": [ // いつ起動するか
"onStartupFinished"
],
"contributes": { // 提供する機能
"commands": [ // コマンドの定義
{
"command": "extension.helloWorld",
"title": "Hello World"
}
]
}
}
2. extension.ts
拡張機能のメインプログラムです。今回はTypeScriptで書きました。
例：
import * as vscode from 'vscode';
// 拡張機能が有効化されたときに呼ばれる
export function activate(context: vscode.ExtensionContext) {
console.log('拡張機能が起動しました！');
// ここに機能を実装
}
// 拡張機能が無効化されたときに呼ばれる
export function deactivate() {
console.log('拡張機能が終了しました');
}
開発の流れ
ステップ1: Planモードで設計
Bobに要件を伝えます。
あなたは熟練のVSCode拡張の開発者です。
目的：
「常駐」できる画像スライドショー拡張のMVPを作りたいです。
WebviewView（サイドバーのカスタムビュー）で表示してください。
要件：
- WebviewViewProvider を使ってサイドバーに常駐表示する
- 画像はローカルフォルダから読み込む
- 対象拡張子：jpg / jpeg / png
- 画像を約3秒ごとに自動で切り替える
- 「前へ」「次へ」「一時停止/再開」ボタンを配置
- デフォルトフォルダは ./photos
制約/注意：
- VSCodeのセキュリティ制約に配慮し設定する
- 画像が0枚のときは「画像が見つかりません」表示にする
- MVP: Minimum Viable Product（最小限の機能を持つ製品）
- WebviewView: サイドバーに表示するカスタムビュー
- WebviewViewProvider: WebviewViewを提供するクラス
Bobが自動的にTODOリストを作成してくれます。
以下の画像は今回作成されたTODOリストです。
ステップ2: Codeモードで実装
Planモードで設計を確認した後、BobのCodeモードで実装を進めました。
1. プロジェクト雛形の作成
BobがYeomanを使用し、TypeScript拡張のプロジェクト雛形を生成てくれました。
yo code
作成された構造は以下の通りです。
VScode_extensions/
├── src/
│ ├── extension.ts # エントリーポイント
│ └── slideshowProvider.ts # WebviewViewProvider実装
├── photos/ # 画像フォルダ
├── package.json # マニフェスト
├── tsconfig.json # TypeScript設定
├── .vscode/
│ ├── launch.json # デバッグ設定
│ └── tasks.json # ビルドタスク
└── README.md
2. 主要ファイルの実装
package.json
{
"name": "image-slideshow", // 拡張機能の名前
"displayName": "Image Slideshow", // 表示名
"version": "0.0.1", // バージョン
"engines": {
"vscode": "^1.74.0" // 対応VSCodeバージョン
},
"activationEvents": [ // いつ起動するか
"onStartupFinished"
],
"main": "./out/extension.js", // メインファイル
"contributes": { // 提供する機能
"views": {
"explorer": [ // エクスプローラーに追加
{
"type": "webview",
"id": "imageSlideshowView",
"name": "Image Slideshow"
}
]
}
}
}
src/extension.ts
ここでは、「サイドバーに表示するWebviewを登録し、表示されたタイミングで中身（HTML）をセットする」という流れを実装しました。
import * as vscode from 'vscode';
import { SlideshowProvider } from './slideshowProvider';
export function activate(context: vscode.ExtensionContext) {
// SlideshowProviderのインスタンスを作成
const provider = new SlideshowProvider(context.extensionUri);
// VSCodeにWebviewViewProviderを登録
context.subscriptions.push(
vscode.window.registerWebviewViewProvider(
SlideshowProvider.viewType,
provider
)
);
}
export function deactivate() {}
src/slideshowProvider.ts
ここでメインの機能を実装しています。
export class SlideshowProvider implements vscode.WebviewViewProvider {
// ビューのID（package.jsonと一致させる）
public static readonly viewType = 'imageSlideshowView';
constructor(private readonly _extensionUri: vscode.Uri) {}
// VSCodeがビューを表示するときに呼ばれる
public resolveWebviewView(
webviewView: vscode.WebviewView,
context: vscode.WebviewViewResolveContext,
_token: vscode.CancellationToken,
) {
// Webviewの設定
webviewView.webview.options = {
enableScripts: true, // JavaScriptを有効化
localResourceRoots: [ // アクセス可能なフォルダ
this._extensionUri,
this._getPhotosUri()
]
};
// HTMLコンテンツを設定
webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
}
// 画像フォルダのURIを取得
private _getPhotosUri(): vscode.Uri {
const workspaceFolders = vscode.workspace.workspaceFolders;
if (workspaceFolders && workspaceFolders.length > 0) {
return vscode.Uri.file(
path.join(workspaceFolders[0].uri.fsPath, 'photos')
);
}
return this._extensionUri;
}
// 画像ファイルのリストを取得
private _getImageFiles(): string[] {
const photosPath = this._getPhotosUri().fsPath;
// フォルダが存在しない場合は空配列を返す
if (!fs.existsSync(photosPath)) {
return [];
}
// フォルダ内のファイル一覧を取得
const files = fs.readdirSync(photosPath);
// 画像ファイルのみをフィルタリング
return files.filter(file => {
const ext = path.extname(file).toLowerCase();
return ['.jpg', '.jpeg', '.png'].includes(ext);
});
}
}
また、Webview側はHTML/CSS/JavaScriptでスライドショーを実装しています（ここは省略します）。
setInterval で3秒ごとに次の画像へ切り替え、ボタンで前へ/次へ/停止・再開を操作できるようにしています。
ステップ3: コンパイルと実行
# 依存関係のインストール
npm install
# TypeScriptをJavaScriptにコンパイル
npm run compile
その後、VSCodeで F5キー を押すと、拡張開発用の新しいVSCodeが起動します。
エクスプローラーに「Image Slideshow」が表示されれば成功です。
あとは、拡張機能をインストールすれば使用することができます。
まとめ
学んだこと
VSCode拡張機能の基礎
- 拡張機能の構造（package.json、extension.ts）
- WebviewViewProviderの使い方
IBM Bobの活用
- Planモードでの設計
- Codeモードでの実装
- 対話的な開発プロセス
IBM Bobを使うことで、初心者でもVSCode拡張機能を作ることができました。AIアシスタントの力を借りることで、「作りたいもの」のアイデアを素早く形にできる時代になったことを実感しました。
フィードバックなどございましたら、ぜひコメントでお知らせください！