テキストボックスの値を取得する方法

前回は prompt() を使ってユーザー入力を受け取りました。今週はもっと実用的に、 Webページ上のテキストボックス に入力された値（文字列）をJavaScript側で取得する方法を学びます。下のサンプルを実際に動かしながら理解しましょう。

「おうむ返しプログラム」

下のテキストボックスにメッセージを入力し、「オウム返し」ボタンをクリックしてください。

※ クリックすると、入力された文字列がアラートで表示されます。

1. テキストボックスを作る (HTML)

テキストボックスは <input type='text'> タグで作成します。
初期表示させたい文字列があれば value 属性にセットします。

しかし、これだけではJavaScript側から「どのテキストボックスか」区別できません。ネットで買い物をする時、名前や住所、電話番号をテキストボックスに入力することがありますが、人間にはどのテキストボックスに何を入力するかがわかっても、プログラムには分からないので教えてあげる必要があります。そこで、id 属性を使ってタグに一意の名前を付けます。

            <input type='text' value='メッセージを入力してね。' id='inputValue'>
        

💫idのルール — id名はそのページの中でかぶってはいけません（一意であること）。名前は意味のあるものを（例: messageInput, userName）。

2. ボタンを作り、イベントハンドラを設定

ボタンも <input type='button'> または <button> タグで作れます。ボタンをクリックした時の「動き」を指定するために onclick イベントハンドラを使います。 ※ここでいう「動き」は、後述する関数として予め定義しておく必要があります。

onclick='関数名();' は「このボタンがクリックされたら、指定された関数を実行せよ」という意味です。ここではparrot() という関数を呼び出すようにしています。

💡 関数名は大切 — ずっと parrot() を使うのではなく、処理に合った名前（showMessage() や displayInput()）をつけましょう。バグを防ぎ、コードが読みやすくなります。適切な関数名（や変数名）を使っているかどうかも評価対象となります。

3. JavaScriptで関数を定義し、値を取得する

関数とは、よく行う処理を一つのまとまりとして名前をつけたものです（全部がそうではないですが）。よく行う処理がある時、そのプログラムをその都度書くのは大変です。そこで、予めそのプログラムに名前をつけておき（定義）、必要に応じて名前を呼べば実行できるようにしたのが関数です。

関数は function 関数名() { ... } で定義します。ページ読み込み時には実行されず、イベントハンドラによって呼び出されると実行されます。実行させたい処理は{}内に書きます。

テキストボックスの値を取得するには document.getElementById('inputValue').value を使います。 getElementById() は指定したidを持つ要素（タグ）を1つだけ取得し、その value 属性から入力された文字列を入手できます。

というわけで、parrot関数の定義は以下のようになります。取得した文字列を＝で左辺の変数msgに代入しています。

            function parrot() {

                // idが'inputValue'の要素を見つけ、そのvalue（入力値）を変数msgに代入

                let msg = document.getElementById('inputValue').value;

                // 変数msgをアラートで表示

                alert(msg);

            }

これで、ボタンがクリックされるたびにテキストボックスに入力された文字列（value属性の値）がアラートで表示されます。

他のイベントの例

onclick 以外にも、ondblclick（ダブルクリック）、onmouseover（マウスが乗ったとき）など様々なイベントがあります。同様に関数を結びつけることで、よりリッチなUIを作れます。

※イベントハンドラには他にaddEventListnerという仕組みがあり、こちらの方がよく使われます。そのうち出てきます。