このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】変数（variable）

変数（variable）

　プログラムを書く上で、変数（variable）はデータと処理を分けるための基本的な概念です。現実世界で自動販売機の缶ジュースを思い浮かべると、缶に入った飲み物（データ）が、どの缶に入っていても同じ自動販売機の動作（処理）を実現するのと同じように、変数はどんな値が入っていても同じ処理を適用できる仕組みとなります。
　ここでは、JavaScriptにおける変数の概念、宣言方法と代入、そして変数を利用した文字列結合の基本的な使い方について、具体的なHTMLファイル「variable_demo.html」のサンプルを交えて解説します。

１．変数の基本

1.1. 変数の概念

　変数は、プログラム内でデータを一時的に保存するための「入れ物」です。自動販売機の例で言えば、缶ジュースの中身が何であっても、販売する仕組みは同じです。プログラムでは、変数に値を格納しておくことで、その値を後で再利用したり、変更したりすることができます。JavaScriptでは、個々の文字や数値を区別する特別な「文字」型はなく、すべてが文字列や数値として扱われ、変数に格納されます。

1.2. 変数の宣言と代入

　JavaScriptでは、変数の宣言にlet構文を用い、代入演算子「=」で値を設定します。変数は、宣言だけしておいて後から値を代入することも、宣言と同時に初期値を設定することもできます。例えば、以下の例は、変数itemNameに「牛乳」という文字列を代入している例です。

// 変数の宣言と代入を同時に行う
let itemName = '牛乳';

このようにしておくと、後でitemNameという名前で保存された値を、さまざまな処理で利用できるようになります。

２．変数を使った文字列の出力

2.1. 文字列の結合と出力

　変数に格納された値は、他の文字列と結合して新たな文字列を作ることができます。たとえば、変数itemNameの値を使って「牛乳を飲んだ。」というメッセージを出力するには、+演算子を使って以下のように記述します。

console.log(itemName + 'を飲んだ。');

　このコードは、itemNameに格納された「牛乳」と文字列「を飲んだ。」を結合し、結果として「牛乳を飲んだ。」というメッセージをコンソールに表示します。

2.2. サンプルHTMLファイルによる実例（variable_demo.html）

　以下は、オリジナルファイル名「variable_demo.html」として、HTML内にJavaScriptのサンプルコードを組み込んだ例です。このサンプルでは、変数の宣言と代入、そして変数を利用した文字列の結合を行い、結果をコンソールに出力します。

【variable_demo.html】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>変数のサンプル</title>
    <style>
      /* CSSコメント: ページ全体の見た目を整えます */
      body { font-family: 'Arial', sans-serif; background-color: #f8f8f8; padding: 20px; }
      h1 { color: #0055aa; }
    </style>
    <script>
      // head内のJavaScript: ページ初期化のログ出力
      console.log('変数サンプルページが開始されました。');
    </script>
  </head>
  <body>
    <h1>変数の基本</h1>
    <p>このページは、変数の宣言と利用方法のサンプルです。ブラウザのコンソールを確認してください。</p>
    <script>
      // body内のJavaScript: 変数の宣言、代入、そして文字列結合の例を示します。

      // 変数itemNameを宣言し、「牛乳」という値を代入
      let itemName = '牛乳';
      
      // 変数itemNameを利用して文字列結合を行い、結果をコンソールに出力
      console.log(itemName + 'を飲んだ。');
      
      /*
        この処理の流れ:
        1. 変数itemNameに「牛乳」が保存されます。
        2. console.log()でitemNameの値と「を飲んだ。」が結合され、結果が「牛乳を飲んだ。」として出力されます。
      */
    </script>
  </body>
</html>

解説

  • HTML構造：<head>内にタイトル、内部CSS、初期のJavaScriptがあり、<body>内に見出しと説明文、そして変数を使った出力処理が記述されています。
  • 変数の宣言と代入：let itemName = '牛乳';という形で変数を宣言し、同時に初期値を設定しています。
  • 文字列の結合：console.log(itemName + 'を飲んだ。');により、変数の値と固定文字列を結合して、正しい出力が得られることを確認できます。
  • コメントの活用：コード中にシングルラインコメントと複数行コメントを適宜挿入して、各処理の意図や流れを明確に説明しています。

まとめ

　ここでは、JavaScriptにおける変数の基本概念とその利用方法について解説しました。変数は、データと処理を分離し、柔軟なプログラム設計を可能にする重要な要素です。今回示した「variable_demo.html」のサンプルでは、変数の宣言、代入、文字列結合を通じて、変数の役割と利用方法を具体的に学ぶことができます。これらの基礎をしっかり理解することで、今後の複雑なプログラム開発において、効率的かつ保守性の高いコードを書くための大きな土台となります。