はじめに
管理画面やデバッグツールで「コマンドを打って操作したい」と思ったことはありませんか。ボタンやフォームをいくら並べても、複雑な操作を素早くこなすにはコマンドラインの方が向いている場面があります。とはいえ、ターミナル風のUIを自前で実装するのは、キー入力のハンドリングや履歴管理、補完など地味に手間がかかる作業です。
jQuery Terminalは、この「ブラウザ上のコマンドラインインタプリタ」をまるごと提供してくれるJavaScriptライブラリです。関数を1つ登録するだけで、TAB補完・コマンド履歴・Bash風のキーボードショートカットまで揃ったターミナルUIが動き出します。
とはいえ、読むより触った方が早いと思います。実際にブラウザ上でコマンドを打って動かせるサンプルを用意したので、先に挙動を見たい方はこちらからどうぞ。
jQuery Terminalとは
jQuery Terminalは、Webページ内にターミナル（コマンドラインインタプリタ）を組み込むためのオープンソースライブラリです。2011年から開発が続いており、2026年現在もメンテナンスが継続されている息の長いプロジェクトです。ユーザーが入力したコマンドをJavaScriptの関数として処理できるほか、JSON-RPCを使ってサーバー側の処理をそのままコマンド化することもできます。
主な特徴
- コマンド定義が簡単 -
$.terminal.new()にオブジェクトかコールバック関数を渡すだけでコマンドを登録できる - TAB補完とコマンド履歴 -
completionオプションでの補完候補指定や、LocalStorage/Cookieを使った履歴保存に標準対応 - JSON-RPC統合 - サーバーのAPIエンドポイントを渡すだけで、リモート関数をそのままコマンドとして呼び出せる
- Bash風キーボードショートカット - Ctrl+A、Ctrl+E、Ctrl+Rなど、シェルに慣れた人がそのまま使える操作性
- インタプリタのスタック -
push()でサブコマンドの階層（ログイン画面やサブメニューなど）を作れる - ANSIエスケープコード対応 - 色付きテキストなどLinux/Unixのターミナル表現をそのまま再現できる
インストール
npmでインストールする場合は次のコマンドを実行します。jQuery Terminalは内部でjquery本体に依存しているため、一緒にインストールしてください。
npm install jquery jquery.terminal
CDN経由で読み込む場合は次のようになります。
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal@2.47.0/js/jquery.terminal.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/jquery.terminal@2.47.0/css/jquery.terminal.min.css" rel="stylesheet"/>
jQuery Terminalのサンプルを動かす
下のサンプルは、$.terminal.new()でターミナルを生成し、greetとaddという2つの独自コマンドを登録したものです。ターミナル上にhelpと打つと登録済みコマンドの一覧が、greet 太郎のように打つと引数を受け取った挨拶が表示されます。
要点だけを抜き出すと、コマンド定義は次のように書けます。
$('#term').terminal({
greet: function (name) {
this.echo(`こんにちは、${name || 'ゲスト'}さん`);
},
add: function (a, b) {
this.echo(String(Number(a) + Number(b)));
},
help: function () {
this.echo('使えるコマンド: greet [名前] / add [数値] [数値]');
}
}, {
greetings: 'jQuery Terminal サンプルへようこそ\n"help" でコマンド一覧を表示',
prompt: '> '
});
実際に動かせるものが下です。入力欄にgreet 花子やadd 3 5と打ってEnterを押してみてください。
greetやaddのように、渡したオブジェクトのキーがそのままターミナルのコマンド名になります。存在しないコマンドを打つと「command not found」と表示されるので、help関数の中身を書き換えれば案内文もすぐに変えられます。
基本的な使い方
もっとも単純な使い方は、コマンドを1つの関数として渡す方法です。この場合、入力された文字列全体がそのまま関数に渡されます。
$('#term').terminal(function (command) {
if (command !== '') {
this.echo(`実行結果: ${command}`);
} else {
this.echo('コマンドを入力してください');
}
}, {
greetings: 'シンプルなターミナルです'
});
複数のコマンドを名前で使い分けたい場合は、先ほどのサンプルのようにオブジェクトを渡します。オブジェクトのキーがコマンド名、値がそのコマンドを処理する関数になります。エラーを返したいときはthis.error()を、通常の出力にはthis.echo()を使うのが基本パターンです。
実践的なユースケース
コマンド履歴とTAB補完を有効にする
CLIツールらしさを支える2大機能が、上下キーでのコマンド履歴呼び出しと、TABキーによる入力補完です。jQuery Terminalではcompletionオプションに候補の配列を渡すだけで、TAB補完が有効になります。履歴はデフォルトで自動的にLocalStorageへ保存されます。
pick まで入力してTABキーを押すと、fruits配列の候補が展開されます。completionに渡す配列を書き換えれば、そのまま自社の商品名やコマンド候補に差し替えられます。一度実行したコマンドは上矢印キーで呼び出せるので、繰り返し同じコマンドを打つ操作が減らせます。
インタプリタのスタックでサブメニューを作る
ログイン後だけ使えるコマンド群や、モード切り替えのあるCLIを作りたい場合は、this.push()を使ってインタプリタを積み重ねます。ネストしたインタプリタに入ると、プロンプトの表示も切り替わり、exitで元の階層に戻れます。
main: {
login: function () {
this.push(adminInterpreter, {
prompt: 'admin> ',
name: 'admin'
});
}
}
loginと打つとプロンプトがadmin> に変わり、statusコマンドが使えるモードに切り替わります。exitと打てばthis.pop()によって元の階層に戻ります。このpush/popの仕組みを使うと、ログイン画面や設定メニューのような多段階のフローも1つのターミナル上で表現できます。
まとめ
jQuery Terminalを使うと、コマンド名と処理内容を対応付けるオブジェクトを渡すだけで、TAB補完・コマンド履歴・Bash風ショートカットまで揃ったターミナルUIをブラウザ上に用意できます。単純な関数1つから始めて、複数コマンドの登録、push/popによるサブメニュー化まで、必要に応じて段階的に機能を積み上げられるのも扱いやすいポイントです。管理画面のデバッグコンソールや、あえてCLI操作を前面に出したいプロダクトのUIなど、用途を選んで試してみてはいかがでしょうか。