From 79415c898accd5e606abdff822cd83d0c90a764a Mon Sep 17 00:00:00 2001
From: kahca-122 <kacha_kacha_katchan@icloud.com>
Date: Thu, 7 Oct 2021 09:53:33 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20html=E3=81=8B=E3=82=89=E3=81=AE?=
 =?UTF-8?q?=E6=9B=B8=E3=81=8D=E6=8F=9B=E3=81=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4e5ae89..96a410c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,18 @@
 import React from 'react';
 
 const App = () => {
-  return <h1>App</h1>;
+  return (
+    <>
+      <h1>カウンターアプリ</h1>
+      <div>0</div>
+      <button>アップ</button>
+      <button>10アップ</button>
+      <button>ダウン</button>
+      <button>10ダウン</button>
+      <button>リセット</button>
+      <div>0なんですけど</div>
+    </>
+  );
 };
 
 export default App;

From 5bb0469aebc40a4ed175257b367b0918be892245 Mon Sep 17 00:00:00 2001
From: kahca-122 <kacha_kacha_katchan@icloud.com>
Date: Thu, 7 Oct 2021 11:26:56 +0900
Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=E5=8F=AF=E8=AA=AD=E6=80=A7?=
 =?UTF-8?q?=E3=82=92=E3=81=82=E3=81=92=E3=82=8B=E3=81=9F=E3=82=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ボタンを別コンポネーントに切り出した
---
 src/App.tsx               | 20 ++++++++++++--------
 src/components/Button.tsx | 16 ++++++++++++++++
 2 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Button.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 96a410c..0b01258 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,16 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import Button from './components/Button';
 
 const App = () => {
+  const [count, setCount] = useState<number>(0);
+
   return (
     <>
       <h1>カウンターアプリ</h1>
-      <div>0</div>
-      <button>アップ</button>
-      <button>10アップ</button>
-      <button>ダウン</button>
-      <button>10ダウン</button>
-      <button>リセット</button>
-      <div>0なんですけど</div>
+      <div>{count}</div>
+      <Button label="アップ" onClick={() => setCount((prevState) => prevState + 1)} />
+      <Button label="10アップ" onClick={() => setCount((prevState) => prevState + 10)} />
+      <Button label="ダウン" onClick={() => setCount((prevState) => prevState - 1)} />
+      <Button label="10ダウン" onClick={() => setCount((prevState) => prevState - 10)} />
+      <Button label="リセット" onClick={() => setCount(0)} />
+      {count === 0 && <div>0なんですけど</div>}
     </>
   );
 };
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..085950f
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+type Props = {
+  label: string;
+  onClick: () => void;
+};
+
+const Button = ({ label, onClick }: Props) => {
+  return (
+    <button onClick={onClick} style={{ margin: '0 0.4rem', border: '1px solid black' }}>
+      {label}
+    </button>
+  );
+};
+
+export default Button;

From fd530bf89da7ea7b5b520b4d3496f0bcd6c61150 Mon Sep 17 00:00:00 2001
From: kahca-122 <kacha_kacha_katchan@icloud.com>
Date: Thu, 7 Oct 2021 11:38:43 +0900
Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=E3=83=A1=E3=83=B3=E3=83=86?=
 =?UTF-8?q?=E3=83=8A=E3=83=B3=E3=82=B9=E6=80=A7=E3=82=92=E3=81=82=E3=81=92?=
 =?UTF-8?q?=E3=82=8B=E3=81=9F=E3=82=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

関数を抽象化した
---
 src/App.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0b01258..4e14978 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,15 +5,19 @@ import Button from './components/Button';
 const App = () => {
   const [count, setCount] = useState<number>(0);
 
+  const updateCounter = (num: number) => {
+    setCount((prevState) => prevState + num);
+  };
+
   return (
     <>
       <h1>カウンターアプリ</h1>
       <div>{count}</div>
-      <Button label="アップ" onClick={() => setCount((prevState) => prevState + 1)} />
-      <Button label="10アップ" onClick={() => setCount((prevState) => prevState + 10)} />
-      <Button label="ダウン" onClick={() => setCount((prevState) => prevState - 1)} />
-      <Button label="10ダウン" onClick={() => setCount((prevState) => prevState - 10)} />
-      <Button label="リセット" onClick={() => setCount(0)} />
+      <Button label="アップ" onClick={() => updateCounter(1)} />
+      <Button label="10アップ" onClick={() => updateCounter(10)} />
+      <Button label="ダウン" onClick={() => updateCounter(-1)} />
+      <Button label="10ダウン" onClick={() => updateCounter(-10)} />
+      <Button label="リセット" onClick={() => updateCounter(-count)} />
       {count === 0 && <div>0なんですけど</div>}
     </>
   );