Inquirer.jsを使用してインタラクティブなコマンドラインプロンプトを作成する方法

序章

Inquirer.js は、一般的なインタラクティブなコマンドラインユーザーインターフェイスのコレクションです。 これには、質問への回答の入力やリストからの選択肢の選択が含まれます。

inquirerパッケージは、いくつかのデフォルトプロンプトを提供し、高度に構成可能です。 プラグインインターフェースを介して拡張することもできます。 promiseとasync/await構文もサポートしています。

この記事では、Inquirer.jsのいくつかの機能をインストールして探索します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

• Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。

このチュートリアルは、ノードv15.14.0、npm v7.10.0、およびinquirerv8.0.0で検証されました。

ステップ1—プロジェクトの設定

まず、ターミナルウィンドウを開き、新しいプロジェクトディレクトリを作成します。

mkdir inquirer-example

次に、次のディレクトリに移動します。

cd inquirer-example

Node.jsスクリプトへのプロンプトの追加を開始するには、inquirerパッケージをインストールする必要があります。

npm install inquirer

この時点で、Inquirer.jsを使用する準備ができた新しいプロジェクトができました。

ステップ2—プロンプトを作成する

次に、プロジェクトディレクトリに新しいindex.jsファイルを作成し、コードエディタで開きます。

スクリプト内で、必ずinquirerを要求してください。

index.js

const inquirer = require('inquirer');

ユーザーにお気に入りの爬虫類を尋ねるプロンプトを追加します。

index.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      name: 'faveReptile',
      message: 'What is your favorite reptile?'
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.faveReptile);
  });

ターミナルウィンドウに戻り、スクリプトを実行します。

node index.js

プロンプトが表示されます。

Output? What is your favorite reptile?

回答を提供すると、回答が表示されます。

Output? What is your favorite reptile? Crocodiles
Answer: Crocodiles

ユーザーが回答を送信せずにENTERを押すことができるdefault値を指定できます。

index.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      name: 'faveReptile',
      message: 'What is your favorite reptile?',
      default: 'Alligators'
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.faveReptile);
  });

スクリプトを再度実行すると、プロンプトが表示されます。

Output? What is your favorite reptile? (Alligators)

回答なしでENTERを押すと、デフォルトの回答が送信されます。

Output? What is your favorite reptile? Alligators
Answer: Alligators

これで、プロンプトを作成してデフォルト値を設定できます。

ステップ3—複数のプロンプトを作成する

.prompt()メソッドが配列またはオブジェクトを受け入れることに気付いたかもしれません。 これは、一連のプロンプト質問をつなぎ合わせることができ、すべてのプロンプトが解決されると、すべての回答がanswers変数の一部として名前で利用できるようになるためです。

コードエディタでindex.jsに戻り、ユーザーに好きな色を尋ねるプロンプトを追加します。

index.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      name: 'faveReptile',
      message: 'What is your favorite reptile?',
      default: 'Alligators'
    },
    {
      name: 'faveColor',
      message: 'What is your favorite color?',
      default: '#008f68'
    },
  ])
  .then(answers => {
    console.info('Answers:', answers);
  });

スクリプトを再度実行すると、次の2つのプロンプトが表示されます。

Output? What is your favorite reptile? Alligators
? What is your favorite color? #008f68
Answers: { faveReptile: 'Alligators', faveColor: '#008f68' }

これで、複数のプロンプトを作成できます。

ステップ4—リスト、未加工リスト、拡張可能リスト、チェックボックス、パスワード、およびエディターの使用

inquirerは、ユーザーにテキスト入力を求める以上のことをサポートします。 例として、次のタイプを単独で紹介しますが、同じ配列に渡すことで、それらをチェーンすることができます。

リスト

listタイプでは、inputタイプが提供する自由形式の入力の代わりに、選択できるオプションの固定セットをユーザーに提示できます。

list.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'list',
      name: 'reptile',
      message: 'Which is better?',
      choices: ['alligator', 'crocodile'],
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.reptile);
  });

ターミナルウィンドウに戻り、スクリプトを実行します。

node list.js

listプロンプトが表示されます。

Output? Which is better? (Use arrow keys)
❯ alligator
  crocodile

ユーザーは、ARROW UPおよびARROW DOWNキーを使用して、選択肢のリストをナビゲートできます。 jおよびkキーボードナビゲーションも利用できます。

生のリスト

rawlistタイプはlistに似ています。 選択肢のリストが表示され、ユーザーは選択したインデックスを入力できます（1から開始）。

rawlist.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'rawlist',
      name: 'reptile',
      message: 'Which is better?',
      choices: ['alligator', 'crocodile'],
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.reptile);
  });

ターミナルウィンドウに戻り、スクリプトを実行します。

node list.js

rawlistプロンプトが表示されます。

Output? Which is better?
  1) alligator
  2) crocodile
  Answer:

無効な値を送信すると、"Please enter a valid index"エラーが発生します。

拡張可能なリスト

expandタイプは、入力可能な機能にマップされる文字のリストを表示するいくつかのコマンドラインアプリケーションを彷彿とさせます。 expandプロンプトは、最初に使用可能な文字値のリストをユーザーに提示し、キーが押されたときにそれらにコンテキストを提供します。

Expand.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'expand',
      name: 'reptile',
      message: 'Which is better?',
      choices: [
        {
          key: 'a',
          value: 'alligator',
        },
        {
          key: 'c',
          value: 'crocodile',
        },
      ],
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.reptile);
  });

ターミナルウィンドウに戻り、スクリプトを実行します。

node expand.js

expandプロンプトが表示されます。

Output? Which is better? (acH)

デフォルトでは、"Help"を表すHオプションが含まれており、Hと入力してENTERを押すとオプションのリストに切り替わります。選択を行うために入力できる文字。

Output? Which is better? (acH)
  a) alligator
  c) crocodile
  h) Help, list all options
  Answer:

無効な値を送信すると、"Please enter a valid command"エラーが発生します。

チェックボックス

checkboxタイプもlistに似ています。 単一の選択の代わりに、複数の選択肢を選択できます。

チェックボックス.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'checkbox',
      name: 'reptiles',
      message: 'Which reptiles do you love?',
      choices: [
        'Alligators', 'Snakes', 'Turtles', 'Lizards',
      ],
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.reptiles);
  });

ターミナルウィンドウに戻り、スクリプトを実行します。

node checkbox.js

checkboxプロンプトが表示されます。

Output? Which reptiles do you love? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Alligators
 ◯ Snakes
 ◯ Turtles
 ◯ Lizards

他のlistタイプと同様に、矢印キーを使用してナビゲートできます。 選択するには、SPACEを押し、aですべてを選択するか、iで選択を反転することもできます。

OutputAnswer: [ 'Alligators', 'Snakes', 'Turtles', 'Lizards' ]

他のプロンプトタイプとは異なり、このプロンプトタイプの回答は、文字列ではなく配列を返します。 ユーザーがアイテムを選択しないことを選択した場合でも、常に配列を返します。

パスワード

passwordタイプは、ユーザーからの入力を非表示にします。 これにより、ユーザーは表示されるべきではない機密情報を提供できます。

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'password',
      name: 'secret',
      message: 'Tell me a secret',
    },
  ])
  .then(answers => {
    // Displaying the password for debug purposes only.
    console.info('Answer:', answers.secret);
  });

ターミナルウィンドウに戻り、スクリプトを実行します。

node password.js

passwordプロンプトが表示されます。

Output? Tell me a secret [hidden]

入力はユーザーから隠されています。

編集者

editorタイプを使用すると、ユーザーはデフォルトのテキストエディタを使用してより大きなテキスト入力を行うことができます。

editor.js

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'editor',
      name: 'story',
      message: 'Tell me a story, a really long one!',
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.story);
  });

ターミナルウィンドウに戻り、スクリプトを実行します。

node editor.js

editorプロンプトが表示されます。

Output? Tell me a story, a really long one! Press <enter> to launch your preferred editor.

inquirerは、$EDITORおよび$VISUAL環境変数の値に基づいて、ユーザーのシステムでテキストエディターを開こうとします。 どちらも存在しない場合は、代わりにvim（Linux）とnotepad.exe（Windows）が使用されます。

結論

この記事では、Inquirer.jsのいくつかの機能をインストールして調査しました。 このツールは、ユーザーから情報を取得するのに役立ちます。

プラグインのいくつかで学習を続けてください。 inquirer-autocomplete-prompt、inquirer-search-list、inquirer-table-promptのように。