Inquirer.jsを使用してインタラクティブなコマンドラインプロンプトを作成する方法
序章
Inquirer.js は、一般的なインタラクティブなコマンドラインユーザーインターフェイスのコレクションです。 これには、質問への回答の入力やリストからの選択肢の選択が含まれます。
inquirer
パッケージは、いくつかのデフォルトプロンプトを提供し、高度に構成可能です。 プラグインインターフェースを介して拡張することもできます。 promiseとasync/await
構文もサポートしています。
この記事では、Inquirer.jsのいくつかの機能をインストールして探索します。
前提条件
この記事をフォローしたい場合は、次のものが必要になります。
- Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。
このチュートリアルは、ノードv15.14.0、npm
v7.10.0、およびinquirer
v8.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
のように。