「JavaScript を勉強したいけど、文法の説明だけ読んでも正直よく分からない…」
「手を動かしながら学べる入門記事が欲しい！」
そんな方のために、この記事では 「文字数カウンター」を自作しながら JavaScript の基礎文法を理解できる構成 にしました。
この記事を読み終えると、
- JavaScript の基本文法（変数 / 関数 / 条件分岐 / イベント処理）が理解できる
- 簡単な 文字数カウンターツール を自分で作れる
- 応用して別のツール（ボタン動作、入力チェックなど）も作れるようになる
といった 実用スキル がしっかり身につきます。
「全部覚えられるかな…」と心配になるかもしれませんが、
ツールを作りながら自然と理解できるのでご安心ください。
JavaScriptとは？
JavaScript（ジャバスクリプト）は、
Webページに「動き」や「仕組み」をつけるためのプログラミング言語です。
HTML が「文章の構造」
CSS が「見た目のデザイン」
そして JavaScript は 「動きをつける」 役割。
たとえば、こんなことができます。
- ボタンをクリックしたら文字を表示する
- 文字数をカウントする
- 入力した文字を変換する
Web の動く部分のほとんどは JavaScript が担当しています。
Web制作者だけではなく、
AI・アプリ開発・ゲーム制作など、あらゆる分野の初心者が
まず最初に学ぶ言語として選ばれる理由でもあります。
今回作る「文字数カウンター」の機能と学べる基礎文法
今回の記事では、JavaScript初心者でも取り組みやすい 「文字数カウンター」 を作りながら、
実務でも必ず使う「基礎文法」 を身につけられる構成にしています。
主な機能
入力したテキストの文字数と行数をリアルタイムで計測し、クリアボタンでリセットできるシンプルなWebツールです。
- リアルタイムカウント: テキストエリアに入力するたびに、瞬時に文字数と行数を更新します。
- クリア機能: ボタン一つで、入力内容とカウント結果をリセットできます。
このツールで学べる基礎文法
- 変数（let / const）
- 関数の書き方（function）
- 条件分岐（if文）
- イベント処理（addEventListener）
- DOM操作（document.getElementById）
文字数カウンターは基礎文法の「良い入り口」
文字数カウンターは非常にシンプルでありながら…
- HTML要素の操作
- ユーザー入力への反応
- 関数化
- 変数
- 条件分岐
- イベント処理
といった JavaScriptの基礎の 6〜7 割 を体験できます。
文字数カウンターには基本文法がしっかり詰まっています。
文字数カウンターの実装（まずは動くものを作ろう）
まずは理論よりも動かすことが大切です。
以下のHTML/JavaScriptコードを丸ごとコピーして、
今すぐ動く「文字数カウンター」をあなたのパソコンで動かしてみましょう。
手順1：HTMLファイルを作って保存しよう
まずは、実際に動作を確認するために、HTMLファイルを作成してみましょう。これはとても簡単です！
- メモ帳やVisual Studio Codeなどのテキストエディタを開きます。
- ファイル名は「
test.html」のように、拡張子を「.html」にして保存してください。 - 以下に紹介するコードをすべてコピーして貼り付けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>文字数カウントツール</title> <style> /* 見た目を整えるための最小限のCSS */ body { font-family: sans-serif; padding: 20px; background-color: #f4f4f9; } .container { max-width: 600px; margin: 0 auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } textarea { width: 100%; height: 150px; margin-bottom: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .counter-container { display: flex; justify-content: space-around; margin-top: 20px; } .counter { text-align: center; padding: 10px 20px; background-color: #e9ecef; border-radius: 6px; } .label { font-weight: bold; color: #555; display: block; margin-bottom: 5px; } .value { font-size: 24px; color: #007bff; } .btn-clear { background-color: #dc3545; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; float: right; } .btn-clear:hover { background-color: #c82333; } </style> </head> <body> <h1>文字数カウントツール</h1> <div class="container"> <div class="input-area"> <textarea id="textInput" oninput="updateCount()"></textarea><br> <button class="btn btn-clear" onclick="clearText()">クリア</button> </div> <div class="counter-container"> <div class="counter"><span class="label">文字数:</span><span class="value" id="charCount">0</span></div> <div class="counter"><span class="label">行数:</span><span class="value" id="lineCount">0</span></div> </div> </div> <script> function updateCount() { // 1. テキストエリアに入力された値を取得する const text = document.getElementById('textInput').value; // 2. 文字数と行数を計算する const charCount = text.length; const lines = text.split(/\r\n|\r|\n/); // 改行コードで文字列を分割して配列にする const lineCount = lines.length; // 3. 計算結果をHTMLに反映する document.getElementById('charCount').innerText = charCount; document.getElementById('lineCount').innerText = lineCount; } function clearText() { // テキストエリアの値を空にする document.getElementById('textInput').value = ''; // カウントをリセットするために、再度カウント関数を呼び出す updateCount(); } </script> </body> </html> |
手順2：保存してブラウザで開く
すべてのコードを貼り付けたら、上書き保存します。
その後、ファイルをダブルクリックして開いてみましょう。
テキストエリアに何か文字を入力してみましょう。
- 文字数と行数がリアルタイムで更新されましたか？
- 「クリア」ボタンを押すと、テキストエリアが空になり、カウントが「0」に戻りましたか？
もし意図通りに動いていれば成功です！
基礎文法解説：コードを分解して理解しよう
先ほど動かしたコードを、変数、DOM操作、関数、イベント処理、条件分岐という5つの基礎パーツに分解して、一つずつ役割を確認していきます。
基礎文法 1：変数（letとconst）
変数は、データ（文字列、数値など）を一時的に保存しておくための「箱」です。
文字数カウンターでは次のように登場しています。
|
1 2 3 |
// updateCount() 関数内 const text = document.getElementById('textInput').value; const charCount = text.length; |
const の役割
constは、一度値を代入したら、その後は値を変更しない（再代入しない）変数に使用します。- この文字数カウンターでは、入力された文字列（
text）や計算結果（charCount）は、取得・計算した後に値を上書きする必要がないため、constが使われています。 - 現代のJavaScript開発では、意図しないバグを防ぐために、基本的に
constを優先して使用し、値を変更する必要がある場合にだけ次に紹介するletを使用します。
let との使い分け
- もし、カウントした文字数に対して何らかの処理（例：半角英数を2文字としてカウントする場合など）を行い、値を途中で変更したい場合は、
letを使用します。 letは値を変更できる（再代入できる）変数宣言のキーワードです。
基礎文法 2：DOM操作（document.getElementById）
Webページは、HTML要素が親子関係を持ったツリー構造で成り立っており、これを DOM (Document Object Model) と呼びます。
JavaScriptがHTMLを操作するためには、まずDOMを通じて目的の要素を探し出す必要があります。
文字数カウンターではこう使われています。
|
1 2 3 4 5 6 |
// テキストエリアの要素を取得 const text = document.getElementById('textInput').value; const charCount = text.length; // カウント結果を表示する要素に値を反映 document.getElementById('charCount').innerText = charCount; |
document.getElementById('textInput')
→id属性（'textInput'） の要素を取得.value
→ 入力された文字列を取得.innerText
→ 画面の表示テキストを書き換える
DOM操作を理解すると、画面の中身を自由に変えられるようになりますよ！
基礎文法 3：関数（function）
関数は、特定の処理をひとまとまりにして名前を付けたものです。
|
1 2 3 4 |
function updateCount() { // この { } の中に書かれた一連の処理が // 'updateCount' という名前でまとめられている } |
関数の役割とメリット
- 処理のまとまり:
updateCount関数は、「入力値を取得 → 計算 → 表示を更新」という一連の流れを担っています。 - 再利用性:
一度関数を定義すれば、コードのどこからでもその名前を呼び出すだけで、何度も同じ処理を実行できます。
このツールでは、文字が入力された時と、クリアボタンが押された時の2箇所でこの関数が呼び出されています。
基礎文法 4：イベント処理（oninput と onclick）
イベント処理とは、
ユーザーの行動に合わせて処理を実行する仕組みです。
文字数カウンターではこう使われています。
|
1 2 |
<textarea id="textInput" oninput="updateCount()"></textarea> <button class="btn btn-clear" onclick="clearText()">クリア</button> |
| イベント | タイミング | 実行される関数 |
|---|---|---|
oninput | テキストが入力される度 | updateCount() |
onclick | ボタンをクリック | clearText() |
ベストプラクティスへの発展
コードをHTMLに直接書き込むのは手軽ですが、通常はJavaScript側でイベントを設定します。
これをaddEventListenerと呼びます。
|
1 2 3 |
// 【発展】よりモダンな書き方（HTMLのonclickは削除します） document.getElementById('textInput').addEventListener('input', updateCount); document.getElementById('btnId').addEventListener('click', clearText); // ボタンにidを付けて対応 |
このように、HTMLとJavaScriptの役割を完全に分離することで、
コードの見通しが良くなり、大規模な開発にも対応しやすくなります。
基礎文法 5：条件分岐（if文）
ここまでのコードにはありませんでしたが、Webアプリケーションには「もし〜ならば」という条件によって処理を変える機能が不可欠です。
これを条件分岐（if文）で実装します。
カウンターに文字数制限を設けてみましょう。500文字を超えたら、警告として文字数を赤く表示するようにします。
実践：文字数制限の警告機能を追加
updateCount() 関数の一番最後に、以下のコードを追加してみましょう。
|
1 2 3 4 5 6 7 8 9 |
// 条件分岐：もし文字数が500を超えたら警告を表示する const charDisplay = document.getElementById('charCount'); // 文字数表示要素を取得 if (charCount > 500) { // 条件（500文字超え）が真の場合 charDisplay.style.color = 'red'; // 文字の色を赤にする } else { // 条件が偽の場合（500文字以下） charDisplay.style.color = '#007bff'; // 元の色に戻す } |
if (条件式):charCountが500より大きいかどうかを判定しています。else:ifの条件が満たされなかった（偽だった）場合に実行する処理を指定します。
これで、501文字目以降を入力すると文字数が赤くなり、制限があることが視覚的にわかるようになりました。
【ステップアップ編】よりプログラミングらしいカスタマイズに挑戦しよう
次は一歩レベルアップして、実務でも必ず使う 配列・ループ・オブジェクト を取り入れたカスタマイズに挑戦してみましょう。
カスタマイズ例 1：禁止ワードチェック機能（配列とループ）
まずは、Webサービスで実際に使われることが多い 「禁止ワードチェック」 を作ってみましょう。
禁止ワードを管理するには 配列（Array）、
入力された文字に禁止ワードが含まれているか確認するには ループ処理 が必要です。
ステップ 1: 禁止ワードリスト（配列）の定義
配列は、複数のデータを一つの変数にまとめて管理する箱です。[]（角括弧）の中に要素をカンマで区切って記述します。
|
1 2 3 |
// updateCount関数の外（または先頭）に定義 const BANNED_WORDS = ["広告", "スパム", "運営", "禁止ワード"]; // 配列には、複数の文字列データが順番に格納されています |
ステップ 2: ループ処理で全てをチェック
ループ処理は、配列の各要素に対して同じ処理を繰り返すための仕組みです。
ここでは、forEachを使って、禁止ワードリストの単語全てをチェックします。
updateCount() 関数内の文字数計算部分の後に、以下のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// ... (文字数・行数の計算処理の後) ... // 禁止ワードチェック機能 let warningMessage = ''; // 警告メッセージを保持する変数（letを使う） BANNED_WORDS.forEach(word => { // 入力テキストの中に禁止ワードが含まれているかチェック if (text.includes(word)) { warningMessage = `警告: 「${word}」が含まれています。`; } }); // 画面に警告メッセージを表示する要素（もしHTMLに追加していれば） // document.getElementById('warning').innerText = warningMessage; |
forEach:BANNED_WORDS配列の中身を一つずつ取り出し、その全てに対して波括弧{}内の処理を繰り返します。text.includes(word): 文字列が、引数で指定された文字列（word）を含んでいるかどうかを判定します。
これで、禁止ワードを入力すると警告メッセージを出す、一歩進んだ機能が実装できました。
カスタマイズ例 2：詳細な情報管理（オブジェクト）
カウント結果の「文字数」と「行数」を、それぞれバラバラの変数として扱うのではなく、
関連するデータとしてひとまとめに管理したい場合にオブジェクト（Object）を使います。
オブジェクトは、複数の関連するデータを
「名前（キー）」と「値」のセットでまとめて扱える便利な仕組みです。
updateCount() 関数内の計算部分を、以下のように書き換えることができます。
|
1 2 3 4 5 6 7 8 9 |
// データをオブジェクトとして整理 const countResult = { char: text.length, // キー: char, 値: 文字数 line: lines.length // キー: line, 値: 行数 }; // 結果の反映時もオブジェクトからキーを指定して値を取り出す document.getElementById('charCount').innerText = countResult.char; document.getElementById('lineCount').innerText = countResult.line; |
countResult.char:
オブジェクト名（countResult）に、ドット（.）とキー名（char）を続けることで、その値にアクセスできます。
オブジェクトを使うメリット
- 複数の関連データを 一元管理 できる
- 追加のデータ項目が増えても 拡張しやすい
JavaScript初心者におすすめの本
基礎文法を学んだら、本で体系的に理解を深めると一気に伸びます。
ここでは、初心者にとくに人気が高い 2冊を厳選して紹介 します。
確かな力が身につく JavaScript超入門
初心者にもっとも優しい「つまづきにくい入門書」
- 解説がとても丁寧で、専門用語もわかりやすい
- サンプルコードが実践的で、そのまま動かしながら理解できる
- jQueryの基礎にも触れ、Web制作との相性が良い
- 「JavaScriptが難しい…」と感じていた初心者から高評価
▶ こんな人におすすめ
- JavaScriptの最初の1冊がほしい
- 文法の基礎をしっかり理解したい
- 小さな成功体験を積みながら学びたい
ゲームで学ぶJavaScript入門 増補改訂版～ブラウザゲームづくりでHTML＆CSSも身につく
ゲーム制作で楽しみながらJavaScriptを学べる入門書
- HTML / CSS / JavaScript をゲームづくりの流れで学べる
- パズル・アクション・物理演算など、合計13本のゲームを制作
- Canvasなど Webゲームに必須の技術もカバー
- 手を動かす学習が好きな人に最適
▶ こんな人におすすめ
- JavaScriptでゲームを作りたい
- ただ読むだけじゃなく、手を動かしながら理解したい
- ツール開発やミニゲーム制作をしたい
今回紹介した2冊以外にも、目的別に最適な本をまとめた記事を用意しています。
さらに詳しく選びたい方は「JavaScript・Web制作おすすめ本5選」へ▼
まとめ｜この1ページで「JavaScriptの基礎」がしっかり身につく
お疲れさまでした！
ここまで「文字数カウンター」を題材にしながら、
JavaScriptの基本文法と実践的な書き方 をひと通り学んできました。
今回あなたが習得した内容は、どれも Web 開発の基礎となる重要スキルです。
今回のように、
小さなツールを一つ作り、少しずつ機能を追加していく
という学習方法は、初学者にとって最も効果的です。
- まずは動かす
- 理解したら少し改良してみる
- 新しい知識を1つずつ追加する
この積み重ねこそが、
上達する一番の近道です。
本当にお疲れ様でした！この記事で学んだ知識を活かして、別のツール開発に挑戦してみてください。
関連記事
最短ルートで学べる方法を知りたい方はこちら ▼
【初心者向け】JavaScript入門ロードマップ｜最短で理解できる学習ステップを完全ガイド
まずは小さなツールづくりから始めたい方はこちら ▼
【初心者向け】HTML＋JavaScriptで作る簡単Webツール集｜初心者でも動くサンプル付き
JavaScriptで作れるゲームをいろいろ試したい方▼
JavaScriptで作れるブラウザゲーム10選｜反射神経・パズル・AI対戦まで
