100字以内や400字以内など、文字数制限のある文章を書くときに便利な「文字数カウントアプリ」の作り方を解説します。
文字数を数える機能だけに限定したシンプルなアプリです。
文字数カウントアプリを使ってみよう
テキストエリアに文字を入力して、リアルタイムで文字数が変化していることをチェックしてください。
現在 0 文字
コード
<body>
<textarea id="text" cols="40" rows="5" placeholder="入力してみてください"></textarea>
<p>現在 <span id="count">0</span> 文字</p>
<script>
const text = document.getElementById('text');
const count = document.getElementById('count');
text.addEventListener('input', () => {
count.textContent = text.value.length;
});
</script>
</body>
HTML部分
<textarea id="text" cols="40" rows="5" placeholder="入力してみてください"></textarea>
<p>現在 <span id="count">0</span> 文字</p>
textarea
ユーザーが文字を入力する入力欄です。id="text"は、JavaScriptからこの要素を取得するために使います。<span id="count">0</span>
現在の文字数を表示するための要素です。初期値として0を入れています。
JavaScript部分
const text = document.getElementById('text');
const count = document.getElementById('count');
document.getElementById
HTML内の要素を取得します。textには textarea 要素、countには span 要素が入ります。
text.addEventListener('input', () => {
count.textContent = text.value.length;
});
inputイベント
inputイベントは、入力内容が変更されるたびに発火します。
キー入力だけでなく、貼り付けや削除でも反応する点が特徴です。
処理内容
text.value
textarea に現在入力されている文字列を取得します。text.value.length
文字列の長さ（文字数）を取得します。count.textContent = ...
span 要素の中身を書き換え、現在の文字数を画面に反映します。
全体の流れ
- textarea と span を JavaScript で取得
- textarea に入力があるたびに
inputイベントが発火 - 現在の入力文字数を計算
- span の表示を更新
この仕組みにより、ユーザーが入力するたびに文字数がリアルタイムで表示されます。
