2018-12-06に更新

JavaScriptでスタイリッシュなCLIプロンプトを作成できるEnquirer

JavaScriptでスタイリッシュなCLI環境を作成できるEnquirerというライブラリを紹介します。下記の画像のように入力しやすいUIで作ることができます。

Enquirer

enquirer/enquirer: Stylish, intuitive and user-friendly prompt system.

コードは下記のような感じです。

const { prompt } = require('enquirer');

const question = {
  type: 'input',
  name: 'username',
  message: 'What is your username?'
};

prompt(question)
  .then(answer => console.log('Answer:', answer))
  .catch(console.error);

ビルトインで用意されているプロンプトは下記のようなものがあります。

  • AutoComplete
  • Confirm
  • Form
  • hSelect (horizontal select)
  • hMultiSelect (horizontal multiselect)
  • Input
  • Invisible
  • List
  • MultiScale
  • MultiSelect
  • Number
  • Password
  • Select
  • Snippet
  • Sort
  • Survey
  • Text (alias for the Input prompt)

あとは下記のような感じで、カスタムのプロンプトも作成できるようです。上を押すとup、下を押すとdownが呼ばれてrenderする、という感じで分かりやすいですね。なんか普通に迷路や15パズルのプロンプトとかも作れそうな気がします。

class HaiKarate extends Prompt {
  constructor(options = {}) {
    super(options);
    this.value = options.initial || 0;
    this.cursorHide();
  }
  up() {
    this.value++;
    this.render();
  }
  down() {
    this.value--;
    this.render();
  }
  render() {
    this.clear(); // clear previously rendered prompt from the terminal
    this.write(`${this.state.message}: ${this.value}`);
  }
}

試しに作ってみたもの

試しにQiitaのAPIで記事を検索して、選択した記事にアクセスできるサンプルを作ってみました。

まずは検索ワードを入力してもらいます。

async function getSearchWord() {
  const response = await prompt({
    type: "input",
    name: "search",
    message: "Input search words for Qiita."
  });
  return response.search;
}

そしてそのキーワードでQiitaから記事を取得します。

async function search(searchWord, page) {
  const url = `https://qiita.com/api/v2/items?page=${page}&per_page=10&query=${encodeURIComponent(
    searchWord
  )}`;
  const response = await axios.get(url).catch(error => null);
  if (!response) {
    return null;
  }
  return response.data;
}

そして取得記事から選択してもらいます。一応雑にページ移動もできるようにしています。

async function selectItem(items, page) {
  const choices = items.map(item => `${item.title}`);
  if (page > 1) {
    choices.push("prev");
  }
  if (page < 100) {
    choices.push("next");
  }

  const response = await prompt({
    type: "select",
    name: "item",
    message: "Which do you want to see?",
    choices
  });
  return response.item;
}

node2.png

最後にopenによってブラウザでそのURLにアクセスします。WSLの場合ブラウザを起動してくれないので一応URLも表示しています。

node3.png

この様な感じで、簡単にCLIツールを作ることができます。趣味で作るのもいいですし、仕事で例えば選択に応じてテストを実行したりデプロイを実行したり等を行うCLIを作ったりすること等も便利かもしれません。細かいコマンドを一切覚えなくても良くなりますので。

気が向いたら15パズルでも作ってみたいと思います。


だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitはαバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか
関連記事

コメント