Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React-Calculator

 React-Calculator

Masahiro Watanabe

July 24, 2022
Tweet

More Decks by Masahiro Watanabe

Other Decks in Technology

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