読み込み中...

【JavaScript】入力ダイアログを完全マスター！7つの実例で完全解説

JavaScript入力ダイアログの使い方を徹底解説 JS
2024.03.25
この記事は約10分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptの入力ダイアログを使いこなすことができるようになります。

初心者でも理解できるよう、徹底解説し、サンプルコードも豊富に用意しています。

使い方や応用例、注意点、カスタマイズ方法までカバーしているので、ぜひ最後までお読みください。

●JavaScript入力ダイアログとは

JavaScriptの入力ダイアログとは、ウェブページ上でユーザーに情報を入力させるためのポップアップウィンドウのことです。

主にテキスト入力を受け付けることができ、その入力内容をJavaScriptで処理することができます。

●入力ダイアログの基本

入力ダイアログは、JavaScriptのprompt()関数を使って表示します。

prompt()関数には、表示するメッセージと、初期値を引数として渡すことができます。

ユーザーが入力を完了すると、入力された値が返されます。キャンセルボタンをクリックすると、nullが返されます。

●入力ダイアログの使い方

ここでは、JavaScriptを使用した入力ダイアログの基本から応用までの使い方を、わかりやすいサンプルコードを交えて詳しく説明します。

入力ダイアログは、Webページ上でユーザーの入力を求める際に便利な機能です。

○サンプルコード1：JavaScriptにおける基本的な入力ダイアログ

下記のJavaScriptコードは、簡単な入力ダイアログを表示し、ユーザーが入力したデータをアラートで表示する基本的な例です。

// 入力ダイアログを表示し、入力された値を取得
let userInput = prompt("名前を入力してください", "山田太郎");

// 入力された値をアラートで表示
alert("あなたの名前は" + userInput + "です。");

このコードはJavaScriptにおける入力ダイアログの簡単な実装方法を表しており、Webページ上で対話的な要素を加えるのに役立ちます。

○サンプルコード2：入力された内容の検証

次のコード例では、ユーザーから入力された内容を検証し、正しいものであれば処理を続け、間違っている場合は再入力を促す方法を表しています。

let userInput;
let isValid = false;

// 入力内容が正しいかどうかを確認する関数
function checkInput(input) {
  // ここで入力内容のチェックを行う
  return input.length > 0;
}

// 入力内容が正しいまで繰り返す
while (!isValid) {
  userInput = prompt("名前を入力してください", "山田太郎");
  isValid = checkInput(userInput);
  if (!isValid) {
    alert("入力内容が正しくありません。もう一度入力してください。");
  }
}

alert("あなたの名前は" + userInput + "です。");

このサンプルはJavaScriptを使ってユーザーの入力を有効に管理する方法を教えてくれます。

○サンプルコード3：キャンセル操作のハンドリング

下記のコードでは、入力ダイアログでキャンセルボタンが押された時の特別な処理を行う方法を表しています。

// 入力ダイアログを表示し、入力された値を取得
let userInput = prompt("名前を入力してください", "山田太郎");

// キャンセルが押された場合の処理
if (userInput === null) {
  alert("入力がキャンセルされました。");
} else {
  alert("あなたの名前は" + userInput + "です。");
}

このコードはJavaScriptにおける入力ダイアログの使い方をさらに深めるもので、ユーザーが操作をキャンセルした場合の対応を教えてくれます。

●JavaScriptによる入力ダイアログの応用的な使用方法

入力ダイアログは、JavaScriptにおける基本的な機能ですが、その使い方は多岐にわたります。

ここでは、複数の入力欄の使用や入力内容のバリデーションといった応用的な使用方法を、具体的なサンプルコードを通じて解説します。

○サンプルコード4：複数の入力欄の活用

JavaScriptでの複数入力ダイアログの実装は、ユーザーからの複数の情報を取得する際に有用です。

下記のコードは、名前と年齢の2つの情報をユーザーから受け取る一例です。

// 名前の入力ダイアログを表示し、入力された値を取得
let userName = prompt("名前を入力してください", "山田太郎");

// 年齢の入力ダイアログを表示し、入力された値を取得
let userAge = prompt("年齢を入力してください", "20");

// 入力された名前と年齢を結果として表示
alert("あなたの名前は" + userName + "で、年齢は" + userAge + "歳です。");

このコードは、一連の入力プロセスを通じて、より詳細なユーザー情報を取得する方法を表しています。

○サンプルコード5：入力内容のバリデーション

入力ダイアログにおいて、ユーザーからの入力内容を検証することは、データの正確性を確保する上で非常に重要です。

下記のコードは、入力された年齢が適切であるかをチェックする方法を表しています。

// 入力内容が正しいかどうかを確認する関数
function validateInput(input) {
  // ここで入力内容のバリデーションを行う
  return input !== "" && !isNaN(input);
}

let userAge;

// 正しい年齢が入力されるまで繰り返す
do {
  userAge = prompt("年齢を入力してください", "20");
} while (!validateInput(userAge));

alert("あなたの年齢は" + userAge + "歳です。");

この例では、JavaScriptを使った簡単な入力のバリデーション技術を用いて、不正確または不適切な入力を防止する方法を表しています。

これにより、より信頼性の高いユーザー体験を実現できます。

●注意点と対処法

入力ダイアログを使う際には、いくつか注意点があります。

主に、次の2点に注意してください。

○入力ダイアログはブロックする

入力ダイアログが表示されている間、他の操作ができなくなるため、操作がブロックされてしまうことがあります。

これを解決するためには、代わりにHTMLのフォームやモーダルダイアログを使用することが推奨されます。

○キャンセルボタンの扱い

入力ダイアログでキャンセルボタンが押された場合、nullが返されます。

これを適切に処理することで、意図しない動作を防ぐことができます。

●JavaScriptによる入力ダイアログのカスタマイズ

標準の入力ダイアログは便利ですが、JavaScriptを用いることでデザインや動作を自分好みにカスタマイズすることができます。

ここでは、具体的なカスタマイズ方法をサンプルコードと共に紹介します。

○サンプルコード6：デザインのカスタマイズ

JavaScriptの標準入力ダイアログのデザインはカスタマイズが限られていますが、HTMLとCSSを駆使してオリジナルのモーダルダイアログを作成することで、より魅力的なUIを実現できます。

ここでは、シンプルながら効果的なデザインカスタマイズの一例を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    /* モーダルの基本スタイル */
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.4);
    }

    /* モーダルコンテンツのスタイリング */
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
    }
  </style>
</head>
<body>
  <button onclick="showModal()">入力ダイアログを表示</button>

  <!-- カスタマイズされたモーダル -->
  <div id="myModal" class="modal">
    <div class="modal-content">
      <label for="input">名前を入力してください：</label>
      <input type="text" id="input" name="input">
      <button onclick="submitInput()">送信</button>
    </div>
  </div>

  <script>
    // モーダルの表示処理
    function showModal() {
      document.getElementById("myModal").style.display = "block";
    }

    // 入力内容の処理とモーダルの非表示
    function submitInput() {
      let input = document.getElementById("input").value;
      alert("あなたの名前は " + input + " です。");
      document.getElementById("myModal").style.display = "none";
    }
  </script>
</body>
</html>

この例では、JavaScriptとHTML/CSSを組み合わせることで、標準の入力ダイアログよりも視覚的に魅力的なものを作成しています。

○サンプルコード7：動作のカスタマイズ

入力ダイアログの動作をカスタマイズすることで、ユーザーの入力に基づく柔軟な反応が可能になります。

ここでは、入力内容に応じて異なる応答をするカスタマイズの例を紹介します。

// カスタム入力ダイアログの表示
function showCustomInputDialog() {
  let input = prompt("あなたの年齢を入力してください：");

  // 入力に基づいた条件分岐
  if (input !== null) {
    if (input >= 20) {
      alert("あなたは成人です。");
    } else {
      alert("あなたは未成年です。");
    }
  } else {
    alert("キャンセルされました。");
  }
}

showCustomInputDialog();

このコードでは、JavaScriptを活用して入力ダイアログの動作をユーザーの入力に合わせて変更しています。

まとめ

入力ダイアログを使ってユーザーからの入力を受け取ることができます。

標準のJavaScript入力ダイアログはシンプルですが、HTMLとCSSを使ってデザインをカスタマイズしたり、JavaScriptを使って動作をカスタマイズすることができます。

これらの情報を参考にして、ユーザーからの入力を効果的に受け取る入力ダイアログを作成してみてください。