はじめに

とある情報をエクスポートするプログラムを作成していた時に、情報量が多くエクスポートに時間が少しかかるとプログラムが動作しているのかどうか不安になるときがありました。
そんなとき、よく見る、ローディング表示をすれば動作しているのかハングしてしまっているのかがわかるので、実装したいと思いました。

#環境

Node v10.16.3
Typescript 4.0.2
npm 6.14.9
git version 2.23.0.windows.1
Windows 10 Pro

参考サイト

【Node.js】CLIでロード中にクルクル回るアレ(スピナー)を作る

コード

Loading.tsローディングスタート及びエンドの関数を提供

Loading.ts

import rl from 'readline'

const spin_char = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]

let spin_count = 0;
const spin = (message: string) => {
  process.stdout.write('\x1B[?25l') //カーソルを消す
  rl.clearLine(process.stdout, 0) //行をすべて削除
  rl.moveCursor(process.stdout, -9999, 0) //一番左側に戻る
  process.stdout.write(`${spin_char[spin_count]} ${message}`) //spin_charの配列で描画
  spin_count++ //要素番号計算
  spin_count >= spin_char.length ? spin_count = 0 : null //要素番号のリセット
}

export const loading = (msg: string) => setInterval(() => {
  spin(msg);
}, 200);

export const endloading = (loading: NodeJS.Timeout, msg: string) => {
  clearInterval(loading)
  rl.clearLine(process.stdout, 0) // 行をすべて削除
  process.stdout.write(`\n${msg}`)//end Message
  process.stderr.write('\x1B[?25h') //ローディングで消したカーソルを戻す
}

使用例

loading('ローディング中に表示したい文字列')
endLoading(loadingの返り値 ,'終了時に表示したい文字列')
上記をそれぞれローディングスタート、ローディングエンドのタイミングで呼ぶ

QueryCollection.ts

//start Loading
const loadingstart = loading('Query a collection')
//Discovery query
const resquery = await queryCollection(url, apikey, environmentid, collectionid, version)
//end Loading
endloading(loadingstart, 'Query a collection Finished!!')

使用イメージ

最後に

Loading.tsのspin_charや表示速度等をカスタマイズしていけば自分好みのローディングアニメーションを作ることもできますので是非活用ください。