Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React-Calculator
Search
Masahiro Watanabe
July 24, 2022
Technology
0
71
React-Calculator
Masahiro Watanabe
July 24, 2022
Tweet
Share
More Decks by Masahiro Watanabe
See All by Masahiro Watanabe
朝日新聞販売店 HP制作
naughty1029
1
66
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile for engineer
hr01
1
34k
本が全く読めなかった過去の自分へ
genshun9
0
940
Claude Code に プロジェクト管理やらせたみた
unson
6
3.2k
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
200
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
390
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
180
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
150
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
190
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.9k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
12k
AWS認定を取る中で感じたこと
siromi
1
180
ゼロからはじめる採用広報
yutadayo
3
760
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Agile that works and the tools we love
rasmusluckow
329
21k
Faster Mobile Websites
deanohume
307
31k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Language of Interfaces
destraynor
158
25k
Making Projects Easy
brettharned
116
6.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Why Our Code Smells
bkeepers
PRO
336
57k
Transcript
個⼈開発
⾃⼰紹介 #masakichi #元通信会社の営業マン #フロントエンド3年 #都内Web制作会社 #1児のパパ
エンジニアとしての活動 React-Wordle https://github.com/Naughty1029/animal-sounds https://github.com/Naughty1029/React-Wordle Animal-Sounds
今回作ったもの React-Calculator https://react-calculator.cocoroworks.net/ https://github.com/Naughty1029/React-Calculator 仕事でよく使う計算ができるサイト
なぜ作ったのか︖
ということで… 1. 構成⽐ 2. 前年⽐の売上 3. ⽬標達成率 4. 伸び率 5.
受講率 6. 定価 7. 原価 8. 利益率 9. 原価率 10. リピート率 種類の計算に対応 10
機能追加
ということで… 計算結果のチャート化 pngでダウンロード
エンジニアとして今回の開発で得られたこと 興味のある技術に触れられる 思考⼒がつく 様々な知⾒に出会える
エンジニアとして今回の開発で得られたこと 興味のある技術に触れられる 思考⼒がつく 様々な知⾒に出会える
Recoil ・Reactのstate管理ライブラリのひとつ ・Meta社が開発中 ・Latest: 0.7.4(2022/6/21)※ ・atomというものがステートの保管を担当 ※2022/7/25時点
Recoil
Recoil
Recharts ・Reactのチャート描画ライブラリ ・React Componentsを提供 ・star 18.6k(18,600) ・画像のエクスポートも対応可能※ ※要プラグイン
エンジニアとして今回の開発で得られたこと 興味のある技術に触れられる 思考⼒がつく 様々な知⾒に出会える
計算式データの管理⽅法 src/utils/CalcFunctions.ts 各計算式のデータはutils以下のCalcFunctions.tsで管理 formulas.jsonと対応している
計算式データの管理⽅法 src/components/Formula/Result.tsx CalcFunction.tsから該当の関数を呼び出して計算
エンジニアとして今回の開発で得られたこと 興味のある技術に触れられる 思考⼒がつく 様々な知⾒に出会える
レンダーフック 画像ダウンロードボタンを共通化したい
レンダーフック コンポーネントのロジック⾃体の分割・再利⽤ https://engineering.linecorp.com/ja/blog/line-securities-frontend-3/
振り返り 興味のある技術に触れられる 思考⼒がつく 様々な知⾒に出会える
The end Thank you