文字数カウンター

文字数カウンターの役割と活用シーン

文字数カウンターは、入力されたテキストの文字数をリアルタイムに計測するツールです。
Webフォームの入力制限、SEOメタディスクリプションの調整、alt属性の適切な長さの確認など、実務において多岐にわたる用途で利用されます。

文字数とバイト数の違いを意識する

「文字数」は視覚的な長さを測るのに適しており、一方「バイト数」はシステム的なデータサイズの上限確認に用いられます。
日本語などマルチバイト文字を扱う場合、1文字が2バイト以上になることがあるため、altやtitle属性での上限処理には注意が必要です。

アクセシビリティ配慮とテキスト制限

音声読み上げを考慮したaltやaria-labelなどの属性には、文字数の目安を設けることで、情報過多を避けられます。
文字数カウンターを使えば、過度に長くなった説明文の調整も容易です。

リアルタイム入力フィードバックの重要性

入力中に即座に文字数が表示されるUIは、ユーザーの利便性を高めるだけでなく、制限内での自然な表現や誤入力の予防にもつながります。
特にimgのaltなど、文字数に制限を持たせたい項目では有効です。

品質チェックツールとしての活用

文章が長すぎる・短すぎるといった問題を事前に発見できる文字数カウンターは、ライティングやコーディング前の下準備としても有用です。
altやmetaタグの内容確認にも役立ち、サイト全体の品質向上を支える補助ツールとして重宝されます。

// 各要素をJavaScriptで取得
const input = document.getElementById('input'); const totalChars = document.getElementById('totalChars'); const noNewlineChars = document.getElementById('noNewlineChars'); const noSpaceChars = document.getElementById('noSpaceChars'); const noNewlineSpaceChars = document.getElementById('noNewlineSpaceChars'); const lineCount = document.getElementById('lineCount'); const manuscriptPages = document.getElementById('manuscriptPages');

HTMLの入力欄や数字を表示する部分を、それぞれJavaScriptの変数に取り込んでいます。
こうすることで、プログラムからこれらの要素の中身を書き換えたり読み取ったりできるようになります。

// ユーザーがテキストエリアに文字を入力したら、updateCounts関数を呼ぶ
input.addEventListener('input', updateCounts);

ここでは、入力欄に文字が入ったり消されたりしたときに自動で処理を実行する設定をしています。
addEventListenerは「何か操作があったら教えてね」という意味で、 今回は「入力が変わったらupdateCountsという関数を実行してね」という約束をしています。

function updateCounts() {
	// テキストエリアの現在の内容を取得
	const text = input.value;
	// 1. 総文字数（全ての文字をそのまま数える）
	totalChars.textContent = text.length;
	// 2. 改行を除いた文字数
	// 文字列の中の「\n」（改行）を空文字に置き換えて長さを測る
	noNewlineChars.textContent = text.replace(/\n/g, '').length;
	// 3. スペース（半角空白）を除いた文字数
	noSpaceChars.textContent = text.replace(/ /g, '').length;
	// 4. 改行と空白（タブなども含む全空白文字）を除いた文字数
	noNewlineSpaceChars.textContent = text.replace(/\s/g, '').length;
	// 5. 行数を数える
	// 文字列を改行で分割して、その配列の長さを取得
	lineCount.textContent = text.split('\n').length;
	// 6. 原稿用紙換算（400字/ページ）  
	// 先ほどの「改行や空白を除いた文字数」を400で割り、小数点2桁に丸める
	manuscriptPages.textContent = (text.replace(/\s/g, '').length / 400).toFixed(2);
}

updateCountsの中身です。まず、入力欄の中身を丸ごと取得し変数textに入れます。
text.lengthは文字列の長さを表します。ここでは総文字数（改行や空白も含む）をカウントしています。
text.replace(/\n/g, '')は文章中の改行コードを全部取り除いた文字列を作っています。
これの長さを取ることで「改行を含まない文字数」を出しています。
同じようにtext.replace(/ /g, '')は半角スペースをすべて除いた文字数、text.replace(/\s/g, '')はあらゆる空白文字（改行、タブ、スペースなど）を取り除いた文字数を表します。
行数はtext.split('\n')で改行ごとに文字列を分割し、分割後の配列の要素数を数えることで求めています。
この数が「何行書かれたか」という意味になります。
最後に空白文字をすべて除いた文字数を400で割り、原稿用紙換算した値を小数点以下2桁で表示しています。
こうして、入力されるたびに文字数や行数がリアルタイムで更新される仕組みになっています。