こんにちは！AI・データサイエンスの現場で、毎日JupyterLabと向き合っているエンジニアの皆さん。
「JupyterLabの画面のここに、自社の独自APIを叩くボタンが欲しいな…」
「データフレームをワンクリックで整形してSlackに飛ばすサイドバーを作りたいな…」
そんなふうに思ったことはありませんか？
既製の拡張機能を探すのも良いですが、「自分たちの業務に特化したUIを、TypeScriptとReactで自作できるようになる」と、開発効率の次元がガラリと変わります。毎日の退屈な手作業を自動化し、チーム全員の開発環境を劇的にリッチにする力――それがJupyterLabの拡張機能開発です。
今回は、数あるJupyterLab拡張機能の入門記事のなかでも、「最も挫折しにくく、実務に直結する最短ルート」を、知的な先輩エンジニアの視点から優しく、そしてロジカルに解説していきます。
さあ、あなたのJupyterLabを、世界で一つだけの最強のワークスペースに進化させましょう！
—
1. なぜJupyterLabの拡張機能を作るのか？（アーキテクトの視点）
JupyterLabは、単なる「ブラウザで動くPythonのコードエディタ」ではありません。その実態は、拡張可能なフロントエンド・アプリケーションのプラットフォーム（Luminoベース）です。
多くのエンジニアは、Python側だけで処理を完結させようとしますが、UI（ユーザーインターフェース）の改善には限界があります。「JupyterLabのサイドバーに独自のコントロールパネルを置き、そこで入力したパラメータを背後のPythonカーネルに渡す」という連携ができるようになると、作れるツールの幅が圧倒的に広がります。
今回は、モダンなフロントエンド開発のデファクトスタンダードである TypeScript と React を用い、JupyterLabのコアに独自の「コマンド」と「サイドバーウィジェット」をねじ込む方法をマスターします。
—
2. 開発環境の構築：足場を固める
まずは、拡張機能をビルドするためのモダンなNode.js/Python開発環境を整えます。JupyterLabの拡張機能開発では、Cookiecutterというテンプレート生成ツールを使うのが公式の黄金律です。
必要なツールのインストール
ターミナルを開き、以下のコマンドを実行してください。Pythonの仮想環境（venvやconda）がすでにアクティブであることを前提に進めます。
JupyterLab本体と、拡張機能のビルドに必要なNode.js関連のパッケージをインストールします
pip install jupyterlab cookiecutter
Node.js（v18以上推奨）がインストールされていることを確認してください
node -v
> 先輩からのアドバイス
> JupyterLabの拡張機能は、TypeScriptで書かれたコードをWebpackなどでコンパイル（ビルド）して生成されます。そのため、Pythonの環境だけでなく、裏でNode.jsがしっかり動く環境が必要です。
—
3. テンプレートからのプロジェクト生成
公式が提供しているCookiecutterテンプレートを使うことで、面倒な設定ファイル（`package.json`や`tsconfig.json`、webpackの設定など）を一発で生成できます。
以下のコマンドを実行してください。
cookiecutter https://github.com/jupyterlab/extension-cookiecutter-ts
実行すると、いくつか質問されます。以下のように答えてみましょう（カッコ内は入力例です）。
- `project_name`: `My Awesome Extension` （拡張機能の表示名）
- `extension_name`: `my_extension` （パッケージ名・Pythonモジュール名）
- `author_name`: あなたのお名前
- `python_name`: `my_extension`
これで、カレントディレクトリに `my_extension` というフォルダが生成されました。中身を覗いてみると、キレイに整理されたTypeScriptのプロジェクト構造に感動するはずです。
—
4. プロジェクトの構造を理解する
生成された `my_extension` の中身は、以下のような構成になっています。
my_extension/
├── src/
│ ├── index.ts # JupyterLabに機能を登録するメインのエントリーポイント
│ └── component.tsx # Reactコンポーネントを配置する場所
├── package.json # 依存関係やビルドスクリプトの定義
├── tsconfig.json # TypeScriptのコンパイル設定
└── pyproject.toml # Pythonパッケージとしてのビルド設定
この中で最も重要なのが、`src/index.ts` です。ここに書かれたコードがJupyterLabの起動時に読み込まれ、メニューやサイドバーを構築します。
—
5. 「Hello World」を拡張機能として降臨させる
それでは、実際にコードを書いていきましょう。今回は、「JupyterLabの左側サイドバーに、Reactで作ったカスタムウィジェットを表示し、ボタンを押すとJupyterLab内にトースト通知が出る」という機能を作ります。
① Reactコンポーネントの作成 (`src/component.tsx`)
まずは、サイドバーの中に描画されるReactコンポーネントを作ります。既存のファイルを書き換えるか、新しく作成してください。
import React from ‘react’;
// コンポーネントが受け取るプロパティの型定義
interface ICounterWidgetProps {
onNotify: () => void;
}
export const CounterWidget: React.FC
return (
業務自動化パネル
Reactで構築されたカスタムサイドバーです。
{/ クリックされるとJupyterLab側に通知を送るボタン /}
);
};
② メインロジックの実装 (`src/index.ts`)
次に、このReactコンポーネントをJupyterLabのウィジェット（Sidebarにドッキング可能な形式）として包み込み、JupyterLabに登録します。
import {
JupyterFrontEnd,
JupyterFrontEndPlugin
} from ‘@jupyterlab/application’;
import { ICommandPalette, MainAreaWidget } from ‘@jupyterlab/apputils’;
import { Widget } from ‘@lumino/widgets’;
import React from ‘react’;
import { ReactWidget } from ‘@jupyterlab/apputils’;
import { CounterWidget } from ‘./component’;
/
- JupyterLab拡張機能の核心となる定義オブジェクト
/
const plugin: JupyterFrontEndPlugin
id: ‘my_extension:plugin’,
autoStart: true,
requires: [ICommandPalette],
activate: (app: JupyterFrontEnd, palette: ICommandPalette) => {
console.log(‘JupyterLab拡張機能 “my_extension” がアクティブになりました！’);
// 1. ReactコンポーネントをJupyterLabのWidget（Luminoウィジェット）に変換
const content = ReactWidget.create(
// ボタンが押されたときにコンソールとUIに通知を出す
alert(‘業務自動化タスクがトリガーされました！’);
}}
/>
);
// ウィジェットに固有のタイトル（タブやサイドバーのアイコン名）を設定
content.id = ‘my-extension-sidebar’;
content.title.label = ‘自動化ツール’;
content.title.iconClass = ‘jp-LabIcon’; // デフォルトのアイコンを付与
// 2. JupyterLabの左側サイドバーにウィジェットを登録
app.shell.add(content, ‘left’, { rank: 1000 });
// 3. コマンドパレット（Ctrl+Shift+Cなどで開くメニュー）へのコマンド登録
const commandId = ‘my_extension:open’;
app.commands.addCommand(commandId, {
label: ‘自動化ツールパネルを開く’,
execute: () => {
// サイドバーが閉じている場合に開くフォーカス処理
if (!content.isAttached) {
app.shell.add(content, ‘left’);
}
app.shell.activateById(content.id);
}
});
// パレットにコマンドを追加
palette.addItem({ command: commandId, category: ‘カスタム拡張機能’ });
}
};
export default plugin;
—
6. 開発モードでのインストールと動作確認
コードを書いたら、いよいよJupyterLabに組み込んで動作確認をします。拡張機能の開発では、コードの変更を即座に反映させるために「開発モード（Development Mode）」でインストールします。
プロジェクトのルートディレクトリ（`pyproject.toml`がある場所）で、以下のコマンドを実行してください。
1. 開発モード（シンボリックリンク形式）で拡張機能をインストール
pip install -e .
2. TypeScriptの変更を監視して自動ビルドするモードを別ターミナルで起動するか、一度ビルドする
jlpm run build
> 先輩からのアドバイス：開発の神フロー
> 日常的な開発では、2つのターミナルを立ち上げるのが鉄則です。
> ターミナルA: `jlpm watch` （TypeScriptのコード変更を検知して自動で再コンパイル）
> ターミナルB: `jupyter lab` （JupyterLab本体の起動）
動作確認
JupyterLabを起動したら、ブラウザでアクセスしてみましょう。
jupyter lab
画面の左側サイドバーに、見慣れないアイコン（あるいはタブ）が出現し、クリックすると先ほど私たちがReactで書いた「自動化ツール」パネルが表示されているはずです！
さらに、ボタンを押すとアラートが飛び、コマンドパレット（`Ctrl + Shift + C`）から「自動化ツールパネルを開く」が実行できることを確認してください。
—
7. おわりに：ここから先の実務への応用
お疲れ様でした！これで、JupyterLabのGUIをTypeScriptとReactで自由に拡張する基本のキが手に入りました。
これをマスターしたあなたなら、今後は以下のような実務の自動化・効率化が一気に現実味を帯びてきます。
- 社内API連携ウィジェット: サイドバーから直接社内DBやS3に接続し、データセットをワンクリックでノートブックにロードする。
- コード品質チェッカー: ノートブック内の全セルを走査し、セキュリティ上の機密情報（APIキーなど）が含まれていないかリアルタイムで警告する。
- 自動レポート生成: 実行結果のグラフやデータを、サイドバーのボタン一つでMarkdownやPDFにまとめてConfluenceやSlackに送信する。
「これをマスターすれば、毎日のコーディングが劇的に楽になりますよ」。
あなたの開発ライフが、この拡張機能によってより創造的でエキサイティングなものになることを、心から応援しています。
それでは、次のハックでお会いしましょう！