diff --git a/src/components/BoardView.tsx b/src/components/BoardView.tsx
index aa94233..a00f7a4 100644
--- a/src/components/BoardView.tsx
+++ b/src/components/BoardView.tsx
@@ -6,7 +6,7 @@ import { getColorByBrightness } from "../util/ColorUtil";
 import BoardViewModel from "../viewmodel/BoardViewModel";
 import PitViewModel from "../viewmodel/PitViewModel";
 
-const BallView: FunctionComponent<{ color: string }> = ({ color }) => {
+const StoneView: FunctionComponent<{ color: string }> = ({ color }) => {
   return (
     <div
       style={{
@@ -33,8 +33,8 @@ const HoleView: FunctionComponent<{
   pitViewModel: PitViewModel;
   onClick: () => void;
 }> = ({ pitViewModel, onClick }) => {
-  const balls = [...range(pitViewModel.stoneCount)].map((i, index) => (
-    <BallView key={index} color={pitViewModel.stoneColor} />
+  const stones = [...range(pitViewModel.stoneCount)].map((i, index) => (
+    <StoneView key={index} color={pitViewModel.stoneColor} />
   ));
 
   return (
@@ -54,7 +54,7 @@ const HoleView: FunctionComponent<{
         flexWrap: "wrap",
       }}
     >
-      {balls}
+      {stones}
     </div>
   );
 };
@@ -65,8 +65,8 @@ const StoreView: FunctionComponent<{
   gridColumn: string;
   gridRow: string;
 }> = ({ context, pitViewModel, gridColumn, gridRow }) => {
-  const balls = [...range(pitViewModel.stoneCount)].map((i, index) => (
-    <BallView key={index} color={pitViewModel.stoneColor} />
+  const stones = [...range(pitViewModel.stoneCount)].map((i, index) => (
+    <StoneView key={index} color={pitViewModel.stoneColor} />
   ));
   const textColor = getColorByBrightness(
     pitViewModel.pitColor,
@@ -89,7 +89,7 @@ const StoreView: FunctionComponent<{
         position: "relative",
       }}
     >
-      {balls}
+      {stones}
       <span
         style={{
           position: "absolute",
@@ -100,7 +100,7 @@ const StoreView: FunctionComponent<{
           color: textColor,
         }}
       >
-        {balls.length}
+        {stones.length}
       </span>
     </div>
   );