{"id":10567,"date":"2021-01-05T17:08:00","date_gmt":"2021-01-05T08:08:00","guid":{"rendered":"http:\/\/www.moonmile.net\/blog\/?p=10567"},"modified":"2021-01-05T17:10:21","modified_gmt":"2021-01-05T08:10:21","slug":"vue-js%e3%81%a8chart-js%e3%81%a7covid19%e3%81%ae%e8%a6%b3%e6%b8%ac%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e4%bd%9c%e3%82%8b","status":"publish","type":"post","link":"https:\/\/www.moonmile.net\/blog\/archives\/10567","title":{"rendered":"Vue.js\u3068Chart.js\u3067Covid19\u306e\u89b3\u6e2c\u30b5\u30a4\u30c8\u3092\u4f5c\u308b"},"content":{"rendered":"<p>Vue.js \u306b\u6163\u308c\u308b\u305f\u3081\u3001\u3068\u3044\u3046\u540d\u76ee\u3067 Covid 19 \u306e\u89b3\u6e2c\u30b5\u30a4\u30c8\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n<p>\u5b9f\u306e\u3068\u3053\u308d\u3001Covid 19 \u306e\u89b3\u6e2c\u30b5\u30a4\u30c8\u306f\u65e2\u306b\u305f\u304f\u3055\u3093\u3042\u308a\u307e\u3059\u3002<\/p>\n<ul>\n<li><a href=\"https:\/\/stopcovid19.metro.tokyo.lg.jp\/\">\u90fd\u5185\u306e\u6700\u65b0\u611f\u67d3\u52d5\u5411 | \u6771\u4eac\u90fd \u65b0\u578b\u30b3\u30ed\u30ca\u30a6\u30a4\u30eb\u30b9\u611f\u67d3\u75c7\u5bfe\u7b56\u30b5\u30a4\u30c8<\/a><\/li>\n<li><a href=\"https:\/\/www3.nhk.or.jp\/news\/special\/coronavirus\/data-widget\/\">\u65b0\u578b\u30b3\u30ed\u30ca\u30a6\u30a4\u30eb\u30b9 \u30c7\u30fc\u30bf\u3067\u898b\u308b\u611f\u67d3\u72b6\u6cc1\u4e00\u89a7\uff5cNHK\u7279\u8a2d\u30b5\u30a4\u30c8<\/a><\/li>\n<li><a href=\"https:\/\/toyokeizai.net\/sp\/visual\/tko\/covid19\/\">\u65b0\u578b\u30b3\u30ed\u30ca\u30a6\u30a4\u30eb\u30b9 \u56fd\u5185\u611f\u67d3\u306e\u72b6\u6cc1<\/a><\/li>\n<\/ul>\n<p>\u305f\u3060\u3001\u30c7\u30fc\u30bf\u96c6\u8a08\u3092\u3057\u3066\u8868\u793a\u3059\u308b\u3060\u3051\u306a\u3089\u3070\u8272\u3005\u3042\u308b\u306e\u3067\u3059\u304c\u3001<\/p>\n<ul>\n<li>\u89b3\u6e2c\u30c7\u30fc\u30bf\u3092\u52d5\u7684\u306b\u6bd4\u8f03\u3059\u308b<\/li>\n<li>\u89b3\u6e2c\u30c7\u30fc\u30bf\u3092\u4f7f\u3063\u3066\u3001\u4f55\u304b\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u3059\u308b<\/li>\n<\/ul>\n<p>\u3053\u3068\u304c\u3067\u304d\u307e\u305b\u3093\u3002\u4ee5\u524d <a href=\"https:\/\/qiita.com\/moonmile\/items\/889f8f0ef414fc1c544f\">\u30d7\u30ed\u30b0\u30e9\u30de\u306b\u3082\u308f\u304b\u308b SEIR \u30e2\u30c7\u30eb\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3 &#8211; Qiita<\/a> \u3068\u3044\u3046\u3053\u3068\u3067\u3001SEIR \u30e2\u30c7\u30eb\u3067 Excel \u3092\u4f7f\u3063\u3066\u4e88\u6e2c\u5024\u3092\u51fa\u3057\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001\u3053\u308c\u306f\u6bce\u65e5\u624b\u4f5c\u696d\u3067\u3084\u3063\u3066\u3044\u307e\u3057\u305f\u3002\u30c7\u30fc\u30bf\u6574\u5f62\u304c\u3061\u3087\u3063\u3068\u9762\u5012\u3060\u3063\u305f\u306e\u3068\u3001\u4e88\u6e2c Rt \u5024\u3092\u6063\u610f\u7684\u306b\uff08\u6570\u65e5\u306e\u5e73\u5747\u306a\u3069\uff09\u3092\u4f7f\u3063\u3066\u3044\u304f\u3064\u304b\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u3057\u3066\u3044\u305f\u306e\u3067\u3059\u3002<\/p>\n<p>\u3067\u3001\u5148\u65e5 NHK \u30b5\u30a4\u30c8\u3067\u4e8c\u6b21\u5229\u7528\u53ef\u80fd\u306a\u30aa\u30fc\u30d7\u30f3\u30c7\u30fc\u30bf\u3068\u3057\u3066\u4f7f\u3048\u308b\u3053\u3068\u304c\u5206\u304b\u3063\u305f\u306e\u3067\u3001\u3053\u308c\u3092\u4f7f\u3063\u3066\u81ea\u52d5\u5316\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n<h2 id=\"csv-%E5%BD%A2%E5%BC%8F%E3%82%92%E5%8A%A0%E5%B7%A5%E3%81%99%E3%82%8B\">CSV \u5f62\u5f0f\u3092\u52a0\u5de5\u3059\u308b<\/h2>\n<p>Vue.js(JavaScript) \u3067 NHK \u306e CSV \u5f62\u5f0f\u306e\u30c7\u30fc\u30bf\u3092\u30d1\u30fc\u30b9\u3057\u3066\u3082\u3088\u3044\u306e\u3067\u3059\u304c\u3001\u65e2\u306b JSON \u5f62\u5f0f\u306b\u306a\u3063\u3066\u3044\u305f\u307b\u3046\u304c\u697d\u306a\u306e\u3067\u3001\u4e2d\u9593\u306e Web API \u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<h3 id=\"azure-function-%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%9E%E3%83%BC%E3%83%88%E3%83%AA%E3%82%AC%E3%83%BC\">Azure Function \u306e\u30bf\u30a4\u30de\u30fc\u30c8\u30ea\u30ac\u30fc<\/h3>\n<p>\u30bf\u30a4\u30de\u30fc\u30c8\u30ea\u30ac\u30fc\u30671\u6642\u9593\u5358\u4f4d\u3067CSV\u5f62\u5f0f\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002<br \/>\nCovid 19 \u306e\u30c7\u30fc\u30bf\u306f1\u65e5\u5358\u4f4d\u3067\u3057\u304b\u66f4\u65b0\u3055\u308c\u306a\u3044\u306e\u3067\u3001\u3082\u3063\u3068\u30b9\u30d1\u30f3\u304c\u9577\u304f\u3066\u3082\u3088\u3044\u306e\u3067\u3059\u304c\u3001\u4f55\u6642\u9803\u516c\u958b\u3055\u308c\u308b\u304b\u5224\u3089\u306a\u3044\u306e\u30671\u6642\u9593\u5358\u4f4d\u3002<\/p>\n<p>\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u6700\u521d\u306b\u66f8\u3044\u305f\u3068\u304d\u306f\u3001\u3044\u3061\u3044\u3061CSV\u5f62\u5f0f\u306e\u30c7\u30fc\u30bf\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001\u7d50\u69cb\u9045\u3044\u306e\u3067\u3001\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066 JSON \u5f62\u5f0f\u306b\u30d1\u30fc\u30b9\u3057\u305f\u3089 BLOB \u306b\u4fdd\u5b58\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre class=\"hljs\"><code>[<span class=\"hljs-meta\">FunctionName(<span class=\"hljs-meta-string\">\"NHKCovidTimer\"<\/span>)<\/span>]\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">static<\/span> <span class=\"hljs-keyword\">async<\/span> Task <span class=\"hljs-title\">RunTimer<\/span>(<span class=\"hljs-params\">[TimerTrigger(<span class=\"hljs-string\">\"0 5 * * * *\"<\/span><\/span>)] TimerInfo myTimer,\n    [<span class=\"hljs-title\">Blob<\/span>(<span class=\"hljs-params\"><span class=\"hljs-string\">\"covid\/japan.json\"<\/span>, FileAccess.Write<\/span>)] Stream jsonfile,\n    ILogger log)<\/span>\n\n{\n    log.LogInformation(<span class=\"hljs-string\">\"called NHKCovidTimer\"<\/span>);\n    <span class=\"hljs-keyword\">var<\/span> url = <span class=\"hljs-string\">\"https:\/\/www3.nhk.or.jp\/n-data\/opendata\/coronavirus\/nhk_news_covid19_prefectures_daily_data.csv\"<\/span>;\n    <span class=\"hljs-keyword\">var<\/span> cl = <span class=\"hljs-keyword\">new<\/span> HttpClient();\n    <span class=\"hljs-comment\">\/\/ 1\u884c\u305a\u3064\u8aad\u307f\u8fbc\u307f JSON \u5f62\u5f0f\u306b\u5909\u63db<\/span>\n    <span class=\"hljs-keyword\">var<\/span> res = <span class=\"hljs-keyword\">await<\/span> cl.GetAsync(url);\n    <span class=\"hljs-keyword\">var<\/span> data = <span class=\"hljs-keyword\">new<\/span> List&lt;Covid&gt;();\n    <span class=\"hljs-keyword\">using<\/span> (<span class=\"hljs-keyword\">var<\/span> st = <span class=\"hljs-keyword\">new<\/span> StreamReader(<span class=\"hljs-keyword\">await<\/span> res.Content.ReadAsStreamAsync()))\n    {\n        <span class=\"hljs-comment\">\/\/ \u30bf\u30a4\u30c8\u30eb\u306f\u8aad\u307f\u98db\u3070\u3057<\/span>\n        st.ReadLine();\n        <span class=\"hljs-keyword\">while<\/span> (<span class=\"hljs-literal\">true<\/span>)\n        {\n            <span class=\"hljs-keyword\">string<\/span> line = st.ReadLine();\n            <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-keyword\">string<\/span>.IsNullOrEmpty(line)) <span class=\"hljs-keyword\">break<\/span>;\n            <span class=\"hljs-keyword\">var<\/span> items = line.Split(<span class=\"hljs-string\">\",\"<\/span>);\n            <span class=\"hljs-keyword\">if<\/span> (items.Length &gt;= <span class=\"hljs-number\">7<\/span>)\n            {\n                <span class=\"hljs-keyword\">var<\/span> it = <span class=\"hljs-keyword\">new<\/span> Covid()\n                {\n                    Date = DateTime.Parse(items[<span class=\"hljs-number\">0<\/span>]),\n                    LocationId = <span class=\"hljs-keyword\">int<\/span>.Parse(items[<span class=\"hljs-number\">1<\/span>]),\n                    Location = items[<span class=\"hljs-number\">2<\/span>],\n                    Cases = <span class=\"hljs-keyword\">int<\/span>.Parse(items[<span class=\"hljs-number\">3<\/span>]),\n                    CasesTotal = <span class=\"hljs-keyword\">int<\/span>.Parse(items[<span class=\"hljs-number\">3<\/span>]),\n                    Deaths = <span class=\"hljs-keyword\">int<\/span>.Parse(items[<span class=\"hljs-number\">3<\/span>]),\n                    DeathsTotal = <span class=\"hljs-keyword\">int<\/span>.Parse(items[<span class=\"hljs-number\">3<\/span>]),\n                };\n                data.Add(it);\n            }\n        }\n        <span class=\"hljs-comment\">\/\/ \u30bd\u30fc\u30c8\u3057\u3066\u304a\u304f<\/span>\n        data = data.OrderBy(t =&gt; t.LocationId).ThenBy(t =&gt; t.Date).ToList();\n        <span class=\"hljs-comment\">\/\/ \u9031\u5e73\u5747\u3092\u8a08\u7b97<\/span>\n        calcCasesAve(data);\n        <span class=\"hljs-comment\">\/\/ \u9031\u5358\u4f4dRt\u5024\u3092\u8a08\u7b97<\/span>\n        calcCasesRt(data);\n        <span class=\"hljs-comment\">\/\/ \u9031\u5358\u4f4dRt\u5e73\u5747\u5024\u3092\u8a08\u7b97<\/span>\n        calcCasesRtAve(data);\n    }\n    <span class=\"hljs-keyword\">var<\/span> json = JsonConvert.SerializeObject(<span class=\"hljs-keyword\">new<\/span> { result = data });\n    <span class=\"hljs-keyword\">var<\/span> writer = <span class=\"hljs-keyword\">new<\/span> StreamWriter(jsonfile);\n    writer.Write(json);\n    writer.Close();\n    <span class=\"hljs-comment\">\/\/ return new OkObjectResult(\"save json \" + DateTime.Now.ToString());<\/span>\n}\n<\/code><\/pre>\n<p>CSV \u5f62\u5f0f\u3092\u30d1\u30fc\u30b9\u3059\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u3042\u3089\u304b\u3058\u3081<\/p>\n<ul>\n<li>\u9031\u5e73\u5747<\/li>\n<li>\u9031\u5358\u4f4d\u306eRt\u5024<\/li>\n<li>\u9031\u5358\u4f4d\u306eRt\u5e73\u5747\u5024<\/li>\n<\/ul>\n<p>\u306a\u3069\u3092\u8a08\u7b97\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n<p>\u4fdd\u5b58\u3059\u308b JSON \u306e\u5f62\u5f0f\u306f Covid \u30af\u30e9\u30b9\u306b\u5b9a\u7fa9\u3057\u3066\u3044\u307e\u3059\u3002\u5927\u6587\u5b57\u3092\u308f\u3056\u308f\u3056\u5c0f\u6587\u5b57\u306b\u5909\u3048\u3066\u3044\u308b\u306e\u306f\u3001Vue.js \u306e\u8aad\u307f\u53d6\u308a\u306b\u5408\u308f\u305b\u305f\u305f\u3081\u3067\u3059\u3002<\/p>\n<pre class=\"hljs\"><code><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Covid<\/span>\n{\n    [<span class=\"hljs-meta\">JsonProperty(<span class=\"hljs-meta-string\">\"date\"<\/span>)<\/span>]\n    <span class=\"hljs-keyword\">public<\/span> DateTime Date { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }\n    [<span class=\"hljs-meta\">JsonProperty(<span class=\"hljs-meta-string\">\"locationId\"<\/span>)<\/span>]\n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">int<\/span> LocationId { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }\n    [<span class=\"hljs-meta\">JsonProperty(<span class=\"hljs-meta-string\">\"location\"<\/span>)<\/span>]\n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">string<\/span> Location { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }\n    [<span class=\"hljs-meta\">JsonProperty(<span class=\"hljs-meta-string\">\"cases\"<\/span>)<\/span>]\n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">int<\/span> Cases { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }\n    [<span class=\"hljs-meta\">JsonProperty(<span class=\"hljs-meta-string\">\"casesTotal\"<\/span>)<\/span>]\n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">int<\/span> CasesTotal { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }\n    [<span class=\"hljs-meta\">JsonProperty(<span class=\"hljs-meta-string\">\"deaths\"<\/span>)<\/span>]\n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">int<\/span> Deaths { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }\n    [<span class=\"hljs-meta\">JsonProperty(<span class=\"hljs-meta-string\">\"deathsTotal\"<\/span>)<\/span>]\n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">int<\/span> DeathsTotal { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }\n\n    [<span class=\"hljs-meta\">JsonProperty(<span class=\"hljs-meta-string\">\"casesAverage\"<\/span>)<\/span>]\n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">float<\/span> CasesAverage { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }   <span class=\"hljs-comment\">\/\/ \u9031\u79fb\u52d5\u5e73\u5747<\/span>\n    [<span class=\"hljs-meta\">JsonProperty(<span class=\"hljs-meta-string\">\"casesRt\"<\/span>)<\/span>]\n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">float<\/span> CasesRt { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }        <span class=\"hljs-comment\">\/\/ \u9031\u5358\u4f4dRt\u5024 = \u7d9a\u304f1\u9031\u9593\u306e\u611f\u67d3\u8005\u6570\u5e73\u5747 \/ \u5f53\u65e5\u611f\u67d3\u8005\u6570  <\/span>\n    [<span class=\"hljs-meta\">JsonProperty(<span class=\"hljs-meta-string\">\"casesRtAverage\"<\/span>)<\/span>]\n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">float<\/span> CasesRtAverage { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }     <span class=\"hljs-comment\">\/\/ Rt\u5024\u306e\u9031\u79fb\u52d5\u5e73\u5747<\/span>\n}\n<\/code><\/pre>\n<h3 id=\"http-%E3%83%88%E3%83%AA%E3%82%AC%E3%83%BC%E3%82%92%E5%AE%9A%E7%BE%A9%E3%81%99%E3%82%8B\">HTTP \u30c8\u30ea\u30ac\u30fc\u3092\u5b9a\u7fa9\u3059\u308b<\/h3>\n<p>Web API \u306f\u975e\u5e38\u306b\u7c21\u5358\u3067\u3001HttpTrigger \u3067 JSON \u30d5\u30a1\u30a4\u30eb\u306e\u4e2d\u5473\u3092\u8fd4\u3059\u3060\u3051\u3067\u3059\u3002\u30c7\u30fc\u30bf\u91cf\u304c 3M \u7a0b\u5ea6\u306b\u306a\u3063\u3066\u5927\u304d\u76ee\u306b\u306a\u3063\u3066\u3057\u307e\u3063\u305f\u306e\u3067\u3001\u5f8c\u3067\u671f\u9593\u3084\u90fd\u9053\u5e9c\u770c\u3067\u7d5e\u308c\u308b\u3088\u3046\u306b\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"hljs\"><code>[<span class=\"hljs-meta\">FunctionName(<span class=\"hljs-meta-string\">\"NHKCovid\"<\/span>)<\/span>]\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">static<\/span> <span class=\"hljs-keyword\">async<\/span> Task&lt;IActionResult&gt; <span class=\"hljs-title\">RunRead<\/span>(<span class=\"hljs-params\">\n    [HttpTrigger(AuthorizationLevel.Anonymous, <span class=\"hljs-string\">\"get\"<\/span>, <span class=\"hljs-string\">\"post\"<\/span>, Route = <span class=\"hljs-literal\">null<\/span><\/span>)] HttpRequest req,\n    [<span class=\"hljs-title\">Blob<\/span>(<span class=\"hljs-params\"><span class=\"hljs-string\">\"covid\/japan.json\"<\/span>, FileAccess.Read<\/span>)] Stream jsonfile,\n    ILogger log)<\/span>\n{\n    log.LogInformation(<span class=\"hljs-string\">\"called NHKCovid\"<\/span>);\n    <span class=\"hljs-keyword\">var<\/span> sr = <span class=\"hljs-keyword\">new<\/span> StreamReader(jsonfile);\n    <span class=\"hljs-keyword\">var<\/span> json = <span class=\"hljs-keyword\">await<\/span> sr.ReadToEndAsync();\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">new<\/span> OkObjectResult(json);\n}\n<\/code><\/pre>\n<h2 id=\"vuejs--chartjs-%E5%81%B4%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89\">Vue.js + Chart.js \u5074\u306e\u30b3\u30fc\u30c9<\/h2>\n<p>\u4f8b\u3048\u3070\u3001\u967d\u6027\u8005\u6570\u306e\u30b0\u30e9\u30d5\u306f\u3001Web API\u306e\u4e2d\u304b\u3089 cases \u306e\u5024\u3092\u7f85\u5217\u3059\u308b\u3060\u3051\u306e\u7c21\u5358\u306a\u3082\u306e\u3067\u3059\u3002<br \/>\n\u90fd\u9053\u5e9c\u770c\u3092\u8907\u6570\u9078\u629e\u3067\u304d\u308b\uff08this.value\u306b\u3042\u308b\uff09\u306e\u3067\u3001\u3053\u308c\u306e\u5206\u3060\u3051 datasets \u3092\u4f5c\u308a\u307e\u3059\u3002Chart.js \u306f datasets \u306e\u4e2d\u306b\u7dda\u30b0\u30e9\u30d5\u306e\u8272\u306a\u3069\u304c\u5165\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u306e\u90e8\u5206\u306f\u4e8c\u91cd\u306b\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u3001\u6700\u4f4e\u9650\u306e\u5b9a\u7fa9\u3057\u304b\u3057\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\n<p>Chart.js \u306f vue-chartjs \u3092\u4f7f\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre class=\"hljs\"><code><span class=\"hljs-comment\">\/**\n * \u611f\u67d3\u8005\u6570\u306e\u30b0\u30e9\u30d5\u3092\u4f5c\u6210\n *\/<\/span>\nmakeCases(res,start_date,end_date,locations) {\n\n    <span class=\"hljs-keyword\">var<\/span> sdate = <span class=\"hljs-built_in\">Date<\/span>.parse(start_date)\n    <span class=\"hljs-keyword\">var<\/span> edate = <span class=\"hljs-built_in\">Date<\/span>.parse(end_date)\n    <span class=\"hljs-keyword\">var<\/span> datasets = []\n    <span class=\"hljs-keyword\">var<\/span> labels = []\n\n    <span class=\"hljs-keyword\">var<\/span> i = <span class=\"hljs-number\">0<\/span>;\n    locations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">var<\/span> data = [];\n    <span class=\"hljs-keyword\">var<\/span> data2 = [];\n    labels = [];\n    res.data.result.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">el<\/span> =&gt;<\/span> {\n        <span class=\"hljs-keyword\">if<\/span> ( el.location == location ) {\n        <span class=\"hljs-keyword\">var<\/span> dt = <span class=\"hljs-built_in\">Date<\/span>.parse( el.date )\n        <span class=\"hljs-keyword\">if<\/span> ( sdate &lt;= dt &amp;&amp; dt &lt;= edate ) {\n            dt = <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>(dt)\n            dt = dt.getFullYear() + <span class=\"hljs-string\">\"\/\"<\/span> + (dt.getMonth()+<span class=\"hljs-number\">1<\/span>) + <span class=\"hljs-string\">\"\/\"<\/span> + dt.getDate() \n            labels.push( dt )\n            data.push( el.cases )\n            data2.push( el.casesAverage )\n        }\n        }\n    });\n    <span class=\"hljs-keyword\">var<\/span> dataset = \n        {\n        <span class=\"hljs-attr\">label<\/span>: location,\n        <span class=\"hljs-attr\">fill<\/span>: <span class=\"hljs-literal\">false<\/span>,\n        <span class=\"hljs-attr\">borderColor<\/span>: i &gt;= <span class=\"hljs-keyword\">this<\/span>.colors.length? <span class=\"hljs-string\">\"rgba(200,200,200,0.5)\"<\/span>: <span class=\"hljs-keyword\">this<\/span>.colors[i].n,\n        <span class=\"hljs-attr\">data<\/span>: data\n        }\n    <span class=\"hljs-keyword\">var<\/span> dataset2 = \n        {\n        <span class=\"hljs-attr\">label<\/span>: location + <span class=\"hljs-string\">\"(\u9031\u5e73\u5747)\"<\/span>,\n        <span class=\"hljs-attr\">fill<\/span>: <span class=\"hljs-literal\">false<\/span>,\n        <span class=\"hljs-attr\">borderColor<\/span>: i &gt;= <span class=\"hljs-keyword\">this<\/span>.colors.length? <span class=\"hljs-string\">\"rgba(100,100,100,0.5)\"<\/span>: <span class=\"hljs-keyword\">this<\/span>.colors[i].ave,\n        <span class=\"hljs-attr\">data<\/span>: data2\n        }\n    datasets.push( dataset )\n    datasets.push( dataset2 )\n    i++;\n    })\n    <span class=\"hljs-keyword\">return<\/span> { labels, datasets };\n},\n<\/code><\/pre>\n<p>\u90fd\u9053\u5e9c\u770c\u3092\u518d\u9078\u629e\u3057\u305f\u3068\u304d\u306b\u30b0\u30e9\u30d5\u3092\u518d\u63cf\u753b\u3055\u305b\u307e\u3059\u3002\u3057\u304b\u3057\u3001Chart.js \u304c\u30c7\u30fc\u30bf\u306e\u66f4\u65b0\u306b\u3088\u308b\u518d\u8868\u793a\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u306a\u3044\u306e\u3067\u3001\u3054\u3063\u305d\u308a\u30c7\u30fc\u30bf\u306e\u4e2d\u5473\u3092\u66f8\u304d\u66ff\u3048\u3066\u66f4\u65b0\u3092\u901a\u77e5\u3059\u308b\u3068\u3044\u3046\u65b9\u5f0f\u3092\u3068\u3063\u3066\u3044\u307e\u3059\u3002\u30af\u30ed\u30fc\u30f3\u306f JSON.parse(JSON.stringify(&#8230;)) \u3067\u4f5c\u308b\u3068\u5b89\u5168\u306b\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"hljs\"><code><span class=\"hljs-keyword\">async<\/span> getData() {\n    <span class=\"hljs-keyword\">var<\/span> url = process.env.VUE_APP_NHK_COVID_API_URL\n    <span class=\"hljs-built_in\">console<\/span>.log( url )\n    <span class=\"hljs-keyword\">var<\/span> res = <span class=\"hljs-keyword\">await<\/span> axios.get(url);\n\n    <span class=\"hljs-keyword\">var<\/span> { labels, datasets } = <span class=\"hljs-keyword\">this<\/span>.makeCases( res, <span class=\"hljs-string\">\"2020-10-01\"<\/span>, <span class=\"hljs-string\">\"2021-12-31\"<\/span>, <span class=\"hljs-keyword\">this<\/span>.value )\n    <span class=\"hljs-keyword\">var<\/span> { labels2, datasets2 } = <span class=\"hljs-keyword\">this<\/span>.makeCasesRt( res, <span class=\"hljs-string\">\"2020-10-01\"<\/span>, <span class=\"hljs-string\">\"2021-12-31\"<\/span>, <span class=\"hljs-keyword\">this<\/span>.value )\n    <span class=\"hljs-keyword\">this<\/span>.datax.labels = labels ;\n    <span class=\"hljs-keyword\">this<\/span>.datax.datasets = datasets ;\n    <span class=\"hljs-keyword\">this<\/span>.datart.labels = labels2 ;\n    <span class=\"hljs-keyword\">this<\/span>.datart.datasets = datasets2 ;\n\n    <span class=\"hljs-keyword\">var<\/span> { labels3, datasets3 } = <span class=\"hljs-keyword\">this<\/span>.makeCasesFuture( res, <span class=\"hljs-string\">\"2020-12-01\"<\/span>, <span class=\"hljs-string\">\"2021-12-31\"<\/span>, <span class=\"hljs-keyword\">this<\/span>.value )\n    <span class=\"hljs-keyword\">this<\/span>.datafu.labels = labels3 ;\n    <span class=\"hljs-keyword\">this<\/span>.datafu.datasets = datasets3 ;\n\n    <span class=\"hljs-keyword\">var<\/span> data = <span class=\"hljs-keyword\">this<\/span>.makeCases2( res, <span class=\"hljs-string\">\"2020-10-01\"<\/span>, <span class=\"hljs-string\">\"2021-12-31\"<\/span>, <span class=\"hljs-keyword\">this<\/span>.value )\n    <span class=\"hljs-keyword\">this<\/span>.datax2.labels = data.labels ;\n    <span class=\"hljs-keyword\">this<\/span>.datax2.datasets = data.datasets ;\n    <span class=\"hljs-comment\">\/\/ \u518d\u63cf\u753b\u306e\u4ee3\u308f\u308a<\/span>\n    <span class=\"hljs-keyword\">this<\/span>.datax = <span class=\"hljs-built_in\">JSON<\/span>.parse(<span class=\"hljs-built_in\">JSON<\/span>.stringify(<span class=\"hljs-keyword\">this<\/span>.datax));\n    <span class=\"hljs-keyword\">this<\/span>.datax2 = <span class=\"hljs-built_in\">JSON<\/span>.parse(<span class=\"hljs-built_in\">JSON<\/span>.stringify(<span class=\"hljs-keyword\">this<\/span>.datax2));\n    <span class=\"hljs-keyword\">this<\/span>.datart = <span class=\"hljs-built_in\">JSON<\/span>.parse(<span class=\"hljs-built_in\">JSON<\/span>.stringify(<span class=\"hljs-keyword\">this<\/span>.datart));\n    <span class=\"hljs-keyword\">this<\/span>.datafu = <span class=\"hljs-built_in\">JSON<\/span>.parse(<span class=\"hljs-built_in\">JSON<\/span>.stringify(<span class=\"hljs-keyword\">this<\/span>.datafu));\n},\n<\/code><\/pre>\n<p>\u672c\u6765\u306a\u3089\u3070\u3001\u3053\u306e this.datax \u307e\u308f\u308a\u3092 Vuex \u306e Store \u306b\u8a70\u3081\u8fbc\u3081\u3070\u3044\u3044\u306e\u3067\u3059\u304c\u3001\u3053\u308c\u3082\u5f8c\u3067\u5909\u3048\u307e\u3057\u3087\u3046\u30024\u3064\u306e\u30b0\u30e9\u30d5\u304c\u4e26\u3093\u3067\u3044\u308b\u3068\u3001\u3055\u3059\u304c\u306b\u9762\u5012\u81ed\u3044\u306e\u3067\u3002<\/p>\n<h2 id=\"%E4%BA%88%E6%B8%AC%E5%80%A4%E3%82%92%E8%A8%88%E7%AE%97%E3%81%99%E3%82%8B\">\u4e88\u6e2c\u5024\u3092\u8a08\u7b97\u3059\u308b<\/h2>\n<p>\u4e88\u6e2c\u306e\u8a08\u7b97\u304c\u8a66\u884c\u932f\u8aa4\u304c\u3084\u308a\u3084\u3059\u3044\u3088\u3046\u306b\u3001JavaScript \u5074\u3067\u8a08\u7b97\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<ul>\n<li>\u611f\u67d3\u671f\u9593\u30927\u65e5\u9593\u3068\u3057\u3066 Rt \u3092\u8a08\u7b97\u3059\u308b<\/li>\n<li>Rt \u5024\u304b\u3089\u9031\u5e73\u5747 Rt \u5024\u3092\u8a08\u7b97\u3059\u308b<\/li>\n<li>\u9031\u5e73\u5747 Rt \u5024\u304b\u3089\u3001\u672a\u6765\u306e\u65e5\u306e\u967d\u6027\u8005\u6570\u3092\u8a08\u7b97\u3059\u308b<\/li>\n<\/ul>\n<p>\u78ba\u5b9a\u3057\u305f\u9031\u5e73\u5747 Rt \u5024\uff08\u7cbe\u5ea6\u4e0a\u30011\u9031\u9593\u524d\u306e\u5024\u304c\u78ba\u5b9a\u5024\u306b\u306a\u308b\uff09\u3092\u4f7f\u3063\u3066\u3001\u524d\u9032\u7684\u306b\u4e88\u6e2c\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"hljs\"><code><span class=\"hljs-comment\">\/**\n * \u6700\u65b0\u306e\u5b9f\u52b9\u518d\u751f\u7523\u6570\u304b\u3089\u4eca\u5f8c1\u304b\u6708\u306e\u611f\u67d3\u8005\u6570\u3092\u4e88\u6e2c\n *\/<\/span>\nmakeCasesFuture(res,start_date,end_date,locations) {\n\n    <span class=\"hljs-keyword\">var<\/span> sdate = <span class=\"hljs-built_in\">Date<\/span>.parse(start_date)\n    <span class=\"hljs-keyword\">var<\/span> edate = <span class=\"hljs-built_in\">Date<\/span>.parse(end_date)\n    <span class=\"hljs-keyword\">var<\/span> datasets = []\n    <span class=\"hljs-keyword\">var<\/span> labels = []\n    <span class=\"hljs-keyword\">var<\/span> i = <span class=\"hljs-number\">0<\/span>;\n\n    <span class=\"hljs-built_in\">console<\/span>.log( edate )\n\n    locations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span> {\n    <span class=\"hljs-comment\">\/\/ \u6700\u7d42\u65e5\u3092\u53d6\u5f97<\/span>\n    <span class=\"hljs-keyword\">var<\/span> lastdate = <span class=\"hljs-literal\">null<\/span> \n    <span class=\"hljs-keyword\">var<\/span> last = <span class=\"hljs-literal\">null<\/span>\n    res.data.result.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">el<\/span> =&gt;<\/span> {\n        <span class=\"hljs-keyword\">if<\/span> ( el.location == location ) {\n        <span class=\"hljs-keyword\">var<\/span> dt = <span class=\"hljs-built_in\">Date<\/span>.parse( el.date )\n        <span class=\"hljs-keyword\">if<\/span> ( el.casesRt &gt; <span class=\"hljs-number\">0.0<\/span> ) {\n            <span class=\"hljs-keyword\">if<\/span> ( lastdate &lt; dt ) {\n            lastdate = dt \n            last = el\n            }\n            <span class=\"hljs-keyword\">if<\/span> ( sdate &lt;= dt ) {\n            dt = <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>(dt)\n            dt = dt.getFullYear() + <span class=\"hljs-string\">\"\/\"<\/span> + (dt.getMonth()+<span class=\"hljs-number\">1<\/span>) + <span class=\"hljs-string\">\"\/\"<\/span> + dt.getDate() \n            <span class=\"hljs-keyword\">if<\/span> ( i == <span class=\"hljs-number\">0<\/span> ) labels.push( dt )\n            }\n        }\n        }\n    })\n    <span class=\"hljs-built_in\">console<\/span>.log( last );\n\n    <span class=\"hljs-keyword\">var<\/span> data = [];\n    <span class=\"hljs-keyword\">var<\/span> data2 = [];\n    <span class=\"hljs-comment\">\/\/ \u5b9f\u6e2c\u5024\u3092\u96c6\u8a08<\/span>\n    res.data.result.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">el<\/span> =&gt;<\/span> {\n        <span class=\"hljs-keyword\">if<\/span> ( el.location == location ) {\n        <span class=\"hljs-keyword\">var<\/span> dt = <span class=\"hljs-built_in\">Date<\/span>.parse( el.date )\n        <span class=\"hljs-keyword\">if<\/span> ( el.casesRt &gt; <span class=\"hljs-number\">0.0<\/span> ) {\n            <span class=\"hljs-keyword\">if<\/span> ( sdate &lt;= dt ) {\n            data.push( el.cases )\n            data2.push( el.casesRtAverage )\n            }\n        }\n        }\n    })\n    <span class=\"hljs-comment\">\/\/ \u4e88\u6e2c\u5024\u3092\u8a08\u7b97<\/span>\n    <span class=\"hljs-keyword\">var<\/span> rt = last.casesRtAverage ;\n    <span class=\"hljs-keyword\">for<\/span> ( <span class=\"hljs-keyword\">var<\/span> j=<span class=\"hljs-number\">1<\/span>; j&lt;=<span class=\"hljs-number\">40<\/span>; j++ ) {\n        <span class=\"hljs-comment\">\/\/ \u904e\u53bb7\u65e5\u9593\u306e cases \u3068 Rt \u304b\u3089\u4e88\u6e2c cases \u3092\u8a08\u7b97\u3059\u308b<\/span>\n        <span class=\"hljs-keyword\">var<\/span> len = data.length ;\n        <span class=\"hljs-keyword\">var<\/span> cases = (\n        data[ len<span class=\"hljs-number\">-7<\/span> ] * data2[ len<span class=\"hljs-number\">-7<\/span> ] + \n        data[ len<span class=\"hljs-number\">-6<\/span> ] * data2[ len<span class=\"hljs-number\">-6<\/span> ] +\n        data[ len<span class=\"hljs-number\">-5<\/span> ] * data2[ len<span class=\"hljs-number\">-5<\/span> ] + \n        data[ len<span class=\"hljs-number\">-4<\/span> ] * data2[ len<span class=\"hljs-number\">-4<\/span> ] + \n        data[ len<span class=\"hljs-number\">-3<\/span> ] * data2[ len<span class=\"hljs-number\">-3<\/span> ] + \n        data[ len<span class=\"hljs-number\">-2<\/span> ] * data2[ len<span class=\"hljs-number\">-2<\/span> ] + \n        data[ len<span class=\"hljs-number\">-1<\/span> ] * data2[ len<span class=\"hljs-number\">-1<\/span> ] ) \/ <span class=\"hljs-number\">7.0<\/span> ;\n        data.push( <span class=\"hljs-built_in\">Math<\/span>.floor(cases))\n        data2.push( rt );\n\n        <span class=\"hljs-keyword\">var<\/span> dt = <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>(<span class=\"hljs-built_in\">Date<\/span>.parse( last.date ))\n        dt.setDate(dt.getDate() + j);\n        dt = dt.getFullYear() + <span class=\"hljs-string\">\"\/\"<\/span> + (dt.getMonth()+<span class=\"hljs-number\">1<\/span>) + <span class=\"hljs-string\">\"\/\"<\/span> + dt.getDate() \n        <span class=\"hljs-keyword\">if<\/span> ( i == <span class=\"hljs-number\">0<\/span> ) labels.push( dt )\n    }\n\n    <span class=\"hljs-keyword\">var<\/span> dataset = \n        {\n        <span class=\"hljs-attr\">label<\/span>: location,\n        <span class=\"hljs-attr\">fill<\/span>: <span class=\"hljs-literal\">false<\/span>,\n        <span class=\"hljs-attr\">borderColor<\/span>: i &gt;= <span class=\"hljs-keyword\">this<\/span>.colors.length? <span class=\"hljs-string\">\"rgba(200,200,200,0.5)\"<\/span>: <span class=\"hljs-keyword\">this<\/span>.colors[i].n,\n        <span class=\"hljs-attr\">data<\/span>: data,\n        <span class=\"hljs-attr\">yAxisID<\/span>: <span class=\"hljs-string\">\"y-axis-1\"<\/span>, \n        }\n    <span class=\"hljs-keyword\">var<\/span> dataset2 = \n        {\n        <span class=\"hljs-attr\">label<\/span>: location + <span class=\"hljs-string\">\"\u9031\u5e73\u5747Rt\"<\/span>,\n        <span class=\"hljs-attr\">fill<\/span>: <span class=\"hljs-literal\">false<\/span>,\n        <span class=\"hljs-attr\">borderColor<\/span>: i &gt;= <span class=\"hljs-keyword\">this<\/span>.colors.length? <span class=\"hljs-string\">\"rgba(100,100,100,0.5)\"<\/span>: <span class=\"hljs-keyword\">this<\/span>.colors[i].ave,\n        <span class=\"hljs-attr\">data<\/span>: data2,\n        <span class=\"hljs-attr\">yAxisID<\/span>: <span class=\"hljs-string\">\"y-axis-2\"<\/span>, \n        }\n    datasets.push( dataset )\n    datasets.push( dataset2 )\n    i++;\n    })\n    <span class=\"hljs-keyword\">return<\/span> { <span class=\"hljs-attr\">labels3<\/span>: labels, <span class=\"hljs-attr\">datasets3<\/span>: datasets };\n},\n<\/code><\/pre>\n<h2 id=\"%E5%AE%9F%E8%A1%8C\">\u5b9f\u884c<\/h2>\n<p><a href=\"https:\/\/moonmile.net\/nhkcovid\/\">https:\/\/moonmile.net\/nhkcovid\/<\/a><\/p>\n<p>\u967d\u6027\u8005\u6570<\/p>\n<p><a href='http:\/\/www.moonmile.net\/blog\/wp-content\/uploads\/2021\/01\/images20210105_01org.jpg'><img src='http:\/\/www.moonmile.net\/blog\/wp-content\/uploads\/2021\/01\/images20210105_01thum.jpg' \/><\/a><\/p>\n<p>\u967d\u6027\u8005\u6570\u4e88\u6e2c<\/p>\n<p><a href='http:\/\/www.moonmile.net\/blog\/wp-content\/uploads\/2021\/01\/images20210105_02org.jpg'><img src='http:\/\/www.moonmile.net\/blog\/wp-content\/uploads\/2021\/01\/images20210105_02thum.jpg' \/><\/a><\/p>\n<h2 id=\"%E3%82%B3%E3%83%BC%E3%83%89\">\u30b3\u30fc\u30c9<\/h2>\n<p><a href=\"https:\/\/github.com\/moonmile\/nhkcovid\">moonmile\/NHKCovid: Covid 19 \u306e\u89b3\u6e2c\u30b5\u30a4\u30c8<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vue.js \u306b\u6163\u308c\u308b\u305f\u3081\u3001\u3068\u3044\u3046\u540d\u76ee\u3067 Covid 19 \u306e\u89b3\u6e2c\u30b5\u30a4\u30c8\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3059\u3002 \u5b9f\u306e\u3068\u3053\u308d\u3001Covid 19 \u306e\u89b3\u6e2c\u30b5\u30a4\u30c8\u306f\u65e2\u306b\u305f\u304f\u3055\u3093\u3042\u308a\u307e\u3059\u3002 \u90fd\u5185\u306e\u6700\u65b0\u611f\u67d3\u52d5\u5411 | \u6771\u4eac\u90fd \u65b0\u578b\u30b3\u30ed\u30ca\u30a6\u30a4\u30eb\u30b9\u611f\u67d3\u75c7\u5bfe\u7b56 &hellip; <a href=\"https:\/\/www.moonmile.net\/blog\/archives\/10567\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-10567","post","type-post","status-publish","format-standard","hentry","category-dev"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/posts\/10567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/comments?post=10567"}],"version-history":[{"count":1,"href":"https:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/posts\/10567\/revisions"}],"predecessor-version":[{"id":10568,"href":"https:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/posts\/10567\/revisions\/10568"}],"wp:attachment":[{"href":"https:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/media?parent=10567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/categories?post=10567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/tags?post=10567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}