diff --git a/components/kaburi.jsx b/components/kaburi.jsx
index a395238..dc7b0cf 100644
--- a/components/kaburi.jsx
+++ b/components/kaburi.jsx
@@ -1,20 +1,16 @@
-import { Component } from "react";
+export default ({ activity }) => {
+  const kaburiActivity = activity.filter(a => a.ch === "kaburi");
+  const count = kaburiActivity.length;
+  const time = kaburiActivity
+    .map(a => a.endTime - a.startTime)
+    .reduce((a, c) => a + c, 0);
 
-export default class extends Component {
-  render() {
-    const activity = this.props.activity.filter(a => a.ch === "kaburi");
-    const count = activity.length;
-    const time = activity
-      .map(a => a.endTime - a.startTime)
-      .reduce((a, c) => a + c, 0);
-
-    return (
-      <dl>
-        <dt>かぶり回数</dt>
-        <dd>{count}</dd>
-        <dt>かぶり時間 (ms)</dt>
-        <dd>{time}</dd>
-      </dl>
-    );
-  }
-}
+  return (
+    <dl>
+      <dt>かぶり回数</dt>
+      <dd>{count}</dd>
+      <dt>かぶり時間 (ms)</dt>
+      <dd>{time}</dd>
+    </dl>
+  );
+};
diff --git a/components/percentage.jsx b/components/percentage.jsx
index d249a5a..038e957 100644
--- a/components/percentage.jsx
+++ b/components/percentage.jsx
@@ -1,29 +1,25 @@
-import { Component } from "react";
+export default ({ activity }) => {
+  const leftActivity = activity
+    .filter(a => a.ch === "l")
+    .map(a => a.endTime - a.startTime)
+    .reduce((a, c) => a + c, 0);
+  const rightActivity = activity
+    .filter(a => a.ch === "r")
+    .map(a => a.endTime - a.startTime)
+    .reduce((a, c) => a + c, 0);
 
-export default class extends Component {
-  render() {
-    const leftActivity = this.props.activity
-      .filter(a => a.ch === "l")
-      .map(a => a.endTime - a.startTime)
-      .reduce((a, c) => a + c, 0);
-    const rightActivity = this.props.activity
-      .filter(a => a.ch === "r")
-      .map(a => a.endTime - a.startTime)
-      .reduce((a, c) => a + c, 0);
-
-    return (
-      <dl>
-        <dt>会話時間 (ms)</dt>
-        <dd>{leftActivity + rightActivity}</dd>
-        <dt>会話の割合</dt>
-        <dd>
-          左{" "}
-          <meter value={leftActivity / (leftActivity + rightActivity)}>
-            {leftActivity / (leftActivity + rightActivity)}
-          </meter>{" "}
-          右
-        </dd>
-      </dl>
-    );
-  }
-}
+  return (
+    <dl>
+      <dt>会話時間 (ms)</dt>
+      <dd>{leftActivity + rightActivity}</dd>
+      <dt>会話の割合</dt>
+      <dd>
+        左{" "}
+        <meter value={leftActivity / (leftActivity + rightActivity)}>
+          {leftActivity / (leftActivity + rightActivity)}
+        </meter>{" "}
+        右
+      </dd>
+    </dl>
+  );
+};