【ITニュース解説】Coding Challenge Practice - Question 8

今回解説するニュース記事は、Webアプリケーション開発の最も基本的な要素の一つである「カウンターアプリ」の作り方を扱っている。これは、画面に表示された数字をボタンのクリック操作で増やしたり減らしたりするシンプルなアプリケーションだ。システムエンジニアを目指す皆さんにとって、このような簡単なアプリを実際に動かしてみることは、現代のWeb開発で広く使われている「React（リアクト）」という技術の基本を理解する良い足がかりとなる。

まず、私たちが作りたいカウンターアプリがどのような機能を持つべきかを確認する。一つ目は、カウンターの数字が最初に「0」から始まること。二つ目は、画面上の「+」ボタンをクリックすると数字が一つ増えること。三つ目は、画面上の「-」ボタンをクリックすると数字が一つ減ること。たったこれだけのシンプルな機能だが、Webアプリケーションの動作の基礎が詰まっている。

記事には、アプリの骨組みとなる初期のコードが示されている。これは「ボイラープレートコード」と呼ばれ、開発を始めるための基本的なひな形だ。 コードは以下のようになっている。

import React from 'react' export function App() { return ( <div> <button data-testid="decrement-button">-</button> <button data-testid="increment-button">+</button> <p>clicked: 0</p> </div> ) }

このコードは、Reactを使ったWebページの一部を構成する。Appという名前の関数が、このアプリケーションのメインとなる部分だと考えればよい。return文の中にある<button>や<p>といった部分は、Webページに表示される要素を定義している。例えば、<button>はクリックできるボタンを、<p>は段落（ここでは数字を表示する部分）を表す。data-testidという属性は、主にプログラムのテスト時にどの要素を指しているかを識別するために使われるもので、アプリの機能そのものには直接影響しない。この初期の状態では、ボタンが表示されるだけで、クリックしても何も起こらない静的なページだ。表示されている数字も常に「0」のままである。

次に、この静的なページをユーザーの操作に反応するインタラクティブなアプリに変えるための肝となる部分を説明する。Webアプリケーションでは、ユーザーの操作によって変化する値や状態を適切に管理する必要がある。今回のカウンターアプリで言えば、画面に表示される「数字」がまさにそれにあたる。この「変化する値」のことを「状態（ステート）」と呼ぶ。

Reactでこのような状態を管理するために、「useState（ユーズステート）」という特別な機能が提供されている。これは「フック（Hook）」と呼ばれるReactの強力な機能の一つで、関数コンポーネント（今回で言うApp関数）に状態を持たせることができる。記事では以下のように記述されている。

const [count, setCount] = useState(0);

この一行は非常に重要なので、詳しく見ていこう。 useState(0)は、私たちが管理したい状態（今回の場合はカウンターの数字）の初期値として「0」を設定していることを意味する。 そして、const [count, setCount]という部分で、このuseStateフックから2つの要素を受け取っている。 一つ目のcountは、現在のカウンターの数字を表す変数だ。私たちはこのcount変数を参照することで、今の数字がいくつであるかを知ることができる。 二つ目のsetCountは、このcountの値を更新するための「関数」だ。Reactでは、状態を直接変更するのではなく、必ずこのような専用の関数（セッター関数と呼ばれる）を使って更新するというルールがある。setCount関数を使って値を更新することで、Reactは画面に変更があったことを検知し、自動的に表示を更新してくれる仕組みになっている。これが、Reactが「インタラクティブなWebアプリケーション」を効率的に作る上で非常に便利な点だ。

状態変数を宣言したら、次は実際にカウンターの数字を増減させるための関数を作成する。記事では、handleIncreaseとhandleDecreaseという2つの関数が定義されている。

const handleIncrease = () => { setCount(count + 1); } const handleDecrease = () => { setCount(count - 1); }

handleIncrease関数は、実行されるとsetCount(count + 1)という処理を行う。これは、「現在のcountの値に1を足した新しい値を、countの新しい値として設定しなさい」という意味だ。同様にhandleDecrease関数はsetCount(count - 1)を実行し、「現在のcountの値から1を引いた新しい値を、countの新しい値として設定しなさい」という意味になる。このようにsetCountを使うことで、countの値が更新され、それが画面にも反映される。

これらの関数を作成したら、あとは画面上のボタンと連携させるだけだ。Webアプリケーションでは、ボタンがクリックされたり、入力欄に文字が入力されたりといったユーザーの操作を「イベント」と呼ぶ。そして、そのイベントが発生したときに特定の処理を実行させるための仕組みを「イベントハンドリング」と呼ぶ。Reactでは、HTMLの要素にonClickのような属性を追加することで、簡単にイベントハンドリングを設定できる。

記事の最終的なコードでは、ボタンの記述が以下のように変更されている。

<button onClick={handleDecrease} data-testid="decrement-button">-</button> <button onClick={handleIncrease} data-testid="increment-button">+</button> <p>clicked: {count}</p>

-ボタンにはonClick={handleDecrease}が追加され、+ボタンにはonClick={handleIncrease}が追加されている。これは、「このボタンがクリックされたら、それぞれhandleDecreaseまたはhandleIncreaseという関数を実行しなさい」という意味になる。{}（波括弧）で囲むことで、JavaScriptの変数や関数をHTMLのような記述（JSXと呼ばれる）の中に埋め込むことができる。

そして、表示部分である<p>タグの中も、初期のclicked: 0からclicked: {count}へと変更されている。これにより、count変数の現在の値がそのまま画面に表示されるようになる。

これで、カウンターアプリは完成だ。ユーザーが+ボタンをクリックすると、handleIncrease関数が実行され、setCount(count + 1)によってcountの値が更新される。countが更新されると、Reactはそれを検知し、自動的に<p>clicked: {count}</p>の部分を新しいcountの値で再描画してくれる。setCount関数を使うことで、開発者が明示的に画面の表示を更新するコードを書く必要がないため、非常に効率的に開発を進められる。-ボタンをクリックした場合も同様のプロセスで数字が減り、画面が更新される。

最終的な全体のコードは以下のようになる。

import React, {useState} from 'react'

export function App() { const [count, setCount] = useState(0);

const handleIncrease = () => { setCount(count + 1); } const handleDecrease = () => { setCount(count - 1); } return ( <div> <button onClick={handleDecrease} data-testid="decrement-button">-</button> <button onClick={handleIncrease} data-testid="increment-button">+</button> <p>clicked: {count}</p> </div> ) }

ここで一つ重要なのは、useStateフックを使うためには、import React, {useState} from 'react'のように、ReactだけでなくuseStateもreactライブラリからインポートする必要があることだ。これは、プログラムがuseStateという機能をどこから持ってくるかを知るために必要となる。

このシンプルなカウンターアプリの作成を通じて、システムエンジニアを目指す皆さんは、Webアプリケーション開発における「状態管理」と「ユーザーとのインタラクション」という二つの非常に重要な概念の基本を理解したことだろう。ReactのuseStateフックを使えば、アプリケーションの状態を簡単に管理し、その状態の変化に応じて画面の表示を自動的に更新できる。これは、現代の複雑なWebアプリケーションを効率的に開発するための強力な土台となる知識である。この基本をしっかりと身につけることで、より高度なアプリケーション開発へとステップアップしていくことができる。