IDEは使うものから作るものへ - Eclipse Theiaという選択肢

はじめに

「自社製品に専用のエディタを組み込みたい」「ブラウザで動く開発環境を提供したい」と考えたことはありませんか。VS Codeは素晴らしいエディタですが、ライセンスやブランディングの制約があり、独自プロダクトのベースとして自由に使えるわけではありません。かといって、エディタをゼロから作るのは現実的ではありません。

その悩みに正面から答えてくれるのが、今回紹介するEclipse Theia（エクリプス・テイア）です。TypeScript製のオープンソースフレームワークで、ブラウザでもデスクトップでも動く「自分だけのIDE」を構築できます。GitHubスター数は21.6kを超え、Google CloudのCloud Shell EditorやArduino IDE 2.0など、名だたるプロダクトの基盤として採用されている実績があります。

Eclipse Theiaとは

Eclipse Theiaは、クラウドとデスクトップの両方で動作するIDEやツールを構築するための拡張可能なフレームワークです。Eclipse Foundationのもと、ベンダー中立なオープンソースガバナンスで開発されています。

重要なポイントとして、TheiaはVS Codeのフォークではありません。Monacoエディタ（VS Codeのエディタ部分）など一部のコンポーネントは共有しつつ、アーキテクチャは独自に設計されており、徹底したモジュール化によって高いカスタマイズ性を実現しています。

プロジェクトは大きく2つの顔を持っています。

Theia Platform - 独自のIDEやツールを構築するためのフレームワーク
Theia IDE - Theia Platformで作られた、そのまま使える完成品のIDE

2026年7月にはv1.73.1がリリースされ、月次リリースのサイクルで活発に開発が続いています。近年はTheia AIという機能群が加わり、クラウド・ローカルを問わず好きなLLMを接続できる「AIネイティブなIDE」としても注目を集めています。

主な特徴

VS Code拡張機能との互換性 - Open VSX Registryを通じて3,000以上のVS Code拡張をそのまま利用できます
ブラウザとデスクトップの両対応 - 同じコードベースからWebアプリ版とElectron版の両方をビルドできます
Language Server Protocol対応 - Python、Java、C++など多数の言語で高度なコード補完・解析が使えます
依存性注入によるモジュール設計 - 不要な機能を外し、独自機能を注入する、といった深いカスタマイズが可能です
オープンなライセンスとガバナンス - EPL-2.0ライセンスで、単一ベンダーの意向に左右されない運営体制です

インストール

Theiaで独自アプリケーションを作るには、公式のYeomanジェネレータを使うのが最短ルートです。Node.js 18以上とYarn 1.xを用意した上で、次のコマンドを実行します。

# ジェネレータのインストール
npm install -g yo generator-theia-extension

# プロジェクトの生成
mkdir my-theia-app
cd my-theia-app
yo theia-extension

対話形式でテンプレートを選択すると（まずは「Hello World」がおすすめです）、以下の3パッケージからなるモノレポが生成されます。

browser-app - ブラウザ版アプリケーション
electron-app - デスクトップ版アプリケーション
hello-world - サンプルの拡張機能

なお、フレームワークではなく完成品のIDEを試したいだけなら、公式サイトからTheia IDEのインストーラをダウンロードするだけで利用できます。

基本的な使い方

生成されたプロジェクトをビルドして起動してみましょう。

# ブラウザ版のビルドと起動
yarn build:browser
yarn start:browser

http://localhost:3000 にアクセスすると、ファイルエクスプローラーやターミナルを備えたIDEがブラウザ上に立ち上がります。デスクトップ版なら yarn build:electron && yarn start:electron です。たったこれだけで、配布可能な「自分のIDE」の骨格が手に入ります。

独自機能を追加する

Theiaの真価は拡張機能の作りやすさにあります。生成された hello-world 拡張を見てみましょう。まずコマンドの定義と実装です。

// hello-world-contribution.ts
import { injectable, inject } from '@theia/core/shared/inversify';
import { CommandContribution, CommandRegistry, MessageService } from '@theia/core';

export const HelloWorldCommand = {
    id: 'HelloWorld.command',
    label: 'Say Hello'
};

@injectable()
export class HelloWorldCommandContribution implements CommandContribution {

    constructor(
        @inject(MessageService) private readonly messageService: MessageService
    ) { }

    registerCommands(registry: CommandRegistry): void {
        registry.registerCommand(HelloWorldCommand, {
            execute: () => this.messageService.info('Hello World!')
        });
    }
}

次に、このコマンドをメニューに登録します。

// hello-world-menu-contribution.ts
import { injectable } from '@theia/core/shared/inversify';
import { MenuContribution, MenuModelRegistry } from '@theia/core';
import { CommonMenus } from '@theia/core/lib/browser';
import { HelloWorldCommand } from './hello-world-contribution';

@injectable()
export class HelloWorldMenuContribution implements MenuContribution {

    registerMenus(menus: MenuModelRegistry): void {
        menus.registerMenuAction(CommonMenus.EDIT_FIND, {
            commandId: HelloWorldCommand.id,
            label: 'Say Hello'
        });
    }
}

最後に、依存性注入コンテナへ束ねます。TheiaはInversifyJSベースのDIコンテナで全機能を組み立てており、この仕組みこそが「機能の差し替え自由」を支えています。

// hello-world-frontend-module.ts
import { ContainerModule } from '@theia/core/shared/inversify';
import { CommandContribution, MenuContribution } from '@theia/core';
import { HelloWorldCommandContribution } from './hello-world-contribution';
import { HelloWorldMenuContribution } from './hello-world-menu-contribution';

export default new ContainerModule(bind => {
    bind(CommandContribution).to(HelloWorldCommandContribution);
    bind(MenuContribution).to(HelloWorldMenuContribution);
});

拡張側の package.json に theia-extension キーワードとエントリポイントを宣言しておけば、アプリ側は依存関係に追加するだけで機能が組み込まれます。

{
  "keywords": ["theia-extension"],
  "dependencies": {
    "@theia/core": "latest"
  },
  "theiaExtensions": [
    { "frontend": "lib/browser/hello-world-frontend-module" }
  ]
}

機能の取捨選択

アプリ側の package.json で @theia/* パッケージを選ぶことで、搭載する機能を決められます。たとえば「ターミナルとエディタだけの軽量ツール」なら、@theia/terminal と @theia/editor を残して他を外す、という具合です。フル機能のIDEから単機能ツールまで、同じ仕組みで作り分けられるのがTheiaの設計思想です。

実践的なユースケース

社内向けクラウド開発環境

browser-appをDockerコンテナにまとめてサーバーにデプロイすれば、チーム全員がブラウザからアクセスできる統一開発環境になります。新メンバーの環境構築が「URLを開くだけ」になるのは大きな魅力です。実際、Google CloudのCloud Shell EditorはTheiaベースで構築されています。

製品組み込みの専用ツール

Arduino IDE 2.0が好例です。Theiaから不要な機能を取り除き、ボード管理やスケッチ書き込みといった独自機能を拡張として追加することで、「Arduinoのための専用IDE」を実現しています。自社のDSLエディタや設定ツール、ローコード開発環境のベースとしても同じアプローチが使えます。

AI機能を組み込んだ次世代IDE

Theia AIを使うと、チャットエージェントやコード補完エージェントを自作ツールに組み込めます。接続先のLLMはOpenAI、Anthropic、ローカルのOllamaなどから選択でき、送信されるデータを完全に自分でコントロールできます。GitHub CopilotやCursorのようなAI開発体験を、データ主権を保ったまま自社製品に組み込めるわけです。