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
77
React-Calculator
Masahiro Watanabe
July 24, 2022
Tweet
Share
More Decks by Masahiro Watanabe
See All by Masahiro Watanabe
朝日新聞販売店 HP制作
naughty1029
1
72
Other Decks in Technology
See All in Technology
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
270
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
370
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
200
許しとアジャイル
jnuank
1
140
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
78k
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
140
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
230
Where will it converge?
ibknadedeji
0
200
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
370
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
170
社内お問い合わせBotの仕組みと学び
nish01
1
540
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.2k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Agile that works and the tools we love
rasmusluckow
331
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Done Done
chrislema
185
16k
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