EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語
404 Not Found

404 Not Found

nginx

JavaScriptの文法

文法は言語のルールです。JSの文法ルールをマスターすれば、ブラウザが正しく理解できるコードが書けるようになります。

文文とセミコロン

JSコードは文文で構成され、それぞれが1つの動作を実行します。セミコロン;が文の終わりを示します。

JSには自動セミコロン挿入（ASI）があり、セミコロンなしでもほとんどのコードは正常に動作しますが、手動で追加することを強くお勧めします。なぜなら、ASIが意図を誤解釈することがあり、デバッグが困難なバグにつながるからです。セミコロンを追加する習慣をつければ、入力の手間よりもはるかに多くのデバッグ時間を節約できます。

コードブロック

波括弧{}で囲まれた複数の文文はコードブロックを形成します。関数本体、条件分岐、ループでよく見られます：

HTML 
<script>
if (score > 60) {
  result = "合格";
  color = "green";
}
</script>

コードブロックは複数の文文を1つの単位として実行させます。1文だけの場合は波括弧を省略できますが、絶対に省略しないでください。波括弧によって意図が明確になり、後から文文を追加した際のバグを防げます。

コメント

コメントは人間のために書かれるもので、ブラウザは完全に無視します。良いコメントは「なぜ」を説明し、「何を」はコード自体が伝えるべきです。

大文字小文字の区別

JSは厳密に大文字小文字を区別します。myVar、myvar、MYVARはまったく異なる3つの変数です。初心者がよくつまずくところで、ロジックは正しいのに大文字小文字の間違いでエラーになることがあります。

キーワードと予約語

JSは特定の単語をキーワードとして予約しており（var、let、const、function、if、elseなど）、変数名として使用できません。予約語の完全なリストは長いので、よく使うものだけを覚えておけば十分です。エディタのシンタックスハイライトが判別を助けます。

実例：文文、セミコロン、コードブロック

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS文法 - 文文とコードブロック</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 500px; margin: 60px auto; }
    #output { min-height: 40px; padding: 16px; background: #f5f5f5; border-radius: 8px; margin-top: 16px; }
    button { padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: #2196F3; margin-top: 8px; }
    button:hover { background: #1976D2; }
    input { padding: 8px; font-size: 16px; border: 2px solid #ddd; border-radius: 4px; width: 100px; }
  </style>
</head>
<body>
  <h2>文文とコードブロック</h2>
  <p>点数を入力して合否を確認しましょう：</p>
  <input type="number" id="scoreInput" placeholder="点数" value="75">
  <button id="checkBtn">確認</button>
  <div id="output"></div>
  <script>
    document.getElementById("checkBtn").onclick = function() {
      var score = parseInt(document.getElementById("scoreInput").value);
      var result = "";
      var color = "";
      if (score >= 60) {
        result = "合格！点数: " + score;
        color = "#4CAF50";
      } else {
        result = "不合格。点数: " + score;
        color = "#f44336";
      }
      var outputEl = document.getElementById("output");
      outputEl.textContent = result;
      outputEl.style.color = color;
    };
  </script>
</body>
</html>

実例：コメントの使い方

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS文法 - コメント</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 500px; margin: 60px auto; }
    .code-box { background: #263238; color: #aed581; padding: 20px; border-radius: 8px; font-family: Consolas, monospace; font-size: 14px; line-height: 1.8; white-space: pre; overflow-x: auto; }
    .comment { color: #78909c; }
    button { margin-top: 16px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: #4CAF50; }
    #result { margin-top: 12px; font-size: 18px; }
  </style>
</head>
<body>
  <h2>JSコメント</h2>
  <div class="code-box"><span class="comment">// 単一行コメント：円の面積を計算する</span>
var r = 5;
var area = 3.14 * r * r;
<span class="comment">/* 複数行コメント：
   小数点以下2桁に丸める */</span>
area = area.toFixed(2);</div>
  <button id="runBtn">このコードを実行</button>
  <p id="result"></p>
  <script>
    document.getElementById("runBtn").onclick = function() {
      var r = 5;
      var area = 3.14 * r * r;
      area = area.toFixed(2);
      document.getElementById("result").textContent = "半径5の円の面積 = " + area;
      document.getElementById("result").style.color = "#4CAF50";
    };
  </script>
</body>
</html>

実例：大文字小文字の区別デモ

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS文法 - 大文字小文字の区別</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 500px; margin: 60px auto; text-align: center; }
    .card { display: inline-block; padding: 20px; border: 2px solid #ddd; border-radius: 12px; margin: 8px; min-width: 120px; }
    .card h3 { margin: 0 0 8px; }
    .card p { margin: 0; font-family: Consolas, monospace; font-size: 18px; }
    #myVar { border-color: #4CAF50; }
    #myvar { border-color: #FF9800; }
    #MYVAR { border-color: #9C27B0; }
    button { margin-top: 20px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: #e91e63; }
  </style>
</head>
<body>
  <h2>JSの大文字小文字の区別</h2>
  <p>以下の3つの変数名はすべて異なります：</p>
  <div class="card" id="myVar"><h3>myVar</h3><p>---</p></div>
  <div class="card" id="myvar"><h3>myvar</h3><p>---</p></div>
  <div class="card" id="MYVAR"><h3>MYVAR</h3><p>---</p></div>
  <br>
  <button id="showBtn">代入して表示</button>
  <script>
    document.getElementById("showBtn").onclick = function() {
      var myVar = "緑";
      var myvar = "オレンジ";
      var MYVAR = "紫";
      document.querySelector("#myVar p").textContent = myVar;
      document.querySelector("#myvar p").textContent = myvar;
      document.querySelector("#MYVAR p").textContent = MYVAR;
    };
  </script>
</body>
</html>

実例：命名ルールの実践

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS文法 - 命名ルール</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 550px; margin: 60px auto; }
    .rule { padding: 12px 16px; border-left: 4px solid #2196F3; background: #e3f2fd; margin: 8px 0; border-radius: 0 8px 8px 0; }
    .bad { border-left-color: #f44336; background: #ffebee; }
    .good { border-left-color: #4CAF50; background: #e8f5e9; }
    code { background: #eceff1; padding: 2px 6px; border-radius: 3px; font-size: 14px; }
  </style>
</head>
<body>
  <h2>変数の命名ルール</h2>
  <div class="rule">✅ 使用可能：英字、数字、アンダースコア<code>_</code>、ドル記号<code>$</code></div>
  <div class="rule">✅ 数字で始めることはできない</div>
  <div class="rule">✅ キーワードは使用できない（<code>var</code> <code>let</code> <code>function</code>など）</div>
  <div class="rule good">✅ 推奨：camelCase — <code>myFirstName</code> <code>totalScore</code></div>
  <div class="rule bad">❌ 非推奨：<code>my_first_name</code>（アンダースコア記法はJSでは一般的ではない）</div>
  <div class="rule bad">❌ 無効：<code>2ndPlace</code>（数字で始まる）<code>my-var</code>（ハイフンを含む）</div>
  <hr style="margin: 24px 0;">
  <h3>camelCaseの例</h3>
  <div id="demo" style="font-size: 18px; line-height: 2;"></div>
  <script>
    var firstName = "太郎";
    var lastName = "山田";
    var ageInYears = 25;
    var isStudent = true;
    var favoriteLanguage = "JavaScript";
    var demoEl = document.getElementById("demo");
    demoEl.innerHTML = "firstName = \"" + firstName + "\"<br>" +
      "lastName = \"" + lastName + "\"<br>" +
      "ageInYears = " + ageInYears + "<br>" +
      "isStudent = " + isStudent + "<br>" +
      "favoriteLanguage = \"" + favoriteLanguage + "\"";
  </script>
</body>
</html>

📖 まとめ

  1. JSの文文はセミコロンで終わる — 常に手動で追加し、自動セミコロン挿入に頼らない
  2. コードブロックは{}を使用 — 1文でも波括弧を省略しない
  3. 単一行コメントは//、複数行コメントは/* */ — コメントは「何を」ではなく「なぜ」を説明する
  4. JSは厳密に大文字小文字を区別する — myVar ≠ myvarは初心者によくある間違い
  5. 変数名は数字で始められず、キーワードや予約語は使用できない
  6. camelCaseが推奨される命名規則：firstName、totalScore

❓ よくある質問

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を使いましょう。

📝 演習

  1. 基礎：2つの変数studentNameとstudentAgeを宣言し、値を代入してconsole.log()で表示するJSコードを書いてください。すべての文文にセミコロンが付き、変数名がcamelCaseになっていることを確認してください。
  2. 中級：入力フィールドとボタンを持つページを作成してください。ユーザーが年齢を入力すると、if/elseコードブロックを使って成人（18歳以上）かどうかを判定し、結果をページに表示してください。
  3. 上級：「命名チェッカー」ページを作成してください。ユーザーが変数名を入力すると、JSがその有効性をチェックし（先頭の数字なし、スペースやハイフンなし、キーワードではない）、有効/無効とその理由を表示します。
100%