ホーム画面のインラインスクリプトをhome.jsに移動

resources/assets/js/home.js

@@ -0,0 +1,38 @@
+import Chart from 'chart.js';
+
+const graph = document.getElementById('global-count-graph');
+const labels = JSON.parse(document.getElementById('global-count-labels').textContent);
+const data = JSON.parse(document.getElementById('global-count-data').textContent);
+
+new Chart(graph.getContext('2d'), {
+    type: 'bar',
+    data: {
+        labels,
+        datasets: [{
+            data,
+            backgroundColor: 'rgba(0, 0, 0, .1)',
+            borderColor: 'rgba(0, 0, 0, .25)',
+            borderWidth: 1
+        }]
+    },
+    options: {
+        maintainAspectRatio: false,
+        legend: {
+            display: false
+        },
+        elements: {
+            line: {}
+        },
+        scales: {
+            xAxes: [{
+                display: false
+            }],
+            yAxes: [{
+                display: false,
+                ticks: {
+                    beginAtZero: true
+                }
+            }]
+        }
+    }
+});

resources/views/home.blade.php

@@ -102,43 +102,7 @@
 @endsection
 
 @push('script')
-    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/chart.js@2.7.1/dist/Chart.min.js"></script>
-    <script>
-        $('.link-card').linkCard({
-            endpoint: '{{ url('/api/checkin/card') }}'
-        });
-
-        new Chart(document.getElementById('global-count-graph').getContext('2d'), {
-            type: 'bar',
-            data: {
-                labels: @json(array_keys($globalEjaculationCounts)),
-                datasets: [{
-                    data: @json(array_values($globalEjaculationCounts)),
-                    backgroundColor: 'rgba(0, 0, 0, .1)',
-                    borderColor: 'rgba(0, 0, 0, .25)',
-                    borderWidth: 1
-                }]
-            },
-            options: {
-                maintainAspectRatio: false,
-                legend: {
-                    display: false
-                },
-                elements: {
-                    line: {}
-                },
-                scales: {
-                    xAxes: [{
-                        display: false
-                    }],
-                    yAxes: [{
-                        display: false,
-                        ticks: {
-                            beginAtZero: true
-                        }
-                    }]
-                }
-            }
-        });
-    </script>
+    <script id="global-count-labels" type="application/json">@json(array_keys($globalEjaculationCounts))</script>
+    <script id="global-count-data" type="application/json">@json(array_values($globalEjaculationCounts))</script>
+    <script src="{{ mix('js/home.js') }}"></script>
 @endpush

webpack.mix.js

@@ -12,6 +12,7 @@ let mix = require('laravel-mix');
  */
 
 mix.js('resources/assets/js/app.js', 'public/js')
+    .js('resources/assets/js/home.js', 'public/js')
     .sass('resources/assets/sass/app.scss', 'public/css')
     .autoload({
         'jquery': ['$', 'jQuery', 'window.jQuery']