【JavaScript】「文字数カウンター」アプリケーションを作る方法

JavaScript(ジャバスクリプト)

2023.09.132023.09.17

HTML, CSS, そして JavaScript だけで文字数カウンターを作成してみます。

完成形はこちら▼

シンプル文字数カウンター

シンプル文字数カウンターは、簡単にテキストの文字数を計測するオンラインツールです。テキストエリアに文章を貼り付けると、リアルタイムで文字数が表示されます。レポート作成やSNS投稿など、文字数制限がある場面で役立ちます。

以下は、画面に文字を貼り付けるとその文字数が表示されるコードの例です。

文字数カウンターのHTMLコード
文字数カウンターのCSS (style.css)コード
文字数カウンターのJavaScript (script.js)コード
まとめ

文字数カウンターのHTMLコード

ユーザーがテキストエリアにテキストを入力すると、そのテキストの文字数がリアルタイムでカウントされて表示されるシンプルな文字数カウンターアプリケーションの表示部分が作成されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>文字数カウンター</title>
</head>
<body>
    <textarea id="textArea" oninput="countCharacters()"></textarea>
    <div id="counter">0文字</div>
    <script src="script.js"></script>
</body>
</html>

文字数カウンターのCSS (style.css)コード

これらのCSSスタイルは、テキストエリアとカウンター要素の外観を定義しています。指定されたプロパティは、見栄え良く、使いやすいものになるように調整されています。

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

textarea {
    width: 100%;
    height: 200px;
    padding: 10px;
    font-size: 16px;
}

#counter {
    margin-top: 10px;
    font-size: 18px;
    color: #333;
}

文字数カウンターのJavaScript (script.js)コード

こちらは、テキストエリアに入力されたテキストの文字数をカウントし、その文字数を表示するための関数です。

[rml_read_more]

function countCharacters() {
    var text = document.getElementById('textArea').value;
    var length = text.length;
    document.getElementById('counter').innerHTML = length + '文字';
}

textArea というIDを持つ要素（テキストエリア）の内容を取得し、変数 text に格納しています。value プロパティは、テキストエリア内のテキストを取得するために使用されます。

次に、変数 text 内の文字列の文字数を取得し、その値を変数 length に格納しています。JavaScriptの length プロパティは、文字列の文字数を返します。

その後、counter というIDを持つ要素（カウンター要素）の innerHTML プロパティを更新して、テキストの文字数を表示しています。innerHTML は要素内のHTMLコンテンツを設定するプロパティです。この行では、文字数を length に基づいて表示し、末尾に ‘文字’ という文字列を連結しています。