はじめに
こんにちは！！@Sicut_studyです！
こちらの記事が嬉しいことに多くの方に見ていただきました。
そこでReactが多くの初心者の方に注目されているんだなということを実感させられました。
私の記事では何度も言っている通り
というのが大事になってきます。そこで 「Reactアプリ100本ノック」 というのに挑戦していこうかと思います。徐々に難易度を挙げていってどこまでお題を作りきれるかの腕試しでやっていただければと思います。
今回は簡易的な計算機を作っていきます！そろそろ難しくなってきていますがついてきてください！
前回のお題
Reactアプリ100本ノックルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
- 要件をみたせばデザインなどは自由
05. Calc
問題
簡易的な電卓を作成します
目的
計算機の機能を実装する過程で、条件付きレンダリングや複雑なビジネスロジックの処理に対する理解を深めることができます。
また、 様々な機能を持つ小さなコンポーントを作成し、それらを組み合わせて大きなアプリケーションを構築することで、効果的なコンポーネント設計とコードの再利用性について学習することができます
達成条件
- 四則演算（加算、減算、乗算、除算）が正確に行えること。
- 数字と演算子の入力が可能で、計算結果が表示されること。
- クリアボタンで入力と結果をリセットできること。
- 連続した数字入力など計算ができないときはエラーを表示する
実際に解いてみた
利用技術
- React
- TypeScript
- Vite
- Emotion
解答時間 : 1時間
基本的な流れは普段と変わらなかったが以下の2点を実装するのにすこし苦戦した
- 配列をうまく使って計算を行う(evalは使わない)
- 小数点の計算をどう行っていくか
小数点は今回「.」というボタンでできるようにしたので、「.」と他の演算子の区別をつける必要があったのでそこの実装を工夫してみました
 |
次のお題
おわりに
React100本ノックの記事を地道に上げていこうと思いますので、一緒に挑戦したい方は @Sicut_study をフォローいただけるととてもうれしく思います。
ここまで読んでいただけた方はぜひいいねとストックよろしくお願いします。
少し宣伝します🔥🔥🔥🔥🔥
これからエンジニアになろうとしている人を本気でコーチングして3か月の期間で立派なエンジニアにするようなチャレンジをしてみたいなと考えております。
もし、本気でエンジニアを目指してコーチングを受けてみたいという方がいれば、Twitterに「プログラミング教えてほしいです」みたいなリプライ送っていただけたらなと思います！！
以上です。
今週もプログラミング頑張りましょう！
