関数を組み合わせて、小さな「Webアプリ」を作ろう！

WEB制作

前回の記事で、JavaScriptの関数は、特定の仕事をまとめておく便利な「道具箱」だと学びましたね。今回は、この関数を組み合わせて、より実践的なWebページ、まるで小さなWebアプリのようなものを作ってみましょう。

今回は、ボタンをクリックするたびに数字が増えていく「カウンター」を例に、関数の応用を学んでいきます。

ステップ1：HTMLとCSSで骨組みを作る

まずは、カウンターの骨組みを作ります。数字を表示する場所と、数字を増やすためのボタンを用意しましょう。以下のコードをエディタにコピー＆ペーストして、index.htmlとして保存してください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カウンターアプリ</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      font-family: sans-serif;
      background-color: #f0f0f0;
    }
    #counter-display {
      font-size: 80px;
      margin-bottom: 20px;
      color: #333;
    }
    #increment-button {
      padding: 15px 30px;
      font-size: 24px;
      cursor: pointer;
      border: none;
      border-radius: 8px;
      background-color: #007bff;
      color: white;
    }
  </style>
</head>
<body>
  <div id="counter-display">0</div>
  <button id="increment-button">カウントアップ</button>
</body>
</html>

ステップ2：JavaScriptで関数を定義する

次に、index.htmlの<body>タグの一番下に、以下のJavaScriptコードを追加します。

このコードでは、まずlet count = 0;という変数を用意し、この変数を使って数字をカウントします。次に、incrementCount()という関数を定義し、その中で数字を1つ増やす処理を書いています。

HTML

  <script>
    // カウンターの数字を保存する変数
    let count = 0;

    // カウンターを表示する場所を取得
    const displayElement = document.getElementById('counter-display');

    // 数字を1増やす関数
    function incrementCount() {
      // countの値を1増やす
      count = count + 1;
      // 増やした値を画面に表示する
      displayElement.textContent = count;
    }

    // ボタンにイベントリスナーを追加
    const button = document.getElementById('increment-button');
    button.addEventListener('click', incrementCount);
  </script>
</body>
</html>

ステップ3：仕組みを理解する

このコードのポイントは、関数をイベントリスナーに渡していることです。

  • incrementCountという関数は、数字を増やすという特定の役割だけを担当しています。
  • button.addEventListener('click', incrementCount);という行は、「ボタンがクリックされたら、incrementCountという関数を実行してね」という指示を出しています。

このように、機能を関数として切り分けておくことで、コードが非常に分かりやすくなります。

例えば、もし「カウントを2つずつ増やしたい」と思ったら、count = count + 1;の部分をcount = count + 2;に変えるだけで、全体のコードを大きく書き換える必要はありません。これが関数の再利用性とメンテナンス性の高さです。

まとめ：小さな成功体験を積み重ねよう

たったこれだけで、立派なカウンターアプリが完成しました。ボタンを押すたびに数字が変わる様子は、まるであなたの書いたコードが生きているようです。

今回の例で、

  1. HTMLでページの構造を作り
  2. CSSで見た目を整え
  3. JavaScriptの関数で動きを加える

という、Web開発の基本的な流れを実践できたはずです。

今回の成功体験を自信に変えて、次に作るWebアプリのアイデアを考えてみましょう。たとえば、「カウントダウン機能」や「リセットボタン」を追加してみるのはどうでしょうか？ 挑戦してみてください！

タイトルとURLをコピーしました