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
72
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
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業!FinOpsで始めるAWSコスト最適化の第一歩
sh_fk2
2
140
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
560
ABEMAの本番環境負荷試験への挑戦
mk2taiga
4
310
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
190
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
130
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
260
Operating Operator
shhnjk
1
620
CDK Vibe Coding Fes
tomoki10
0
220
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
130
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
180
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
300
AWS認定を取る中で感じたこと
siromi
1
210
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Faster Mobile Websites
deanohume
307
31k
Code Review Best Practice
trishagee
69
19k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Agile that works and the tools we love
rasmusluckow
329
21k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Designing Experiences People Love
moore
142
24k
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