読み込み中...

初心者必見!JavaScriptのvalueを使いこなす7つの方法

初心者向けJavaScriptのvalue使い方解説 JS
この記事は約11分で読めます。

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

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

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

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

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

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

はじめに

この記事を読めば、JavaScriptのvalueを使いこなす方法が身につくでしょう。

●JavaScriptのvalueとは

JavaScriptのvalueは、HTMLのフォーム要素の値を扱うための属性です。

テキストボックスやセレクトボックス、ラジオボタン、チェックボックスなど、様々なフォーム要素の値を取得・設定することができます。

○value属性の基本

JavaScriptでvalue属性を使うには、まず対象のフォーム要素を取得する必要があります。

これには、document.getElementByIddocument.querySelectorなどのDOM操作メソッドを使います。

そして、取得した要素のvalue属性にアクセスすることで、値を取得・設定できます。

●valueの使い方

さまざまなフォーム要素の値を取得・設定する方法を見ていきましょう。

具体的なサンプルコードを通じて、valueの使い方を学びます。

○サンプルコード1:テキストボックスの値を取得する

このコードでは、テキストボックスの値を取得してアラートで表示しています。

この例では、getElementByIdでテキストボックスの要素を取得し、そのvalueをアラートで表示しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>テキストボックスの値を取得</title>
</head>
<body>
  <input type="text" id="myText">
  <button onclick="getValue()">値を取得</button>

  <script>
    function getValue() {
      // テキストボックスの要素を取得
      const textBox = document.getElementById('myText');
      // 値を取得してアラートで表示
      alert(textBox.value);
    }
  </script>
</body>
</html>

○サンプルコード2:セレクトボックスの選択値を取得する

このコードでは、セレクトボックスの選択値を取得してアラートで表示しています。

この例では、getElementByIdでセレクトボックスの要素を取得し、そのvalueをアラートで表示しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>セレクトボックスの選択値を取得</title>
</head>
<body>
  <select id="mySelect">
    <option value="apple">りんご</option>
    <option value="orange">みかん</option>
    <option value="banana">バナナ</option>
  </select>
  <button onclick="getSelectedValue()">選択値を取得</button>

  <script>
    function getSelectedValue() {
      // セレクトボックスの要素を取得
      const selectBox = document.getElementById('mySelect');
      // 選択値を取得してアラートで表示
      alert(selectBox.value);
    }
  </script>
</body>
</html>

○サンプルコード3:ラジオボタンの選択値を取得する

このコードでは、ラジオボタンの選択値を取得してアラートで表示しています。

この例では、querySelectorで選択されたラジオボタンの要素を取得し、そのvalueをアラートで表示しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ラジオボタンの選択値を取得</title>
</head>
<body>
  <input type="radio" name="fruit" value="apple">りんご
  <input type="radio" name="fruit" value="orange">みかん
  <input type="radio" name="fruit" value="banana">バナナ
  <button onclick="getSelectedValue()">選択値を取得</button>

  <script>
    function getSelectedValue() {
      // 選択されたラジオボタンの要素を取得
      const radioButton = document.querySelector('input[name="fruit"]:checked');
      // 選択値を取得してアラートで表示
      alert(radioButton.value);
    }
  </script>
</body>
</html>

○サンプルコード4:チェックボックスの選択状態を取得する

このコードでは、チェックボックスの選択状態を取得してアラートで表示しています。

この例では、getElementByIdでチェックボックスの要素を取得し、そのcheckedプロパティで選択状態を調べています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>チェックボックスの選択状態を取得</title>
</head>
<body>
  <input type="checkbox" id="myCheckbox">同意する
  <button onclick="getCheckedStatus()">選択状態を取得</button>

  <script>
    function getCheckedStatus() {
      // チェックボックスの要素を取得
      const checkBox = document.getElementById('myCheckbox');
      // 選択状態を取得してアラートで表示
      alert(checkBox.checked);
    }
  </script>
</body>
</html>

●valueの応用例

○サンプルコード5:テキストボックスの値をリアルタイムで表示する

このコードでは、テキストボックスに入力された値をリアルタイムで表示する方法を紹介しています。

この例では、oninputイベントを使って、テキストボックスの値が変更されるたびに、その値を表示領域に反映しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>テキストボックスの値をリアルタイムで表示</title>
</head>
<body>
  <input type="text" id="inputText" oninput="displayValue()">
  <p id="displayText"></p>

  <script>
    function displayValue() {
      // テキストボックスの要素を取得
      const inputText = document.getElementById('inputText');
      // 表示領域の要素を取得
      const displayText = document.getElementById('displayText');
      // 入力値を表示領域に反映
      displayText.textContent = inputText.value;
    }
  </script>
</body>
</html>

○サンプルコード6:フォームの入力値をまとめて処理する

このコードでは、フォーム内の複数の入力値をまとめて処理する方法を紹介しています。

この例では、submitイベントを使って、フォームが送信される際に、すべての入力値をアラートで表示しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>フォームの入力値をまとめて処理</title>
</head>
<body>
  <form onsubmit="event.preventDefault(); processFormInputs();">
    <input type="text" id="name" placeholder="名前">
    <input type="email" id="email" placeholder="メールアドレス">
    <button type="submit">送信</button>
  </form>

  <script>
    function processFormInputs() {
      // 入力要素を取得
      const name = document.getElementById('name');
      const email = document.getElementById('email');
      // 入力値をアラートで表示
      alert(`名前: ${name.value}, メールアドレス: ${email.value}`);
    }
  </script>
</body>
</html>

○サンプルコード7:条件に応じてフォームの値を変更する

このコードでは、条件に応じてフォームの値を変更する方法を紹介しています。

この例では、チェックボックスがチェックされた場合、テキストボックスにあらかじめ設定された値が自動入力されます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>条件に応じてフォームの値を変更</title>
</head>
<body>
  <input type="text" id="inputText" placeholder="テキストを入力">
  <label>
    <input type="checkbox" id="autoInput" onchange="setDefaultValue()">
    デフォルト値を設定
  </label>

  <script>
    function setDefaultValue() {
      // テキストボックスとチェックボックスの要素を取得
      const inputText = document.getElementById('inputText');
      const autoInput = document.getElementById('autoInput');
      
      // チェックボックスがチェックされている場合、デフォルト値を設定
      if (autoInput.checked) {
        inputText.value = 'デフォルト値';
      } else {
        // チェックが外れた場合、テキストボックスをクリア
        inputText.value = '';
      }
    }
  </script>
</body>
</html>

●注意点と対処法

  • フォーム内で複数の入力要素がある場合、valueを適切に使用して値を取得するために、それぞれの要素に一意なid属性を設定しましょう。
  • valueは文字列として扱われます。
    数値として扱いたい場合は、parseInt()parseFloat()を使用して数値に変換してください。
  • valueが未入力の場合、空文字列が返ります。
    未入力を判定する場合は、文字列の長さやtrim()を使って空白を除去した後に判断しましょう。

●カスタマイズ方法

  • 入力値に応じて、表示や処理を変更することで、よりインタラクティブなフォームを作成することができます。
  • 必須入力項目や入力制限を設けることで、ユーザーが正確な情報を入力しやすくなります。

まとめ

value属性を使用することで、HTMLフォーム内の各種入力要素から値を取得・操作することができます。

上記のサンプルコードを参考に、状況に応じた処理やカスタマイズを行い、ユーザーフレンドリーで効果的なフォームを作成しましょう。

様々な入力要素を組み合わせることで、多様な用途に対応できるフォームが実現できます。

また、JavaScriptを使ってリアルタイムなバリデーションや条件に応じた処理を実装することで、ユーザーエクスペリエンスが向上します。