コマンドラインスロバーでNode.jsスクリプトを活気づける

投稿日: 2022-04-20 2022-10-10
タグ: Node.js

スロバーは、コンピューターが機能していることを示すアニメーション要素です。「その砂時計」や「スピニングピンホイール」など、多くの名前で知られているこのインジケーターは、コンピューターが処理を終了するまでしばらく待つ必要があることをユーザーに伝えるために使用されます。

プログレスバーと混同しないように、スロバーはアイコンのようなものであり、コマンドラインでは、カーソルの点滅、一連の楕円のように単純な場合もあれば、で表される回転する線のように複雑な場合もあります。 -, \, | と / 文字。

Webサイトでは、アニメーションGIFを使用せずに済ませることができます。さらに高度な場合は、CSSを使用してアニメーションを作成できます。コマンドラインの実装は、画面の同じ部分に何度も何度も書き込む必要があるため、もう少し複雑です。

あなたがただするなら console.log() 前述のアニメーションの各キャラクターは、次のようになります。

- Loading...
\ Loading...
| Loading...
/ Loading...
- Loading...
\ Loading...

あなたと私の間では、Node.jsを使用してターミナル画面の同じ領域で書き込みと再書き込みを行う方法すら知りません。幸いなことに、悪名高いフルタイムのオープンソーサー Sindre Sorhus には、私たちが使用できるようにすでに整理され、パッケージ化されているものがあります。

入門

問題のパッケージは、自称エレガントなターミナルスピナーであるoraです。はじめに ora、パッケージに追加するだけです。

# via npm
$ npm install ora

# via yarn
$ yarn add ora

パッケージをインストールしたら、次のことを行う必要があります require() スクリプト内から：

const ora = require('ora');

基本的な使用法

スクリプトに含めると、問題なくスロバーを開始および停止できます。

const ora = require('ora');

const throbber = ora('Rounding up all the alligators').start();

// Simulating some asynchronous work for 10 seconds...
setTimeout(() => {
  throbber.stop();
}, 1000 * 10);

デフォルトでは ora マーチングアリインジケーター（画像アプリ内の選択範囲の周りの点線）に似たドットで構成されるおしゃれなスピナーを表示します。

⠏ Rounding up all the alligators

のペイロードが setTimeout() 発火すると、スロバーが停止し、画面から消去されます。

注：タイムアウトの代わりに、AJAX呼び出しを開始したり、時間がかかるその他の作業を実行したりして、 ora 物事が完了したときにオブジェクト。

永続的な出力

必要に応じて、読み込み中のテキストを画面に表示したまま、スロバーを別のキャラクターに置き換えることもできます。読み込みテキストを変更して、「完了」などと言うこともできます。

const ora = require('ora');

const throbber = ora('Rounding up all the alligators').start();

// Simulating some asynchronous work for 10 seconds...
setTimeout(() => {
  throbber.stopAndPersist({
    symbol: '🐊',
    text: 'All done rounding up the alligators!',
  });
}, 1000 * 10);

これで、ドキドキとテキストが突然画面から消える代わりに、親しみやすいメッセージとさらに親しみやすい絵文字が残ります。

カスタムスロバー

からのデフォルトのスロバー出力 ora すぐに使えるオプションとしてはかなり素晴らしいですが、もっと何かが必要な場合は、 ora 依存関係としてcli-spinnersプロジェクトが付属しています。

同じ作者によるこの追加のプロジェクトには、（この記事の執筆時点で）約70の異なる「スピナー」アニメーションが付属しており、考えられるほぼすべてのユースケースをカバーしています。

カバーされていない何かを考えましたか？

その場合は、独自のアニメーションを、間隔（フレーム間の時間）と循環させたいフレームの配列を持つJSONとして簡単に定義できます。

たとえば、独自の爬虫類をテーマにしたスロバーが必要な場合は、次のようなものを書くことができます。

const ora = require('ora');

const throbber = ora({
  text: 'Rounding up all the reptiles',
  spinner: {
    frames: ['🐊', '🐢', '🦎', '🐍'],
    interval: 300, // Optional
  },
}).start();

// Simulating some asynchronous work for 10 seconds...
setTimeout(() => {
  throbber.stop();
}, 1000 * 10);

今、あなたはあなたの想像力によってのみ制限されています。

getdocs

13036