JavaScript でユーザー入力を取得

この記事は、JavaScript でユーザー入力を取得する方法を理解するのに役立ちます。

ブラウザまたは NodeJS のどちらから入力するかによって、JavaScript でユーザー入力を取得する方法は 2つあります。このガイドは、両方を学ぶのに役立ちます。

ブラウザコンソールからのユーザー入力の取得

ブラウザからのユーザー入力を要求するには、ブラウザが提供する prompt() メソッドを使用する必要があります。このメソッドを使用すると、ユーザー入力を文字列として受け入れ、次のような変数に格納できます。

const input = prompt();

このメソッドは、アプリケーションがどの入力を期待するかを知るための追加情報として文字列も受け入れます。

たとえば、ユーザー名の入力を求める次のコードを以下に示します。

const input = prompt('What\'s your name?');
alert(`Your name is ${input}`);

ブラウザで prompt() を使って入力を受け取る手順は次のとおりです。

ブラウザの prompt() ダイアログで入力を受け取る（描画したワークフロー図であり、スクリーンショットではありません）。

alert() メソッドは結果を表示します。要件に応じて、行テキストを質問またはヒントとしてスタイル設定できます。

NodeJS コンソールからのユーザー入力の取得

NodeJS コンソールからのユーザー入力を受け入れるには、提供されている readline モジュールを使用する必要があります。

以下に示すように、モジュールから require() のような次のコマンドを使用できます。

const readline = require('readline');

次に、入力ストリームに接続されているインターフェイスをインスタンス化する必要があります。readline.createInterface() メソッドを使用してインターフェースを作成し、入力パラメーターと出力パラメーターをオブジェクト引数として渡します。

入力と出力を書き込むには、入力を process.stdin に書き込み、出力を process.stdout に書き込む必要があります。

readline インターフェイスを作成する例を次に示します。

const readline = require('readline');

const ql = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

ユーザー入力を要求するには、上記のコードで q1 変数に割り当てられたインターフェイスインスタンスで question() メソッドを呼び出す必要があります。

question() メソッドは 2つのパラメーターを取ります。

• ユーザーに尋ねたい文字列の質問。
• 応答が受信され、応答が関数に渡されたときに実行されるコールバック関数

パラメータオブジェクトをスキップして、2 番目のパラメータとしてコールバック関数を渡すことができます。

最後に、コールバック関数内で q1.close() メソッドを呼び出すことにより、q1 インターフェイスを閉じることができます。

arr.js：

const readline = require('readline');

const q1 = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

q1.question("Where do you live? ", function (answer) {
  console.log(`Oh, so you live in ${answer}`);
  console.log("Interface Closed");
  q1.close();
});

prompt-sync モジュールを使用して NodeJS からユーザー入力を取得する

まず、次のように NPM または Yarn を使用して prompt-sync モジュールをインストールする必要があります。

npm install prompt-sync
or
yarn add prompt-sync

次に、require() から prompt-sync モジュールが必要です。

以下のコードを見てください。

pm.js：

const prompt = require('prompt-sync')();
const input = prompt('Where do you live? ');

console.log(`Oh, so you live in ${input}`);

このメソッドは同期的であるため、Node インスタンスは次の行を実行する前に入力を待ちます。