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

【JavaScript入門】プログラムの基本的な仕組み

プログラムの基本的な仕組み

　プログラムは「データ」と「処理」で成り立っています。入力データを処理の流れに通し、最終的に目的の出力を得るわけです。そのために用意されているさまざまな仕組みのうち、特に基礎となるのが「変数」「演算子」「条件分岐」「関数」「配列」「繰り返し処理」の6つです。ここでは、これらの概要とイメージをざっくりとつかみ、JavaScriptのサンプルコードを通じて雰囲気を体験してみましょう。

１．プログラムの基本的な仕組み

仕組み概要イメージ
変数データを入れておく「入れ物」。差し替えが容易になり、処理を抽象化・再利用可能にする。「りんご」「梨」などの具体的なものを、A や B といった記号に置き換える働き。
演算子データを計算し、結果を導く記号。加減乗除以外にも多彩な演算子がある。3 + 4 → 7 のように、データ同士を組み合わせて新しい値を得る。
条件分岐変数や計算結果によって、実行する処理を分ける仕組み。もし x が 10 以上なら〜、そうでなければ〜、というように分岐する。
関数複数の処理をひとまとまりにして、部品化する仕組み。「処理1 → 処理2 → 処理3」を一括で呼び出せるブロックにまとめるイメージ。
配列データを一列に並べて管理する仕組み。['りんご','バナナ','みかん'] のように、複数の要素をまとめて扱う。
繰り返し処理同じ処理を何度も繰り返し実行する仕組み。配列の要素すべてを順番に処理する、など大量データの一括処理に強い。

２．サンプルHTMLとJavaScript

　ファイル名を「basicMechanismSample.html」とします。ここでは、6つの仕組みを一通り触れる簡単な例を用意しました。ページをブラウザで開き、コンソール（開発者ツールのConsoleタブ）を確認すると、メッセージが出力されます。

【basicMechanismSample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>basicMechanismSample.html</title>
</head>
<body>
  <h1>プログラムの基本的な仕組み</h1>
  <p>ブラウザの開発者ツールを開き、コンソールログを確認してください。</p>

  <script>
    // 1. 変数の宣言と代入
    let appleCount = 3;       // りんごの数を入れる変数
    let bananaCount = 2;      // バナナの数を入れる変数
    console.log('りんごの数:', appleCount, 'バナナの数:', bananaCount);

    // 2. 演算子を使った計算
    let totalFruits = appleCount + bananaCount; // 加算演算子を使用
    console.log('合計の果物の数:', totalFruits);

    // 3. 条件分岐 (if文)
    if (totalFruits > 4) {
      console.log('果物が5個以上あります！');
    } else {
      console.log('果物はまだ4個以下です。');
    }

    // 4. 関数の定義
    function showFruitMessage(count) {
      return '果物の在庫は ' + count + ' 個あります。';
    }

    // 関数の呼び出し
    let message = showFruitMessage(totalFruits);
    console.log('関数からのメッセージ:', message);

    // 5. 配列
    let fruitList = ['リンゴ', 'バナナ', 'ブドウ', 'モモ'];
    console.log('配列の中身:', fruitList);

    // 6. 繰り返し処理 (for文)
    console.log('配列の要素を順番に表示します:');
    for (let i = 0; i < fruitList.length; i++) {
      console.log('フルーツ', i, ':', fruitList[i]);
    }
  </script>
</body>
</html>

実行結果

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

りんごの数: 3 バナナの数: 2
合計の果物の数: 5
果物が5個以上あります！
関数からのメッセージ: 果物の在庫は 5 個あります。
配列の中身: (4) ['リンゴ', 'バナナ', 'ブドウ', 'モモ']
配列の要素を順番に表示します:
フルーツ 0 : リンゴ
フルーツ 1 : バナナ
フルーツ 2 : ブドウ
フルーツ 3 : モモ
  • 変数
    ・appleCount や bananaCount のように、値を一時的に保管しておく「箱」を作成できます。
    ・後から値を差し替えることで、同じ計算式を使い回せるのが大きな強みです。
  • 演算子
    ・+（加算）を使い、2つの数値（りんごの数とバナナの数）を合計しています。
    ・JavaScript には -（減算）、*（乗算）、/（除算）なども用意されています。
  • 条件分岐
    ・合計数（totalFruits）が 5 個以上かどうかでメッセージを変えています。
    ・if(...) { ... } else { ... } の構文で、条件によって異なる処理を実行できます。
  • 関数
    ・showFruitMessage() という関数に処理をまとめています。
    ・引数 count に異なる数値を渡せば、出力メッセージを柔軟に変えることができます。
  • 配列
    ・fruitList という変数にいくつもの文字列を順番に並べて管理しています。
    ・配列は大量のデータを一括で扱うのに非常に便利です。
  • 繰り返し処理
    ・for (let i = 0; i < fruitList.length; i++) { ... } のように書くと、fruitList の要素を最初から最後まで順番に処理できます。
    ・配列と繰り返し処理の組み合わせはプログラム作成の基本パターンのひとつです。

まとめ

　「変数」「演算子」「条件分岐」「関数」「配列」「繰り返し処理」という6つの仕組みは、JavaScriptのみならずさまざまなプログラミング言語で登場する重要な要素です。これらを自在に組み合わせることで、複雑なロジックや大規模なデータを扱うプログラムを組み立てる土台ができます。また、プログラムは「データを処理に流し込み、目的の出力を得るもの」であるという大枠を意識することも大切です。最初はシンプルなサンプルを動かしてみながら、仕組み同士のつながりを体感し、徐々に理解を深めていきましょう。