diff --git a/resources/assets/js/user/stats.js b/resources/assets/js/user/stats.js
new file mode 100644
index 0000000..6077499
--- /dev/null
+++ b/resources/assets/js/user/stats.js
@@ -0,0 +1,90 @@
+import CalHeatMap from 'cal-heatmap';
+import Chart from 'chart.js';
+
+function createLineGraph(id, labels, data) {
+    const context = document.getElementById(id).getContext('2d');
+    new Chart(context, {
+        type: 'line',
+        data: {
+            labels: labels,
+            datasets: [{
+                data: data,
+                backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                borderColor: 'rgba(255, 99, 132, 1)',
+                borderWidth: 1
+            }]
+        },
+        options: {
+            legend: {
+                display: false
+            },
+            elements: {
+                line: {
+                    tension: 0
+                }
+            },
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }]
+            }
+        }
+    });
+}
+
+function createBarGraph(id, labels, data) {
+    const context = document.getElementById(id).getContext('2d');
+    new Chart(context, {
+        type: 'bar',
+        data: {
+            labels: labels,
+            datasets: [{
+                data: data,
+                backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                borderColor: 'rgba(255, 99, 132, 1)',
+                borderWidth: 1
+            }]
+        },
+        options: {
+            legend: {
+                display: false
+            },
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }]
+            }
+        }
+    });
+}
+
+// TODO: これはいくらなんでもひどすぎるだろ
+const dailySum = JSON.parse(document.getElementById('graph-daily-sum').textContent);
+const monthlyKey = JSON.parse(document.getElementById('graph-monthly-key').textContent);
+const monthlySum = JSON.parse(document.getElementById('graph-monthly-sum').textContent);
+const yearlyKey = JSON.parse(document.getElementById('graph-yearly-key').textContent);
+const yearlySum = JSON.parse(document.getElementById('graph-yearly-sum').textContent);
+const hourlyKey = JSON.parse(document.getElementById('graph-hourly-key').textContent);
+const hourlySum = JSON.parse(document.getElementById('graph-hourly-sum').textContent);
+const dowSum = JSON.parse(document.getElementById('graph-dow-sum').textContent);
+
+new CalHeatMap().init({
+    itemSelector: '#cal-heatmap',
+    domain: 'month',
+    subDomain: 'day',
+    domainLabelFormat: '%Y/%m',
+    weekStartOnMonday: false,
+    start: new Date().setMonth(new Date().getMonth() - 9),
+    range: 10,
+    data: dailySum,
+    legend: [1, 2, 3, 4]
+});
+
+createLineGraph('monthly-graph', monthlyKey, monthlySum);
+createLineGraph('yearly-graph', yearlyKey, yearlySum);
+createBarGraph('hourly-graph', hourlyKey, hourlySum);
+createBarGraph('dow-graph', ['日', '月', '火', '水', '木', '金', '土'], dowSum);
\ No newline at end of file
diff --git a/resources/views/user/stats.blade.php b/resources/views/user/stats.blade.php
index 31d661e..fce9380 100644
--- a/resources/views/user/stats.blade.php
+++ b/resources/views/user/stats.blade.php
@@ -30,87 +30,13 @@
 @endsection
 
 @push('script')
-<script type="text/javascript" src="//cdn.jsdelivr.net/npm/chart.js@2.7.1/dist/Chart.min.js"></script>
-<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
-<script type="text/javascript" src="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
-<script>
-    var cal = new CalHeatMap();
-    cal.init({
-        itemSelector: '#cal-heatmap',
-        domain: 'month',
-        subDomain: 'day',
-        domainLabelFormat: '%Y/%m',
-        weekStartOnMonday: false,
-        start: new Date({{ \Carbon\Carbon::now()->addMonths(-9)->timestamp * 1000 }}),
-        range: 10,
-        data: @json($dailySum),
-        legend: [1, 2, 3, 4]
-    });
-
-    function createLineGraph(id, labels, data) {
-        var context = document.getElementById(id).getContext('2d');
-        var chart = new Chart(context, {
-            type: 'line',
-            data: {
-                labels: labels,
-                datasets: [{
-                    data: data,
-                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
-                    borderColor: 'rgba(255, 99, 132, 1)',
-                    borderWidth: 1
-                }]
-            },
-            options: {
-                legend: {
-                    display: false
-                },
-                elements: {
-                    line: {
-                        tension: 0
-                    }
-                },
-                scales: {
-                    yAxes: [{
-                        ticks: {
-                            beginAtZero: true
-                        }
-                    }]
-                }
-            }
-        });
-    }
-
-    function createBarGraph(id, labels, data) {
-        var context = document.getElementById(id).getContext('2d');
-        var chart = new Chart(context, {
-            type: 'bar',
-            data: {
-                labels: labels,
-                datasets: [{
-                    data: data,
-                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
-                    borderColor: 'rgba(255, 99, 132, 1)',
-                    borderWidth: 1
-                }]
-            },
-            options: {
-                legend: {
-                    display: false
-                },
-                scales: {
-                    yAxes: [{
-                        ticks: {
-                            beginAtZero: true
-                        }
-                    }]
-                }
-            }
-        });
-    }
-
-    createLineGraph('monthly-graph', @json(array_keys($monthlySum)), @json(array_values($monthlySum)));
-    createLineGraph('yearly-graph', @json(array_keys($yearlySum)), @json(array_values($yearlySum)));
-    createBarGraph('hourly-graph', @json(array_keys($hourlySum)), @json(array_values($hourlySum)));
-    createBarGraph('dow-graph', ['日', '月', '火', '水', '木', '金', '土'], @json($dowSum));
-</script>
+<script id="graph-daily-sum" type="application/javascript">@json($dailySum)</script>
+<script id="graph-monthly-key" type="application/javascript">@json(array_keys($monthlySum))</script>
+<script id="graph-monthly-sum" type="application/javascript">@json(array_values($monthlySum))</script>
+<script id="graph-yearly-key" type="application/javascript">@json(array_keys($yearlySum))</script>
+<script id="graph-yearly-sum" type="application/javascript">@json(array_values($yearlySum))</script>
+<script id="graph-hourly-key" type="application/javascript">@json(array_keys($hourlySum))</script>
+<script id="graph-hourly-sum" type="application/javascript">@json(array_values($hourlySum))</script>
+<script id="graph-dow-sum" type="application/javascript">@json($dowSum)</script>
+<script src="{{ mix('js/user/stats.js') }}"></script>
 @endpush
\ No newline at end of file
diff --git a/webpack.mix.js b/webpack.mix.js
index b02c4a4..b657d5c 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -13,6 +13,7 @@ let mix = require('laravel-mix');
 
 mix.js('resources/assets/js/app.js', 'public/js')
     .js('resources/assets/js/home.js', 'public/js')
+    .js('resources/assets/js/user/stats.js', 'public/js/user')
     .sass('resources/assets/sass/app.scss', 'public/css')
     .autoload({
         'jquery': ['$', 'jQuery', 'window.jQuery']