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

React-Calculator

Masahiro Watanabe
July 24, 2022
Technology
0
11

 React-Calculator

Masahiro Watanabe

July 24, 2022
Tweet

More Decks by Masahiro Watanabe

See All by Masahiro Watanabe
朝日新聞販売店 HP制作
naughty1029
1
24

Other Decks in Technology

See All in Technology
教えない新人研修 - 新人研修 is social change. - #xpjug
takaking22
0
520
All About Regular Expressions
jadeallenx
1
110
Learn How to PowerShell Like a Pro
guyrleech
0
120
大切なことは全部スプラトゥーンが教えてくれた
junki
1
130
C言語を知らない人がびっくりしそうなC言語の特徴
sat
PRO
0
100
consideration-of-log-compression-by-timesacledb
syamauchi
0
280
Instant Payments: moving money at (almost) light speed
_aitor
0
170
Design for Failure with Startup
track3jyo
PRO
4
110
Using Change Data Capture for Stack Modernization
kamorisan
0
1.6k
PHPバージョンアップのための依存ライブラリとの付き合い方 / phpcon2022
blue_goheimochi
1
880
自然言語可視化ライブラリ 「nlplot」のご紹介
takapy
3
1k
【Oracle Cloud ウェビナー】一目瞭然！Microsoft Azureから使える、新しいOracle DatabaseのPaaSサービスを使ってみよう！(2022年9月21日)
oracle4engineer
PRO
0
120

Featured

See All Featured
What's in a price? How to price your products and services
michaelherold
230
9.5k
Typedesign – Prime Four
hannesfritz
34
1.4k
Building Flexible Design Systems
yeseniaperezcruz
311
34k
Building a Scalable Design System with Sketch
lauravandoore
450
30k
Testing 201, or: Great Expectations
jmmastey
23
5.5k
The Invisible Side of Design
smashingmag
291
48k
Six Lessons from altMBA
skipperchong
15
1.5k
How to Ace a Technical Interview
jacobian
268
21k
Faster Mobile Websites
deanohume
294
29k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.4k
Statistics for Hackers
jakevdp
782
210k
The Art of Programming - Codeland 2020
erikaheidi
34
11k

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