Node.jsでリアルタイムでコンソールの表示を更新する

はじめに

CLIで簡単なツールを作っていると、コンソール上で進捗率を表示する際に、リアルタイムで表示を更新したい場合があります。通常のconsole.logでは、毎回新しい行に出力が追加されてしまい、進捗状況を効果的に表示することができません。

この記事では、ターミナルの表示を動的に制御し、進捗率の表示をはじめとする様々な出力を更新する方法について説明します。😺

カーソル位置を操作して表示テキストを更新する

コンソール上でカーソル位置を操作することで、特定の位置にテキストを再描画し、進捗バーやカウントダウンタイマーなどのリアルタイムで更新が必要な出力を実現できます。

カーソルの絶対位置指定

カーソル位置を操作することで、特定の位置にテキストを再描画することができます。これにより、同じ位置に表示される内容を動的に変更できます。

readline.cursorToを使用すると、カーソルを特定の位置に移動してからテキストを出力することができます。これにより、特定の位置にテキストを上書きすることが可能です。

import readline from 'readline';

// カーソルをターミナルの10列目、5行目に移動し、そこでテキストを表示する例
readline.cursorTo(process.stdout, 10, 5);
console.log('This text appears at column 10, row 5');

カーソルの相対位置指定

readline.moveCursorを使用すると、現在のカーソル位置から相対的に移動することができます。例えば、次のコードはカーソルを右に5列、上に2行移動させます。

import readline from 'readline';

// 現在のカーソル位置から相対的に移動し、そこでテキストを表示する例
readline.moveCursor(process.stdout, 5, -2);
console.log('This text appears 5 columns right and 2 rows up from the current position');

進捗バーを表示する

実際に動作する簡単なCLIアプリケーションを作成してみましょう。この例では、1秒ごとに更新される進捗バーを実装します。

import readline from 'readline';

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

let progress = 0;

// 進捗バーを表示する関数
function displayProgress() {
  // 現在の行をクリアしてカーソルを左端に移動
  readline.moveCursor(process.stdout, -process.stdout.columns, 0);
  readline.clearLine(process.stdout, 0);

  // 進捗バーを表示
  process.stdout.write(`Progress: ${progress}%`);

  if (progress < 100) {
    progress += 10;
    setTimeout(displayProgress, 1000);
  } else {
    console.log('\nProgress complete!');
    rl.close();
  }
}

// 進捗バーの表示を開始
displayProgress();

このコードは、1秒ごとに更新される進捗バーを表示します。readline.moveCursorを使用して、現在の行をクリアし、カーソルを左端に移動してから進捗バーを更新することで、リアルタイムな表示を実現しています。

まとめ

readlineモジュールを活用することで、特定の位置にテキストを再描画し、リアルタイムな表示更新が可能になります。これにより、進捗率の表示やカウントダウンタイマーなど、動的なCLIアプリケーションの開発が容易になります。