diff --git a/components/駅名表/Sign.js b/components/駅名表/Sign.js
index e612455..e65f7db 100644
--- a/components/駅名表/Sign.js
+++ b/components/駅名表/Sign.js
@@ -9,6 +9,7 @@ import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
 
 import { StationName } from "./StationName";
 import { StationNameArea } from "./StationNameArea";
+import { StationNumberMaker } from "./StationNumberMaker";
 
 import lineColorList from "../../assets/originData/lineColorList";
 
@@ -246,50 +247,6 @@ const NexPreStationLine = ({ nexStation, preStation }) => {
   );
 };
 
-const StationNumberMaker = (props) => {
-  const getTop = (array, index) => {
-    if (array.length == 1) return 20;
-    else if (index == 0) return 5;
-    else if (index == 1) return 35;
-    else return 20;
-  };
-  return props.currentStation
-    .filter((d) => (d.StationNumber ? true : false))
-    .map((d, index, array) => {
-      const lineID = d.StationNumber.slice(0, 1);
-      const lineName = d.StationNumber.slice(1);
-      return (
-        <View
-          style={{
-            position: "absolute",
-            alignContent: "center",
-            alignItems: "center",
-            top: getTop(array, index) + "%",
-            right: "10%",
-            width: wp("10%"),
-            height: wp("10%"),
-            borderColor: lineColorList[lineID],
-            borderWidth: parseInt("3%"),
-            borderRadius: parseInt("100%"),
-          }}
-          key={array[index].StationNumber}
-        >
-          <View style={{ flex: 1 }} />
-          <Text
-            style={{
-              fontSize: parseInt("13%"),
-              margin: 0,
-              padding: 0,
-              textAlign: "center",
-            }}
-          >
-            {lineID + "\n" + lineName}
-          </Text>
-          <View style={{ flex: 1 }} />
-        </View>
-      );
-    });
-};
 
 
 
diff --git a/components/駅名表/StationNumberMaker.tsx b/components/駅名表/StationNumberMaker.tsx
new file mode 100644
index 0000000..52a6ef3
--- /dev/null
+++ b/components/駅名表/StationNumberMaker.tsx
@@ -0,0 +1,50 @@
+
+import React from "react";
+import { Text, View } from "react-native";
+import { widthPercentageToDP as wp } from "react-native-responsive-screen";
+import lineColorList from "../../assets/originData/lineColorList";
+
+export const StationNumberMaker = (props) => {
+  const getTop = (array:number[], index:number) => {
+    if (array.length == 1) return 20;
+    else if (index == 0) return 5;
+    else if (index == 1) return 35;
+    else return 20;
+  };
+  return props.currentStation
+    .filter((d) => (d.StationNumber ? true : false))
+    .map((d, index, array) => {
+      const lineID = d.StationNumber.slice(0, 1);
+      const lineName = d.StationNumber.slice(1);
+      return (
+        <View
+          style={{
+            position: "absolute",
+            alignContent: "center",
+            alignItems: "center",
+            top: `${getTop(array, index)}%`,
+            right: "10%",
+            width: wp("10%"),
+            height: wp("10%"),
+            borderColor: lineColorList[lineID],
+            borderWidth: parseInt("3%"),
+            borderRadius: parseInt("100%"),
+          }}
+          key={array[index].StationNumber}
+        >
+          <View style={{ flex: 1 }} />
+          <Text
+            style={{
+              fontSize: parseInt("13%"),
+              margin: 0,
+              padding: 0,
+              textAlign: "center",
+            }}
+          >
+            {lineID + "\n" + lineName}
+          </Text>
+          <View style={{ flex: 1 }} />
+        </View>
+      );
+    });
+};
\ No newline at end of file