リアルタイム入力！JavaScriptでテキストを即時反映するフォームを作ろう

Webサイトを作成する際、フォームに入力したテキストがリアルタイムで表示される機能は、ユーザーエクスペリエンス（UX）を向上させる重要な要素です。たとえば、名前のプレビュー、リアルタイムコメント、ライブ検索機能などに活用できます。

本記事では、HTMLとJavaScriptを使って、フォームに入力したテキストをリアルタイムで表示するシンプルな機能を作成する方法を解説します。

初心者の方でも理解できるように、専門用語の説明も交えながら進めていきますので、ぜひ最後まで読んで実践してみてください！

1 JavaScriptとは？
2 作成する機能の概要
3 HTMLの記述
- 3.1 HTMLのポイント
4 JavaScriptの記述
- 4.1 JavaScriptのポイント
5 実際に動かしてみよう
6 応用編：スタイルを追加してみよう
- 6.1 スタイルのポイント
7 まとめ
- 7.1 学んだポイント!
8 次に学ぶべきこと

JavaScriptとは？

JavaScript（ジャバスクリプト）は、Webページに動きをつけるプログラミング言語です。通常、WebサイトはHTML（構造）とCSS（デザイン）で構成されていますが、JavaScriptを使うことで、ボタンをクリックした際の動作や、リアルタイムでのデータ更新などのインタラクティブな機能を追加できます。

今回のリアルタイム入力機能も、JavaScriptの「イベント処理」という仕組みを使って実装します。

作成する機能の概要

今回作成するのは、以下のような機能です。

テキスト入力フォームを用意する
ユーザーが入力したテキストをリアルタイムでpタグに表示する

実際の動作イメージとしては、以下のようになります。

フォームに文字を入力すると、即座に下のpタグに反映される。
入力内容を消すと、pタグの内容も消える。

次のセクションで、HTMLとJavaScriptのコードを記述していきます。

HTMLの記述

まずは基本となるHTML（HyperText Markup Language）を作成します。HTMLはWebページの構造を定義する言語で、テキスト入力欄（inputタグ）や、出力結果を表示するためのpタグを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>リアルタイム入力</title>
</head>
<body>
    <h1>リアルタイム入力フォーム</h1>
    <input type="text" id="textInput" placeholder="ここに入力してください">
    <p>入力内容: <span id="outputText"></span></p>
    <script src="script.js"></script>
</body>
</html>

HTMLのポイント

inputタグにid="textInput"を指定し、ユーザーが入力する欄を作成。
pタグ内のspanにid="outputText"を設定し、ここにリアルタイムで入力内容を反映。
script.js というJavaScriptファイルを読み込む。

JavaScriptの記述

次に、リアルタイムでテキストを反映するためのJavaScriptを記述します。

document.addEventListener("DOMContentLoaded", function() {
    // 入力フィールドと表示エリアを取得
    const textInput = document.getElementById("textInput");
    const outputText = document.getElementById("outputText");

    // 入力があるたびにテキストを更新
    textInput.addEventListener("input", function() {
        outputText.textContent = textInput.value;
    });
});

JavaScriptのポイント

DOMContentLoaded はHTMLの解析（読み込み）が完了したタイミングで発火
document.getElementById("textInput") で入力フィールドを取得。
document.getElementById("outputText") で表示エリアを取得。
input イベントを利用し、ユーザーが入力するたびに textContent を更新。

実際に動かしてみよう

ここまでのコードをコピーして、index.html と script.js の2つのファイルを作成し、ブラウザで開いてみてください。

フォームに文字を入力すると、下のpタグにリアルタイムで反映される。
文字を消すと、pタグの表示も消える。

See the Pen リアルタイム入力！JavaScriptでテキストを即時反映 by yuki (@yuki_web) on CodePen.

簡単なコードですが、リアルタイムで反映される動作を体験できるはずです。

応用編：スタイルを追加してみよう

デザインを少し工夫すると、より見やすくなります。CSSを使って、以下のようなスタイルを追加してみましょう。

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 50px;
}

input {
    padding: 10px;
    font-size: 16px;
    width: 300px;
}

p {
    font-size: 18px;
    color: #333;
    margin-top: 20px;
}