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

投稿日: 2022-04-20 2022-04-20
タグ: 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

9361