教育担当になったので、React教えねば！～そうだ、電卓を作ってもらおう～

Last updated at 2025-11-20Posted at 2025-11-20

教育担当になったので、React教えねば！

〜そうだ、電卓を作ってもらおう〜

はじめまして。タイトル通り教育担当になった まごつく です。

今回、新人向けに部内研修を実施したので、その内容をまとめておきます。
単なるやり方紹介ではなく、

新人のどこを見ればいいのか
何を教えておくと、その後の成長につながりやすいか

も含めて記録しておきます。

対象：
- プログラム初心者〜React未経験の経験者に教える人
目的：
- 準備と教える負担はできるだけ軽く
- 受講者は初心者でもReactの基本を一通り経験
- ついでに、新人の得意・不得意や考え方を把握する

1. テーマ：Reactで電卓を作る

今回の研修テーマは 「Reactで電卓を作る」 です。

なぜ電卓なのか？

電卓を題材に選んだ理由は次の通りです。

手元のスマホに必ずお手本（電卓アプリ）がある
- → 専用の設計書や仕様書を用意しなくてもよい
難しすぎず、ゴールが明確
機能の追加・削減で難易度を調整しやすい
自然と以下のReactの基本を使うことになる
- コンポーネント分割
- state管理（useState）
- イベントハンドリング
- レンダリング
完成したときに「ちゃんと動く達成感」が得やすい

この題材を通して、Reactの基礎文法＋開発の考え方 をまとめて経験してもらうことを狙いました。

2. 環境準備

環境：

VS Code + Node.js（TypeScript / .tsx）

教える側でプロジェクトテンプレートを用意し、src/calc/ フォルダ以下に電卓用のファイルを置きます。
GitHubで共有して、gitの使い方も理解してもらいます。
今回は、incomplete-calcでブランチを作成しています。

テンプレート構成例

my-calc/
├─ src/
│  ├─ calc/
│  │  ├─ Calc.tsx        // 電卓本体コンポーネント
│  │  ├─ calc.model.ts   // 型定義ファイル
│  │  └─ index.tsx
│  └─ App.tsx
├─ package.json
└─ tsconfig.json

最初に渡すコンポーネントは、あえてシンプルに：

カウント表示（数値）コンポーネント
カウントを進めるボタンコンポーネント

まずはこの2つで、

useStateの使い方
イベントでstateを更新し、画面に反映される流れ

を理解してもらいます。

サンプルコード（ひな形）

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { SampleType } from './calc.model';

const Calc = () => {
  const [count, setCount] = useState<number>(0);
  const [sample, setSample] = useState<SampleType>('追加前');
  const handelAdd = () => {
    setCount(e => e + 1);
  };
  useEffect(() => {
    if (count == 5) setSample('追加済み');
  }, [count]);
  return (
    <div className="App">
      <p id="message">{count}</p>
      <div id="buttons">
        <StyledDiv smpleColor={count}>{sample}</StyledDiv>
        <button id="button1" onClick={() => handelAdd()}>
          1
        </button>
      </div>
    </div>
  );
};

export default Calc;

const StyledDiv = styled.div<{ smpleColor: number }>`
  color: ${props => (props.smpleColor > 9 ? 'red' : 'black')};
`;

型定義ファイル（calc.model.ts の追加）

SampleType など、電卓で使う型は calc.model.ts にまとめて定義します。

// src/calc/calc.model.ts
export type SampleType = '追加前' | '追加済み';

必要に応じて、このファイルに他の型（ボタンの種別、演算子の列挙型など）も追加していきます。

3. ルール

ルールは下記の内容をREADME.mdで共有していました。

電卓の名称を含む直接的な検索の禁止
- Web検索やリポジトリ検索で 電卓 / calculator などをそのまま含めない。
- 代わりに「四則演算」「ボタンコンポーネント」「状態管理」など、機能観点のキーワードで調べてもらう。
AI等を使う場合のルール
- 公式ドキュメント、商用利用可能なソース（ライセンスOKなOSSやブログなど）を確認すること。
- 仕様の整理や実装方針、部分的なコード例をもらう用途で使う。
完成されたモジュールのインストール禁止
- 完成済みの電卓ライブラリなど、「ほぼ完成しているもの」を入れるのは禁止。
- bignumber.js のような、四則演算の精度向上など 機能補助レベルのライブラリ は利用OK。利用した場合は、ライセンスをREADME.mdに記載
実装ファイルの場所
- 研修用リポジトリでは、基本となる実装は src/calc/Calc.tsx に記載します。
- ボタンなどのサブコンポーネントは別ファイルに切り出して構いません（後述）。
ボタンコンポーネントの分割
- 数字キーや演算子キーは、Calc.tsx とは別ファイルにコンポーネントとして定義します。
- 例：CalcButton.tsx や NumberButton.tsx / OperatorButton.tsx など、読みやすい単位で分割する。
スタイルは styled-components を利用
- スタイルはすべて styled-components で定義します。
- 公式サイト：https://styled-components.com/

ポイント
AIに任せる人もいるので、最初のレビューでは、コードの確認と公式サイトを開かせるといいですね。
また、その場で見た目の変更等、簡単な修正をお願いすると理解度が分かりやすいです。

ブランチについてのルール

リポジトリをクローンしたら、まずブランチを incomplete-calc に切り替え、最新を pull してください。
incomplete-calc から、calc-名前 という形式で個人用ブランチを作成します。
- 例：calc-suzuki、calc-yamada など。
- このブランチが、各自の「develop ブランチ」のイメージになります。
実装を進める際は、calc-名前 ブランチからさらに作業用ブランチを切ってください。
- 例：feature/layout、feature/operation など。
ブランチ構成のイメージ：

incompleate-calc
  └─ calc-名前
      ├─ 作業ブランチ1
      ├─ 作業ブランチ2
      └─ 作業ブランチ3

実際の運用では、

小さめの単位で作業ブランチを切る
目標単位でレビューが通ったら calc-名前 へマージする

といった流れを徹底してもらうことで、Git の基本的なフローにも慣れてもらいます。

ポイント
gitは初心者が多いので、命名と正しくリモートリポジトリにpushできているか要確認！

4. 研修の進め方

環境構築と起動方法の確認が終わったら、基本的には放置スタイルです。

自分で調べてもらう
つまづいたら相談してもらう
目標でレビューする

といった形で、できるだけ 実務に近い形 を意識しました。

未経験者・不安そうな人へのフォロー

プログラミング未経験、もしくはGitやReactに強い不安がある人には、最初に軽く調査タスクを入れました。

「Reactとは何か」を調べてもらう
主要なHook（useState, useEffect など）についても調べ、
結果をMarkdown（.md）でまとめてもらう

簡単なアウトプットを作ってもらうことで、

自分の言葉で整理する練習
説明力・理解度の確認

にもなります。

業務に合わせた応用

直近の業務内容に合わせて、研修内容を少し拡張するのもおすすめです。

例：

仕様・設計書の簡易版を自分で書いてもらう
単体テストコードを追加してもらう
実装内容を発表する説明会を開く

など、「普段の開発プロセス」を小さく経験させる課題 を組み込めます。

5. 目標設定とスケジュール

今回は、次のように小さな目標を段階的に設定しました。

実装目標

見た目をiPhoneの電卓と全く同じにする
- 配色やボタン配置だけでなく、ボタンを押したときのハイライトやホバー時の見た目も再現する。
負の数を含めた整数の二項の四則演算と、割合の計算を実装する
- ゼロ除算などのエラーパターンの扱いも、どのように見せるか考えてもらう。
- ボタンを共通にして、コンポーネント化
三項以上の計算、小数の計算、= を連続入力した際の計算を実装する
- = を連続で押した場合は、直前の演算を繰り返す iPhone 電卓と同等の挙動を目指す。

これらを満たしたうえで、次の「目標一覧」とスケジュールに沿って進めていきます。
電卓は機能が多いので、人によって増減させたり、気づいた内容は追加させたりします。

目標一覧

目標	内容	目安期間
1	見た目をiPhoneの電卓と同じにする（ホバー含む）	1〜5日
2	2項演算に対応する／ボタンを別コンポーネント化	3日
3	3項以上の連続演算に対応する（iPhone標準機能レベル）	5日
4	単体テストを追加する	2日

合計すると 作業ベースで約3週間。
マージンを含めて、1か月（＋予備1週間） くらいの運用を想定しています。
文系の未経験者も含めた想定なので、経験者であれば半分の期間であったり、課題を増やしたりしてもいいです。

注意
目的は実務の方法に慣れて、プログラムできるようになることです。
完成がゴールではないので、コードの理解度や命名規則等の確認が重要です。

6. まとめ

手元に「正解」（スマホの電卓アプリ）があることで、受講者は迷いにくく、教える側も不要な準備工数を削減できます。
また、小さな目標を段階的に設定することで、研修を次のように柔軟に進められます。

割り込みの業務が入っても作業を中断・再開しやすい
受講者のレベルに合わせてゴールを調整できる
実装の進み具合から、理解度やつまずくポイントを把握しやすい

総じて、教える側・受講者ともに負担を最小限にしながら、着実に学習できる研修構成だったと感じています。

以上、部内研修の一例でした。
個人的には、仕様書含めて、完成形をこちらで用意しなくてもいいのが一番楽

次回は、コードレビューで気をつけたポイントや、研修中によくある「つまずき」パターンなどを書いていく予定です。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up