Zenn
🍋

Haskell初心者が電卓アプリを作る (1)

に公開
Haskell
初心者
tech

電卓アプリには以下の要素が含まれており、どんな言語でも初学者の練習に向いているように思います。

  1. 状態の管理、遷移

  2. 計算中の値の保持、更新 (副作用)

  3. 文字列と数値の相互変換 (型の違い)

  4. イベントハンドラ

Haskell においては、特に 2 と 3 は言語的に強い制限がかけられているので、それをどう解決するかを知るのに適していると思います。Haskell 初心者の私が実装した体験と感想を、それ辺りをふまえて書きたいと思います。

本記事では電卓アプリの仕様についてのみ記載するので、練習や研修に使ってください。コードについては次回以降の記事に記載します。

  1. Haskell初心者が電卓アプリを作る (1) ← 今ここ

  2. GUIと計算部分の実装 (Haskell初心者が電卓アプリを作る 2)

  3. Haskellでstateパターンを実装する (Haskell初心者が電卓アプリを作る 3)

  4. hspecでHaskellのテストコードを書く (Haskell初心者が電卓アプリを作る 4)

アプリ概要

卓上電卓を再現したアプリを作成します。画像の赤枠の部分の要素と機能を有するものとします。

UIの要素について

電卓アプリの画面は以下の要素を持ちます。

計算結果の表示

  1. 計算結果表示画面

    • 入力中の数値や計算結果の数値を表示する
    • 最大12桁表示できる

数字の入力

  1. 数字キー

    • 0 ~ 9, 00 の 11 個のキー
    • 数字を入力する機能を持つ

  2. プラスマイナス交換キー

    • +/- キー
    • 表示中の数字の + / - を入れ替える機能を持つ

  3. ドットキー

    • . キー
    • このボタンを押下後に数字を入力すると小数点以下が入力される。

演算の選択

  1. 演算キー

    • +, -, ×, ÷ の 4 つのキー
    • 行う演算を指定する

計算の実行

  1. イコールキー

    • = キー
    • 計算を実行する

クリア

  1. Cキー

    • 現在の入力値をクリアする

  2. ACキー

    • 全てをクリアする

機能について

計算の機能

電卓アプリは概ね以下のような流れで計算を実行します。

  1. 第 1 変数を入力
  2. 演算子 (+, -, ×, ÷) を選択
  3. 第 2 変数を入力
  4. 計算の実行

計算は以下の式で行います。

(第 1 変数) (演算子) (第 2 変数) = 計算結果

状態遷移

電卓アプリは 以下の 4 つの状態を持ち、それぞれの状態において各キーの動作が異なります。

  • 第 1 変数入力状態 (FirstInputStep)

    • 計算する 1 番目の数を入力する状態のこと。

    • 演算子を選択すると演算子選択後状態に遷移する。

  • 演算子選択後状態 (OperationSelectedStep)

    • 演算子を決定した直後の状態のこと。

    • 表示画面には第 1 変数を表示する。

    • 演算子の押し間違いを訂正できる。

    • この状態では第 1 変数の変更をできない。数字を入力した時点で第 2 変数入力状態に遷移する。

  • 第 2 変数入力状態 (SecondInputStep)

    • 計算する 2 番目の数を入力する状態のこと。

    • イコールキーを押下すると、第 1 変数と第 2 変数、演算子をもとに計算し、結果表示状態に遷移する。

  • 結果表示状態 (ResultStep)

    • 計算結果を表示する状態のこと。

    • 演算子を選択することで、計算結果を第 1 変数として引き続き計算を行うことができる。

    • 計算結果を変更することはできない。数字を入力した時点で第 1 変数入力状態に遷移する。

それぞれの状態において、各キーの動作は以下のようになります。

数字キー

  1. 第 1 変数入力状態

    • 表示されている数字の末尾に押下した数字を追加する。

    • ただし表示されている数字が "0" の場合は押下した数字を表示する (00は0と同じ扱い)。

  2. 演算子選択後状態

    • 表示を押下した数字に変更し (00は0と同じ扱い)、第 2 変数入力状態に遷移する

  3. 第 2 変数入力状態

    • 第 1 変数入力状態と同様。

  4. 結果表示状態

    • 表示を押下した数字に変更し (00は0と同じ扱い)、第 1 変数入力状態に遷移する。

プラスマイナスキー

  1. 第 1 変数入力状態

    • 表示されている数字の符号を変える。

    • 表示されている数字が “0” の場合は変更しない。

  2. 演算子選択後状態

    • 表示を “0” に変更し、第 2 変数入力状態に遷移する

  3. 第 2 変数入力状態

    • 第 1 変数入力状態と同様。

  4. 結果表示状態

    • 表示を “0” に変更し、第 2 変数入力状態に遷移する

ドットキー

  1. 第 1 変数入力状態

    • 表示されている数字に小数点がない場合、末尾に小数点を付与する。

    • 表示されている数字に小数点がある場合、何もしない。

  2. 演算子選択後状態

    • 表示を “0.” に変更し、第 2 変数入力状態に遷移する。

  3. 第 2 変数入力状態

    • 第 1 変数入力状態と同様。

  4. 結果表示状態

    • 表示を “0.” に変更し、第 1 変数入力状態に遷移する。

演算キー

  1. 第 1 変数入力状態

    • 押下した演算子と表示されている数字を (第 1 変数として) 保持する。

    • 演算子選択後状態に遷移する。

    • 表示は変更しない。

  2. 演算子選択後状態

    • 保持している演算子を押下された演算子に置き換える。

  3. 第 2 変数入力状態

    • 第 1 変数と表示されている数字を、保持している演算子に従って計算し、計算結果を表示する。

    • 押下した演算子を保持する。

    • 演算子選択後状態に遷移する。

  4. 結果表示状態

    • 押下した演算子と表示されている数字を (第 1 変数として) 保持する。

    • 演算子選択後状態に遷移する。

    • 表示は変更しない。

イコールキー

  1. 第 1 変数入力状態

    • 何もしない

  2. 演算子選択後状態

    • 何もしない

  3. 第 2 変数入力状態

    • 第 1 変数と表示されている数字を、保持している演算子に従って計算し、計算結果を表示する。

    • 結果表示状態に遷移する。

  4. 結果表示状態

    • 何もしない

Cキー

  1. 第 1 変数入力状態

    • 表示を "0" にする。

  2. 演算子選択後状態

    • 保持している値、演算子を全て破棄し、表示を "0" にし、第 1 変数入力状態に遷移する。

  3. 第 2 変数入力状態

    • 表示を "0" にする。

  4. 結果表示状態

    • 表示を "0" にし、第 1 変数入力状態に遷移する。

ACキー

  1. 第 1 変数入力状態

    • 表示を "0" にする。

  2. 演算子選択後状態

    • 保持している値、演算子を全て破棄し、表示を "0" にし、第 1 変数入力状態に遷移する。

  3. 第 2 変数入力状態

    • 保持している値、演算子を全て破棄し、表示を "0" にし、第 1 変数入力状態に遷移する。

  4. 結果表示状態

    • 表示を "0" にし、第 1 変数入力状態に遷移する。

次の記事

GUIと計算部分の実装 (Haskell初心者が電卓アプリを作る 2)

GitHubで編集を提案

Discussion