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

【JavaScript入門】Webページに入力した内容を処理して表示する

Webページに入力した内容を処理して表示する

　Webアプリケーションを構築するとき、「入力」「処理」「出力」の3つをどのように組み合わせるかが基本になります。ここでは、Webページにユーザーが値を入力し、それを処理して結果を表示するシンプルなサンプルアプリを作成しながら、HTML・CSS・JavaScript の連携による動きを理解していきましょう。

１．アプリの概要

　今回作る例は、「合計得点計算アプリ」です。ユーザーが入力欄に数値を入力し、「合計得点を計算」ボタンをクリックすると、その合計をページ上に表示します。こうした仕組みを使えば、応用してさまざまな入力フォーム付きのアプリケーションを作ることが可能です。

1.1. 3つの基本要素

このアプリには、プログラムの3大要素である次の機能が含まれています。

要素説明
入力ユーザーがWebページ上で数値や文字を入力する（例：テキストボックス）
処理ボタンのクリックなどを契機にJavaScriptで計算や判定などのロジックを実行する。
出力計算結果などをWebページ（画面）に表示する。

1.2. ファイル構成

本サンプルでは、下記の3ファイルを用意します（ファイル名は変更してもかまいません）。

  • totalScore.html： HTML構造と入力フォーム、ボタン、結果表示箇所を記載
  • styleScore.css： 見た目を調整するCSSルールを記載
  • mainScore.js： 入力値の取得や合計計算などのロジックを記載

1.3. 実行結果

２．アプリの実装例

2.1. HTMLファイル（totalScore.html）

【totalScore.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <!-- CSSファイルを読み込む -->
  <link rel="stylesheet" href="styleScore.css">
  <!-- JavaScriptファイルを読み込む -->
  <script src="mainScore.js"></script>
  <title>合計得点計算アプリ</title>
</head>
<body>
  <h1>合計得点計算</h1>
  <div class="item">
    <div class="title">問題1</div>
    <!-- class="score" の入力ボックス -->
    <input type="number" value="10" class="score">
  </div>
  <div class="item">
    <div class="title">問題2</div>
    <input type="number" value="20" class="score">
  </div>
  <div class="item">
    <div class="title">問題3</div>
    <input type="number" value="30" class="score">
  </div>
  <!-- 計算ボタン -->
  <button id="calc">合計得点を計算</button>
  <!-- 結果表示箇所 -->
  <div id="result"></div>
</body>
</html>
  • input type="number" で数値を入力できるボックスを用意しています。
  • class="score" の要素を3つ用意し、後でJavaScriptから一括で取得します。
  • id="calc" のボタンをクリックしたときにJavaScriptの処理が動くように設定します。
  • id="result" の領域に計算結果を表示します。

2.2. CSSファイル（styleScore.css）

【styleScore.css】

h1 {
  margin: 0;
  font-size: 1.2rem;
}

.item {
  margin: 0.5rem 0;
}

.item * {
  display: inline-block;
}

.title {
  width: 5rem;
}

.score {
  width: 6rem;
  box-sizing: border-box;
  margin-left: 0.5rem;
}

#calc {
  width: 10rem;
  margin-top: 1rem;
}

#result {
  margin-top: 1rem;
  font-weight: bold;
}
  • .item や .title, .score で入力欄の配置やサイズを調整しています。
  • #result では結果を太字にして見やすくしています。

2.3. JavaScriptファイル（mainScore.js）

【mainScore.js】

// DOMContentLoaded イベントが発生したらメイン処理を登録
window.addEventListener('DOMContentLoaded', function() {
  // 1. 「合計得点を計算」ボタンを取得
  let elCalc = document.querySelector('#calc');

  // 2. ボタンがクリックされたときの処理を設定
  elCalc.addEventListener('click', function() {
    // 3. class="score" の入力欄をすべて取得
    let scores = document.querySelectorAll('.score');

    // 4. 合計を入れる変数を 0 で初期化
    let total = 0;

    // 5. 取得した入力欄をループで回し、合計値を計算
    for (let i = 0; i < scores.length; i++) {
      // 入力された数値を文字列から整数に変換
      let value = parseInt(scores[i].value);
      // 数値として加算
      total += value;
    }

    // 6. 結果を表示するHTML文字列を作り変数に格納
    let outputHtml = '合計得点：' + total + ' 点';

    // 7. id="result" の要素に計算結果を反映
    document.querySelector('#result').innerHTML = outputHtml;
  });
});
  • STEP 1： window.addEventListener('DOMContentLoaded', ...) で、HTML構造が読み込み終わったタイミングで関数を実行。
  • STEP 2： document.querySelector('#calc') で、id="calc" のボタン要素を取得し、変数 elCalc に代入。
  • STEP 3： ボタンクリック時の処理を追加（click イベント）。
  • STEP 4： document.querySelectorAll('.score') で、class="score" の要素を一括取得。
  • STEP 5： 合計値用の変数 total を 0 で初期化し、入力欄をループで回して加算。
  • STEP 6： 結果表示用のHTML文字列を作成。
  • STEP 7： document.querySelector('#result').innerHTML に文字列を代入して表示。

３．仕組みのポイント

  • 要素の取得： 画面上の入力欄やボタンなどを document.querySelector() または document.querySelectorAll() で取得します。
  • イベント処理： ボタンがクリックされたときに合計値を計算する機能を仕込むことで、ユーザーアクションによってプログラムが動く仕組みを作ります。
  • 数値計算： 入力欄から取得できる値は文字列のため、parseInt() などで数値に変換してから加算を行います。
  • 結果表示： innerHTML を使うと、HTMLタグを含んだ文字列を要素に挿入できます。単にテキストだけを差し込む場合は textContent という手もあります。

まとめ

　ここでは、ユーザーがWebページ上に入力した内容をJavaScriptで処理し、最終的な結果を画面に表示するまでの大まかな流れを見てきました。主なポイントは下記の通りです。

  • ページ要素（ボタンや入力欄）の取得方法
  • ユーザーの操作（イベント）に反応して処理を実行する仕組み
  • 入力されたテキストを数値に変換して計算する手順
  • 計算結果をHTMLに反映してユーザーに提示

　この流れさえ押さえておけば、ほかの計算ロジックや表示フォーマットに応用し、より高度なアプリケーションへと発展させることができます。まずはシンプルな例から試しつつ、入力欄や出力形式を自由にアレンジして、JavaScript の動きを確かめてみてください。