【React】 #1 計算機アプリを作成

はじめに

現在、Reactを習得するために、23種類のReactアプリ開発に取り組んでいます。
今回はその第一弾として、Reactで電卓アプリを作成しました。

概要

一般的な電卓アプリを想定しています。以下の要件を満たすことを目標にしました。

• 四則演算、負の数、整数、小数点の計算ができること
• 入力中に「=」ボタンを押せないこと
• 仕様やレイアウトをゼロから一つずつ作成すること

作成したアプリのイメージ

アプリ紹介動画

利用技術

• React
• TypeScript
• Vite
• Tailwind

意識したポイント

useStateでデータを管理

Reactの状態管理には useState を使用しており、オペランドの情報を管理しています。

Main.tsx

    const [leftOperand, setLeftOperand] = useState<string>("0");
    const [operator, setOperator] = useState<string | undefined>(undefined);
    const [rightOperand, setRightOperand] = useState<string | undefined>(undefined);
    const [result, setResult] = useState<string | undefined>(undefined);

Buttonコンポーネントの作成

ボタンは繰り返し使用するため、コンポーネントを分割しました。
分割前と比較して、コードがかなりスッキリしました。

CustomButton.tsx

const CustomButton = ({ isNumber, placeholder, onClick, disabled=false }: ButtonProps) => {
  const buttonStyle = isNumber
    ? { bgColor: disabled ? "bg-gray-400" : "bg-gray-300" }
    : { bgColor: disabled ? "bg-gray-400" : "bg-yellow-300" };
  return (
    <button
      className={`p-6 rounded-md text-2xl ${buttonStyle.bgColor} shadow-md w-full ${disabled ? "cursor-not-allowed" : ""}`}
      onClick={() => onClick(placeholder)}
      disabled={disabled}
    >
      {placeholder}
    </button>
  );
};

Main.tsx 一部抜粋

<CustomButton isNumber={false} placeholder="AC" onClick={handleButtonClick} />
<CustomButton isNumber={false} placeholder="±" onClick={handleButtonClick} />
...

改善したいポイント

現状のコードでは、各ボタンに対して責務が分かれていません。
計算処理がすべてイベントハンドラ内に埋め込まれているため、
依存度が高くなってしまっています。
このままだとコードの保守性が低くなってしまうので、
後日コンポーネント分割を行い、リファクタリングする予定です。
その際には、改めて記事としてまとめる予定です。

Main.tsx 一部抜粋

    const handleButtonClick = (value: string) => {
        setResult(undefined);
        switch (value) {
            case "AC":
                ...
            case "+":
            case "-":
            case "*":
            case "/":
            case "%":
                ...

おわりに

コンポーネント分割に関しては、まだ改善の余地があると感じていますが、
State管理やReactコンポーネントの理解はかなり進んだと実感しています。

何より、ゼロからアプリを作り上げる楽しさを体験できて良かったです！
まだまだ始まったばかりですが、今後も継続的に学習を続けていきたいと思います。

Github

GitHubにコードをアップロードしていますので、よかったら確認してみてください。