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
73
Other Decks in Technology
See All in Technology
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
16k
Wasmの気になる最新情報
askua
0
160
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
150
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
310
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
160
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
0
100
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
470
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.8k
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
570
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
130
Featured
See All Featured
Producing Creativity
orderedlist
PRO
347
40k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Embracing the Ebb and Flow
colly
88
4.9k
Mobile First: as difficult as doing things right
swwweet
225
10k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Optimizing for Happiness
mojombo
379
70k
Balancing Empowerment & Direction
lara
5
690
What's in a price? How to price your products and services
michaelherold
246
12k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Docker and Python
trallard
46
3.6k
Building Adaptive Systems
keathley
44
2.8k
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