はじめに
ゆかっしゅです。
2021年に事務職からデザイナー/コーダーにジョブチェンジをし、現在はフロントエンドエンジニアにスキルアップするべく、モダンフロントエンドを学習しています。
ReactやTypeScriptの基礎学習は終了したのに、なかなか0から自分だけでアプリを作れないので手を動かすべく「Reactアプリ100本ノック」 に挑戦してみようと思います。
Reactアプリ100本ノックルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
- 要件をみたせばデザインなどは自由
- なるべくChatGPTなどのAIツールに頼らない（自分独自ルール）
05. Calc
問題
簡易的な電卓を作成します
目的
計算機の機能を実装する過程で、条件付きレンダリングや複雑なビジネスロジックの処理に対する理解を深めることができます。
また、 様々な機能を持つ小さなコンポーントを作成し、それらを組み合わせて大きなアプリケーションを構築することで、効果的なコンポーネント設計とコードの再利用性について学習することができます
達成条件
- 四則演算（加算、減算、乗算、除算）が正確に行えること
- 数字と演算子の入力が可能で、計算結果が表示されること
- クリアボタンで入力と結果をリセットできること
- 連続した数字入力など計算ができないときはエラーを表示する
実際に解いてみた
利用技術
React(19.0.0)
TypeScript(5.0)
Next.js(15.3.1)
Tailwindcss(4.0)
jotai(2.12.3)
Vercel
mathjs(14.4.0)
解答時間:2.5時間
文字列とか数字とかの型指定に混乱しましたが、なんとか完成しました。
今回は文字列を計算してくれるmathjsというJavaScriptのライブラリを使用しました。
これが今回とても便利だったため、mathjsを使用せずに作成していたらもっと時間かかってたと思います。
リンク
おわりに
気が付けば三日坊主にはならなかったようでよかったです！
引き続き頑張ります。