JavaScript: JavaScriptの文法
最終更新：2026-10-13
文法は言語のルールです。JSの文法ルールをマスターすれば、ブラウザが正しく理解できるコードが書けるようになります。
1. 文文とセミコロン
JSコードは文文で構成され、それぞれが1つの動作を実行します。セミコロン;が文の終わりを示します。
JSには自動セミコロン挿入（ASI）があり、セミコロンなしでもほとんどのコードは正常に動作しますが、手動で追加することを強くお勧めします。なぜなら、ASIが意図を誤解釈することがあり、デバッグが困難なバグにつながるからです。セミコロンを追加する習慣をつければ、入力の手間よりもはるかに多くのデバッグ時間を節約できます。
波括弧{}で囲まれた複数の文文はコードブロックを形成します。関数本体、条件分岐、ループでよく見られます：
HTML
<script>
if (score > 60) {
result = "合格";
color = "green";
}
</script>
コードブロックは複数の文文を1つの単位として実行させます。1文だけの場合は波括弧を省略できますが、絶対に省略しないでください。波括弧によって意図が明確になり、後から文文を追加した際のバグを防げます。
2. コメント
コメントは人間のために書かれるもので、ブラウザは完全に無視します。良いコメントは「なぜ」を説明し、「何を」はコード自体が伝えるべきです。
- 単一行コメント：
// コメント - 複数行コメント：
/* コメント */
3. 大文字小文字の区別
JSは厳密に大文字小文字を区別します。myVar、myvar、MYVARはまったく異なる3つの変数です。初心者がよくつまずくところで、ロジックは正しいのに大文字小文字の間違いでエラーになることがあります。
4. キーワードと予約語
JSは特定の単語をキーワードとして予約しており（var、let、const、function、if、elseなど）、変数名として使用できません。予約語の完全なリストは長いので、よく使うものだけを覚えておけば十分です。エディタのシンタックスハイライトが判別を助けます。
▶ サンプル：文文、セミコロン、コードブロック
▶ 試してみよう▶ サンプル：コメントの使い方
▶ 試してみよう▶ サンプル：大文字小文字の区別デモ
▶ 試してみよう▶ サンプル：命名ルールの実践
▶ 試してみよう❓ よくある質問
Q セミコロンの省略は本当にバグの原因になりますか？
A ほとんどの場合はなりませんが、特殊なケースがあります。例えば、
returnの後に改行するとJSが自動的にセミコロンを挿入し、意図した値ではなくundefinedを返します。このようなバグは非常に見つけにくく、何時間もデバッグしてからセミコロンの欠落に気づくことがあります。なぜリスクを取るのですか？Q 1文のステートメントにも波括弧を付けるべきですか？
A はい。今日は1行かもしれませんが、明日には2行追加するかもしれません。その際に波括弧を付け忘れるとう論理エラーになります。波括弧は数バイトのコストで、何時間ものデバッグ時間を節約できます。
Q camelCaseとsnake_case、どちらが良いですか？
A JSの世界では、camelCase（
firstName）が標準です。snake_case（first_name）はPythonやデータベースフィールドでより一般的です。郷に入っては郷に従え — JSではcamelCaseを使いましょう。📖 まとめ
- JSの文文はセミコロンで終わる — 常に手動で追加し、自動セミコロン挿入に頼らない
- コードブロックは
{}を使用 — 1文でも波括弧を省略しない - 単一行コメントは
//、複数行コメントは/* */— コメントは「何を」ではなく「なぜ」を説明する - JSは厳密に大文字小文字を区別する —
myVar≠myvarは初心者によくある間違い - 変数名は数字で始められず、キーワードや予約語は使用できない
- camelCaseが推奨される命名規則：
firstName、totalScore
📝 練習問題
- 基礎：2つの変数
studentNameとstudentAgeを宣言し、値を代入してconsole.log()で表示するJSコードを書いてください。すべての文文にセミコロンが付き、変数名がcamelCaseになっていることを確認してください。 - 中級：入力フィールドとボタンを持つページを作成してください。ユーザーが年齢を入力すると、if/elseコードブロックを使って成人（18歳以上）かどうかを判定し、結果をページに表示してください。
- 上級：「命名チェッカー」ページを作成してください。ユーザーが変数名を入力すると、JSがその有効性をチェックし（先頭の数字なし、スペースやハイフンなし、キーワードではない）、有効/無効とその理由を表示します。
