Tweet
Tweet

Slide 1

Slide 1 text

個⼈開発

Slide 2

Slide 2 text

⾃⼰紹介 #masakichi #元通信会社の営業マン #フロントエンド3年 #都内Web制作会社 #1児のパパ

Slide 3

Slide 3 text

エンジニアとしての活動 React-Wordle https://github.com/Naughty1029/animal-sounds https://github.com/Naughty1029/React-Wordle Animal-Sounds

Slide 4

Slide 4 text

今回作ったもの React-Calculator https://react-calculator.cocoroworks.net/ https://github.com/Naughty1029/React-Calculator 仕事でよく使う計算ができるサイト

Slide 5

Slide 5 text

なぜ作ったのか︖

Slide 6

Slide 6 text

ということで… 1. 構成⽐ 2. 前年⽐の売上 3. ⽬標達成率 4. 伸び率 5. 受講率 6. 定価 7. 原価 8. 利益率 9. 原価率 10. リピート率 種類の計算に対応 10

Slide 7

Slide 7 text

機能追加

Slide 8

Slide 8 text

ということで… 計算結果のチャート化 pngでダウンロード

Slide 9

Slide 9 text

エンジニアとして今回の開発で得られたこと 興味のある技術に触れられる 思考⼒がつく 様々な知⾒に出会える

Slide 10

Slide 10 text

エンジニアとして今回の開発で得られたこと 興味のある技術に触れられる 思考⼒がつく 様々な知⾒に出会える

Slide 11

Slide 11 text

Recoil ・Reactのstate管理ライブラリのひとつ ・Meta社が開発中 ・Latest: 0.7.4（2022/6/21）※ ・atomというものがステートの保管を担当 ※2022/7/25時点

Slide 12

Slide 12 text

Recoil

Slide 13

Slide 13 text

Recoil

Slide 14

Slide 14 text

Recharts ・Reactのチャート描画ライブラリ ・React Componentsを提供 ・star 18.6k（18,600） ・画像のエクスポートも対応可能※ ※要プラグイン

Slide 15

Slide 15 text

エンジニアとして今回の開発で得られたこと 興味のある技術に触れられる 思考⼒がつく 様々な知⾒に出会える

Slide 16

Slide 16 text

計算式データの管理⽅法 src/utils/CalcFunctions.ts 各計算式のデータはutils以下のCalcFunctions.tsで管理 formulas.jsonと対応している

Slide 17

Slide 17 text

計算式データの管理⽅法 src/components/Formula/Result.tsx CalcFunction.tsから該当の関数を呼び出して計算

Slide 18

Slide 18 text

エンジニアとして今回の開発で得られたこと 興味のある技術に触れられる 思考⼒がつく 様々な知⾒に出会える

Slide 19

Slide 19 text

レンダーフック 画像ダウンロードボタンを共通化したい

Slide 20

Slide 20 text

レンダーフック コンポーネントのロジック⾃体の分割・再利⽤ https://engineering.linecorp.com/ja/blog/line-securities-frontend-3/

Slide 21

Slide 21 text

振り返り 興味のある技術に触れられる 思考⼒がつく 様々な知⾒に出会える

Slide 22

Slide 22 text

The end Thank you