{"id":3063,"date":"2020-05-02T08:55:52","date_gmt":"2020-05-01T23:55:52","guid":{"rendered":"https:\/\/naoya-ono.com\/blog\/?p=3063"},"modified":"2020-05-02T08:55:52","modified_gmt":"2020-05-01T23:55:52","slug":"vue-clock","status":"publish","type":"post","link":"https:\/\/naoya-ono.com\/blog\/vue-clock\/","title":{"rendered":"Vue.js\u3092\u4f7f\u3063\u3066\u30c7\u30b8\u30bf\u30eb\u6642\u8a08\u3092\u4f5c\u308b\u65b9\u6cd5\u3092\u89e3\u8aac"},"content":{"rendered":"<p>\u3053\u306e\u30da\u30fc\u30b8\u3067\u306fJavaScript\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u30fc\u300cVue.js\u300d\u3092\u4f7f\u3063\u3066\u30c7\u30b8\u30bf\u30eb\u6642\u8a08\u306e\u4f5c\u308a\u65b9\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n<p>Vue.js\u306e\u52c9\u5f37\u4e2d\u306e\u4eba\u306f\u305c\u3072\u30c1\u30e3\u30ec\u30f3\u30b8\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div class=\"memo alert\">\n<div class=\"memo_ttl dfont\"> \u6ce8\u610f<\/div>\n<p>\u4eca\u56de\u306f\u521d\u5fc3\u8005\u5411\u3051\u306e\u8a18\u4e8b\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u4f7f\u3044\u307e\u305b\u3093\u3002<\/p>\n<\/div>\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">\u76ee\u6b21<\/p><ul class=\"toc_list\"><li><a href=\"#i\">\u4eca\u56de\u4f5c\u308b\u3082\u306e<\/a><\/li><li><a href=\"#i-2\">\u307e\u305a\u306f\u3001\u753b\u9762\u3092\u4f5c\u6210\u3057\u3088\u3046<\/a><\/li><li><a href=\"#JS\">JS\u5074\u306e\u51e6\u7406\u3092\u8003\u3048\u3088\u3046<\/a><\/li><li><a href=\"#i-3\">\u753b\u9762\u306b\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u6642\u9593\u30fb\u65e5\u4ed8\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u7528\u610f\u3057\u3088\u3046<\/a><\/li><li><a href=\"#i-4\">\u73fe\u5728\u306e\u65e5\u4ed8\u3068\u6642\u523b\u3092\u53d6\u5f97\u3059\u308b\u95a2\u6570\u3092\u4f5c\u308d\u3046<\/a><\/li><li><a href=\"#i-5\">\u753b\u9762\u3067\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u3001\u53d6\u5f97\u3057\u305f\u5024\u3092\u6574\u5f62\u3057\u3088\u3046<\/a><ul><li><a href=\"#1\">1.\u300c\u6642\uff1a\u5206\uff1a\u79d2\u300d\u306e\u5f62\u306b\u6574\u5f62\u3059\u308b<\/a><\/li><li><a href=\"#2\">2.\u300c\u301c\u5e74\u301c\u6708\u301c\u65e5 \uff08\u66dc\u65e5\uff09\u300d\u306e\u5f62\u306b\u6574\u5f62\u3059\u308b<\/a><\/li><\/ul><\/li><li><a href=\"#i-6\">\u65e5\u4ed8\u3068\u6642\u523b\u3092\u753b\u9762\u3067\u8868\u793a\u3057\u3088\u3046<\/a><\/li><li><a href=\"#i-7\">\uff11\u6841\u306e\u5834\u5408\u300c\uff10\u300d\u3092\u5148\u982d\u306b\u8ffd\u52a0\u3057\u3088\u3046\uff08\u5fdc\u7528\uff09<\/a><\/li><li><a href=\"#Vue\">Vue\u306e\u5b66\u7fd2\u306b\u304a\u3059\u3059\u3081\u306e\u66f8\u7c4d<\/a><\/li><\/ul><\/div>\n<h2 class=\"hh hh5 pastel-bc\" id=\"i-0\"><span id=\"i\">\u4eca\u56de\u4f5c\u308b\u3082\u306e<\/span><\/h2>\n<p>\u4eca\u56de\u4f5c\u308b\u306e\u306f\u4e0b\u306e\u5199\u771f\u306e\u3088\u3046\u306b\u3001\u73fe\u5728\u306e\u65e5\u4ed8\u3068\u6642\u9593\u304c\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u8868\u793a\u3055\u308c\u308b\u30d7\u30ed\u30b0\u30e9\u30e0\u3067\u3059\u3002<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-05-01-12.01.10.png\" alt=\"\" width=\"435\" height=\"200\" class=\"alignnone wp-image-3064 \" srcset=\"https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-05-01-12.01.10.png 952w, https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-05-01-12.01.10-300x138.png 300w, https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-05-01-12.01.10-768x353.png 768w, https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-05-01-12.01.10-940x432.png 940w\" sizes=\"(max-width: 435px) 100vw, 435px\"><\/p>\n<p>\u5b8c\u6210\u54c1\u306f\u3053\u3061\u3089\u306b\u7f6e\u3044\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/naoya-ono.com\/js\/clock\" class=\"btn raised blue-bc strong\">JS\u6642\u8a08<\/a><\/p>\n<p><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-4166043434922569\" data-ad-slot=\"7750996733\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h2 class=\"hh hh5 pastel-bc\" id=\"i-1\"><span id=\"i-2\">\u307e\u305a\u306f\u3001\u753b\u9762\u3092\u4f5c\u6210\u3057\u3088\u3046<\/span><\/h2>\n<p>\u753b\u9762\u304c\u306a\u3044\u3053\u3068\u306b\u306f\u59cb\u307e\u3089\u306a\u3044\u306e\u3067\u3001\u307e\u305a\u306f\u65e5\u4ed8\u3068\u6642\u523b\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u753b\u9762\u3092\u4f5c\u308a\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u4eca\u56de\u3001\u30af\u30e9\u30b9\u540d\u306f\u7701\u7565\u3059\u308b\u306e\u3067\u3001\u3054\u81ea\u8eab\u3067\u3044\u3044\u611f\u3058\u306b\u4f5c\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"ja\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"&gt;\n  &lt;link rel=\"stylesheet\" href=\"dist\/css\/app.css\"&gt;\n  &lt;title&gt;Vue\u30e2\u30fc\u30c0\u30eb &lt;\/title&gt;\n&lt;\/head&gt;\n  &lt;body&gt;\n  &lt;div id=\"app\"&gt;\n    &lt;div&gt;\n      &lt;h2&gt;JS\u30c7\u30b8\u30bf\u30eb\u6642\u8a08&lt;\/h2&gt;\n      &lt;div&gt;\n        &lt;p&gt;(\u3053\u3053\u306b\u65e5\u4ed8\u3092\u8868\u793a)&lt;\/p&gt;\n        &lt;p&gt;(\u3053\u3053\u306b\u6642\u9593\u3092\u8868\u793a)&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n\n  &lt;script src=\"https:\/\/jp.vuejs.org\/js\/vue.js\"&gt;&lt;\/script&gt;\n  &lt;script src=\"dist\/js\/main.js\"&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<\/div>\n<p>HTML\u306f\u4ee5\u4e0a\u3067\u3059\u3002\u300c\uff08\u3053\u3053\u306b\u65e5\u4ed8\u3092\u8868\u793a\uff09\u300d\u3068\u300c\uff08\u3053\u3053\u306b\u6642\u9593\u3092\u8868\u793a\uff09\u300d\u306e\u6240\u306b\u3001Vue\u5074\u3067\u53d6\u5f97\u3057\u305f\u65e5\u4ed8\u3068\u73fe\u5728\u306e\u6642\u523b\u3092\u8868\u793a\u3057\u307e\u3059\u3002<br \/>\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-4166043434922569\" data-ad-slot=\"7750996733\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h2 class=\"hh hh5 pastel-bc\" id=\"i-2\"><span id=\"JS\"><span id=\"i-3\">JS\u5074\u306e\u51e6\u7406\u3092\u8003\u3048\u3088\u3046<\/span><\/span><\/h2>\n<p>\u3055\u3066\u3001\u3053\u3053\u304b\u3089JS\u5074\u306e\u51e6\u7406\u3092\u66f8\u3044\u3066\u3044\u304f\u308f\u3051\u3067\u3059\u304c\u3001\u307e\u305a\u306f\u30c7\u30b8\u30bf\u30eb\u6642\u8a08\u3092\u5b9f\u88c5\u3059\u308b\u305f\u3081\u306b\u306f\u3069\u3093\u306a\u30ed\u30b8\u30c3\u30af\u304c\u5fc5\u8981\u306a\u306e\u304b\u3092\u8003\u3048\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u8272\u3005\u3084\u308a\u65b9\u306f\u3042\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u4eca\u56de\u306f\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<div class=\"sng-box box2\">\n<div class=\"ol-circle li-accentbdr acc-bc-before\">\n<ol>\n<li>\u73fe\u5728\u306e\u65e5\u4ed8\u3001\u6642\u523b\u3092\u53d6\u5f97\u3059\u308b\u3002<\/li>\n<li>1\u79d2\u7d4c\u3063\u305f\u3089\u3001\u518d\u5ea6\u73fe\u5728\u306e\u65e5\u4ed8\u3001\u6642\u523b\u3092\u53d6\u5f97\u3057\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u6642\u523b\u3001\u65e5\u4ed8\u3092\u66f4\u65b0\u3059\u308b\u3002<\/li>\n<li>\uff12\u3092\u5ef6\u3005\u3068\u7e70\u308a\u8fd4\u3059\u3002<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<p>JavaScript\u5074\u306b\u306f\u65e2\u306b\u73fe\u5728\u306e\u65e5\u4ed8\u3084\u6642\u523b\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306e\u30e1\u30bd\u30c3\u30c9\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u308c\u3092\uff11\u79d2\u3054\u3068\u306b\u3001\u7e70\u308a\u8fd4\u3057\u4f7f\u3048\u3070\u7c21\u5358\u306b\u3067\u304d\u305d\u3046\u3067\u3059\u306d\u3002<\/p>\n<h2 class=\"hh hh5 pastel-bc\" id=\"i-3\"><span id=\"i-3\"><span id=\"i-3\">\u753b\u9762\u306b\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u6642\u9593\u30fb\u65e5\u4ed8\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u7528\u610f\u3057\u3088\u3046<\/span><\/span><\/h2>\n<p>\u3067\u306f\u3001\u65e9\u901fVue\u5074\u3067\u51e6\u7406\u3092\u4f5c\u3063\u3066\u884c\u304d\u307e\u3059\u3002<\/p>\n<p>\u307e\u305a\u306f\u6642\u9593\u30fb\u65e5\u4ed8\u3092\u683c\u7d0d\u3059\u308b\u305f\u3081\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u7528\u610f\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const app = new Vue({\n\u3000\u3000el: '#app',\n\u3000\u3000data: {\n\u3000\u3000\u3000\u3000date: '',\n\u3000\u3000\u3000\u3000time: ''\n   }\n})<\/code><\/pre>\n<\/div>\n<p>\u3053\u308c\u3067\u6e96\u5099OK\u3067\u3059\u3002<\/p>\n<p>HTML\u5074\u3082\u6b21\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;h2&gt;JS\u30c7\u30b8\u30bf\u30eb\u6642\u8a08&lt;\/h2&gt;\n  &lt;div&gt;\n    &lt;p&gt;{{date}}&lt;\/p&gt;\n    &lt;p&gt;{{time}}&lt;\/p&gt;\n  &lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<p>\u3053\u308c\u3067Vue\u306edate\u3068time\u306e\u5024\u304cHTML\u5074\u306b\u53cd\u6620\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<h2 class=\"hh hh5 pastel-bc\" id=\"i-4\"><span id=\"i-4\"><span id=\"i-3\">\u73fe\u5728\u306e\u65e5\u4ed8\u3068\u6642\u523b\u3092\u53d6\u5f97\u3059\u308b\u95a2\u6570\u3092\u4f5c\u308d\u3046<\/span><\/span><\/h2>\n<p>\u3067\u306f\u3001\u73fe\u5728\u306e\u65e5\u4ed8\u3068\u6642\u523b\u3092\u53d6\u5f97\u3059\u308b\u95a2\u6570\u3092\u300cupdateTime\u300d\u3068\u3044\u3046\u540d\u524d\u3067\u4f5c\u3063\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>JS\u30d5\u30a1\u30a4\u30eb\u306f\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const app = new Vue({\n\u3000\u3000el: '#app',\n\u3000\u3000data: {\n\u3000\u3000\u3000\u3000date: '',\n\u3000\u3000\u3000\u3000time: ''\n   },\n  methods: { \n    updateTime: function() { \n       \/\/\u73fe\u5728\u306e\u65e5\u4ed8\u30fb\u6642\u523b\u3092\u53d6\u5f97 \n       let current_date = new Date()\n    }\n  }\n})<\/code><\/pre>\n<\/div>\n<p>new Date();\u3092\u4f7f\u3046\u3053\u3068\u3067\u3001\u7c21\u5358\u306b\u53d6\u5f97\u3067\u304d\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/p>\n<p>\u3057\u304b\u3057\u3001\u30b3\u30f3\u30bd\u30fc\u30eb\u3067\u8a66\u3057\u306b\u6253\u3063\u3066\u3082\u3089\u3048\u308b\u3068\u308f\u304b\u308a\u307e\u3059\u304c\u7d50\u679c\u306f\u6b21\u306e\u3088\u3046\u306b\u300c<strong>\u66dc\u65e5 \u6708 \u65e5 \u5e74 \u6642\u5206\u79d2<\/strong>\u300d\u3068\u8868\u793a\u3055\u308c\u308b\u306e\u3067\u3001\u3053\u306e\u307e\u307e\u3067\u306f\u4f7f\u3048\u307e\u305b\u3093\u3002<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-05-01-19.02.05.png\" alt=\"\" width=\"852\" height=\"88\" class=\"wp-image-3070 size-full aligncenter\" srcset=\"https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-05-01-19.02.05.png 852w, https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-05-01-19.02.05-300x31.png 300w, https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-05-01-19.02.05-768x79.png 768w\" sizes=\"(max-width: 852px) 100vw, 852px\"><\/p>\n<p>\u306a\u306e\u3067\u3001\u753b\u9762\u3067\u3044\u3044\u611f\u3058\u306b\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u3001\u6574\u5f62\u3057\u3066\u3044\u304f\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<h2 class=\"hh hh5 pastel-bc\" id=\"i-5\"><span id=\"i-5\"><span id=\"i-3\">\u753b\u9762\u3067\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u3001\u53d6\u5f97\u3057\u305f\u5024\u3092\u6574\u5f62\u3057\u3088\u3046<\/span><\/span><\/h2>\n<h3 id=\"i-6\"><span id=\"1\">1.\u300c\u6642\uff1a\u5206\uff1a\u79d2\u300d\u306e\u5f62\u306b\u6574\u5f62\u3059\u308b<\/span><\/h3>\n<p>\u307e\u305a\u306f\u300cnew Date()\u300d\u306e\u5024\u304b\u3089\u6642\u9593\u3001\u5206\u3001\u79d2\u3092\u53d6\u308a\u51fa\u3057\u3066\u300c17:20:30\u300d\u306e\u3088\u3046\u306b\u300c\u6642\uff1a\u5206\uff1a\u79d2\u300d\u306e\u5f62\u306b\u6574\u5f62\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<div class=\"sng-box box23\">\n<p>\u306a\u3093\u3060\u304b\u96e3\u3057\u305d\u3046\u30fb\u30fb\u30fb<\/p>\n<\/div>\n<p>\u3068\u601d\u3063\u305f\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001JS\u5074\u3067\u305d\u308c\u305e\u308c\u306e\u5024\u3092\u53d6\u5f97\u3067\u304d\u308b\u30e1\u30bd\u30c3\u30c9\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<table style=\"border-collapse: collapse; width: 100%; height: 117px;\">\n<tbody>\n<tr style=\"height: 39px;\">\n<td style=\"width: 33.3333%; height: 39px;\"><span>getHours<\/span><span>()<\/span><\/td>\n<td style=\"width: 33.3333%; height: 39px;\">\n<div>\n<div>\u6642\u9593\u3092\u53d6\u5f97\u3059\u308b\u30e1\u30bd\u30c3\u30c9<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr style=\"height: 39px;\">\n<td style=\"width: 33.3333%; height: 39px;\">\n<div>\n<div><span>getMinutes<\/span><span>()<\/span><\/div>\n<\/div>\n<\/td>\n<td style=\"width: 33.3333%; height: 39px;\">\u5206\u3092\u53d6\u5f97\u3059\u308b\u30e1\u30bd\u30c3\u30c9<\/td>\n<\/tr>\n<tr style=\"height: 39px;\">\n<td style=\"width: 33.3333%; height: 39px;\">\n<div>\n<div><span>getSeconds<\/span><span>()<\/span><\/div>\n<\/div>\n<\/td>\n<td style=\"width: 33.3333%; height: 39px;\">\u79d2\u3092\u53d6\u5f97\u3059\u308b\u30e1\u30bd\u30c3\u30c9<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u4f7f\u3044\u65b9\u306f\u3001\u5148\u307b\u3069\u53d6\u5f97\u3057\u305f\u73fe\u5728\u65e5\u4ed8\u30fb\u6642\u523b\u300ccurrent_date\u300d\u306b\u5bfe\u3057\u3066\u300ccurrent_date.getHours()\u300d\u3068\u3084\u308c\u3070\u300c\u6642\u9593\u300d\u304c\u3001\u300ccurrent_date.Minutes()\u300d\u3068\u3084\u308c\u3070\u300c\u5206\u300d\u304c\u53d6\u308c\u307e\u3059\u3002<\/p>\n<p>\u306a\u306e\u3067\u3001\u305d\u308c\u305e\u308c\u306e\u5024\u3092\u300c\uff1a\u300d\u3067\u7e4b\u3044\u3067\u3042\u3052\u3066\u3001\u305d\u308c\u3092data\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u300ctime\u300d\u306b\u4ee3\u5165\u3057\u3066\u6319\u3052\u308b\u3068\u3001\u753b\u9762\u306b\u73fe\u5728\u6642\u523b\u3092\u8868\u793a\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u306d\u3002<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>methods: { \n\u3000\u3000updateTime: function() { \n\u3000\u3000\u3000\u3000\/\/\u73fe\u5728\u306e\u65e5\u4ed8\u30fb\u6642\u523b\u3092\u53d6\u5f97 \n\u3000\u3000\u3000\u3000let current_date = new Date()\n\n    \/\/\u300c\u6642\uff1a\u5206\uff1a\u79d2\u300d\u306b\u6574\u5f62\u3059\u308b\n    this.time = currentdate.getHours() + ':' + currentdate.getMinutes() + ':' + currentdate.getSeconds()\n\u3000\u3000}\n}<\/code><\/pre>\n<\/div>\n<h3 id=\"i-7\"><span id=\"2\">2.\u300c\u301c\u5e74\u301c\u6708\u301c\u65e5 \uff08\u66dc\u65e5\uff09\u300d\u306e\u5f62\u306b\u6574\u5f62\u3059\u308b<\/span><\/h3>\n<p>\u7d9a\u3044\u3066\u3001\u5e74\u6708\u65e5\u66dc\u65e5\u3067\u3059\u304c\u3001\u3053\u3061\u3089\u3082JS\u3067\u3042\u3089\u304b\u3058\u3081\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3046\u3053\u3068\u3067\u5bb9\u6613\u306b\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002<\/p>\n<table style=\"border-collapse: collapse; width: 100%; height: 117px;\">\n<tbody>\n<tr style=\"height: 39px;\">\n<td style=\"width: 33.3333%; height: 39px;\">\n<div>\n<div><span>getFullYear<\/span><span style=\"font-family: inherit; font-size: inherit;\">()<\/span><\/div>\n<\/div>\n<\/td>\n<td style=\"width: 33.3333%; height: 39px;\">\n<div>\n<div>\u5e74\u3092\u53d6\u5f97\u3059\u308b\u30e1\u30bd\u30c3\u30c9<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr style=\"height: 39px;\">\n<td style=\"width: 33.3333%; height: 39px;\">\n<div>\n<div><span>getMonth<\/span><span style=\"font-family: inherit; font-size: inherit;\">()<\/span><\/div>\n<\/div>\n<\/td>\n<td style=\"width: 33.3333%; height: 39px;\">\u6708\u3092\u53d6\u5f97\u3059\u308b\u30e1\u30bd\u30c3\u30c9<\/td>\n<\/tr>\n<tr style=\"height: 39px;\">\n<td style=\"width: 33.3333%; height: 39px;\">\n<div>\n<div><span>getDate()<\/span><\/div>\n<\/div>\n<\/td>\n<td style=\"width: 33.3333%; height: 39px;\">\u65e5\u3092\u53d6\u5f97\u3059\u308b\u30e1\u30bd\u30c3\u30c9<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 33.3333%;\"><span>getDay()<\/span><\/td>\n<td style=\"width: 33.3333%;\">\u66dc\u65e5\u3092\u53d6\u5f97\u3059\u308b\u30e1\u30bd\u30c3\u30c9<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u5b9f\u969b\u306b\u51e6\u7406\u3092\u66f8\u304f\u3068\u6b21\u306e\u3088\u3046\u306b\u66f8\u3051\u307e\u3059\u3002<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>methods: { \n\u3000\u3000updateTime: function() { \n    \/\/\u73fe\u5728\u306e\u65e5\u4ed8\u30fb\u6642\u523b\u3092\u53d6\u5f97 \n    let current_date = new Date()\n\n    \/\/\u300c\u6642\uff1a\u5206\uff1a\u79d2\u300d\u306b\u6574\u5f62\u3059\u308b\n    this.time = currentdate.getHours() + ':' + currentdate.getMinutes() + ':' + currentdate.getSeconds()\n\u3000\u3000\n    \/\/ \u300c\u301c\u5e74\u301c\u6708\u301c\u65e5 \uff08\u66dc\u65e5\uff09\u300d\u306b\u6574\u5f62\u3059\u308b \n    this.date = currentdate.getFullYear() + '\u5e74' +\u3000currentdate.getMonth() + '\u6708' + currentdate.getDate() + '\u65e5' + currentdate.getDay()\n  }\n}<\/code><\/pre>\n<\/div>\n<p>\u305f\u3060\u3057\u3001\u3053\u308c\u3060\u3068\u6b63\u3057\u3044\u7d50\u679c\u304c\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u3002<\/p>\n<p>\u5b9f\u969b\u306b\u753b\u9762\u3067\u78ba\u8a8d\u3057\u3066\u3082\u3089\u3048\u308c\u3070\u3001\u308f\u304b\u308b\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u300c\u6708\u300d\u3068\u300c\u66dc\u65e5\u300d\u306e\u8868\u793a\u304c\u5909\u3067\u3059\u3002<\/p>\n<p><span class=\"labeltext accent-bc\" style=\"font-size: 14pt;\"><strong>getMonth()<\/strong><\/span><\/p>\n<p>\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u306f\u7d50\u679c\u30920\u301c11\u3067\u8fd4\u3059\u306e\u3067\u3001\u305d\u306e\u6708\u3092\u53d6\u5f97\u3057\u305f\u3044\u5834\u5408\u306f\u3001\u5fc5\u305a\u300c+1\u300d\u3057\u3066\u3042\u3052\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u306a\u306e\u3067\u3001\u300c(currentdate.getMonth() + 1)\u300d\u3068\u66f8\u304f\u306e\u304c\u6b63\u89e3\u3067\u3059\u3002<\/p>\n<p><span class=\"labeltext accent-bc\" style=\"font-size: 14pt;\"><strong>getDay()<\/strong><\/span><\/p>\n<p>\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u306f\u66dc\u65e5\u3092\u756a\u53f7\u3067\u8fd4\u3059\u306e\u3067\u3001\u8868\u793a\u3059\u308b\u969b\u306f\u5909\u63db\u3057\u3066\u3042\u3052\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u5bfe\u5fdc\u8868\u306f\u6b21\u306e\u901a\u308a<\/p>\n<table style=\"border-collapse: collapse; width: 100%; height: 312px;\">\n<tbody>\n<tr style=\"background-color: #1b435d; height: 39px;\">\n<td style=\"width: 50%; height: 39px;\"><span style=\"color: #ffffff;\">getDay()\u306e\u7d50\u679c<\/span><\/td>\n<td style=\"width: 50%; height: 39px;\"><span style=\"color: #ffffff;\">\u66dc\u65e5<\/span><\/td>\n<\/tr>\n<tr style=\"height: 39px;\">\n<td style=\"width: 50%; height: 39px;\">0<\/td>\n<td style=\"width: 50%; height: 39px;\">\u65e5\u66dc\u65e5<\/td>\n<\/tr>\n<tr style=\"height: 39px;\">\n<td style=\"width: 50%; height: 39px;\">1<\/td>\n<td style=\"width: 50%; height: 39px;\">\u6708\u66dc\u65e5<\/td>\n<\/tr>\n<tr style=\"height: 39px;\">\n<td style=\"width: 50%; height: 39px;\">2<\/td>\n<td style=\"width: 50%; height: 39px;\">\u706b\u66dc\u65e5<\/td>\n<\/tr>\n<tr style=\"height: 39px;\">\n<td style=\"width: 50%; height: 39px;\">3<\/td>\n<td style=\"width: 50%; height: 39px;\">\u6c34\u66dc\u65e5<\/td>\n<\/tr>\n<tr style=\"height: 39px;\">\n<td style=\"width: 50%; height: 39px;\">4<\/td>\n<td style=\"width: 50%; height: 39px;\">\u6728\u66dc\u65e5<\/td>\n<\/tr>\n<tr style=\"height: 39px;\">\n<td style=\"width: 50%; height: 39px;\">5<\/td>\n<td style=\"width: 50%; height: 39px;\">\u91d1\u66dc\u65e5<\/td>\n<\/tr>\n<tr style=\"height: 39px;\">\n<td style=\"width: 50%; height: 39px;\">6<\/td>\n<td style=\"width: 50%; height: 39px;\">\u571f\u66dc\u65e5<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u3069\u3046\u3084\u3063\u3066\u5909\u63db\u3059\u308b\u304b\u3067\u3059\u304c\u3001\u4eca\u56de\u306fdata\u30aa\u30d7\u30b7\u30e7\u30f3\u306b\u66dc\u65e5\u3092\u8868\u3059\u30d7\u30ed\u30d1\u30c6\u30a3\u300cweek :[\u2018\uff08\u65e5\uff09\u2019, \u2018\uff08\u6708\uff09\u2019, \u2018\uff08\u706b\uff09\u2019, \u2018\uff08\u6c34\uff09\u2019, \u2018\uff08\u6728\uff09\u2019, \u2018\uff08\u91d1\uff09\u2019, \u2018\uff08\u571f\uff09\u2019]\u300d\u3092\u7528\u610f\u3057\u3066\u304a\u3044\u3066\u3001getDay()\u306e\u7d50\u679c\u304b\u3089\u3001\u8a72\u5f53\u3059\u308b\u66dc\u65e5\u3092\u53d6\u5f97\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>JS\u30d5\u30a1\u30a4\u30eb\u3092\u66f4\u65b0\u3059\u308b\u3068\u6b21\u306e\u3088\u3046\u306b\u66f8\u3051\u307e\u3059\u3002<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const app = new Vue({\n\u3000\u3000el: '#app',\n\u3000\u3000data: {\n\u3000\u3000\u3000\u3000date: '',\n\u3000\u3000\u3000\u3000time: '',\n\u3000\u3000\u3000\u3000week: ['\uff08\u65e5\uff09', '\uff08\u6708\uff09', '\uff08\u706b\uff09', '\uff08\u6c34\uff09', '\uff08\u6728\uff09',  '\uff08\u91d1\uff09', '\uff08\u571f\uff09']  \/\/\u8ffd\u52a0\n\u3000\u3000},\n  methods: { \n    updateTime: function() { \n\n\u3000\u3000\u3000\u3000\u3000\u3000\/\/\u73fe\u5728\u306e\u65e5\u4ed8\u30fb\u6642\u523b\u3092\u53d6\u5f97 \n\u3000\u3000\u3000\u3000\u3000\u3000let current_date = new Date()\n\n\u3000\u3000\u3000\u3000\u3000\u3000\/\/\u300c\u6642\uff1a\u5206\uff1a\u79d2\u300d\u306b\u6574\u5f62\u3059\u308b\n\u3000\u3000\u3000\u3000\u3000\u3000this.time = currentdate.getHours() + ':' + currentdate.getMinutes() + ':' + currentdate.getSeconds()\n\u3000\u3000\n\u3000\u3000\u3000\u3000\u3000\u3000\/\/ \u300c\u301c\u5e74\u301c\u6708\u301c\u65e5 \uff08\u66dc\u65e5\uff09\u300d\u306b\u6574\u5f62\u3059\u308b \n\u3000\u3000\u3000\u3000\u3000\u3000this.date = currentdate.getFullYear() + '\u5e74' +\u3000currentdate.getMonth() + '\u6708' + currentdate.getDate() + '\u65e5' + currentdate.getDay()\u3000\n    }\n  }\n})<\/code><\/pre>\n<\/div>\n<h2 class=\"hh hh5 pastel-bc\" id=\"i-8\"><span id=\"i-6\"><span id=\"i-3\">\u65e5\u4ed8\u3068\u6642\u523b\u3092\u753b\u9762\u3067\u8868\u793a\u3057\u3088\u3046<\/span><\/span><\/h2>\n<p class=\"p1\">\u3053\u308c\u3067\u3001\u65e5\u4ed8\u3001\u6642\u523b\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306e\u51e6\u7406\u304c\u5b8c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\n<p class=\"p1\">\u3057\u304b\u3057\u3001\u4eca\u306f\u95a2\u6570\u3092\u4f5c\u3063\u305f\u3060\u3051\u306a\u306e\u3067\u3001\u3053\u308c\u3092\u6bce\u79d2\u5b9f\u65bd\u3057\u3066\u6642\u9593\u3092\u66f4\u65b0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p class=\"p1\">\u305d\u308c\u3092\u884c\u3046\u305f\u3081\u306b\u306f <span class=\"keiko_yellow\"><strong>setInterval <\/strong><\/span>\u3092\u4f7f\u3044\u307e\u3059\u3002\u66f8\u304d\u65b9\u306f\u3001<span class=\"keiko_yellow\"><strong>setInterval(\u95a2\u6570\u540d, \u51e6\u7406\u9593\u9694\uff08\u30df\u30ea\u79d2\uff09)<\/strong><\/span>\u3067\u3059\u3002<\/p>\n<p class=\"p1\">\u306a\u306e\u3067\u3001\u4eca\u56de\u306e\u5834\u5408\u306f <span class=\"keiko_yellow\"><strong>setInterval(this.updateTime, 1000) <\/strong><\/span>\u3068\u66f8\u3051\u3070\u3001\uff11\u79d2\u3054\u3068\u306bupdateTime\u51e6\u7406\u304c\u8d70\u308a\u307e\u3059\u3002<\/p>\n<p>\u3053\u308c\u3092mounted\u306e\u4e2d\u306b\u66f8\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const app = new Vue({\n\u3000\u3000el: '#app',\n\u3000\u3000data: {\n\u3000\u3000\u3000\u3000date: '',\n\u3000\u3000\u3000\u3000time: '',\n\u3000\u3000\u3000\u3000week: ['\uff08\u65e5\uff09', '\uff08\u6708\uff09', '\uff08\u706b\uff09', '\uff08\u6c34\uff09', '\uff08\u6728\uff09',  '\uff08\u91d1\uff09', '\uff08\u571f\uff09'] \n\u3000\u3000},\n\u3000\u3000mounted: function()  {\n\u3000\u3000\u3000\u3000let timerID = setInterval(this.updateTime, 1000); \n\n\u3000\u3000}, \n\u3000\u3000methods: { \n    updateTime: function() { \n\n      \/\/\u73fe\u5728\u306e\u65e5\u4ed8\u30fb\u6642\u523b\u3092\u53d6\u5f97\n      let current_date = new Date()\n\u3000\u3000\u3000\u3000\n      \/\/\u300c\u6642\uff1a\u5206\uff1a\u79d2\u300d\u306b\u6574\u5f62\u3059\u308b\n      this.time = currentdate.getHours() + ':' + currentdate.getMinutes() + ':' + currentdate.getSeconds()\n\u3000\u3000\n      \/\/ \u300c\u301c\u5e74\u301c\u6708\u301c\u65e5 \uff08\u66dc\u65e5\uff09\u300d\u306b\u6574\u5f62\u3059\u308b \n      this.date = currentdate.getFullYear() + '\u5e74' +\u3000currentdate.getMonth() + '\u6708' + currentdate.getDate() + '\u65e5' + currentdate.getDay()\u3000\n    }\n  }\n})<\/code><\/pre>\n<\/div>\n<p class=\"p1\">\u3053\u308c\u3067\u3001\u6bce\u79d2\u65e5\u4ed8\u30fb\u6642\u9593\u304c\u53d6\u5f97\u3055\u308c\u3001\u753b\u9762\u306b\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-4166043434922569\" data-ad-slot=\"7750996733\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h2 class=\"hh hh5 pastel-bc\" id=\"i-9\"><span id=\"i-7\"><span id=\"i-3\">\uff11\u6841\u306e\u5834\u5408<\/span>\u300c\uff10\u300d\u3092\u5148\u982d\u306b\u8ffd\u52a0\u3057\u3088\u3046\uff08\u5fdc\u7528\uff09<\/span><\/h2>\n<p>\u4ee5\u4e0a\u3067\u3001\u30c7\u30b8\u30bf\u30eb\u6642\u8a08\u306f\u5b8c\u6210\u3067\u3059\u304c\u3001<\/p>\n<p class=\"p2\">\u65e5\u4ed8\u3084\u6642\u9593\u304c\u4e00\u6841\u3001\u4f8b\u3048\u3070\uff15\u6708\u3067\u3042\u308c\u3070\u300c\uff15\u6708\u300d\u3068\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n<p class=\"p2\">\u4eca\u5ea6\u306f\u3053\u308c\u3092\u300c\uff15\u6708\u300d\u3067\u306f\u306a\u304f\u300c\uff10\uff15\u6708\u300d\u3068\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u5909\u66f4\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p class=\"p2\">\u3084\u308a\u65b9\u306f\u3001\u8272\u3005\u3042\u308b\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u4eca\u56de\u306f\u6b21\u306e\u3088\u3046\u306a\u30ed\u30b8\u30c3\u30af\u3067\u7d44\u307f\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/zeropadding-1024x682.jpg\" alt=\"\" width=\"880\" height=\"586\" class=\"alignnone wp-image-3079 size-large\" srcset=\"https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/zeropadding-1024x682.jpg 1024w, https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/zeropadding-300x200.jpg 300w, https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/zeropadding-768x512.jpg 768w, https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/zeropadding-940x626.jpg 940w, https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/zeropadding.jpg 1280w\" sizes=\"(max-width: 880px) 100vw, 880px\"><\/p>\n<p>\u3053\u3046\u3059\u308b\u3053\u3068\u3067\u3001\u6708\u304c\uff12\u6841\u3082\u3001\u4f8b\u3048\u3070\uff11\uff12\u6708\u306a\u3089<\/p>\n<p>\u300c\uff11\uff12\u300d\u2192\u300c\uff10\uff10\uff11\uff12\u300d\u2192\u300c\uff11\uff12\u300d\u3068\u306a\u308a\u5f71\u97ff\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n<p>\u3067\u306f\u3001\u3053\u306e\u51e6\u7406\u3092\u884c\u3046\u95a2\u6570\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u30bc\u30ed\u3092\u57cb\u3081\u308b\u51e6\u7406\u306a\u306e\u3067\u300czeroPadding\u300d\u3068\u8a00\u3046\u540d\u524d\u306b\u3057\u307e\u3059\u3002<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>zeroPadding: function(num, len) {\n\u3000 let zero = '';\n  \n \/\/0\u306e\u6587\u5b57\u5217\u3092\u4f5c\u6210\n  for(var i = 0; i &lt; len; i++) {\n    zero += '0';\n  }\n\n  \/\/ zero\u306e\u6587\u5b57\u5217\u3068\u3001\u6570\u5b57\u3092\u7d50\u5408\u3057\u3001\u5f8c\u308d\uff12\u6587\u5b57\u3092\u8fd4\u3059\n  return (zero + num).slice(-len);\n}<\/code><\/pre>\n<\/div>\n<p>\u6700\u5f8c\u306b\u3001\u3053\u308c\u3092updateTime\u5185\u3067\u547c\u3073\u51fa\u3059\u3088\u3046\u306b\u5909\u66f4\u3059\u308b\u3068\u6b21\u306e\u3088\u3046\u306b\u66f8\u3051\u307e\u3059\u3002<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const app = new Vue({\n\u3000\u3000el: '#app',\n\u3000\u3000data: {\n\u3000\u3000\u3000\u3000date: '',\n\u3000\u3000\u3000\u3000time: '',\n\u3000\u3000\u3000\u3000week: ['\uff08\u65e5\uff09', '\uff08\u6708\uff09', '\uff08\u706b\uff09', '\uff08\u6c34\uff09', '\uff08\u6728\uff09',  '\uff08\u91d1\uff09', '\uff08\u571f\uff09'] \n\u3000\u3000},\n\u3000\u3000mounted: function()  {\n\u3000\u3000\u3000\u3000let timerID = setInterval(this.updateTime, 1000); \n\n\u3000\u3000}, \n\u3000\u3000methods: { \n    updateTime: function() { \n\n      \/\/\u73fe\u5728\u306e\u65e5\u4ed8\u30fb\u6642\u523b\u3092\u53d6\u5f97 \n      let current_date = new Date()\n\n      \/\/ \u73fe\u5728\u306e\u6642\u523b\n      this.time = this.zeroPadding(currentdate.getHours(), 2) + ':' + this.zeroPadding(currentdate.getMinutes(), 2) + ':' + this.zeroPadding(currentdate.getSeconds(), 2)\n\n      \/\/ \u73fe\u5728\u306e\u5e74\u6708\u65e5\n      this.date = this.zeroPadding(currentdate.getFullYear(), 4) + '\u5e74' + this.zeroPadding(currentdate.getMonth() + 1, 2) + '\u6708' + this.zeroPadding(currentdate.getDate(), 2) + '\u65e5' + this.week[currentdate.getDay()]\n  \u3000\u3000},\n  \u3000\u3000zeroPadding: function(num, len) {\n      let zero = '';\n\n     \/\/ 0\u306e\u6587\u5b57\u5217\u3092\u4f5c\u6210\n      for(var i = 0; i &lt; len; i++) {\n        zero += '0';\n     }\n\n     \/\/ zero\u306e\u6587\u5b57\u5217\u3068\u3001\u6570\u5b57\u3092\u7d50\u5408\u3057\u3001\u5f8c\u308d\uff12\u6587\u5b57\u3092\u8fd4\u3059\n      return (zero + num).slice(-len);\n    }\n  }\n})<\/code><\/pre>\n<\/div>\n<p>\u300c\u5e74\u300d\u306bzeroPadding\u306f\u4e0d\u8981\u3067\u3059\u304c\u3001\u4e00\u5fdc\u4ed8\u3051\u3068\u304d\u307e\u3057\u305f\u3002<\/p>\n<p>\u4ee5\u4e0a\u3067\u3001\u5b8c\u6210\u3067\u3059\u3002<\/p>\n<p>\u80cc\u666f\u3092\u753b\u50cf\u306b\u8a2d\u5b9a\u3059\u308b\u3068\u3053\u3046\u3044\u3063\u305f\u304a\u6d12\u843d\u306a\u6642\u8a08\u3082\u4f5c\u308c\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-05-02-7.43.53-691x1024.png\" alt=\"\" width=\"278\" height=\"412\" class=\"alignnone wp-image-3083 \" srcset=\"https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-05-02-7.43.53-691x1024.png 691w, https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-05-02-7.43.53-203x300.png 203w, https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-05-02-7.43.53-768x1138.png 768w, https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-05-02-7.43.53-940x1392.png 940w, https:\/\/naoya-ono.com\/blog\/wp-content\/uploads\/2020\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-05-02-7.43.53.png 964w\" sizes=\"(max-width: 278px) 100vw, 278px\"><\/p>\n<h2 class=\"hh hh5 pastel-bc\" id=\"i-10\"><span id=\"Vue\">Vue\u306e\u5b66\u7fd2\u306b\u304a\u3059\u3059\u3081\u306e\u66f8\u7c4d<\/span><\/h2>\n<div id=\"rinkerid1616\" class=\"yyi-rinker-contents  yyi-rinker-postid-1616 yyi-rinker-img-m yyi-rinker-catid-31 yyi-rinker-catid-3 \">\n<div class=\"yyi-rinker-box\">\n<div class=\"yyi-rinker-image\">\n\t\t\t\t\t\t\t<a href=\"https:\/\/www.amazon.co.jp\/dp\/4863542453?tag=naoya-ono-22&amp;linkCode=ogi&amp;th=1&amp;psc=1\" rel=\"nofollow\" class=\"yyi-rinker-tracking\" data-click-tracking=\"amazon_img 1616 \u57fa\u790e\u304b\u3089\u5b66\u3076 Vue.js\" data-vars-click-id=\"amazon_img 1616 \u57fa\u790e\u304b\u3089\u5b66\u3076 Vue.js\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/m.media-amazon.com\/images\/I\/51UVfJB+8sL._SL160_.jpg\" width=\"112\" height=\"160\" class=\"yyi-rinker-main-img\" style=\"border: none;\"><\/a>\t\t\t\t\t<\/div>\n<div class=\"yyi-rinker-info\">\n<div class=\"yyi-rinker-title\">\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.amazon.co.jp\/dp\/4863542453?tag=naoya-ono-22&amp;linkCode=ogi&amp;th=1&amp;psc=1\" rel=\"nofollow\" class=\"yyi-rinker-tracking\" data-click-tracking=\"amazon_title 1616 \u57fa\u790e\u304b\u3089\u5b66\u3076 Vue.js\" data-vars-amp-click-id=\"amazon_title 1616 \u57fa\u790e\u304b\u3089\u5b66\u3076 Vue.js\">\u57fa\u790e\u304b\u3089\u5b66\u3076 Vue.js<\/a>\t\t\t\t\t\t\t<\/div>\n<div class=\"yyi-rinker-detail\">\n<div class=\"credit-box\">created by&nbsp;<a href=\"https:\/\/oyakosodate.com\/rinker\/\" rel=\"nofollow noopener\" target=\"_blank\">Rinker<\/a><\/div>\n<div class=\"price-box\">\n\t\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<ul class=\"yyi-rinker-links\">\n<li class=\"amazonkindlelink\">\n\t\t\t\t\t\t<a href=\"https:\/\/www.amazon.co.jp\/gp\/product\/B07D9BYHMZ\/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;tag=naoya-ono-22&amp;creative=1211&amp;linkCode=as2&amp;creativeASIN=B07D9BYHMZ&amp;linkId=77138cffdded68c736738fa99634f5d4\" rel=\"nofollow\" class=\"yyi-rinker-link yyi-rinker-tracking\" data-click-tracking=\"amazon_kindle 1616 \u57fa\u790e\u304b\u3089\u5b66\u3076 Vue.js\" data-vars-amp-click-id=\"amazon_kindle 1616 \u57fa\u790e\u304b\u3089\u5b66\u3076 Vue.js\">Kindle<\/a>\t\t\t\t\t<\/li>\n<li class=\"amazonlink\">\n\t\t\t\t\t\t<a href=\"https:\/\/www.amazon.co.jp\/dp\/4863542453?tag=naoya-ono-22&amp;linkCode=ogi&amp;th=1&amp;psc=1\" rel=\"nofollow\" class=\"yyi-rinker-link yyi-rinker-tracking\" data-click-tracking=\"amazon 1616 \u57fa\u790e\u304b\u3089\u5b66\u3076 Vue.js\" data-vars-amp-click-id=\"amazon 1616 \u57fa\u790e\u304b\u3089\u5b66\u3076 Vue.js\">Amazon<\/a>\t\t\t\t\t<\/li>\n<li class=\"rakutenlink\">\n\t\t\t\t\t\t<a href=\"https:\/\/hb.afl.rakuten.co.jp\/hgc\/16781883.64066d33.16781884.4f333982\/Rinker_o_20191215175655?pc=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2F%25E5%259F%25BA%25E7%25A4%258E%25E3%2581%258B%25E3%2582%2589%25E5%25AD%25A6%25E3%2581%25B6%2BVue.js%25C2%25A0%2F%3Ff%3D1%26grp%3Dproduct&amp;m=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2F%25E5%259F%25BA%25E7%25A4%258E%25E3%2581%258B%25E3%2582%2589%25E5%25AD%25A6%25E3%2581%25B6%2BVue.js%25C2%25A0%2F%3Ff%3D1%26grp%3Dproduct\" rel=\"nofollow\" class=\"yyi-rinker-link yyi-rinker-tracking\" data-click-tracking=\"rakuten 1616 \u57fa\u790e\u304b\u3089\u5b66\u3076 Vue.js\" data-vars-amp-click-id=\"rakuten 1616 \u57fa\u790e\u304b\u3089\u5b66\u3076 Vue.js\">\u697d\u5929\u5e02\u5834<\/a>\t\t\t\t\t<\/li>\n<li class=\"yahoolink\">\n\t\t\t\t\t\t<a href=\"https:\/\/shopping.yahoo.co.jp\/search?p=%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6+Vue.js%C2%A0\" rel=\"nofollow\" class=\"yyi-rinker-link yyi-rinker-tracking\" data-click-tracking=\"yahoo 1616 \u57fa\u790e\u304b\u3089\u5b66\u3076 Vue.js\" data-vars-amp-click-id=\"yahoo 1616 \u57fa\u790e\u304b\u3089\u5b66\u3076 Vue.js\">Yahoo\u30b7\u30e7\u30c3\u30d4\u30f3\u30b0<\/a>\t\t\t\t\t<\/li>\n<li class=\"freelink2\">\n\t\t\t\t\t\t<a href=\"https:\/\/www.kinokuniya.co.jp\/f\/dsg-01-9784863542457\" rel=\"nofollow\" class=\"yyi-rinker-link yyi-rinker-tracking\" data-click-tracking=\"free_2 1616 \u57fa\u790e\u304b\u3089\u5b66\u3076 Vue.js\" data-vars-amp-click-id=\"free_2 1616 \u57fa\u790e\u304b\u3089\u5b66\u3076 Vue.js\">\u7d00\u4f0a\u570b\u5c4b\u66f8\u5e97<\/a>\t\t\t\t\t<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/div>\n<div id=\"rinkerid1614\" class=\"yyi-rinker-contents  yyi-rinker-postid-1614 yyi-rinker-img-m yyi-rinker-catid-31 yyi-rinker-catid-3 \">\n<div class=\"yyi-rinker-box\">\n<div class=\"yyi-rinker-image\">\n\t\t\t\t\t\t\t<a href=\"https:\/\/www.amazon.co.jp\/dp\/4798056499?tag=naoya-ono-22&amp;linkCode=ogi&amp;th=1&amp;psc=1\" rel=\"nofollow\" class=\"yyi-rinker-tracking\" data-click-tracking=\"amazon_img 1614 Vue.js\u306e\u30c4\u30dc\u3068\u30b3\u30c4\u304c\u30bc\u30c3\u30bf\u30a4\u306b\u308f\u304b\u308b\u672c\" data-vars-click-id=\"amazon_img 1614 Vue.js\u306e\u30c4\u30dc\u3068\u30b3\u30c4\u304c\u30bc\u30c3\u30bf\u30a4\u306b\u308f\u304b\u308b\u672c\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/m.media-amazon.com\/images\/I\/41kx0Ybrm2L._SL160_.jpg\" width=\"123\" height=\"160\" class=\"yyi-rinker-main-img\" style=\"border: none;\"><\/a>\t\t\t\t\t<\/div>\n<div class=\"yyi-rinker-info\">\n<div class=\"yyi-rinker-title\">\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.amazon.co.jp\/dp\/4798056499?tag=naoya-ono-22&amp;linkCode=ogi&amp;th=1&amp;psc=1\" rel=\"nofollow\" class=\"yyi-rinker-tracking\" data-click-tracking=\"amazon_title 1614 Vue.js\u306e\u30c4\u30dc\u3068\u30b3\u30c4\u304c\u30bc\u30c3\u30bf\u30a4\u306b\u308f\u304b\u308b\u672c\" data-vars-amp-click-id=\"amazon_title 1614 Vue.js\u306e\u30c4\u30dc\u3068\u30b3\u30c4\u304c\u30bc\u30c3\u30bf\u30a4\u306b\u308f\u304b\u308b\u672c\">Vue.js\u306e\u30c4\u30dc\u3068\u30b3\u30c4\u304c\u30bc\u30c3\u30bf\u30a4\u306b\u308f\u304b\u308b\u672c<\/a>\t\t\t\t\t\t\t<\/div>\n<div class=\"yyi-rinker-detail\">\n<div class=\"credit-box\">created by&nbsp;<a href=\"https:\/\/oyakosodate.com\/rinker\/\" rel=\"nofollow noopener\" target=\"_blank\">Rinker<\/a><\/div>\n<div class=\"price-box\">\n\t\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<ul class=\"yyi-rinker-links\">\n<li class=\"amazonkindlelink\">\n\t\t\t\t\t\t<a href=\"https:\/\/www.amazon.co.jp\/gp\/product\/B07RN3YD79\/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;tag=naoya-ono-22&amp;creative=1211&amp;linkCode=as2&amp;creativeASIN=B07RN3YD79&amp;linkId=5e84d5cb0e76dc25b1a7d0c72f8de368\" rel=\"nofollow\" class=\"yyi-rinker-link yyi-rinker-tracking\" data-click-tracking=\"amazon_kindle 1614 Vue.js\u306e\u30c4\u30dc\u3068\u30b3\u30c4\u304c\u30bc\u30c3\u30bf\u30a4\u306b\u308f\u304b\u308b\u672c\" data-vars-amp-click-id=\"amazon_kindle 1614 Vue.js\u306e\u30c4\u30dc\u3068\u30b3\u30c4\u304c\u30bc\u30c3\u30bf\u30a4\u306b\u308f\u304b\u308b\u672c\">Kindle<\/a>\t\t\t\t\t<\/li>\n<li class=\"amazonlink\">\n\t\t\t\t\t\t<a href=\"https:\/\/www.amazon.co.jp\/dp\/4798056499?tag=naoya-ono-22&amp;linkCode=ogi&amp;th=1&amp;psc=1\" rel=\"nofollow\" class=\"yyi-rinker-link yyi-rinker-tracking\" data-click-tracking=\"amazon 1614 Vue.js\u306e\u30c4\u30dc\u3068\u30b3\u30c4\u304c\u30bc\u30c3\u30bf\u30a4\u306b\u308f\u304b\u308b\u672c\" data-vars-amp-click-id=\"amazon 1614 Vue.js\u306e\u30c4\u30dc\u3068\u30b3\u30c4\u304c\u30bc\u30c3\u30bf\u30a4\u306b\u308f\u304b\u308b\u672c\">Amazon<\/a>\t\t\t\t\t<\/li>\n<li class=\"rakutenlink\">\n\t\t\t\t\t\t<a href=\"https:\/\/hb.afl.rakuten.co.jp\/hgc\/16781883.64066d33.16781884.4f333982\/Rinker_o_20191215175532?pc=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2FVue.js%25E3%2581%25AE%25E3%2583%2584%25E3%2583%259C%25E3%2581%25A8%25E3%2582%25B3%25E3%2583%2584%25E3%2581%258C%25E3%2582%25BC%25E3%2583%2583%25E3%2582%25BF%25E3%2582%25A4%25E3%2581%25AB%25E3%2582%258F%25E3%2581%258B%25E3%2582%258B%25E6%259C%25AC%2F%3Ff%3D1%26grp%3Dproduct&amp;m=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2FVue.js%25E3%2581%25AE%25E3%2583%2584%25E3%2583%259C%25E3%2581%25A8%25E3%2582%25B3%25E3%2583%2584%25E3%2581%258C%25E3%2582%25BC%25E3%2583%2583%25E3%2582%25BF%25E3%2582%25A4%25E3%2581%25AB%25E3%2582%258F%25E3%2581%258B%25E3%2582%258B%25E6%259C%25AC%2F%3Ff%3D1%26grp%3Dproduct\" rel=\"nofollow\" class=\"yyi-rinker-link yyi-rinker-tracking\" data-click-tracking=\"rakuten 1614 Vue.js\u306e\u30c4\u30dc\u3068\u30b3\u30c4\u304c\u30bc\u30c3\u30bf\u30a4\u306b\u308f\u304b\u308b\u672c\" data-vars-amp-click-id=\"rakuten 1614 Vue.js\u306e\u30c4\u30dc\u3068\u30b3\u30c4\u304c\u30bc\u30c3\u30bf\u30a4\u306b\u308f\u304b\u308b\u672c\">\u697d\u5929\u5e02\u5834<\/a>\t\t\t\t\t<\/li>\n<li class=\"yahoolink\">\n\t\t\t\t\t\t<a href=\"https:\/\/shopping.yahoo.co.jp\/search?p=Vue.js%E3%81%AE%E3%83%84%E3%83%9C%E3%81%A8%E3%82%B3%E3%83%84%E3%81%8C%E3%82%BC%E3%83%83%E3%82%BF%E3%82%A4%E3%81%AB%E3%82%8F%E3%81%8B%E3%82%8B%E6%9C%AC\" rel=\"nofollow\" class=\"yyi-rinker-link yyi-rinker-tracking\" data-click-tracking=\"yahoo 1614 Vue.js\u306e\u30c4\u30dc\u3068\u30b3\u30c4\u304c\u30bc\u30c3\u30bf\u30a4\u306b\u308f\u304b\u308b\u672c\" data-vars-amp-click-id=\"yahoo 1614 Vue.js\u306e\u30c4\u30dc\u3068\u30b3\u30c4\u304c\u30bc\u30c3\u30bf\u30a4\u306b\u308f\u304b\u308b\u672c\">Yahoo\u30b7\u30e7\u30c3\u30d4\u30f3\u30b0<\/a>\t\t\t\t\t<\/li>\n<li class=\"freelink2\">\n\t\t\t\t\t\t<a href=\"https:\/\/ck.jp.ap.valuecommerce.com\/servlet\/referral?sid=3490090&amp;pid=886213926&amp;vc_url=https%3A%2F%2Fwww.kinokuniya.co.jp%2Ff%2Fdsg-01-9784798056494&amp;vcpub=0.198716&amp;vcid=jkl0_h9M9ux1QBFzvAt6BwC4HsXAGRDsM_7DksRkdZ-agRYD4CU0xkqnn1RAHsGL&amp;isec=1577608025\" rel=\"nofollow\" class=\"yyi-rinker-link yyi-rinker-tracking\" data-click-tracking=\"free_2 1614 Vue.js\u306e\u30c4\u30dc\u3068\u30b3\u30c4\u304c\u30bc\u30c3\u30bf\u30a4\u306b\u308f\u304b\u308b\u672c\" data-vars-amp-click-id=\"free_2 1614 Vue.js\u306e\u30c4\u30dc\u3068\u30b3\u30c4\u304c\u30bc\u30c3\u30bf\u30a4\u306b\u308f\u304b\u308b\u672c\">\u7d00\u4f0a\u570b\u5c4b\u66f8\u5e97<\/a>\t\t\t\t\t<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u306e\u30da\u30fc\u30b8\u3067\u306fJavaScript\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u30fc\u300cVue.js\u300d\u3092\u4f7f\u3063\u3066\u30c7\u30b8\u30bf\u30eb\u6642\u8a08\u306e\u4f5c\u308a\u65b9\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002 Vue.js\u306e\u52c9\u5f37\u4e2d\u306e\u4eba\u306f\u305c\u3072\u30c1\u30e3\u30ec\u30f3\u30b8\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002 \u76ee\u6b21\u4eca\u56de\u4f5c\u308b\u3082\u306e\u307e\u305a\u306f\u3001\u753b\u9762\u3092\u4f5c\u6210\u3057\u3088\u3046JS\u5074\u306e\u51e6\u7406 &#8230; <\/p>\n","protected":false},"author":1,"featured_media":3077,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,3],"tags":[],"_links":{"self":[{"href":"https:\/\/naoya-ono.com\/blog\/wp-json\/wp\/v2\/posts\/3063"}],"collection":[{"href":"https:\/\/naoya-ono.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/naoya-ono.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/naoya-ono.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naoya-ono.com\/blog\/wp-json\/wp\/v2\/comments?post=3063"}],"version-history":[{"count":14,"href":"https:\/\/naoya-ono.com\/blog\/wp-json\/wp\/v2\/posts\/3063\/revisions"}],"predecessor-version":[{"id":3085,"href":"https:\/\/naoya-ono.com\/blog\/wp-json\/wp\/v2\/posts\/3063\/revisions\/3085"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/naoya-ono.com\/blog\/wp-json\/wp\/v2\/media\/3077"}],"wp:attachment":[{"href":"https:\/\/naoya-ono.com\/blog\/wp-json\/wp\/v2\/media?parent=3063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naoya-ono.com\/blog\/wp-json\/wp\/v2\/categories?post=3063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naoya-ono.com\/blog\/wp-json\/wp\/v2\/tags?post=3063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}