【6日でできるJavaScript入門】JavaScriptの記述ルール

　ここでは、Webページをより動的に、そして使いやすくするためのJavaScriptの基本的な記述ルールを解説します。
記事全体の流れとしては、まずJavaScriptの概要とHTML/CSSとの関係を整理し、次に実際にどこに書くか、どんな書き方が必要かをステップごとに見ていきます。
　学んだ内容をすぐに試せるよう、各節には単独で表示できるサンプルHTMLを用意しました。タイトルや見出しには絵文字を入れて、ポイントを視覚的にも捉えやすくしています。

１．JavaScriptの概要

　JavaScriptは、Webページ上で動的な動作を実現するためのプログラミング言語です。以下の表で、HTML・CSSとの違いと役割をまとめています。

用語役割
HTML文書構造を定義（見出し・段落・リストなど）
CSS見た目を指定（色・文字サイズ・レイアウトなど）
JavaScript動きや処理をプログラミング（イベント・計算など）

ファイル名： lesson01-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📘 JavaScript 入門サンプル</title>
</head>
<body>
  <h1>🚀 JavaScriptの概要</h1>
  <p id="msg">ここにメッセージが表示されます。</p>
  <script>
    document.getElementById('msg').textContent = 'こんにちは、JavaScript！';
  </script>
</body>
</html>

ブラウザの出力例

タグ解説

  • <script> ... </script>： JavaScriptコードを記述するための要素。
  • <meta charset="UTF-8">： 文字エンコーディングを指定。
  • <title>： ブラウザのタブに表示されるタイトル。

２．JavaScriptを記述する場所

JavaScriptは主に以下の2箇所に記述できます。

配置場所特徴おすすめのタイミング
<head> 内ページ読み込み前に実行事前準備や初期設定を行いたい場合
</body> 直前HTML描画後に実行DOM要素を操作するスクリプト全般

ファイル名： lesson01-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📑 読み込みタイミング例</title>
  <script>
    console.log('head内で実行');
  </script>
</head>
<body>
  <h1>🕒 実行タイミングの違い</h1>
  <p>コンソールを確認してください。</p>
  <script>
    console.log('body直前で実行');
  </script>
</body>
</html>

ブラウザの出力例

デバックコンソールの出力

head内で実行
body直前で実行

３．JavaScriptの記述ルール

JavaScriptを正しく動かすために守るべき基本ルールをまとめます。

ルール説明例
<script> 内に記述JavaScriptコードは必ず <script> と </script> の間に書く<script> ... </script>
半角文字で記述文字・記号はすべて半角で記述let a = 1;
大文字／小文字を区別myVar と MyVar は別名として扱われるconsole.log vs Console.log
文末にセミコロン (;) を付与文の区切りを明確にするlet x = 10;

ファイル名： lesson01-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>⚙️ 記述ルールサンプル</title>
</head>
<body>
  <h1>📏 記述ルールの例</h1>
  <script>
    let count = 0;      // 半角とセミコロン
    count = count + 1;  // 大文字小文字を厳密に
    console.log(count);
  </script>
</body>
</html>

ブラウザの出力例

4．半角スペース、タブ文字の扱い

可読性を保つためのインデントや空白のルールを解説します。

記述方法説明
半角スペース連続しても処理に影響なし（インデント可）
タブ文字半角スペース同様に無視される（好みで使い分け）

ファイル名： lesson01-4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>↔️ インデント例</title>
</head>
<body>
  <h1>📐 インデントの確認</h1>
  <script>
    function greet() {
      let msg = 'スペース2つでインデント';
      console.log(msg);
    }
    greet();
  </script>
</body>
</html>

ブラウザの出力例

５．コメント文の記述

コードを読みやすくするため、コメントの書き方を覚えましょう。

コメント種類書式用途
行コメント// 以降を無視短い補足説明
ブロックコメント/* ... */複数行の説明や一時的無効化

ファイル名： lesson01-5.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>💬 コメント例</title>
</head>
<body>
  <h1>📝 コメントの書き方</h1>
  <script>
    // これは行コメントです
    let x = 5; /* ここはブロックコメント */
    console.log(x);
  </script>
</body>
</html>

ブラウザの出力例

まとめ

　これまで、JavaScriptの概要から基本的な記述ルール、空白・インデント、コメントの扱いまでを学習しました。
記事のサンプルを実際に動かすことで、理解を深め、今後のステップである具体的なプログラミング演習に備えましょう。