概要：なぜ今、Webで「新しい計算機」を作るのか
現代のWebアプリケーション開発において、単なる機能提供に留まらない、優れたユーザー体験（UX）と高いパフォーマンスが求められています。既存の計算機アプリケーションは多々ありますが、それらが抱える課題、例えば、限られた拡張性、古いUI/UX、アクセシビリティへの配慮不足、そしてモダンなWeb技術が提供する可能性を考慮すると、Web上で「新しい計算機」を構築する意義は非常に大きいと言えます。
この新しい計算機は、単に四則演算を行うツール以上のものです。フロントエンドスペシャリストとして、私たちはこれをシングルページアプリケーション（SPA）として設計し、コンポーネント指向のアプローチで開発することで、高い保守性と拡張性を実現します。TypeScriptによる型安全性の確保、モダンな状態管理ライブラリによるロジックの明確化、そしてWeb Workersを利用した計算処理のオフロードは、パフォーマンスの向上に直結します。さらに、レスポンシブデザイン、キーボード操作の最適化、ARIA属性の適切な利用によるアクセシビリティの確保は、あらゆるユーザーにとって使いやすいアプリケーションの基盤となります。最終的には、Progressive Web App (PWA) として展開し、オフライン対応やホームスクリーンへの追加といったネイティブアプリに匹敵する体験を提供することを目指します。本記事では、これらの要素を網羅し、Webにおける「新しい計算機」の設計と実装について深く掘り下げていきます。
詳細解説：モダンWeb技術を駆使した設計と実装
「新しい計算機」の構築は、単なるUIの構築に留まらず、堅牢なアーキテクチャ、効率的な状態管理、そして高度な計算ロジックの実装が求められます。ここでは、それぞれの側面について詳しく解説します。
技術選定とアーキテクチャ設計
まず、フレームワークとしては、コンポーネント指向開発を強力に推進し、豊富なエコシステムを持つReactを選定します。型安全性を確保するためにはTypeScriptが必須であり、開発体験を向上させるためにViteのような高速なビルドツールを活用します。スタイリングにはCSS-in-JSライブラリ（例: Styled Components, Emotion）やユーティリティファーストのTailwind CSSを検討し、コンポーネントごとに独立したスタイルを適用することで、保守性を高めます。
アーキテクチャは、プレゼンテーション層、アプリケーション層、ドメイン層の明確な分離を意識します。
* **プレゼンテーション層:** UIコンポーネント（ボタン、ディスプレイなど）を配置し、ユーザーからの入力を受け付けます。
* **アプリケーション層:** プレゼンテーション層からの入力を処理し、ドメイン層のロジックを呼び出します。状態管理の中心となります。
* **ドメイン層:** 計算ロジックそのものや、履歴管理など、ビジネスロジックの中核を担います。
コンポーネント設計と状態管理
計算機は、ディスプレイ、数字ボタン、演算子ボタン、クリアボタン、イコールボタンなど、明確な役割を持つコンポーネント群で構成されます。これらのコンポーネントは、再利用性、テスト容易性、保守性を考慮して設計します。
状態管理には、ReactのContext APIと`useReducer`フック、またはより大規模なアプリケーション向けにRedux ToolkitやZustandのようなライブラリを検討します。計算機の状態としては、以下のようなものが考えられます。
* `currentInput`: 現在入力されている数値や表示内容。
* `previousValue`: 前の数値（演算子入力時）。
* `operator`: 現在選択されている演算子。
* `history`: 計算履歴の配列。
* `isNewNumber`: 新しい数値を入力中かどうかのフラグ。
これらの状態を管理し、ユーザーの操作に応じて適切に更新することで、計算機としての振る舞いを実現します。
計算ロジックの実装と安全性
計算ロジックは、このアプリケーションの心臓部です。特に重要なのは、`eval()`関数を避けることです。`eval()`は、文字列として渡されたJavaScriptコードを実行するため、悪意のあるコードが注入された場合にセキュリティ上の脆弱性となります。代わりに、入力された数式をトークンに分解し、演算子の優先順位（乗除が加減より優先、括弧の処理など）を考慮しながら計算するパーサーとインタープリタを自前で実装します。
例えば、逆ポーランド記法（RPN）への変換（Shunting-yardアルゴリズム）とRPNスタック計算アルゴリズムは、複雑な数式を安全かつ効率的に処理する強力な手段です。浮動小数点数の精度問題にも留意し、`toFixed()`や`Math.round()`といったメソッドを適切に利用したり、Decimal.jsのようなライブラリを導入したりすることで、正確な計算結果を提供します。
Web Workersを活用することで、複雑な計算処理をメインスレッドから分離し、UIのフリーズを防ぎ、スムーズなユーザー体験を維持できます。これは特に、科学技術計算や統計処理など、計算負荷が高い機能を追加する際に有効です。
UI/UXとアクセシビリティの考慮
* **レスポンシブデザイン:** スマートフォンからデスクトップまで、あらゆるデバイスで適切に表示・操作できるよう、CSS Media QueriesやFlexbox/Gridを活用したレスポンシブデザインを実装します。
* **キーボード操作:** 数字キー、演算子キー、Enterキーなど、キーボードからの入力に完全に対応させます。`keydown`イベントリスナーを適切に設定し、直感的な操作を可能にします。
* **アクセシビリティ (A11y):**
* セマンティックHTMLを適切に使用します（例: `
パフォーマンスとPWA化
* **レンダリング最適化:** React.memoやuseCallback、useMemoフックを適切に利用し、不要な再レンダリングを抑制します。仮想DOMの差分計算を効率化することで、大規模な状態更新が発生した場合でもUIの応答性を保ちます。
* **バンドルサイズ最適化:** Tree Shaking、Code Splitting、Lazy Loadingといった手法を適用し、初期ロード時のバンドルサイズを最小限に抑えます。Viteのようなモダンなビルドツールは、これらを容易に実現します。
* **PWA (Progressive Web App):**
* **Service Worker:** オフラインでの動作を可能にし、キャッシュ戦略を定義して高速なロードを実現します。ネットワーク接続がない状態でも基本的な計算機能が利用できるようにします。
* **Web App Manifest:** アプリケーションのメタデータ（名前、アイコン、表示モードなど）を定義し、ホームスクリーンへの追加やネイティブアプリのような体験を提供します。
* **HTTPS:** PWAの要件であり、通信のセキュリティを確保します。
サンプルコード：ReactとTypeScriptで実装する計算機の中核ロジック
ここでは、ReactとTypeScriptを用いた計算機の中核となるロジックの一部をカスタムフックとして実装する例を示します。これにより、コンポーネントから計算ロジックを分離し、再利用性とテスト容易性を向上させます。
// useCalculator.ts
import { useState, useCallback } from ‘react’;
type Operator = ‘+’ | ‘-‘ | ‘*’ | ‘/’ | null;
export const useCalculator = () => {
const [displayValue, setDisplayValue] = useState
const [firstOperand, setFirstOperand] = useState
const [operator, setOperator] = useState
const [waitingForSecondOperand, setWaitingForSecondOperand] = useState
const [history, setHistory] = useState
const performCalculation = useCallback((op: Operator, prevVal: number, currentVal: number): number => {
switch (op) {
case ‘+’: return prevVal + currentVal;
case ‘-‘: return prevVal – currentVal;
case ‘*’: return prevVal * currentVal;
case ‘/’: return prevVal / currentVal;
default: return currentVal;
}
}, []);
const inputDigit = useCallback((digit: string) => {
if (waitingForSecondOperand) {
setDisplayValue(digit);
setWaitingForSecondOperand(false);
} else {
setDisplayValue(displayValue === ‘0’ ? digit : displayValue + digit);
}
}, [displayValue, waitingForSecondOperand]);
const inputDecimal = useCallback(() => {
if (waitingForSecondOperand) {
setDisplayValue(‘0.’);
setWaitingForSecondOperand(false);
return;
}
if (!displayValue.includes(‘.’)) {
setDisplayValue(displayValue + ‘.’);
}
}, [displayValue, waitingForSecondOperand]);
const clearAll = useCallback(() => {
setDisplayValue(‘0’);
setFirstOperand(null);
setOperator(null);
setWaitingForSecondOperand(false);
setHistory([]);
}, []);
const handleOperator = useCallback((nextOperator: Operator) => {
const inputValue = parseFloat(displayValue);
if (firstOperand === null) {
setFirstOperand(inputValue);
} else if (operator) {
const result = performCalculation(operator, firstOperand, inputValue);
const resultString = result.toString();
setDisplayValue(resultString);
setFirstOperand(result);
setHistory(prev => […prev, `${firstOperand} ${operator} ${inputValue} = ${resultString}`]);
}
setWaitingForSecondOperand(true);
setOperator(nextOperator);
}, [displayValue, firstOperand, operator, performCalculation]);
const handleEquals = useCallback(() => {
if (firstOperand === null || operator === null || waitingForSecondOperand) {
return;
}
const inputValue = parseFloat(displayValue);
const result = performCalculation(operator, firstOperand, inputValue);
const resultString = result.toString();
setDisplayValue(resultString);
setFirstOperand(null); // 計算完了でリセット
setOperator(null);
setWaitingForSecondOperand(true); // 次の入力は新しい数値
setHistory(prev => […prev, `${firstOperand} ${operator} ${inputValue} = ${resultString}`]);
}, [displayValue, firstOperand, operator, waitingForSecondOperand, performCalculation]);
return {
displayValue,
history,
inputDigit,
inputDecimal,
clearAll,
handleOperator,
handleEquals,
};
};
// App.tsx (抜粋)
import React from ‘react’;
import { useCalculator } from ‘./useCalculator’;
import ‘./App.css’; // スタイリング用
const App: React.FC = () => {
const {
displayValue,
history,
inputDigit,
inputDecimal,
clearAll,
handleOperator,
handleEquals,
} = useCalculator();
return (
コメント