🐭

Next.jsで電卓アプリ作ってみた

2023/01/03に公開

JavaScript

初めてNext.jsを使ってみるということで、電卓アプリを作ってみました。
完成したサイトはVercelでデプロイしています。（完成サイト、ソースコード）
機能はいたって普通の電卓アプリですが、初学者がNext.js、React、JavaScriptを扱う練習にはなるかと思います！

完成サイトイメージ

ソースコードのリンクも貼っているので、この記事では作成の際にざっくり気にかけたことを記述していこうと思います。
以下簡単に環境紹介です。

node -v -> v18.12.1
npm -v -> 8.19.2

package.json

"next": "13.1.1",
"react": "18.2.0",

アプリの概要

前述した通り、普通の電卓アプリです。キーボード入力はできず、数字や演算子を入力して「＝（イコール）」を押すことで、計算結果が出力できるというものです。基本的な整数、少数の計算はできるようになっているかと思います。また、少しだけ式を修正したい時のために、DELETEボタンで一番後ろの文字を削除できるようにしています。

コードの簡単な解説

ボタンをクリックするとその文字が元の文字列に追加されて、出来上がった文字列に対してeval()という文字列を式に変換してくれる便利なJavaScriptのメソッドを使用して計算結果を出しているだけになります。
以下は抜粋ですが、steteを親コンポーネントで定義して、子コンポーネントにstateをpropsとして渡しています。ボタンがクリックされれば、親コンポーネント内にあるstateも変化させるようにし、計算式や答えの欄の値が変化するようにしています。このあたりはもっといいやり方があるかもなぁと思っています。

  // 計算式表示state
  const [display, setDisplay] = useState("");
  // 答え出力state
  const [answer, setAnswer] = useState();

<Switch num={number} display={display} setDisplay={setDisplay} key={number}/>

こだわったポイント

コンポーネントの扱いやCSS Modulesの使い方を気にしながら、なるべくわかりやすく繰り返しの記述を避けられるようにということを考えて、作成しました。優れたエンジニアの方々、このようにリファクタリングした方がいいという意見あれば是非教えてください🙇‍♂️。

コンポーネントのまとめ方

components
- Switch
  - index.jsx
  - equal.jsx
  - delete.jsx
  - clear.jsx
  - Switch.module.css
    上記のようにクリックするボタンをcomponentsのSwitchディレクトリ内にまとめ、１つのcssファイルで管理します。cssはデフォルトでstylesディレクトリも存在しますが、コンポーネントとcssファイルはひとまとめにする方がわかりやすいと思いました。ボタンによってはクリック時の処理が異なるということで、ボタンはファイルの通り複数コンポーネントあるのですが、cssとしては共通の部分が多いため、１つのcssを参照しています。一部色を変えたりしたければ、cssファイルの中に新しいclassの設定を記述し、コンポーネントにもそのclassNameを記述しています。

mapでコンポーネントを展開し重複記述の削減

基本的にはクリックしたら文字列を追加するという機能のボタンが多いです（例：3を押せば3の文字列が追加される）。なので、以下のようにmapを用いてコンポーネントを展開し、それぞれの値をpropsとして渡すことで、１つのコンポーネントでも、数字が異なったりする複数の意味を持つボタンを作っています。

Calculator/index.jsx

//省略
const NUMBERS = ["(",")","%","1","2","3","4","5","6","7","8","9","0","."];
//省略
{NUMBERS.map((number) => {
return (
<Switch num={number} display={display} setDisplay={setDisplay} key={number}/>
);
})}
//省略

その他

サイト上の表示では掛け算は×、割り算は÷の表示ですが、このままの文字列ではevalメソッドを用いてもエラーが出てしまいます。×は*、÷は/でないと計算が正常に動作しないからです。しかし、×や÷の方が世間一般的にはわかりやすいし、世の中の電卓も基本そうなっているかと思ったので、表示は×や÷でも処理は*や/で動作するようにコードを書きました。ちなみにevalメソッドでは、*は2つ繋げて ** にすると累乗計算ができます。ということで、×を2回連続でクリックすると表示が「^」に変わるという些細な心がけもしました。
あとデザインに関してはそこまでこだわってはいないですが、わかりやすく整った感じになるようには心がけました。

最後に

私のような駆け出しエンジニアでも比較的簡単に作れるので電卓アプリを作ってみてよかったです。簡単なアプリでも自分で考えて作るということで、知らなかったエラーに気づくことができたり、成長できるかと思いましたので、今後も自分のアイデアを形にしてアウトプットできるように頑張っていきたいです。