JavaScriptでリアルタイム入力プレビューを実装する方法｜フォームUXを改善する基本テクニック

6月 27, 2025 6月 27, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

「名前を入力したら、その場で画面に反映される」
「コメントを打ち込んだら、プレビューがリアルタイムで表示される」

そんな「入力と同時に結果が反映されるインタラクション」は、いまやWebフォームの標準UXといってもいいほど。
ユーザーにとっても、送信前に確認できる安心感がありますし、エラーの早期発見にもつながる便利な機能です。

今回は、JavaScriptでユーザー入力をリアルタイムにプレビュー表示する方法を、コピペで使えるサンプルとともに解説します！

完成イメージ：入力した内容がそのまま反映

たとえばこんな動きになります。

入力欄に「山田太郎」と打つ
すぐ下に「こんにちは、山田太郎さん」と表示される

フォームの確認画面、チャットアプリ、記事作成ツールなどでもよく使われているテクニックです。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

HTML：入力欄とプレビュー領域

まずは、ユーザーが入力する欄と、表示用のエリアを用意します。

<label for="nameInput">お名前を入力：</label>
<input type="text" id="nameInput" placeholder="例：山田太郎">

<p id="previewArea">こんにちは、＿＿さん</p>

この例では input に入力された文字を、p 要素にリアルタイムで反映させていきます。

JavaScript：イベントで入力を監視

ここでポイントになるのが、input イベント。
このイベントは、キーボード入力のたびに発火するため、リアルタイムの処理に最適です。

const nameInput = document.getElementById('nameInput');
const previewArea = document.getElementById('previewArea');

nameInput.addEventListener('input', () => {
  const value = nameInput.value.trim();
  previewArea.textContent = value ? `こんにちは、${value}さん` : 'こんにちは、＿＿さん';
});

これで、入力欄に文字を入力すると即座に表示が切り替わるようになります。

応用①：複数の入力欄を同時にプレビュー

複数の入力欄に対応することも可能です。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

HTML

<input type="text" id="firstName" placeholder="名">
<input type="text" id="lastName" placeholder="姓">

<p id="fullNamePreview">お名前：＿＿＿＿</p>

JavaScript

const firstName = document.getElementById('firstName');
const lastName = document.getElementById('lastName');
const fullNamePreview = document.getElementById('fullNamePreview');

function updatePreview() {
  const first = firstName.value.trim();
  const last = lastName.value.trim();
  const full = `${last}${first}`;
  fullNamePreview.textContent = full ? `お名前：${full}` : 'お名前：＿＿＿＿';
}

firstName.addEventListener('input', updatePreview);
lastName.addEventListener('input', updatePreview);

応用②：改行ありのテキストエリアでもOK

ブログの「本文プレビュー」や「お問い合わせ内容の確認」などでは、textareaに対応したいですよね。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

HTML

<textarea id="message" rows="5" placeholder="メッセージを入力してください"></textarea>
<div id="messagePreview" class="preview-box"></div>

JavaScript

const message = document.getElementById('message');
const messagePreview = document.getElementById('messagePreview');

message.addEventListener('input', () => {
  messagePreview.textContent = message.value;
});

CSSで .preview-box に white-space: pre-wrap; を指定すれば、改行もそのまま反映できます。