React-Calculator

Transcript

1. 個⼈開発
2. ⾃⼰紹介 #masakichi #元通信会社の営業マン #フロントエンド3年 #都内Web制作会社 #1児のパパ
3. エンジニアとしての活動 React-Wordle https://github.com/Naughty1029/animal-sounds https://github.com/Naughty1029/React-Wordle Animal-Sounds
4. 今回作ったもの React-Calculator https://react-calculator.cocoroworks.net/ https://github.com/Naughty1029/React-Calculator 仕事でよく使う計算ができるサイト
5. なぜ作ったのか︖
6. ということで… 1. 構成⽐ 2. 前年⽐の売上 3. ⽬標達成率 4. 伸び率 5. 受講率 6. 定価 7. 原価 8. 利益率 9. 原価率 10. リピート率 種類の計算に対応 10
7. 機能追加
8. ということで… 計算結果のチャート化 pngでダウンロード
9. エンジニアとして今回の開発で得られたこと 興味のある技術に触れられる 思考⼒がつく 様々な知⾒に出会える
10. エンジニアとして今回の開発で得られたこと 興味のある技術に触れられる 思考⼒がつく 様々な知⾒に出会える
11. Recoil ・Reactのstate管理ライブラリのひとつ ・Meta社が開発中 ・Latest: 0.7.4（2022/6/21）※ ・atomというものがステートの保管を担当 ※2022/7/25時点
12. Recoil
13. Recoil
14. Recharts ・Reactのチャート描画ライブラリ ・React Componentsを提供 ・star 18.6k（18,600） ・画像のエクスポートも対応可能※ ※要プラグイン
15. エンジニアとして今回の開発で得られたこと 興味のある技術に触れられる 思考⼒がつく 様々な知⾒に出会える
16. 計算式データの管理⽅法 src/utils/CalcFunctions.ts 各計算式のデータはutils以下のCalcFunctions.tsで管理 formulas.jsonと対応している
17. 計算式データの管理⽅法 src/components/Formula/Result.tsx CalcFunction.tsから該当の関数を呼び出して計算
18. エンジニアとして今回の開発で得られたこと 興味のある技術に触れられる 思考⼒がつく 様々な知⾒に出会える
19. レンダーフック 画像ダウンロードボタンを共通化したい
20. レンダーフック コンポーネントのロジック⾃体の分割・再利⽤ https://engineering.linecorp.com/ja/blog/line-securities-frontend-3/
21. 振り返り 興味のある技術に触れられる 思考⼒がつく 様々な知⾒に出会える
22. The end Thank you