CINXE.COM

<!DOCTYPE html><html><head prefix="og: http://ogp.me/ns#"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/><style data-styled="" data-styled-version="5.3.3">.lkjvRt{vertical-align:text-bottom;}/*!sc*/ data-styled.g1[id="sc-bdvvtL"]{content:"lkjvRt,"}/*!sc*/ .hVvGed{text-align:center;font-weight:bold;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;display:inline-block;width:auto;line-height:1.35;border:1px solid transparent;border-radius:.3rem;padding:0.75rem 1.25rem;background:#E5E9EB;color:#3D4245;padding:6px 10px;font-size:12px;}/*!sc*/ .hVvGed:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .hVvGed:focus{outline:none;box-shadow:inset 0 0 0 0.2rem rgba(45,149,222,0.4);}/*!sc*/ .hVvGed:visited{color:#3D4245;}/*!sc*/ .hVvGed:hover{background:#DADFE2;}/*!sc*/ data-styled.g4[id="sc-hKwDye"]{content:"hVvGed,"}/*!sc*/ .igQbsT{margin-bottom:1.25rem;}/*!sc*/ data-styled.g6[id="sc-jRQBWg"]{content:"igQbsT,"}/*!sc*/ .jApmux{margin:auto;width:90vw;}/*!sc*/ @media (min-width:768px){.jApmux{width:720px;}}/*!sc*/ @media (min-width:1000px){.jApmux{width:960px;}}/*!sc*/ data-styled.g7[id="sc-gKclnd"]{content:"jApmux,"}/*!sc*/ .kmLDKr{margin:0.75rem 0 0;}/*!sc*/ @media (min-width:768px){.kmLDKr{margin:0.75rem 0 0;}}/*!sc*/ .kmLDKr a{color:#6B7377;font-size:0.75rem;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .kmLDKr a:hover{-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ .kmLDKr a svg{margin-right:0.25rem;}/*!sc*/ data-styled.g8[id="sc-iCfMLu"]{content:"kmLDKr,"}/*!sc*/ .fwuOgc{margin:1.25rem 0;text-align:center;}/*!sc*/ @media (min-width:768px){.fwuOgc{margin:0.75rem 0;}}/*!sc*/ .fwuOgc svg{vertical-align:baseline;}/*!sc*/ .fwuOgc span{display:inline-block;margin-left:0.25rem;font-weight:bold;font-size:1.25rem;color:#242527;}/*!sc*/ data-styled.g9[id="sc-furwcr"]{content:"fwuOgc,"}/*!sc*/ .LiGyC{padding-left:5vw;padding-right:5vw;overflow-x:auto;overflow-y:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;margin-bottom:1.25rem;border-bottom:1px solid #DADFE2;}/*!sc*/ @media (min-width:768px){.LiGyC{padding-left:0;padding-right:0;width:720px;margin-left:auto;margin-right:auto;overflow:visible;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}}/*!sc*/ @media (min-width:1000px){.LiGyC{width:960px;}}/*!sc*/ .LiGyC > *:not(:first-child){margin-left:0.5rem;}/*!sc*/ data-styled.g10[id="sc-pVTFL"]{content:"LiGyC,"}/*!sc*/ .YnERV{display:inline-block;padding:0.75rem;font-size:0.875rem;font-weight:bold;color:#038662;border-bottom:3px solid #009D73;text-align:center;-webkit-text-decoration:none;text-decoration:none;white-space:nowrap;}/*!sc*/ .YnERV:hover{color:#242527;color:#038662;}/*!sc*/ .dlNnRT{display:inline-block;padding:0.75rem;font-size:0.875rem;font-weight:normal;color:#6B7377;border-bottom:3px solid none;text-align:center;-webkit-text-decoration:none;text-decoration:none;white-space:nowrap;}/*!sc*/ .dlNnRT:hover{color:#242527;color:#242527;}/*!sc*/ data-styled.g11[id="sc-jrQzAO"]{content:"YnERV,dlNnRT,"}/*!sc*/ .cfFZTJ{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;margin-bottom:0.5rem;}/*!sc*/ data-styled.g12[id="sc-kDTinF"]{content:"cfFZTJ,"}/*!sc*/ .jMkJCa{margin-right:0.375rem;}/*!sc*/ data-styled.g13[id="sc-iqseJM"]{content:"jMkJCa,"}/*!sc*/ .dkQbpU{display:inline-block;margin-left:-6px;}/*!sc*/ .dkQbpU:first-child{margin-left:0;}/*!sc*/ .dkQbpU img{width:24px;height:24px;border-radius:50%;border:2px solid #FFF;vertical-align:middle;}/*!sc*/ data-styled.g14[id="sc-crHmcD"]{content:"dkQbpU,"}/*!sc*/ .eLzidY{margin:0;padding:0;list-style:none;line-height:1.4;}/*!sc*/ data-styled.g15[id="sc-egiyK"]{content:"eLzidY,"}/*!sc*/ .hatryS{display:inline-block;margin-right:0.75rem;}/*!sc*/ .hatryS:last-child{margin-right:0;}/*!sc*/ data-styled.g16[id="sc-bqiRlB"]{content:"hatryS,"}/*!sc*/ .fOytDi{color:#6B7377;font-size:0.75rem;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .fOytDi:hover{-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ data-styled.g17[id="sc-ksdxgE"]{content:"fOytDi,"}/*!sc*/ .khBKZC{margin-top:2rem;color:#6B7377;font-size:0.75rem;}/*!sc*/ .khBKZC > *{margin-top:0.75rem;}/*!sc*/ data-styled.g18[id="sc-hBUSln"]{content:"khBKZC,"}/*!sc*/ .erCtv{color:#6B7377;font-size:0.75rem;}/*!sc*/ .erCtv ul{margin:0;padding:0;list-style:none;}/*!sc*/ .erCtv ul li{display:inline-block;}/*!sc*/ .erCtv ul li > span{margin:0 0.375rem;}/*!sc*/ .erCtv ul a{color:#6B7377;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .erCtv ul a:hover{-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ data-styled.g19[id="sc-fotOHu"]{content:"erCtv,"}/*!sc*/ .bcqfTw{color:#6B7377;font-size:0.75rem;}/*!sc*/ data-styled.g20[id="sc-fFeiMQ"]{content:"bcqfTw,"}/*!sc*/ .fXxvup{max-height:auto;overflow:visible;position:relative;z-index:1;}/*!sc*/ @media (min-width:768px){.fXxvup{max-height:auto;}}/*!sc*/ .fXxvup:after{display:none;content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient( 0deg, #FFF, hsla(0,0%,100%,0) 3rem );}/*!sc*/ data-styled.g25[id="sc-dlVxhl"]{content:"fXxvup,"}/*!sc*/ .hVrOKL:not(:first-child){margin-top:2rem;}/*!sc*/ .hVrOKL:nth-child(n + 3){display:block;}/*!sc*/ data-styled.g26[id="sc-kfPuZi"]{content:"hVrOKL,"}/*!sc*/ .bDsMXk{border-bottom:3px solid #DADFE2;}/*!sc*/ data-styled.g27[id="sc-fKVqWL"]{content:"bDsMXk,"}/*!sc*/ .fbwRLI{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}/*!sc*/ .fbwRLI h1{line-height:1.4;font-size:1.125rem;margin:0 0.375rem 0 0;word-break:break-all;color:#242527;}/*!sc*/ @media (min-width:768px){.fbwRLI h1{font-size:1.5rem;}}/*!sc*/ data-styled.g28[id="sc-bBHxTw"]{content:"fbwRLI,"}/*!sc*/ .iUlhMW{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-top:0.75rem;border-top:2px solid #DADFE2;}/*!sc*/ .iUlhMW details{font-size:0.875rem;color:#6B7377;}/*!sc*/ .iUlhMW summary{margin-bottom:0.375rem;cursor:pointer;}/*!sc*/ .iUlhMW summary::-webkit-details-marker{display:none;}/*!sc*/ .iUlhMW summary:focus{outline:none;}/*!sc*/ .iUlhMW summary span{display:inline-block;margin-left:0.25rem;}/*!sc*/ data-styled.g32[id="sc-iJKOTD"]{content:"iUlhMW,"}/*!sc*/ .cNZxev{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:2rem 0 1.25rem;padding-bottom:0.375rem;border-bottom:3px solid #DADFE2;}/*!sc*/ data-styled.g42[id="sc-cidDSM"]{content:"cNZxev,"}/*!sc*/ .iPveZk{margin:0;font-size:1.125rem;color:#242527;}/*!sc*/ .iPveZk a{margin-left:0.375rem;color:#6B7377;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .iPveZk a:hover{-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ .iPveZk a svg{vertical-align:middle;}/*!sc*/ data-styled.g43[id="sc-jcFjpl"]{content:"iPveZk,"}/*!sc*/ .hRgjVf{font-size:0.875rem;-webkit-text-decoration:none;text-decoration:none;color:#3D4245;}/*!sc*/ .hRgjVf:hover{-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ .hRgjVf span{display:inline-block;margin-left:0.5rem;}/*!sc*/ data-styled.g44[id="sc-caiLqq"]{content:"hRgjVf,"}/*!sc*/ .dIowcK{overflow:scroll;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;margin-left:calc(-5vw);margin-right:calc(-5vw);padding-left:calc(5vw);padding-right:calc(5vw);}/*!sc*/ .dIowcK::after{content:" ";padding-right:calc(5vw);}/*!sc*/ @media (min-width:768px){.dIowcK{overflow:visible;margin:0;padding:0;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}.dIowcK::after{content:none;padding-right:0;}}/*!sc*/ data-styled.g45[id="sc-iUKqMP"]{content:"dIowcK,"}/*!sc*/ .iFOrlO{width:65%;min-width:65%;margin:0 0 0.75rem 0.75rem;border:1px solid #DADFE2;border-radius:.3rem;}/*!sc*/ .iFOrlO:first-child{margin-left:0;}/*!sc*/ @media (min-width:768px){.iFOrlO{width:32%;min-width:32%;margin:0 0 0.75rem 0;}.iFOrlO:first-child{margin-left:0;}}/*!sc*/ data-styled.g46[id="sc-iAKWXU"]{content:"iFOrlO,"}/*!sc*/ .eKDsnJ{display:block;padding:0.5rem 0.5rem 0.375rem;-webkit-text-decoration:none;text-decoration:none;color:#038662;font-size:0.6rem;line-height:1.2;}/*!sc*/ .eKDsnJ strong{margin-right:0.25rem;font-size:1rem;font-weight:normal;}/*!sc*/ data-styled.g48[id="sc-cTAqQK"]{content:"eKDsnJ,"}/*!sc*/ .cGnNsn{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;height:60px;margin:0 0.5rem 0.75rem;color:#242527;font-weight:bold;font-size:0.875rem;-webkit-text-decoration:none;text-decoration:none;line-height:1.4;}/*!sc*/ .cGnNsn:hover{-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ data-styled.g49[id="sc-jObWnj"]{content:"cGnNsn,"}/*!sc*/ .dcDqJM{position:relative;display:block;width:100%;height:100px;margin:0 auto;}/*!sc*/ .dcDqJM img{position:absolute;top:0px;left:0px;object-fit:cover;display:block;width:100%;height:100%;}/*!sc*/ data-styled.g50[id="sc-dPiLbb"]{content:"dcDqJM,"}/*!sc*/ .exscr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;margin:0.5rem;-webkit-text-decoration:none;text-decoration:none;color:#6B7377;font-size:0.75rem;}/*!sc*/ .exscr:hover{-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ data-styled.g52[id="sc-cNKqjZ"]{content:"exscr,"}/*!sc*/ .ckjIGV img{width:16px;height:16px;margin-right:0.375rem;vertical-align:middle;}/*!sc*/ data-styled.g53[id="sc-AjmGg"]{content:"ckjIGV,"}/*!sc*/ .lltUDN{display:inline-block;margin-right:0.75rem;font-size:0.875rem;}/*!sc*/ .lltUDN:last-child{margin-right:0;}/*!sc*/ .lltUDN a{color:#3D4245;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .lltUDN a:hover{-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ data-styled.g54[id="sc-khQegj"]{content:"lltUDN,"}/*!sc*/ .eTGxBZ{position:relative;border-radius:.3rem;border:1px solid #DADFE2;margin-top:1.25rem;}/*!sc*/ @media (min-width:768px){.eTGxBZ{margin-top:2rem;padding-left:40px;}}/*!sc*/ data-styled.g55[id="sc-hUpaCq"]{content:"eTGxBZ,"}/*!sc*/ @media (min-width:768px){.chuemY{position:absolute;top:16px;left:16px;}}/*!sc*/ .chuemY img{width:24px;height:24px;border-radius:50%;vertical-align:middle;}/*!sc*/ @media (min-width:768px){.chuemY img{width:32px;height:32px;}}/*!sc*/ data-styled.g56[id="sc-jgrJph"]{content:"chuemY,"}/*!sc*/ .gtijWP{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:16px 1.25rem 0.5rem;font-size:0.75rem;line-height:1.4;color:#6B7377;}/*!sc*/ data-styled.g57[id="sc-gSQFLo"]{content:"gtijWP,"}/*!sc*/ .jiSLiQ{margin-left:0.5rem;}/*!sc*/ @media (min-width:768px){.jiSLiQ{margin-left:0;}}/*!sc*/ data-styled.g58[id="sc-lbhJGD"]{content:"jiSLiQ,"}/*!sc*/ .dCOBQS{vertical-align:middle;padding-right:0.25rem;color:#242527;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .dCOBQS:hover{-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ data-styled.g59[id="sc-iNGGcK"]{content:"dCOBQS,"}/*!sc*/ .cHHEBX{padding-left:0.25rem;vertical-align:middle;color:#6B7377;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .cHHEBX:hover{-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ data-styled.g60[id="sc-jeraig"]{content:"cHHEBX,"}/*!sc*/ .iGwSLi{-webkit-text-decoration:none;text-decoration:none;color:#3D4245;}/*!sc*/ .iGwSLi:hover h3{-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ data-styled.g61[id="sc-eJwWfJ"]{content:"iGwSLi,"}/*!sc*/ .eKvbKi{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;padding:0 1.25rem;color:#242527;line-height:1.4;margin:0 0 1.25rem;font-size:1rem;}/*!sc*/ @media (min-width:768px){.eKvbKi{-webkit-line-clamp:3;font-size:1.125rem;}}/*!sc*/ data-styled.g62[id="sc-nVkyK"]{content:"eKvbKi,"}/*!sc*/ .cSVtPS{-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent);padding-bottom:0.75rem;}/*!sc*/ .cSVtPS p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5;margin:0 1.25rem;font-size:0.875rem;line-height:1.75;}/*!sc*/ data-styled.g63[id="sc-hiwPVj"]{content:"cSVtPS,"}/*!sc*/ .fvupeU{position:relative;width:100%;margin:0 auto 1.25rem;}/*!sc*/ @media (min-width:768px){.fvupeU{width:auto;margin:0 1.25rem 1.25rem;}}/*!sc*/ .fvupeU img{display:block;max-width:100%;max-height:400px;margin:auto;}/*!sc*/ @media (min-width:768px){.fvupeU img{max-height:480px;}}/*!sc*/ data-styled.g64[id="sc-ehCJOs"]{content:"fvupeU,"}/*!sc*/ .bdhVtG{margin:0 1.25rem 1.25rem;}/*!sc*/ data-styled.g65[id="sc-lcepkR"]{content:"bdhVtG,"}/*!sc*/ .koQkfJ a{display:block;}/*!sc*/ .koQkfJ a img{width:200px;height:55px;display:block;}/*!sc*/ @media (min-width:768px){.koQkfJ a img{width:230px;height:63px;}}/*!sc*/ data-styled.g67[id="sc-gGCDDS"]{content:"koQkfJ,"}/*!sc*/ .cQSyCH{background:#FFF;border-bottom:1px solid #DADFE2;}/*!sc*/ data-styled.g68[id="sc-clIzBv"]{content:"cQSyCH,"}/*!sc*/ .euEQxt{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:auto;height:56px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ @media (min-width:768px){.euEQxt{width:720px;}}/*!sc*/ @media (min-width:1000px){.euEQxt{width:960px;}}/*!sc*/ data-styled.g69[id="sc-faUpoM"]{content:"euEQxt,"}/*!sc*/ html{line-height:1.15;-webkit-text-size-adjust:100%;}/*!sc*/ body{margin:0;}/*!sc*/ main{display:block;}/*!sc*/ h1{font-size:2em;margin:0.67em 0;}/*!sc*/ hr{box-sizing:content-box;height:0;overflow:visible;}/*!sc*/ pre{font-family:monospace,monospace;font-size:1em;}/*!sc*/ a{background-color:transparent;}/*!sc*/ abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}/*!sc*/ b,strong{font-weight:bolder;}/*!sc*/ code,kbd,samp{font-family:monospace,monospace;font-size:1em;}/*!sc*/ small{font-size:80%;}/*!sc*/ sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}/*!sc*/ sub{bottom:-0.25em;}/*!sc*/ sup{top:-0.5em;}/*!sc*/ img{border-style:none;}/*!sc*/ button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}/*!sc*/ button,input{overflow:visible;}/*!sc*/ button,select{text-transform:none;}/*!sc*/ button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}/*!sc*/ button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}/*!sc*/ button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}/*!sc*/ fieldset{padding:0.35em 0.75em 0.625em;}/*!sc*/ legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}/*!sc*/ progress{vertical-align:baseline;}/*!sc*/ textarea{overflow:auto;}/*!sc*/ [type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}/*!sc*/ [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}/*!sc*/ [type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}/*!sc*/ [type="search"]::-webkit-search-decoration{-webkit-appearance:none;}/*!sc*/ ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}/*!sc*/ details{display:block;}/*!sc*/ summary{display:list-item;}/*!sc*/ template{display:none;}/*!sc*/ [hidden]{display:none;}/*!sc*/ html{-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;}/*!sc*/ body{font-family:-apple-system,BlinkMacSystemFont,'Avenir Next','Segoe UI',Arial,sans-serif;background:#FFF;color:#3D4245;line-height:1.6;word-wrap:break-word;}/*!sc*/ a{color:#0E6ACE;}/*!sc*/ *,*::before,*::after{box-sizing:border-box;}/*!sc*/ [hidden]{display:none !important;}/*!sc*/ data-styled.g81[id="sc-global-hlvyRX1"]{content:"sc-global-hlvyRX1,"}/*!sc*/ .fSZqjM{margin-bottom:calc(2rem + 50px);}/*!sc*/ @media (min-width:576px){.fSZqjM{margin-bottom:calc(2rem + 90px);}}/*!sc*/ data-styled.g82[id="sc-hOGkXu"]{content:"fSZqjM,"}/*!sc*/ .bmPyql{margin:0 auto 3.25rem;}/*!sc*/ data-styled.g83[id="sc-dtMgUX"]{content:"bmPyql,"}/*!sc*/ .fWpXUO{margin-top:2rem;padding-bottom:0.375rem;border-bottom:3px solid #DADFE2;}/*!sc*/ .fWpXUO h2{margin:0;font-size:1.125rem;color:#242527;}/*!sc*/ data-styled.g84[id="sc-cZMNgc"]{content:"fWpXUO,"}/*!sc*/ .gKiXsd{margin:auto;width:90vw;}/*!sc*/ @media (min-width:768px){.gKiXsd{width:720px;}}/*!sc*/ @media (min-width:1000px){.gKiXsd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:960px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}}/*!sc*/ data-styled.g86[id="sc-jQrDum"]{content:"gKiXsd,"}/*!sc*/ @media (min-width:1000px){.jDQHrM{width:calc(960px - 300px - 2rem);}}/*!sc*/ data-styled.g87[id="sc-fvxzrP"]{content:"jDQHrM,"}/*!sc*/ @media (min-width:1000px){.jDxbCk{width:300px;}}/*!sc*/ data-styled.g88[id="sc-fbyfCU"]{content:"jDxbCk,"}/*!sc*/ </style><link rel="icon" sizes="16x16 32x32 48x48 64x64" href="https://live.blog-tags.st-hatena.com//_next/static/images/favicon-8c3808340882afcb341562e33da12325.ico"/><link rel="apple-touch-icon" type="image/png" href="https://live.blog-tags.st-hatena.com//_next/static/images/favicon-180-d5514c44500bfeca92f576e984aacd8a.png"/><link rel="icon" type="image/png" href="https://live.blog-tags.st-hatena.com//_next/static/images/favicon-192-05f2ab3910776ea8e1aea414fc5257e4.png"/><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/><meta charSet="utf-8"/><script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-46136157-1"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-46136157-1'); </script><script src="https://cdn.pool.st-hatena.com/valve/valve.js" async=""></script><title>Vue.jsとは人気・最新記事を集めました - はてな</title><meta property="og:title" content="Vue.jsとは人気・最新記事を集めました - はてな"/><meta property="og:type" content="article"/><meta property="og:site_name" content="はてなブログタグ"/><meta name="twitter:card" content="summary_large_image"/><meta property="og:image" content="https://live.blog-tags.st-hatena.com//_next/static/images/ogImageDefault-0b14dbf84ffadcafc73ec8b1d951813c.png"/><meta property="og:url" content="https://d.hatena.ne.jp/keyword/Vue.js"/><link rel="canonical" href="https://d.hatena.ne.jp/keyword/Vue.js"/><meta property="og:description" content="「Vue.js」とは - "/><meta name="next-head-count" content="13"/><link rel="preload" href="https://live.blog-tags.st-hatena.com/_next/static/8MX8gND8BYpmrsrzfNHI8/pages/keyword/_permalink_reborn.js" as="script"/><link rel="preload" href="https://live.blog-tags.st-hatena.com/_next/static/8MX8gND8BYpmrsrzfNHI8/pages/_app.js" as="script"/><link rel="preload" href="https://live.blog-tags.st-hatena.com/_next/static/runtime/webpack-035ac2b14bde147cb4a8.js" as="script"/><link rel="preload" href="https://live.blog-tags.st-hatena.com/_next/static/chunks/commons.d78459f0c3cff869b62b.js" as="script"/><link rel="preload" href="https://live.blog-tags.st-hatena.com/_next/static/runtime/main-389f2d5a5a59288bda75.js" as="script"/></head><body class="page-index"><div id="__next"><div class="sc-hOGkXu fSZqjM"><header class="sc-clIzBv cQSyCH"><div class="sc-faUpoM euEQxt"><div class="sc-gGCDDS koQkfJ"><a href="https://d.hatena.ne.jp/keyword/"><img src="https://live.blog-tags.st-hatena.com//_next/static/images/serviceLogo-69b3b2c074e155b6211649fba846eb8d.svg" alt="Hatena Blog Tags"/></a></div></div></header><div></div><div class="sc-jRQBWg igQbsT"><div class="sc-gKclnd jApmux"><div class="sc-iCfMLu kmLDKr"><a href="https://hatenablog.com/"><svg width="14" height="14" viewBox="0 0 24 24" class="sc-bdvvtL lkjvRt"><path fill="#6B7377" d="M16.2,0,19,2.8,9.7,12,19,21.2,16.2,24,4,12Z"></path></svg>はてなブログトップ</a></div><div class="sc-furwcr fwuOgc"><svg width="18" height="18" viewBox="0 0 24 24" class="sc-bdvvtL lkjvRt"><path fill="#6B7377" d="M22.4,15.1H17.6l1.2-6.2h3.6A1.6,1.6,0,0,0,24,7.4a1.6,1.6,0,0,0-1.6-1.6H19.5l.8-3.9A1.7,1.7,0,0,0,19,0a1.6,1.6,0,0,0-1.8,1.3l-.9,4.5H10.2L11,1.9A1.6,1.6,0,0,0,9.8,0,1.7,1.7,0,0,0,7.9,1.3L7,5.8H1.6A1.6,1.6,0,0,0,0,7.4,1.6,1.6,0,0,0,1.6,8.9H6.4L5.2,15.1H1.6A1.6,1.6,0,0,0,0,16.6a1.6,1.6,0,0,0,1.6,1.6H4.5l-.8,3.9A1.7,1.7,0,0,0,5,24h.3a1.5,1.5,0,0,0,1.5-1.3l.9-4.5h6.1L13,22.1A1.6,1.6,0,0,0,14.2,24h.4a1.6,1.6,0,0,0,1.5-1.3l.9-4.5h5.4A1.6,1.6,0,0,0,24,16.6,1.6,1.6,0,0,0,22.4,15.1Zm-14.1,0L9.6,8.9h6.1l-1.3,6.2Z"></path></svg><span>Vue.js</span></div><div class="sc-kDTinF cfFZTJ"><div class="sc-iqseJM jMkJCa"><span class="sc-crHmcD dkQbpU"><img src="https://cdn.image.st-hatena.com/image/square/45d1011b53d94c1cc8718fd00e0703a470acbffe/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F116452185%2F1709875045975391" alt=""/></span><span class="sc-crHmcD dkQbpU"><img src="https://cdn.image.st-hatena.com/image/square/62e56115d98aae6f7422e745bea7e6f50eb94f56/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F357526%2F1676949205740532" alt=""/></span><span class="sc-crHmcD dkQbpU"><img src="https://cdn.image.st-hatena.com/image/square/a7f85092b3ca02744d64ef68c86608749abf42ed/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F158588119%2F1648447825345761" alt=""/></span><span class="sc-crHmcD dkQbpU"><img src="https://cdn.image.st-hatena.com/image/square/8acad1a68c2eb9e34440928b3cd212db23fdccae/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F159716085%2F1734941471102498" alt=""/></span></div><a href="https://blog.hatena.ne.jp/my/edit?fill_tag=Vue.js" class="sc-hKwDye sc-eCImPb hVvGed">このタグでブログを書く</a></div></div><div class="sc-pVTFL LiGyC"><div><a href="#tag-body" selected="" class="sc-jrQzAO YnERV">言葉の解説</a></div><div><a href="#hot-topics" class="sc-jrQzAO dlNnRT">ネットで話題</a></div><div><a href="#related-blog" class="sc-jrQzAO dlNnRT">関連ブログ</a></div></div></div><div class="sc-jQrDum gKiXsd"><div class="sc-fvxzrP jDQHrM"><div class="sc-dtMgUX bmPyql"><div id="tag-body"><div class="sc-dlVxhl fXxvup"><div class="sc-kfPuZi hVrOKL"><header class="sc-fKVqWL bDsMXk"><div class="sc-bBHxTw fbwRLI"><h1>Vue.js</h1></div></header></div></div><div class="sc-iJKOTD iUlhMW"><details><summary><svg width="16" height="16" viewBox="0 0 24 24" class="sc-bdvvtL lkjvRt"><path fill="#6B7377" d="M13.2,7a1.2,1.2,0,0,1-2.4,0,1.2,1.2,0,1,1,2.4,0ZM24,12A12,12,0,1,1,12,0,12,12,0,0,1,24,12Zm-2,0A10,10,0,1,0,12,22,10,10,0,0,0,22,12ZM9,10v2h2v6h2V10Z"></path></svg><span>このタグの解説について</span></summary>この解説文は、<a href="https://staff.hatenablog.com/entry/2019/06/20/153000">すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集</a>した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、<a href="https://www.hatena.ne.jp/faq/q/blog#contact">お問い合わせフォーム</a>よりご連絡ください。</details></div></div></div><div></div><div class="sc-cZMNgc fWpXUO"><h2 id="related-blog">関連ブログ</h2></div><div class="sc-hUpaCq eTGxBZ"><div class="sc-gSQFLo gtijWP"><a href="https://aya-cat-g-tech.hatenadiary.jp/" class="sc-jgrJph chuemY"><img src="https://cdn.image.st-hatena.com/image/square/45d1011b53d94c1cc8718fd00e0703a470acbffe/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F116452185%2F1709875045975391" alt=""/></a><div class="sc-lbhJGD jiSLiQ"><a href="https://aya-cat-g-tech.hatenadiary.jp/" class="sc-iNGGcK dCOBQS">のこのこかずのこ</a>•<a href="https://aya-cat-g-tech.hatenadiary.jp/entry/2025/02/12/171853" class="sc-jeraig cHHEBX">6日前</a></div></div><a href="https://aya-cat-g-tech.hatenadiary.jp/entry/2025/02/12/171853" class="sc-eJwWfJ iGwSLi"><h3 class="sc-nVkyK eKvbKi">半年ぶりに仕事復帰したらVue Devtoolsが使えなくなってた</h3><div class="sc-ehCJOs fvupeU"><img src="https://cdn.image.st-hatena.com/image/scale/4cd7b0ce6f9084df3e106fdabd3c78a80b372ced/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F3257eda435a4d26ed1d71e08caaa42260b2ef002%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fs%252Fsanjyuku%252F20250212%252F20250212165922.png" alt=""/></div><div class="sc-hiwPVj cSVtPS"><p>約半年ほど仕事を休職していまして、最近元の職場に復帰しました！✨ すごく久しぶりに仕事のプロジェクトを立ち上げていつも通りChromeからのVue Devtoolsを使おうとしたら以下のメッセージが… Migration Tips Vue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work. The legacy version that supports both Vue 2 and Vue 3 has been moved to here, please install and…</p></div></a><div class="sc-lcepkR bdhVtG"><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/Vue.js">#Vue.js</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/%E6%8A%80%E8%A1%93%E3%83%A1%E3%83%A2">#技術メモ</a></span></div></div><div id="hot-topics"><div><div class="sc-cidDSM cNZxev"><h2 class="sc-jcFjpl iPveZk">ネットで話題<a href="https://help.hatenablog.com/entry/hatenabookmark" aria-label="はてなブックマークとは"><svg width="16" height="16" viewBox="0 0 24 24" class="sc-bdvvtL lkjvRt"><path fill="#6B7377" d="M12,2A10,10,0,1,1,2,12,10,10,0,0,1,12,2Zm0-2A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm1.2,17A1.2,1.2,0,1,1,12,15.8,1.2,1.2,0,0,1,13.2,17ZM14.6,7a3.6,3.6,0,0,0-2.5-1C9.9,6,8.5,7.6,8.5,10h2c0-1.5.8-2,1.6-2a1.2,1.2,0,0,1,1.3,1.2c.1.9-.4,1.3-.9,1.8A3.6,3.6,0,0,0,11,14.5h2a2.8,2.8,0,0,1,1-2.2,4.5,4.5,0,0,0,1.5-3A3.2,3.2,0,0,0,14.6,7Z"></path></svg></a></h2><a href="https://b.hatena.ne.jp/search/title?sort=popular&q=Vue.js" class="sc-caiLqq hRgjVf"><svg width="16" height="16" viewBox="0 0 24 24" class="sc-bdvvtL lkjvRt"><path fill="#6B7377" d="M21,13V23H0V4H12V6H2V21H19V13ZM24,1H13l4,4-6.9,7.1,2.8,2.8,7-7.1L24,12Z"></path></svg><span>もっと見る</span></a></div></div><div class="sc-iUKqMP dIowcK"><div class="sc-iAKWXU iFOrlO"><div class="sc-efQSVx kdrjec"><a href="https://b.hatena.ne.jp/entry/s/iwasiman.hatenablog.com/entry/2018/04/23/200000" class="sc-cTAqQK eKDsnJ"><strong>823</strong>ブックマーク</a><a href="https://iwasiman.hatenablog.com/entry/2018/04/23/200000" class="sc-jObWnj cGnNsn">【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口</a><a href="https://iwasiman.hatenablog.com/entry/2018/04/23/200000" class="sc-dPiLbb dcDqJM"><img src="https://cdn.image.st-hatena.com/image/square/804094b1ac1a2661e300931b369fafbfe2f9e75b/height=200;version=1;width=200/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F5b07f598974c4c38097f7f766576b1481b784f3f%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fi%252Fiwasiman%252F20200802%252F20200802210253.png" alt=""/></a><a href="https://b.hatena.ne.jp/site/iwasiman.hatenablog.com/" class="sc-cNKqjZ exscr"><span class="sc-AjmGg ckjIGV"><img src="https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fiwasiman.hatenablog.com%2Fentry%2F2018%2F04%2F23%2F200000" width="16px" height="16px" alt=""/>iwasiman.hatenablog.com</span></a></div></div><div class="sc-iAKWXU iFOrlO"><div class="sc-efQSVx kdrjec"><a href="https://b.hatena.ne.jp/entry/s/postd.cc/why-we-chose-vuejs-over-react/" class="sc-cTAqQK eKDsnJ"><strong>787</strong>ブックマーク</a><a href="https://postd.cc/why-we-chose-vuejs-over-react/" class="sc-jObWnj cGnNsn">私たちはなぜReactではなくVue.jsを選んだのか | POSTD</a><a href="https://postd.cc/why-we-chose-vuejs-over-react/" class="sc-dPiLbb dcDqJM"><img src="https://cdn.image.st-hatena.com/image/square/5516cd2cdeb71ff69b4b34a3ef26c4d76b2f6511/height=200;version=1;width=200/https%3A%2F%2Fpostd.cc%2Fwp%2Fwp-content%2Fuploads%2F2016%2F12%2Fwhy-we-chose-vuejs-over-react-282-compressor-500x248-1.png" alt=""/></a><a href="https://b.hatena.ne.jp/site/postd.cc/" class="sc-cNKqjZ exscr"><span class="sc-AjmGg ckjIGV"><img src="https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fpostd.cc%2Fwhy-we-chose-vuejs-over-react%2F" width="16px" height="16px" alt=""/>postd.cc</span></a></div></div><div class="sc-iAKWXU iFOrlO"><div class="sc-efQSVx kdrjec"><a href="https://b.hatena.ne.jp/entry/s/en-ambi.com/itcontents/entry/2018/09/25/110000/" class="sc-cTAqQK eKDsnJ"><strong>586</strong>ブックマーク</a><a href="https://en-ambi.com/itcontents/entry/2018/09/25/110000/" class="sc-jObWnj cGnNsn">レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 #エンジニアHub - エンジニアHub｜若手Webエンジニアのキャリアを考える！</a><a href="https://en-ambi.com/itcontents/entry/2018/09/25/110000/" class="sc-dPiLbb dcDqJM"><img src="https://cdn.image.st-hatena.com/image/square/d9f986bb57adfc4f7964fced0de292e82fbc4512/height=200;version=1;width=200/https%3A%2F%2Fen-ambi.com%2FimageFile%2Fuser%2Fglobal%2Fogp_01.png" alt=""/></a><a href="https://b.hatena.ne.jp/site/en-ambi.com/" class="sc-cNKqjZ exscr"><span class="sc-AjmGg ckjIGV"><img src="https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fen-ambi.com%2Fitcontents%2Fentry%2F2018%2F09%2F25%2F110000%2F" width="16px" height="16px" alt=""/>en-ambi.com</span></a></div></div><div class="sc-iAKWXU iFOrlO"><div class="sc-efQSVx kdrjec"><a href="https://b.hatena.ne.jp/entry/s/blog.hde.co.jp/entry/2018/03/05/130121" class="sc-cTAqQK eKDsnJ"><strong>567</strong>ブックマーク</a><a href="https://blog.hde.co.jp/entry/2018/03/05/130121" class="sc-jObWnj cGnNsn">Vue.js ではじめるシングルページアプリケーションの開発 - HDE BLOG</a><a href="https://blog.hde.co.jp/entry/2018/03/05/130121" class="sc-dPiLbb dcDqJM"><img src="https://cdn.image.st-hatena.com/image/square/32b8799f0b033e2d7f4058b3425ad8de2fcce002/height=200;version=1;width=200/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Feda391486ea20771b4836b8e1d7196696f092a8c%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fg%252Fgorotan35%252F20180228%252F20180228183927.png" alt=""/></a><a href="https://b.hatena.ne.jp/site/blog.hde.co.jp/" class="sc-cNKqjZ exscr"><span class="sc-AjmGg ckjIGV"><img src="https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fblog.hde.co.jp%2Fentry%2F2018%2F03%2F05%2F130121" width="16px" height="16px" alt=""/>blog.hde.co.jp</span></a></div></div><div class="sc-iAKWXU iFOrlO"><div class="sc-efQSVx kdrjec"><a href="https://b.hatena.ne.jp/entry/s/kakakakakku.hatenablog.com/entry/2018/02/18/113426" class="sc-cTAqQK eKDsnJ"><strong>528</strong>ブックマーク</a><a href="https://kakakakakku.hatenablog.com/entry/2018/02/18/113426" class="sc-jObWnj cGnNsn">Vue.js の基礎を学ぶために LearnCode.academy の学習動画を活用したら最高だった - kakakakakku blog</a><a href="https://kakakakakku.hatenablog.com/entry/2018/02/18/113426" class="sc-dPiLbb dcDqJM"><img src="https://cdn.image.st-hatena.com/image/square/95e7f7c3ee7e6a5a72f4ec88c48283eaaf7dbb49/height=200;version=1;width=200/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F10ca7adb8b74ee7b0c687791db90bac4c81e22b2%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fk%252Fkakku22%252F20180218%252F20180218050947.png" alt=""/></a><a href="https://b.hatena.ne.jp/site/kakakakakku.hatenablog.com/" class="sc-cNKqjZ exscr"><span class="sc-AjmGg ckjIGV"><img src="https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fkakakakakku.hatenablog.com%2Fentry%2F2018%2F02%2F18%2F113426" width="16px" height="16px" alt=""/>kakakakakku.hatenablog.com</span></a></div></div><div class="sc-iAKWXU iFOrlO"><div class="sc-efQSVx kdrjec"><a href="https://b.hatena.ne.jp/entry/s/qiita.com/s-yoshiki/items/51150b37153b41df1da6" class="sc-cTAqQK eKDsnJ"><strong>524</strong>ブックマーク</a><a href="https://qiita.com/s-yoshiki/items/51150b37153b41df1da6" class="sc-jObWnj cGnNsn">Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス - Qiita</a><a href="https://qiita.com/s-yoshiki/items/51150b37153b41df1da6" class="sc-dPiLbb dcDqJM"><img src="https://cdn.image.st-hatena.com/image/square/f4db25cc2569f4f57d1b696a355503b6955e5cfe/height=200;version=1;width=200/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VnVlLmpzJUUzJTgxJUE3JUU0JUJEJTlDJUU2JTg4JTkwJUUzJTgxJTk1JUUzJTgyJThDJUUzJTgxJTlGJUUzJTgwJTgxJUUzJTgxJUExJUUzJTgyJTg3JUUzJTgxJUEzJUUzJTgxJUE4JUU5JTlEJUEyJUU3JTk5JUJEJUUzJTgxJThGJUUzJTgxJUE2JUU1JUJEJUI5JUU3JUFCJThCJUUzJTgxJUExJUUzJTgxJTlEJUUzJTgxJTg2JUUzJTgxJUFBJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkzJUUzJTgyJUI5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0yNjdlM2MwMDlkNzNkYTIzZTJiNTg0ZjcwNzgyMjk0YQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzLXlvc2hpa2kmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTFhZGM3OWY5NTc2NDAyMzRmOGI1ZGE3MDA5N2IxMWEy%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D1d21d90cde2d34a2b2645f0ed07cb10f" alt=""/></a><a href="https://b.hatena.ne.jp/site/qiita.com/s-yoshiki" class="sc-cNKqjZ exscr"><span class="sc-AjmGg ckjIGV"><img src="https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fqiita.com%2Fs-yoshiki%2Fitems%2F51150b37153b41df1da6" width="16px" height="16px" alt=""/>qiita.com</span></a></div></div><div class="sc-iAKWXU iFOrlO"><div class="sc-efQSVx kdrjec"><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/vue-and-react-developer-roadmap.html" class="sc-cTAqQK eKDsnJ"><strong>512</strong>ブックマーク</a><a href="https://coliss.com/articles/build-websites/operation/javascript/vue-and-react-developer-roadmap.html" class="sc-jObWnj cGnNsn">Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ</a><a href="https://coliss.com/articles/build-websites/operation/javascript/vue-and-react-developer-roadmap.html" class="sc-dPiLbb dcDqJM"><img src="https://cdn.image.st-hatena.com/image/square/75e841ff25576646c033425de8e3651c74cbb58c/height=200;version=1;width=200/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080602-.png" alt=""/></a><a href="https://b.hatena.ne.jp/site/coliss.com/" class="sc-cNKqjZ exscr"><span class="sc-AjmGg ckjIGV"><img src="https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fvue-and-react-developer-roadmap.html" width="16px" height="16px" alt=""/>coliss.com</span></a></div></div><div class="sc-iAKWXU iFOrlO"><div class="sc-efQSVx kdrjec"><a href="https://b.hatena.ne.jp/entry/s/qiita.com/fruitriin/items/3249bb24d60932bb42ee" class="sc-cTAqQK eKDsnJ"><strong>509</strong>ブックマーク</a><a href="https://qiita.com/fruitriin/items/3249bb24d60932bb42ee" class="sc-jObWnj cGnNsn">今からVue.jsを始める人のための「知るのを後回しにしてよい」n個のこと - Qiita</a><a href="https://qiita.com/fruitriin/items/3249bb24d60932bb42ee" class="sc-dPiLbb dcDqJM"><img src="https://cdn.image.st-hatena.com/image/square/788f3acaba22d8e72afce542e01290b0174f3925/height=200;version=1;width=200/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU0JUJCJThBJUUzJTgxJThCJUUzJTgyJTg5VnVlLmpzJUUzJTgyJTkyJUU1JUE3JThCJUUzJTgyJTgxJUUzJTgyJThCJUU0JUJBJUJBJUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFJUUzJTgwJThDJUU3JTlGJUE1JUUzJTgyJThCJUUzJTgxJUFFJUUzJTgyJTkyJUU1JUJFJThDJUU1JTlCJTlFJUUzJTgxJTk3JUUzJTgxJUFCJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgyJTg4JUUzJTgxJTg0JUUzJTgwJThEbiVFNSU4MCU4QiVFMyU4MSVBRSVFMyU4MSU5MyVFMyU4MSVBOCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MjQxOGU1OWZiMDBmZDAwYmQ5OTViZTg4ZDc3ODhlOTU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBmcnVpdHJpaW4mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTg2ODIyNjE3ODY1MjYwMTIxYjliOTFiNTFiOTkyMGM1%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44K544K_44OH44Kj44K544OI%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Df579f809b83577c35613807230cee1c4" alt=""/></a><a href="https://b.hatena.ne.jp/site/qiita.com/fruitriin" class="sc-cNKqjZ exscr"><span class="sc-AjmGg ckjIGV"><img src="https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fqiita.com%2Ffruitriin%2Fitems%2F3249bb24d60932bb42ee" width="16px" height="16px" alt=""/>qiita.com</span></a></div></div><div class="sc-iAKWXU iFOrlO"><div class="sc-efQSVx kdrjec"><a href="https://b.hatena.ne.jp/entry/s/blog.nagisa-inc.jp/archives/2980" class="sc-cTAqQK eKDsnJ"><strong>500</strong>ブックマーク</a><a href="https://blog.nagisa-inc.jp/archives/2980" class="sc-jObWnj cGnNsn">なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 | Nagisaのすゝめ</a><a href="https://blog.nagisa-inc.jp/archives/2980" class="sc-dPiLbb dcDqJM"><img src="https://cdn.image.st-hatena.com/image/square/f08099a4ef003ad92a5a5003b335b89db5d8c62d/height=200;version=1;width=200/https%3A%2F%2Fblog.nagisa-inc.jp%2Fwp-content%2Fuploads%2F2018%2F01%2Fvuejs-1024x512.png" alt=""/></a><a href="https://b.hatena.ne.jp/site/blog.nagisa-inc.jp/" class="sc-cNKqjZ exscr"><span class="sc-AjmGg ckjIGV"><img src="https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fblog.nagisa-inc.jp%2Farchives%2F2980" width="16px" height="16px" alt=""/>blog.nagisa-inc.jp</span></a></div></div></div></div><div></div><div class="sc-cZMNgc fWpXUO"><div><h2>関連ブログ</h2></div></div><div><div><div class="sc-hUpaCq eTGxBZ"><div class="sc-gSQFLo gtijWP"><a href="https://tech.visasq.com/" class="sc-jgrJph chuemY"><img src="https://cdn.image.st-hatena.com/image/square/62e56115d98aae6f7422e745bea7e6f50eb94f56/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F357526%2F1676949205740532" alt=""/></a><div class="sc-lbhJGD jiSLiQ"><a href="https://tech.visasq.com/" class="sc-iNGGcK dCOBQS">VISASQ Dev Blog</a>•<a href="https://tech.visasq.com/vue-code-reading" class="sc-jeraig cHHEBX">12日前</a></div></div><a href="https://tech.visasq.com/vue-code-reading" class="sc-eJwWfJ iGwSLi"><h3 class="sc-nVkyK eKvbKi">Vue.js のソースコードを読んでみよう（ref/reactive 編）</h3><div class="sc-ehCJOs fvupeU"><img src="https://cdn.image.st-hatena.com/image/scale/e67ec7af7c14e9385b5cf366ea89dc87fb2c0020/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fc1b539e3983927af6ee1cffd45aded31443398b8%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fn%252Fnakahara-visasq%252F20250205%252F20250205193212.png" alt=""/></div><div class="sc-hiwPVj cSVtPS"><p>はじめにこんにちは、エキスパート/lite 開発の中原です！ビザスクでは主に Vue.js を使用してフロントエンド開発を行っています。みなさんは Vue.js がどのように実装されているか意識したことはありますでしょうか？ライブラリを使う時その裏でどんな処理がされているのか正しく理解していないと、意図した挙動をしてくれなかったり、思わぬところでバグが発生することがあります。今回は Vue.js のリアクティブ機能を実現する ref() と reactive() に焦点を当て、実際のソースコードを読みながら内部動作を理解していきたいと思います。 ref() まずは ref() のコー…</p></div></a><div class="sc-lcepkR bdhVtG"><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/Vue.js">#Vue.js</a></span></div></div></div><div class="sc-hUpaCq eTGxBZ"><div class="sc-gSQFLo gtijWP"><a href="https://techblog.olta.co.jp/" class="sc-jgrJph chuemY"><img src="https://cdn.image.st-hatena.com/image/square/a7f85092b3ca02744d64ef68c86608749abf42ed/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F158588119%2F1648447825345761" alt=""/></a><div class="sc-lbhJGD jiSLiQ"><a href="https://techblog.olta.co.jp/" class="sc-iNGGcK dCOBQS">OLTA TECH BLOG</a>•<a href="https://techblog.olta.co.jp/entry/2025/02/06/091200" class="sc-jeraig cHHEBX">12日前</a></div></div><a href="https://techblog.olta.co.jp/entry/2025/02/06/091200" class="sc-eJwWfJ iGwSLi"><h3 class="sc-nVkyK eKvbKi">INVOYフロントエンドにおけるテスト導入と方針</h3><div class="sc-ehCJOs fvupeU"><img src="https://cdn.image.st-hatena.com/image/scale/d2e2d9933a44bd7952937e2c51816ab390b003c8/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F2ddc72c414e5a945f789f1eb1024f0ddd4e6337c%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fo%252Foltadev%252F20250205%252F20250205150648.png" alt=""/></div><div class="sc-hiwPVj cSVtPS"><p>概要対象読者方針コンポーネントのテスト方針テストコード設計 setup 関数を用いたdomの取得の汎用化 API mockの設計終わりに参考文献概要 OLTAのINVOYでフロントエンドエンジニアを担当している小林です. INVOYは、請求書発行や共有に加え受取請求書の自動データ化やカード決済機能などを提供するサービスです．日々機能が追加される中で、ユーザーに安定したサービスを提供し続けるためには、不具合を防ぐためのテストが不可欠です．そこでINVOYのフロントエンドでは、E2Eテスト自動化ツールであるAutifyを導入し、テストを実施しています．これにより、大きな不具合もなくサ…</p></div></a><div class="sc-lcepkR bdhVtG"><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%86%E3%82%B9%E3%83%88">#フロントエンドテスト</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/Nuxt.js">#Nuxt.js</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/Vue.js">#Vue.js</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/%E3%83%86%E3%82%B9%E3%83%88%E6%88%A6%E7%95%A5">#テスト戦略</a></span></div></div><div class="sc-hUpaCq eTGxBZ"><div class="sc-gSQFLo gtijWP"><a href="https://sh0wtana.hatenablog.com/" class="sc-jgrJph chuemY"><img src="https://cdn.image.st-hatena.com/image/square/8acad1a68c2eb9e34440928b3cd212db23fdccae/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F159716085%2F1734941471102498" alt=""/></a><div class="sc-lbhJGD jiSLiQ"><a href="https://sh0wtana.hatenablog.com/" class="sc-iNGGcK dCOBQS">sh0wtana’s blog</a>•<a href="https://sh0wtana.hatenablog.com/entry/2024/12/17/174043" class="sc-jeraig cHHEBX">2ヶ月前</a></div></div><a href="https://sh0wtana.hatenablog.com/entry/2024/12/17/174043" class="sc-eJwWfJ iGwSLi"><h3 class="sc-nVkyK eKvbKi">Handsontable ライセンスキー設定手順「The license key for Handsontable is missing.」の解消方法</h3><div class="sc-ehCJOs fvupeU"><img src="https://cdn.image.st-hatena.com/image/scale/032fd2cdb9b7c08d445c5cc57bb491b705529ed8/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6802418398312129134%2F6802418398312351863%2F1734661921" alt=""/></div><div class="sc-hiwPVj cSVtPS"><p>問題の概要 Vue.js環境でHandsontableを使用しているアプリケーションで、開発環境のブラウザに以下のようなメッセージが表示されたので、解消方法を調査した。 The license key for Handsontable is missing. Use your purchased key to activate the product. Alternatively, you can activate Handsontable to use for non-commercial purposes by passing the key: 'non-commercial-and-ev…</p></div></a><div class="sc-lcepkR bdhVtG"><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/Vue.js">#Vue.js</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/HandsOnTable">#HandsOnTable</a></span></div></div><div class="sc-hUpaCq eTGxBZ"><div class="sc-gSQFLo gtijWP"><a href="https://product.plex.co.jp/" class="sc-jgrJph chuemY"><img src="https://cdn.image.st-hatena.com/image/square/4b3badc3599eb8f0ae18354525b75c70258a3321/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F158430914%2F1630558135756750" alt=""/></a><div class="sc-lbhJGD jiSLiQ"><a href="https://product.plex.co.jp/" class="sc-iNGGcK dCOBQS">PLEX Product Team Blog</a>•<a href="https://product.plex.co.jp/entry/rewrite-vuejs-v2-in-react" class="sc-jeraig cHHEBX">2ヶ月前</a></div></div><a href="https://product.plex.co.jp/entry/rewrite-vuejs-v2-in-react" class="sc-eJwWfJ iGwSLi"><h3 class="sc-nVkyK eKvbKi">ReactによるVue.js v2プロジェクトのリプレイス〜基本API からライフサイクルまで〜</h3><div class="sc-ehCJOs fvupeU"><img src="https://cdn.image.st-hatena.com/image/scale/125099cf64c3a4e92ef922e1e3ec81b676480cc8/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F23111e4630cd489b54d6ea59eb1952508eddafc9%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fo%252Fodhryk%252F20241211%252F20241211172040.png" alt=""/></div><div class="sc-hiwPVj cSVtPS"><p>はじめにこの記事はPLEX Advent Calendar 2024の 13 日目の記事です。 Vue.js v2 のサポートが 2023 年 12 月 31 日に終了した事もあり、Vue.js/Nuxt v2のプロダクトをReact/Next.jsへリプレイスする作業を行いました。その際に Vue.js v2 と React の記法の違いについて少し戸惑うところがあったため、本記事では、Vue.js v2 の基本的な API（data、methods、computedなど）を React ではどのように置き換えるかについて、コード例を交えて解説します。主要な API の置き換え方法 …</p></div></a><div class="sc-lcepkR bdhVtG"><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/Vue.js">#Vue.js</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/react">#react</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89">#フロントエンド</a></span></div></div><div class="sc-hUpaCq eTGxBZ"><div class="sc-gSQFLo gtijWP"><a href="https://creators.bengo4.com/" class="sc-jgrJph chuemY"><img src="https://cdn.image.st-hatena.com/image/square/c8f8a42752d790c627840d5e05731eb476348993/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F158586092%2F1643772498893162" alt=""/></a><div class="sc-lbhJGD jiSLiQ"><a href="https://creators.bengo4.com/" class="sc-iNGGcK dCOBQS">弁護士ドットコム株式会社 Creators’ blog</a>•<a href="https://creators.bengo4.com/entry/2024/12/12/000000" class="sc-jeraig cHHEBX">2ヶ月前</a></div></div><a href="https://creators.bengo4.com/entry/2024/12/12/000000" class="sc-eJwWfJ iGwSLi"><h3 class="sc-nVkyK eKvbKi">クラウドサインの開発チームに加わって最初の 1 年を振り返る</h3><div class="sc-ehCJOs fvupeU"><img src="https://cdn.image.st-hatena.com/image/scale/34bc4d3da4fe8da6dfd2dc46c9a79936253ac462/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F5e4edc11d7496c34696bc4675f06662ee50a8f89%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fb%252Fbengo4%252F20241212%252F20241212000020.png" alt=""/></div><div class="sc-hiwPVj cSVtPS"><p>この記事は弁護士ドットコム Advent Calendar 2024 12日目の記事です！クラウドサインのフロントエンドエンジニアのツノ(𝕏@2nofa11)です。2024 年 3 月に入社し、12 月で 10 ヶ月が経ちます。少し早いですが、クラウドサインのエンジニアとしての 1 年を YWT（やったこと、わかったこと、次にやること）手法で振り返ってみます。ちなみに、入社 1 ヶ月後の振り返りについては過去に記事を執筆していますので、よろしければ合わせてご覧ください。 creators.bengo4.com 2024 年の振り返り転職は今回で 2 回目ですが、クラウドサインでの 1…</p></div></a><div class="sc-lcepkR bdhVtG"><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/vuefes">#vuefes</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/VueFesJapan">#VueFesJapan</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/%E3%82%AB%E3%83%B3%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9">#カンファレンス</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/tech">#tech</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2">#エンジニア</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/Vue.js">#Vue.js</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E9%96%8B%E7%99%BA">#フロントエンド開発</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/%E3%83%81%E3%83%BC%E3%83%A0%E9%96%8B%E7%99%BA">#チーム開発</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/%E6%8A%80%E8%A1%93%E6%9B%B8%E3%83%BB%E6%9B%B8%E7%B1%8D">#技術書・書籍</a></span></div></div><div><div class="sc-hUpaCq eTGxBZ"><div class="sc-gSQFLo gtijWP"><a href="https://tech.makeshop.co.jp/" class="sc-jgrJph chuemY"><img src="https://cdn.image.st-hatena.com/image/square/1c7712fa7264b06bc3754b7a8c20d2e84c1f11c4/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F159371397%2F1706754115102452" alt=""/></a><div class="sc-lbhJGD jiSLiQ"><a href="https://tech.makeshop.co.jp/" class="sc-iNGGcK dCOBQS">GMO MAKESHOP engineer blog</a>•<a href="https://tech.makeshop.co.jp/entry/2024/12/11/170554" class="sc-jeraig cHHEBX">2ヶ月前</a></div></div><a href="https://tech.makeshop.co.jp/entry/2024/12/11/170554" class="sc-eJwWfJ iGwSLi"><h3 class="sc-nVkyK eKvbKi">アーキテクチャから刷新！柔軟なデザイン変更を可能にした新注文詳細</h3><div class="sc-ehCJOs fvupeU"><img src="https://cdn.image.st-hatena.com/image/scale/d76631b963632db1c7b28803a3d88ff7f50df0f1/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fogimage.blog.st-hatena.com%2F820878482941542758%2F6802418398307609689%2F1733904553" alt=""/></div><div class="sc-hiwPVj cSVtPS"><p>こんにちは。GMOメイクショップの黒木です。弊社の makeshop というサービスでは、2024年12月11日（水）に新管理画面の注文詳細のリニューアルを行いました。 www.magazine.makeshop.jp 新注文詳細は、アーキテクチャから見直して、将来的なデザイン変更にも柔軟に対応できるような設計を目指しました。この記事では、そんな新注文詳細のアーキテクチャについて、詳しくご紹介します。旧注文画面の課題旧注文詳細の依存関係コンポーザブルの依存関係が強すぎた新注文詳細のアーキテクチャアーキテクチャを考える上で重視した点将来的なデザイン変更にも柔軟に対応できる構成 St…</p></div></a><div class="sc-lcepkR bdhVtG"><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/Vue.js">#Vue.js</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3">#アーキテクチャ</a></span></div></div></div><div class="sc-hUpaCq eTGxBZ"><div class="sc-gSQFLo gtijWP"><a href="https://tech.every.tv/" class="sc-jgrJph chuemY"><img src="https://cdn.image.st-hatena.com/image/square/7b8dd2352b5eedce1d9ce84f9eee9c4e2d40cf97/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F153346182%2F1638757420288629" alt=""/></a><div class="sc-lbhJGD jiSLiQ"><a href="https://tech.every.tv/" class="sc-iNGGcK dCOBQS">every Tech Blog</a>•<a href="https://tech.every.tv/entry/2024/12/02/124018" class="sc-jeraig cHHEBX">3ヶ月前</a></div></div><a href="https://tech.every.tv/entry/2024/12/02/124018" class="sc-eJwWfJ iGwSLi"><h3 class="sc-nVkyK eKvbKi">Pinia Colada入門：非同期処理をもっとスムーズに！</h3><div class="sc-ehCJOs fvupeU"><img src="https://cdn.image.st-hatena.com/image/scale/67ac647f14262387420007c2af8e6c56eae3ae7f/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F45d083e43c17b8805432a589c70281a2ea6ec5ba%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fn%252Fnaoki-haba%252F20241128%252F20241128131448.png" alt=""/></div><div class="sc-hiwPVj cSVtPS"><p>はじめに Pinia Colada とは非同期処理の課題 1. 冗長なコード 2. 状態管理の複雑さ 3. 効率的なデータフェッチング非同期処理における様々なアプローチ 1. Vue Promised 2. swrv 3. TanStack Query (Vue Query) Pinia Colada の優位性 Pinia Colada の基本的な使い方セットアップ基本的なデータ取得の例ポイント解説まとめはじめにこの記事は every Tech Blog Advent Calendar 2024 の2日目の記事です。はじめまして、エブリーの羽馬（@naoki_haba）です。…</p></div></a><div class="sc-lcepkR bdhVtG"><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/Pinia">#Pinia</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/Vue.js">#Vue.js</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/Web%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89">#Webフロントエンド</a></span></div></div><div class="sc-hUpaCq eTGxBZ"><div class="sc-gSQFLo gtijWP"><a href="https://tech.visasq.com/" class="sc-jgrJph chuemY"><img src="https://cdn.image.st-hatena.com/image/square/62e56115d98aae6f7422e745bea7e6f50eb94f56/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F357526%2F1676949205740532" alt=""/></a><div class="sc-lbhJGD jiSLiQ"><a href="https://tech.visasq.com/" class="sc-iNGGcK dCOBQS">VISASQ Dev Blog</a>•<a href="https://tech.visasq.com/vuefesjapan2024" class="sc-jeraig cHHEBX">4ヶ月前</a></div></div><a href="https://tech.visasq.com/vuefesjapan2024" class="sc-eJwWfJ iGwSLi"><h3 class="sc-nVkyK eKvbKi">Vue Fes Japan 2024 にゴールドスポンサーとして参加しました！</h3><div class="sc-ehCJOs fvupeU"><img src="https://cdn.image.st-hatena.com/image/scale/5639fef558ed186fbf1075bfca81e8ae95d8b68a/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F0b8c55e4712bc3d2dcd11ac36b301e1bc67f3599%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fm%252Fmacomaru-visasq%252F20241028%252F20241028123324.jpg" alt=""/></div><div class="sc-hiwPVj cSVtPS"><p>CEO室コミュニケーションデザイナーのmacoです。開発チームのメンバーと一緒に、Vue Fes Japan 2024 に参加しましたのでレポートします。 VueFes とは Vue Fes Japanは、JavaScriptフレームワークの代表格であるVue.jsに関する、日本最大級のカンファレンス。 Vue.js にまつわる知見をセッションから得たり、他の開発者と交流できる場となっています。今年はスタッフ含め国内外のVue.jsユーザー700名が一堂に会しました！ビザスクでは、プロダクトにVueやNuxtを使用しており、実際に業務で使用している開発メンバーと共に参加しました。（私…</p></div></a><div class="sc-lcepkR bdhVtG"><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/Vue%20Fes%20Japan%202024">#Vue Fes Japan 2024</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/Vue%20Fes">#Vue Fes</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/Vue.js">#Vue.js</a></span></div></div><div class="sc-hUpaCq eTGxBZ"><div class="sc-gSQFLo gtijWP"><a href="https://techblog.weeybrid.co.jp/" class="sc-jgrJph chuemY"><img src="https://cdn.image.st-hatena.com/image/square/abbd58b4803bf67c0b975752f6b67440a76cb589/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F159629456%2F1729568910560233" alt=""/></a><div class="sc-lbhJGD jiSLiQ"><a href="https://techblog.weeybrid.co.jp/" class="sc-iNGGcK dCOBQS">Weeybrid Tech Blog</a>•<a href="https://techblog.weeybrid.co.jp/entry/vue-fes-japan-2024" class="sc-jeraig cHHEBX">4ヶ月前</a></div></div><a href="https://techblog.weeybrid.co.jp/entry/vue-fes-japan-2024" class="sc-eJwWfJ iGwSLi"><h3 class="sc-nVkyK eKvbKi">Vue Fes Japan 2024にボランティアスタッフとして参加してきました</h3><div class="sc-ehCJOs fvupeU"><img src="https://cdn.image.st-hatena.com/image/scale/bd4f7705239052befa45857d775d814198bdb378/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F80a8a03ed1148e41e5961be22393fcac5eb467e4%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fw%252Fweeybrid%252F20241023%252F20241023133510.jpg" alt=""/></div><div class="sc-hiwPVj cSVtPS"><p>こんにちは、yukiminaです。普段はVue.jsを使用したWebシステムの開発を行っています。この度、日本最大級のVue.jsカンファレンス「Vue Fes Japan 2024」にボランティアスタッフとして初参加させていただきました！ Vue Fesとは Vue Fes Japanは、日本最大級のVue.jsカンファレンスです。 2018 年に誕生したこのカンファレンスは、文字通り Fes ＝お祭りのように Vue.js を共に盛り上げ、共に学び、そしてなによりも共に楽しむために誕生しました。国内外の著名スピーカーによるセッションの他、LT、初心者向けハンズオン、グッズ販売などのイベ…</p></div></a><div class="sc-lcepkR bdhVtG"><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/Vue.js">#Vue.js</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/VueFesJapan">#VueFesJapan</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/%E3%82%AB%E3%83%B3%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9">#カンファレンス</a></span><span class="sc-khQegj lltUDN"><a href="https://d.hatena.ne.jp/keyword/%E3%83%86%E3%83%83%E3%82%AF%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88">#テックイベント</a></span></div></div><div></div></div></div><div class="sc-fbyfCU jDxbCk"><div></div><footer class="sc-hBUSln khBKZC"><div class="sc-fotOHu erCtv"><ul itemscope="" itemType="http://schema.org/BreadcrumbList"><li itemscope="" itemProp="itemListElement" itemType="http://schema.org/ListItem"><a href="https://hatenablog.com/" itemProp="item"><span itemProp="name">はてなブログ</span></a><meta itemProp="position" content="1"/></li><li itemscope="" itemProp="itemListElement" itemType="http://schema.org/ListItem"><span>></span><span itemProp="name">未指定</span><meta itemProp="position" content="2"/></li><li itemscope="" itemProp="itemListElement" itemType="http://schema.org/ListItem"><span>></span><a href="https://d.hatena.ne.jp/keyword/Vue.js" itemProp="item"><span itemProp="name">Vue.js</span></a><meta itemProp="position" content="3"/></li></ul></div><ul class="sc-egiyK eLzidY"><li class="sc-bqiRlB hatryS"><a href="https://d.hatena.ne.jp/" class="sc-ksdxgE fOytDi">はてなブログタグとは</a></li><li class="sc-bqiRlB hatryS"><a href="https://help.hatenablog.com/" class="sc-ksdxgE fOytDi">ヘルプ</a></li><li class="sc-bqiRlB hatryS"><a href="https://staff.hatenablog.com/" class="sc-ksdxgE fOytDi">開発ブログ</a></li><li class="sc-bqiRlB hatryS"><a href="https://hatenablog.com/" class="sc-ksdxgE fOytDi">はてなブログトップ</a></li></ul><div class="sc-fFeiMQ bcqfTw">Copyright (C) 2001-2025 Hatena.</div></footer></div></div><div></div><div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"dataManager":"[]","props":{"pageProps":{},"apolloState":{"data":{"ROOT_QUERY":{"__typename":"Query","tag({\"name\":\"Vue.js\"})":{"__typename":"Tag","meanings({\"first\":5})":{"__typename":"MeaningConnection","nodes":[{"__typename":"Meaning","canBeIndexedBySearchEngine":true,"tagId":"13069280078465131890","revisions({\"first\":1})":{"__typename":"TagRevisionConnection","nodes":[{"__typename":"TagRevision","formattedBody({\"plainTextLength\":50})":{"__typename":"FormattedBody","HTML":"","Text":""}}]},"name":"Vue.js","furigana":"","genre":{"__typename":"Genre","name":"未指定","url":"/keywordlist?cname=%E6%9C%AA%E6%8C%87%E5%AE%9A"}}]},"hotArticles({\"first\":16})":{"__typename":"HotArticleConnection","nodes":[]},"taggedBlogArticlesRealResult({\"first\":10})":{"__typename":"TaggedBlogArticleConnection","nodes":[{"__typename":"BlogArticle","title":"半年ぶりに仕事復帰したらVue Devtoolsが使えなくなってた","thumbnail":{"__typename":"ResizeableImage","originalURL":"https://cdn.image.st-hatena.com/image/scale/3257eda435a4d26ed1d71e08caaa42260b2ef002/backend=imagemagick;version=1;width=1300/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fs%2Fsanjyuku%2F20250212%2F20250212165922.png","scaledImageURL({\"enlarge\":false,\"height\":220,\"width\":586})":"https://cdn.image.st-hatena.com/image/scale/4cd7b0ce6f9084df3e106fdabd3c78a80b372ced/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F3257eda435a4d26ed1d71e08caaa42260b2ef002%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fs%252Fsanjyuku%252F20250212%252F20250212165922.png"},"hasOwnThumbnail":true,"summary":"約半年ほど仕事を休職していまして、最近元の職場に復帰しました！✨ すごく久しぶりに仕事のプロジェクトを立ち上げていつも通りChromeからのVue Devtoolsを使おうとしたら以下のメッセージが… Migration Tips Vue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work. The legacy version that supports both Vue 2 and Vue 3 has been moved to here, please install and…","url":"https://aya-cat-g-tech.hatenadiary.jp/entry/2025/02/12/171853","tags":{"__typename":"AssociatedTagsConnection","nodes":[{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/Vue.js","name":"Vue.js"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/%E6%8A%80%E8%A1%93%E3%83%A1%E3%83%A2","name":"技術メモ"}]},"publishedAt":"2025-02-12T17:18:53+09:00","blog":{"__typename":"Blog","url":"https://aya-cat-g-tech.hatenadiary.jp/","title":"のこのこかずのこ","iconURL":"https://cdn.image.st-hatena.com/image/square/45d1011b53d94c1cc8718fd00e0703a470acbffe/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F116452185%2F1709875045975391"}},{"__typename":"BlogArticle","title":"Vue.js のソースコードを読んでみよう（ref/reactive 編）","thumbnail":{"__typename":"ResizeableImage","originalURL":"https://cdn.image.st-hatena.com/image/scale/c1b539e3983927af6ee1cffd45aded31443398b8/backend=imagemagick;version=1;width=1300/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fn%2Fnakahara-visasq%2F20250205%2F20250205193212.png","scaledImageURL({\"enlarge\":false,\"height\":220,\"width\":586})":"https://cdn.image.st-hatena.com/image/scale/e67ec7af7c14e9385b5cf366ea89dc87fb2c0020/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fc1b539e3983927af6ee1cffd45aded31443398b8%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fn%252Fnakahara-visasq%252F20250205%252F20250205193212.png"},"hasOwnThumbnail":true,"summary":"はじめにこんにちは、エキスパート/lite 開発の中原です！ビザスクでは主に Vue.js を使用してフロントエンド開発を行っています。みなさんは Vue.js がどのように実装されているか意識したことはありますでしょうか？ライブラリを使う時その裏でどんな処理がされているのか正しく理解していないと、意図した挙動をしてくれなかったり、思わぬところでバグが発生することがあります。今回は Vue.js のリアクティブ機能を実現する ref() と reactive() に焦点を当て、実際のソースコードを読みながら内部動作を理解していきたいと思います。 ref() まずは ref() のコー…","url":"https://tech.visasq.com/vue-code-reading","tags":{"__typename":"AssociatedTagsConnection","nodes":[{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/Vue.js","name":"Vue.js"}]},"publishedAt":"2025-02-06T18:50:20+09:00","blog":{"__typename":"Blog","url":"https://tech.visasq.com/","title":"VISASQ Dev Blog","iconURL":"https://cdn.image.st-hatena.com/image/square/62e56115d98aae6f7422e745bea7e6f50eb94f56/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F357526%2F1676949205740532"}},{"__typename":"BlogArticle","title":"INVOYフロントエンドにおけるテスト導入と方針","thumbnail":{"__typename":"ResizeableImage","originalURL":"https://cdn.image.st-hatena.com/image/scale/2ddc72c414e5a945f789f1eb1024f0ddd4e6337c/backend=imagemagick;version=1;width=1300/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fo%2Foltadev%2F20250205%2F20250205150648.png","scaledImageURL({\"enlarge\":false,\"height\":220,\"width\":586})":"https://cdn.image.st-hatena.com/image/scale/d2e2d9933a44bd7952937e2c51816ab390b003c8/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F2ddc72c414e5a945f789f1eb1024f0ddd4e6337c%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fo%252Foltadev%252F20250205%252F20250205150648.png"},"hasOwnThumbnail":true,"summary":"概要対象読者方針コンポーネントのテスト方針テストコード設計 setup 関数を用いたdomの取得の汎用化 API mockの設計終わりに参考文献概要 OLTAのINVOYでフロントエンドエンジニアを担当している小林です. INVOYは、請求書発行や共有に加え受取請求書の自動データ化やカード決済機能などを提供するサービスです．日々機能が追加される中で、ユーザーに安定したサービスを提供し続けるためには、不具合を防ぐためのテストが不可欠です．そこでINVOYのフロントエンドでは、E2Eテスト自動化ツールであるAutifyを導入し、テストを実施しています．これにより、大きな不具合もなくサ…","url":"https://techblog.olta.co.jp/entry/2025/02/06/091200","tags":{"__typename":"AssociatedTagsConnection","nodes":[{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%86%E3%82%B9%E3%83%88","name":"フロントエンドテスト"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/Nuxt.js","name":"Nuxt.js"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/Vue.js","name":"Vue.js"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/%E3%83%86%E3%82%B9%E3%83%88%E6%88%A6%E7%95%A5","name":"テスト戦略"}]},"publishedAt":"2025-02-06T09:12:00+09:00","blog":{"__typename":"Blog","url":"https://techblog.olta.co.jp/","title":"OLTA TECH BLOG","iconURL":"https://cdn.image.st-hatena.com/image/square/a7f85092b3ca02744d64ef68c86608749abf42ed/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F158588119%2F1648447825345761"}},{"__typename":"BlogArticle","title":"Handsontable ライセンスキー設定手順「The license key for Handsontable is missing.」の解消方法","thumbnail":{"__typename":"ResizeableImage","originalURL":"https://ogimage.blog.st-hatena.com/6802418398312129134/6802418398312351863/1734661921","scaledImageURL({\"enlarge\":false,\"height\":220,\"width\":586})":"https://cdn.image.st-hatena.com/image/scale/032fd2cdb9b7c08d445c5cc57bb491b705529ed8/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6802418398312129134%2F6802418398312351863%2F1734661921"},"hasOwnThumbnail":true,"summary":"問題の概要 Vue.js環境でHandsontableを使用しているアプリケーションで、開発環境のブラウザに以下のようなメッセージが表示されたので、解消方法を調査した。 The license key for Handsontable is missing. Use your purchased key to activate the product. Alternatively, you can activate Handsontable to use for non-commercial purposes by passing the key: 'non-commercial-and-ev…","url":"https://sh0wtana.hatenablog.com/entry/2024/12/17/174043","tags":{"__typename":"AssociatedTagsConnection","nodes":[{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/Vue.js","name":"Vue.js"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/HandsOnTable","name":"HandsOnTable"}]},"publishedAt":"2024-12-17T17:40:43+09:00","blog":{"__typename":"Blog","url":"https://sh0wtana.hatenablog.com/","title":"sh0wtana’s blog","iconURL":"https://cdn.image.st-hatena.com/image/square/8acad1a68c2eb9e34440928b3cd212db23fdccae/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F159716085%2F1734941471102498"}},{"__typename":"BlogArticle","title":"ReactによるVue.js v2プロジェクトのリプレイス〜基本API からライフサイクルまで〜","thumbnail":{"__typename":"ResizeableImage","originalURL":"https://cdn.image.st-hatena.com/image/scale/23111e4630cd489b54d6ea59eb1952508eddafc9/backend=imagemagick;version=1;width=1300/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fo%2Fodhryk%2F20241211%2F20241211172040.png","scaledImageURL({\"enlarge\":false,\"height\":220,\"width\":586})":"https://cdn.image.st-hatena.com/image/scale/125099cf64c3a4e92ef922e1e3ec81b676480cc8/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F23111e4630cd489b54d6ea59eb1952508eddafc9%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fo%252Fodhryk%252F20241211%252F20241211172040.png"},"hasOwnThumbnail":true,"summary":"はじめにこの記事はPLEX Advent Calendar 2024の 13 日目の記事です。 Vue.js v2 のサポートが 2023 年 12 月 31 日に終了した事もあり、Vue.js/Nuxt v2のプロダクトをReact/Next.jsへリプレイスする作業を行いました。その際に Vue.js v2 と React の記法の違いについて少し戸惑うところがあったため、本記事では、Vue.js v2 の基本的な API（data、methods、computedなど）を React ではどのように置き換えるかについて、コード例を交えて解説します。主要な API の置き換え方法 …","url":"https://product.plex.co.jp/entry/rewrite-vuejs-v2-in-react","tags":{"__typename":"AssociatedTagsConnection","nodes":[{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/Vue.js","name":"Vue.js"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/react","name":"react"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89","name":"フロントエンド"}]},"publishedAt":"2024-12-13T10:00:00+09:00","blog":{"__typename":"Blog","url":"https://product.plex.co.jp/","title":"PLEX Product Team Blog","iconURL":"https://cdn.image.st-hatena.com/image/square/4b3badc3599eb8f0ae18354525b75c70258a3321/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F158430914%2F1630558135756750"}},{"__typename":"BlogArticle","title":"クラウドサインの開発チームに加わって最初の 1 年を振り返る","thumbnail":{"__typename":"ResizeableImage","originalURL":"https://cdn.image.st-hatena.com/image/scale/5e4edc11d7496c34696bc4675f06662ee50a8f89/backend=imagemagick;version=1;width=1300/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbengo4%2F20241212%2F20241212000020.png","scaledImageURL({\"enlarge\":false,\"height\":220,\"width\":586})":"https://cdn.image.st-hatena.com/image/scale/34bc4d3da4fe8da6dfd2dc46c9a79936253ac462/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F5e4edc11d7496c34696bc4675f06662ee50a8f89%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fb%252Fbengo4%252F20241212%252F20241212000020.png"},"hasOwnThumbnail":true,"summary":"この記事は弁護士ドットコム Advent Calendar 2024 12日目の記事です！クラウドサインのフロントエンドエンジニアのツノ(𝕏@2nofa11)です。2024 年 3 月に入社し、12 月で 10 ヶ月が経ちます。少し早いですが、クラウドサインのエンジニアとしての 1 年を YWT（やったこと、わかったこと、次にやること）手法で振り返ってみます。ちなみに、入社 1 ヶ月後の振り返りについては過去に記事を執筆していますので、よろしければ合わせてご覧ください。 creators.bengo4.com 2024 年の振り返り転職は今回で 2 回目ですが、クラウドサインでの 1…","url":"https://creators.bengo4.com/entry/2024/12/12/000000","tags":{"__typename":"AssociatedTagsConnection","nodes":[{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/vuefes","name":"vuefes"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/VueFesJapan","name":"VueFesJapan"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/%E3%82%AB%E3%83%B3%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9","name":"カンファレンス"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/tech","name":"tech"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2","name":"エンジニア"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/Vue.js","name":"Vue.js"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E9%96%8B%E7%99%BA","name":"フロントエンド開発"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/%E3%83%81%E3%83%BC%E3%83%A0%E9%96%8B%E7%99%BA","name":"チーム開発"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/%E6%8A%80%E8%A1%93%E6%9B%B8%E3%83%BB%E6%9B%B8%E7%B1%8D","name":"技術書・書籍"}]},"publishedAt":"2024-12-12T00:00:00+09:00","blog":{"__typename":"Blog","url":"https://creators.bengo4.com/","title":"弁護士ドットコム株式会社 Creators’ blog","iconURL":"https://cdn.image.st-hatena.com/image/square/c8f8a42752d790c627840d5e05731eb476348993/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F158586092%2F1643772498893162"}},{"__typename":"BlogArticle","title":"アーキテクチャから刷新！柔軟なデザイン変更を可能にした新注文詳細","thumbnail":{"__typename":"ResizeableImage","originalURL":"https://ogimage.blog.st-hatena.com/820878482941542758/6802418398307609689/1733904553","scaledImageURL({\"enlarge\":false,\"height\":220,\"width\":586})":"https://cdn.image.st-hatena.com/image/scale/d76631b963632db1c7b28803a3d88ff7f50df0f1/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fogimage.blog.st-hatena.com%2F820878482941542758%2F6802418398307609689%2F1733904553"},"hasOwnThumbnail":true,"summary":"こんにちは。GMOメイクショップの黒木です。弊社の makeshop というサービスでは、2024年12月11日（水）に新管理画面の注文詳細のリニューアルを行いました。 www.magazine.makeshop.jp 新注文詳細は、アーキテクチャから見直して、将来的なデザイン変更にも柔軟に対応できるような設計を目指しました。この記事では、そんな新注文詳細のアーキテクチャについて、詳しくご紹介します。旧注文画面の課題旧注文詳細の依存関係コンポーザブルの依存関係が強すぎた新注文詳細のアーキテクチャアーキテクチャを考える上で重視した点将来的なデザイン変更にも柔軟に対応できる構成 St…","url":"https://tech.makeshop.co.jp/entry/2024/12/11/170554","tags":{"__typename":"AssociatedTagsConnection","nodes":[{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/Vue.js","name":"Vue.js"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3","name":"アーキテクチャ"}]},"publishedAt":"2024-12-11T17:05:54+09:00","blog":{"__typename":"Blog","url":"https://tech.makeshop.co.jp/","title":"GMO MAKESHOP engineer blog","iconURL":"https://cdn.image.st-hatena.com/image/square/1c7712fa7264b06bc3754b7a8c20d2e84c1f11c4/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F159371397%2F1706754115102452"}},{"__typename":"BlogArticle","title":"Pinia Colada入門：非同期処理をもっとスムーズに！","thumbnail":{"__typename":"ResizeableImage","originalURL":"https://cdn.image.st-hatena.com/image/scale/45d083e43c17b8805432a589c70281a2ea6ec5ba/backend=imagemagick;version=1;width=1300/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fn%2Fnaoki-haba%2F20241128%2F20241128131448.png","scaledImageURL({\"enlarge\":false,\"height\":220,\"width\":586})":"https://cdn.image.st-hatena.com/image/scale/67ac647f14262387420007c2af8e6c56eae3ae7f/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F45d083e43c17b8805432a589c70281a2ea6ec5ba%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fn%252Fnaoki-haba%252F20241128%252F20241128131448.png"},"hasOwnThumbnail":true,"summary":"はじめに Pinia Colada とは非同期処理の課題 1. 冗長なコード 2. 状態管理の複雑さ 3. 効率的なデータフェッチング非同期処理における様々なアプローチ 1. Vue Promised 2. swrv 3. TanStack Query (Vue Query) Pinia Colada の優位性 Pinia Colada の基本的な使い方セットアップ基本的なデータ取得の例ポイント解説まとめはじめにこの記事は every Tech Blog Advent Calendar 2024 の2日目の記事です。はじめまして、エブリーの羽馬（@naoki_haba）です。…","url":"https://tech.every.tv/entry/2024/12/02/124018","tags":{"__typename":"AssociatedTagsConnection","nodes":[{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/Pinia","name":"Pinia"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/Vue.js","name":"Vue.js"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/Web%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89","name":"Webフロントエンド"}]},"publishedAt":"2024-12-02T12:40:18+09:00","blog":{"__typename":"Blog","url":"https://tech.every.tv/","title":"every Tech Blog","iconURL":"https://cdn.image.st-hatena.com/image/square/7b8dd2352b5eedce1d9ce84f9eee9c4e2d40cf97/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F153346182%2F1638757420288629"}},{"__typename":"BlogArticle","title":"Vue Fes Japan 2024 にゴールドスポンサーとして参加しました！","thumbnail":{"__typename":"ResizeableImage","originalURL":"https://cdn.image.st-hatena.com/image/scale/0b8c55e4712bc3d2dcd11ac36b301e1bc67f3599/backend=imagemagick;version=1;width=1300/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fm%2Fmacomaru-visasq%2F20241028%2F20241028123324.jpg","scaledImageURL({\"enlarge\":false,\"height\":220,\"width\":586})":"https://cdn.image.st-hatena.com/image/scale/5639fef558ed186fbf1075bfca81e8ae95d8b68a/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F0b8c55e4712bc3d2dcd11ac36b301e1bc67f3599%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fm%252Fmacomaru-visasq%252F20241028%252F20241028123324.jpg"},"hasOwnThumbnail":true,"summary":"CEO室コミュニケーションデザイナーのmacoです。開発チームのメンバーと一緒に、Vue Fes Japan 2024 に参加しましたのでレポートします。 VueFes とは Vue Fes Japanは、JavaScriptフレームワークの代表格であるVue.jsに関する、日本最大級のカンファレンス。 Vue.js にまつわる知見をセッションから得たり、他の開発者と交流できる場となっています。今年はスタッフ含め国内外のVue.jsユーザー700名が一堂に会しました！ビザスクでは、プロダクトにVueやNuxtを使用しており、実際に業務で使用している開発メンバーと共に参加しました。（私…","url":"https://tech.visasq.com/vuefesjapan2024","tags":{"__typename":"AssociatedTagsConnection","nodes":[{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/Vue%20Fes%20Japan%202024","name":"Vue Fes Japan 2024"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/Vue%20Fes","name":"Vue Fes"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/Vue.js","name":"Vue.js"}]},"publishedAt":"2024-10-29T13:56:22+09:00","blog":{"__typename":"Blog","url":"https://tech.visasq.com/","title":"VISASQ Dev Blog","iconURL":"https://cdn.image.st-hatena.com/image/square/62e56115d98aae6f7422e745bea7e6f50eb94f56/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F357526%2F1676949205740532"}},{"__typename":"BlogArticle","title":"Vue Fes Japan 2024にボランティアスタッフとして参加してきました","thumbnail":{"__typename":"ResizeableImage","originalURL":"https://cdn.image.st-hatena.com/image/scale/80a8a03ed1148e41e5961be22393fcac5eb467e4/backend=imagemagick;version=1;width=1300/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fw%2Fweeybrid%2F20241023%2F20241023133510.jpg","scaledImageURL({\"enlarge\":false,\"height\":220,\"width\":586})":"https://cdn.image.st-hatena.com/image/scale/bd4f7705239052befa45857d775d814198bdb378/enlarge=0;height=220;version=1;width=586/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F80a8a03ed1148e41e5961be22393fcac5eb467e4%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fw%252Fweeybrid%252F20241023%252F20241023133510.jpg"},"hasOwnThumbnail":true,"summary":"こんにちは、yukiminaです。普段はVue.jsを使用したWebシステムの開発を行っています。この度、日本最大級のVue.jsカンファレンス「Vue Fes Japan 2024」にボランティアスタッフとして初参加させていただきました！ Vue Fesとは Vue Fes Japanは、日本最大級のVue.jsカンファレンスです。 2018 年に誕生したこのカンファレンスは、文字通り Fes ＝お祭りのように Vue.js を共に盛り上げ、共に学び、そしてなによりも共に楽しむために誕生しました。国内外の著名スピーカーによるセッションの他、LT、初心者向けハンズオン、グッズ販売などのイベ…","url":"https://techblog.weeybrid.co.jp/entry/vue-fes-japan-2024","tags":{"__typename":"AssociatedTagsConnection","nodes":[{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/Vue.js","name":"Vue.js"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/VueFesJapan","name":"VueFesJapan"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/%E3%82%AB%E3%83%B3%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9","name":"カンファレンス"},{"__typename":"Tag","url":"https://d.hatena.ne.jp/keyword/%E3%83%86%E3%83%83%E3%82%AF%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88","name":"テックイベント"}]},"publishedAt":"2024-10-23T17:29:25+09:00","blog":{"__typename":"Blog","url":"https://techblog.weeybrid.co.jp/","title":"Weeybrid Tech Blog","iconURL":"https://cdn.image.st-hatena.com/image/square/abbd58b4803bf67c0b975752f6b67440a76cb589/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F159629456%2F1729568910560233"}}],"pageInfo":{"__typename":"PageInfo","hasNextPage":true,"endCursor":"MTcyOTI4NTIwMCw2ODAyNDE4Mzk4Mjk4MzA0MTU1"}},"name":"Vue.js","primaryMeaning":{"__typename":"Meaning","genre":{"__typename":"Genre","name":"未指定","url":"/keywordlist?cname=%E6%9C%AA%E6%8C%87%E5%AE%9A"}},"url":"https://d.hatena.ne.jp/keyword/Vue.js","furigana":"","bookmarkedEntries({\"first\":10,\"order\":\"RECENT\"})":{"__typename":"BookmarkedEntryConnection","nodes":[{"__typename":"BookmarkEntry","title":"遠回りしたことは決して無駄にはならない。Vue.jsに魅せられ、OSSをライフワークにした私のキャリア - Findy Engineer Lab","description":"はじめまして、川口（@kazu_pon）です。私はソフトウェアエンジニアとして現在株式会社プレイドで働いています。OSS活動としては、Vue.jsコアチームメンバー、Nuxtエコシステムメンバーであり、Vue.js 日本ユーザグループ、そしてVue Fes Japanというカンファレンスのオーガナイザーをしています。この記事では、日々の...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/1b379f56f4736f3c082c9dee684fa917b96af24d/height=200;version=1;width=200/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F28f62e90fb4a03ec7f3c7e8e8dbd0dfa11dd2f8d%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Ff%252Ffindy-shimada%252F20250117%252F20250117174910.jpg"},"bookmarksCount":38,"siteURL":"findy-code.io","url":"https://findy-code.io/engineer-lab/kazupon","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/findy-code.io/engineer-lab/kazupon","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/findy-code.io/","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Ffindy-code.io%2Fengineer-lab%2Fkazupon"},{"__typename":"BookmarkEntry","title":"【Vue.js】Element Plusのtableのクラス操作（row-class-name）やクリックイベント（row-click）や列固定表示をしてみる","description":"Vue.js+Element Plusでのtableについて、以下の3点記載します！クラス操作（row-class-name）特定の行にクラスをつけたい場合に使用クリックイベント（row-click）について行クリックした場合に特定の関数を呼び出す列固定表示横スクロール時に一番左の列を固定表示にしてみる Element Plusについてまずは、Eleme...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/679e861a6c8ab200d6a60c3f9ae7760df955d154/height=200;version=1;width=200/https%3A%2F%2Fit.kensan.net%2Fwp-content%2Fuploads%2F2023%2F04%2Fwebapp.png"},"bookmarksCount":5,"siteURL":"it.kensan.net","url":"https://it.kensan.net/element-plus-table.html","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/it.kensan.net/element-plus-table.html","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/it.kensan.net/","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fit.kensan.net%2Felement-plus-table.html"},{"__typename":"BookmarkEntry","title":"Vue.jsと周辺エコシステムで振り返る2024年","description":"Vue Advent Calendar 2024の9日目の記事です。この記事では2024年のVue.js、そしてそれらにまつわる周辺エコシステムについてを振り返っていきます。関連する大きな出来事や変更があったものについてを中心にまとめています（この内容も取り上げてほしい！というものがあった際は、GitHubから編集提案をください）。 Vu...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/cc2526f8f75ea0131e03af18a4f9c4fa41231de7/height=200;version=1;width=200/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--dtT0Fksw--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AVue.js%2525E3%252581%2525A8%2525E5%252591%2525A8%2525E8%2525BE%2525BA%2525E3%252582%2525A8%2525E3%252582%2525B3%2525E3%252582%2525B7%2525E3%252582%2525B9%2525E3%252583%252586%2525E3%252583%2525A0%2525E3%252581%2525A7%2525E6%25258C%2525AF%2525E3%252582%25258A%2525E8%2525BF%252594%2525E3%252582%25258B2024%2525E5%2525B9%2525B4%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Ayamanoku%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzU5MTZlOWFlNjguanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AVue%2525E3%252583%2525BBNuxt%252520%2525E6%252583%252585%2525E5%2525A0%2525B1%2525E3%252581%25258C%2525E9%25259B%252586%2525E3%252581%2525BE%2525E3%252582%25258B%2525E5%2525BA%252583%2525E5%2525A0%2525B4%252520%25252F%252520P...%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzRlYzJhZWUxZTQuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png"},"bookmarksCount":5,"siteURL":"zenn.dev","url":"https://zenn.dev/comm_vue_nuxt/articles/vuejs-2024-year-in-review","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/zenn.dev/comm_vue_nuxt/articles/vuejs-2024-year-in-review","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/zenn.dev/comm_vue_nuxt","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fzenn.dev%2Fcomm_vue_nuxt%2Farticles%2Fvuejs-2024-year-in-review"},{"__typename":"BookmarkEntry","title":"【2025年版】ReactとVue.jsどちらを選ぶべきか？【アドベントカレンダー2025】 - Qiita","description":"TL;DR Vue.jsはHTMLをJavaScriptの中に書かなくて済むので、可読性が高いです Vue.jsは双方向バインディングをサポートしており、Reactみたいなsetter/getterみたいな無駄な作業は必要ありません Vue.jsはHTMLとCSSとJavaScriptを分けて記述することができるため、どこを修正すればいいか直感的です ReactはJSX内で{}と(...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/654ff18c9db681df51d67e2143ccc094bdba5884/height=200;version=1;width=200/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY0MzU3MzUlMkY3MTE0ZmM1NTUwNDdkNDcxMTkyYjQ0ZTZmZDRkODI4N2E2ZjIyNDVhJTJGeF9sYXJnZS5wbmclM0YxNjg0MTEwMDQ2P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTQ1YjNmNmVlOGQ4YmVhN2U0ZGZkNWIwMzkzMzgxMDQx%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D64099ee3e2043f8ba477acdf2146014d%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUUzJTgwJTkwMjAyNSVFNSVCOSVCNCVFNyU4OSU4OCVFMyU4MCU5MVJlYWN0JUUzJTgxJUE4VnVlLmpzJUUzJTgxJUE5JUUzJTgxJUExJUUzJTgyJTg5JUUzJTgyJTkyJUU5JTgxJUI4JUUzJTgxJUI2JUUzJTgxJUI5JUUzJTgxJThEJUUzJTgxJThCJUVGJUJDJTlGJUUzJTgwJTkwJUUzJTgyJUEyJUUzJTgzJTg5JUUzJTgzJTk5JUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgyJUFCJUUzJTgzJUFDJUUzJTgzJUIzJUUzJTgzJTgwJUUzJTgzJUJDMjAyNSVFMyU4MCU5MSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWNlZGI1YmM0NjY3YTU1OWM4NTY0NjE1NWQzNTE5MDcw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDA3bXB5JnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ZWUzYmRmMzU5NmVhMjJjMGEzMWU3OTNjNDVlZjQxN2U%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dfb7a4c4dd3a7ba2a3b3bc22949644293"},"bookmarksCount":217,"siteURL":"qiita.com","url":"https://qiita.com/7mpy/items/13068e2f0c5782089ebb","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/qiita.com/7mpy/items/13068e2f0c5782089ebb","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/qiita.com/7mpy","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fqiita.com%2F7mpy%2Fitems%2F13068e2f0c5782089ebb"},{"__typename":"BookmarkEntry","title":"Vue.js、Nuxtの機能を使い、大量のコピペコードをリファクタリングする","description":"Vue Fes Japan 2024 登壇資料","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/121f9b94d1d297e336819192f434bce28e571184/height=200;version=1;width=200/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F38e14879cd874059b67ff0bf9942b793%2Fslide_0.jpg%3F32217876"},"bookmarksCount":28,"siteURL":"speakerdeck.com","url":"https://speakerdeck.com/igayamaguchi/vue-dot-js-nuxtnoji-neng-woshi-i-da-liang-nokopipekodoworihuakutaringusuru","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/speakerdeck.com/igayamaguchi/vue-dot-js-nuxtnoji-neng-woshi-i-da-liang-nokopipekodoworihuakutaringusuru","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/speakerdeck.com/igayamaguchi","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fspeakerdeck.com%2Figayamaguchi%2Fvue-dot-js-nuxtnoji-neng-woshi-i-da-liang-nokopipekodoworihuakutaringusuru"},{"__typename":"BookmarkEntry","title":"Vue.jsの v-model 正しく活用できていますか？","description":"はじめにこんにちは、からころです。今回は、Vue.js でよく利用される v-model の記事について保守性などの観点から書いていこうと思います。想定している読者としては、Vue.js を触ったこと、見たことがある方全般です。v-model は利用方法を誤ると痛手を負いがちですが、非常に強力な味方だよということをお伝えでき...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/5e18bde8cf6c18b761fdff50f7974deb7a93cc5a/height=200;version=1;width=200/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--sKW1oUMD--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AVue.js%2525E3%252581%2525AE%252520v-model%252520%2525E6%2525AD%2525A3%2525E3%252581%252597%2525E3%252581%25258F%2525E6%2525B4%2525BB%2525E7%252594%2525A8%2525E3%252581%2525A7%2525E3%252581%25258D%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252581%2525BE%2525E3%252581%252599%2525E3%252581%25258B%2525EF%2525BC%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3A%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252581%252593%2525E3%252582%25258D%252520%25252F%252520karacoro%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzU5MTZlOWFlNjguanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AVue%2525E3%252583%2525BBNuxt%252520%2525E6%252583%252585%2525E5%2525A0%2525B1%2525E3%252581%25258C%2525E9%25259B%252586%2525E3%252581%2525BE%2525E3%252582%25258B%2525E5%2525BA%252583%2525E5%2525A0%2525B4%252520%25252F%252520P...%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2MwNmQwMjRkZGIuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png"},"bookmarksCount":9,"siteURL":"zenn.dev","url":"https://zenn.dev/comm_vue_nuxt/articles/7ad7338080482f","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/zenn.dev/comm_vue_nuxt/articles/7ad7338080482f","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/zenn.dev/comm_vue_nuxt","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fzenn.dev%2Fcomm_vue_nuxt%2Farticles%2F7ad7338080482f"},{"__typename":"BookmarkEntry","title":"経験談に基づく主観的Vue.js学習ロードマップ","description":"はじめにおはようございますhiroです。 Vueを学習するにあたり、初学者向けのロードマップがあればと思っていたため本記事を書きました ✏️ タイトルにもありますが、本記事は私の経験に基づくかなり主観的なものとなっていますので予めご了承ください。「これからVueをどのように学習しよう？」そう悩んでいる方の参考に...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/1688dfa73b0af1d6bd661a542641321a73882f0c/height=200;version=1;width=200/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--wuRZDT-6--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E7%2525B5%25258C%2525E9%2525A8%252593%2525E8%2525AB%252587%2525E3%252581%2525AB%2525E5%25259F%2525BA%2525E3%252581%2525A5%2525E3%252581%25258F%2525E4%2525B8%2525BB%2525E8%2525A6%2525B3%2525E7%25259A%252584Vue.js%2525E5%2525AD%2525A6%2525E7%2525BF%252592%2525E3%252583%2525AD%2525E3%252583%2525BC%2525E3%252583%252589%2525E3%252583%25259E%2525E3%252583%252583%2525E3%252583%252597%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Ahiro%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzU5MTZlOWFlNjguanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AVue%2525E3%252583%2525BBNuxt%252520%2525E6%252583%252585%2525E5%2525A0%2525B1%2525E3%252581%25258C%2525E9%25259B%252586%2525E3%252581%2525BE%2525E3%252582%25258B%2525E5%2525BA%252583%2525E5%2525A0%2525B4%252520%25252F%252520P...%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2IwOTUyYzVkNWYuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png"},"bookmarksCount":8,"siteURL":"zenn.dev","url":"https://zenn.dev/comm_vue_nuxt/articles/c2b0b9dd97ff49","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/zenn.dev/comm_vue_nuxt/articles/c2b0b9dd97ff49","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/zenn.dev/comm_vue_nuxt","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fzenn.dev%2Fcomm_vue_nuxt%2Farticles%2Fc2b0b9dd97ff49"},{"__typename":"BookmarkEntry","title":"Vue.js でファイルベースルーティングを実現する「Unplugin Vue Router」の紹介","description":"Web アプリケーション開発において、ファイルベースルーティングはコードの可読性向上や開発効率化に大きく貢献します。本記事では、Vue.js アプリケーションでのファイルベースルーティングをシンプルかつ型安全に実現できる「Unplugin Vue Router」をご紹介します。Nuxt のような大規模なフレームワークは少し大げさだ...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/d827ac3011c0fbf35373cc6aab07f6a121f81256/height=200;version=1;width=200/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--KBCiusdY--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AVue.js%252520%2525E3%252581%2525A7%2525E3%252583%252595%2525E3%252582%2525A1%2525E3%252582%2525A4%2525E3%252583%2525AB%2525E3%252583%252599%2525E3%252583%2525BC%2525E3%252582%2525B9%2525E3%252583%2525AB%2525E3%252583%2525BC%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252583%2525B3%2525E3%252582%2525B0%2525E3%252582%252592%2525E5%2525AE%25259F%2525E7%25258F%2525BE%2525E3%252581%252599%2525E3%252582%25258B%2525E3%252580%25258CUnplugin%252520Vue%252520Router%2525E3%252580%25258D%2525E3%252581%2525AE%2525E7%2525B4%2525B9%2525E4%2525BB%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Ajay-es%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzU5MTZlOWFlNjguanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AVue%2525E3%252583%2525BBNuxt%252520%2525E6%252583%252585%2525E5%2525A0%2525B1%2525E3%252581%25258C%2525E9%25259B%252586%2525E3%252581%2525BE%2525E3%252582%25258B%2525E5%2525BA%252583%2525E5%2525A0%2525B4%252520%25252F%252520P...%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2hTT1NsdjJlWERneXVQbVRNR2xEa2ZZb2pKNnNGcmVjVmFpOWRWTUE9czI1MC1j%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png"},"bookmarksCount":39,"siteURL":"zenn.dev","url":"https://zenn.dev/comm_vue_nuxt/articles/2024-08-13-unplugin-vue-router","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/zenn.dev/comm_vue_nuxt/articles/2024-08-13-unplugin-vue-router","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/zenn.dev/comm_vue_nuxt","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fzenn.dev%2Fcomm_vue_nuxt%2Farticles%2F2024-08-13-unplugin-vue-router"},{"__typename":"BookmarkEntry","title":"VueUse: 5分で分かる Vue.js 開発の効率化術","description":"Vue.js v-tokyo Meetup #21 のLT資料です。 https://vuejs-meetup.connpass.com/event/321431/","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/cd339ca37199fd89de008ff649526c081750e8e0/height=200;version=1;width=200/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F515df271e9c347cd9b0ab5d7af5ebb55%2Fslide_0.jpg%3F31133524"},"bookmarksCount":36,"siteURL":"speakerdeck.com","url":"https://speakerdeck.com/naokihaba/vueuse-5fen-defen-karu-vue-dot-js-kai-fa-noxiao-lu-hua-shu","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/speakerdeck.com/naokihaba/vueuse-5fen-defen-karu-vue-dot-js-kai-fa-noxiao-lu-hua-shu","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/speakerdeck.com/naokihaba","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fspeakerdeck.com%2Fnaokihaba%2Fvueuse-5fen-defen-karu-vue-dot-js-kai-fa-noxiao-lu-hua-shu"},{"__typename":"BookmarkEntry","title":"Vue.js v-tokyo Meetup #20 を開催しました｜jay-es","description":"こんにちは。Vue.js 日本ユーザーグループの jay-es です。 2024 年 5 月 28 日（火）に Vue.js v-tokyo Meetup #20 を開催しました。今回は「Developer Experience 開発者体験特集!」というテーマで、Vue.js エコシステムの DX 関連の内容をキャッチアップできるイベントとなりました。当日参加いただいた皆様、誠に...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/88b1af584b0bbc32eb3dc797e241866c55161c59/height=200;version=1;width=200/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F142382598%2Frectangle_large_type_2_d1e73ea02c092589741545acd6892117.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280"},"bookmarksCount":14,"siteURL":"note.com","url":"https://note.com/jayes/n/n02ecc5c356ab","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/note.com/jayes/n/n02ecc5c356ab","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/note.com/jayes","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fnote.com%2Fjayes%2Fn%2Fn02ecc5c356ab"}]},"bookmarkedEntries({\"first\":9,\"order\":\"POPULAR\"})":{"__typename":"BookmarkedEntryConnection","nodes":[{"__typename":"BookmarkEntry","title":"【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口","description":"JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの３つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。ちょいとFW選定の技術調査でいろい...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/804094b1ac1a2661e300931b369fafbfe2f9e75b/height=200;version=1;width=200/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F5b07f598974c4c38097f7f766576b1481b784f3f%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fi%252Fiwasiman%252F20200802%252F20200802210253.png"},"bookmarksCount":823,"siteURL":"iwasiman.hatenablog.com","url":"https://iwasiman.hatenablog.com/entry/2018/04/23/200000","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/iwasiman.hatenablog.com/entry/2018/04/23/200000","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/iwasiman.hatenablog.com/","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fiwasiman.hatenablog.com%2Fentry%2F2018%2F04%2F23%2F200000"},{"__typename":"BookmarkEntry","title":"私たちはなぜReactではなくVue.jsを選んだのか | POSTD","description":"Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。レガシーなDrupalのシステム（qwintry.com）ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com）その他、比較的小さめのプロジ...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/5516cd2cdeb71ff69b4b34a3ef26c4d76b2f6511/height=200;version=1;width=200/https%3A%2F%2Fpostd.cc%2Fwp%2Fwp-content%2Fuploads%2F2016%2F12%2Fwhy-we-chose-vuejs-over-react-282-compressor-500x248-1.png"},"bookmarksCount":787,"siteURL":"postd.cc","url":"https://postd.cc/why-we-chose-vuejs-over-react/","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/postd.cc/why-we-chose-vuejs-over-react/","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/postd.cc/","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fpostd.cc%2Fwhy-we-chose-vuejs-over-react%2F"},{"__typename":"BookmarkEntry","title":"レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 #エンジニアHub - エンジニアHub｜若手Webエンジニアのキャリアを考える！","description":"レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 10年以上前に作られたレガシーシステムをVue.jsで大規模リプレイスしたエムスリーに、導入して感じたVue.jsのメリットや、活用法を伺いました。 JavaScript（JS）のフレームワークは、何を使うのがベストなのでしょうか。ここ3年ほどで数...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/d9f986bb57adfc4f7964fced0de292e82fbc4512/height=200;version=1;width=200/https%3A%2F%2Fen-ambi.com%2FimageFile%2Fuser%2Fglobal%2Fogp_01.png"},"bookmarksCount":586,"siteURL":"en-ambi.com","url":"https://en-ambi.com/itcontents/entry/2018/09/25/110000/","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/en-ambi.com/itcontents/entry/2018/09/25/110000/","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/en-ambi.com/","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fen-ambi.com%2Fitcontents%2Fentry%2F2018%2F09%2F25%2F110000%2F"},{"__typename":"BookmarkEntry","title":"Vue.js ではじめるシングルページアプリケーションの開発 - HDE BLOG","description":"Vue.js は JavaScript フレームワークです。ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。例えば、テキストエリアに文字を入力すると、デザ...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/32b8799f0b033e2d7f4058b3425ad8de2fcce002/height=200;version=1;width=200/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Feda391486ea20771b4836b8e1d7196696f092a8c%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fg%252Fgorotan35%252F20180228%252F20180228183927.png"},"bookmarksCount":567,"siteURL":"blog.hde.co.jp","url":"https://blog.hde.co.jp/entry/2018/03/05/130121","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/blog.hde.co.jp/entry/2018/03/05/130121","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/blog.hde.co.jp/","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fblog.hde.co.jp%2Fentry%2F2018%2F03%2F05%2F130121"},{"__typename":"BookmarkEntry","title":"Vue.js の基礎を学ぶために LearnCode.academy の学習動画を活用したら最高だった - kakakakakku blog","description":"LearnCode.academy とは？ www.youtube.com LearnCode.academy という YouTube チャンネルがあり，Vue.js や React + Redux などを解説した，無料の学習動画が公開されている．今回受講したのは「Vue Tutorial」で，全9回となっている．合計しても「約1時間程度」なので，スキマ時間を活用して気軽に学ぶこともできる．...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/95e7f7c3ee7e6a5a72f4ec88c48283eaaf7dbb49/height=200;version=1;width=200/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F10ca7adb8b74ee7b0c687791db90bac4c81e22b2%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fk%252Fkakku22%252F20180218%252F20180218050947.png"},"bookmarksCount":528,"siteURL":"kakakakakku.hatenablog.com","url":"https://kakakakakku.hatenablog.com/entry/2018/02/18/113426","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/kakakakakku.hatenablog.com/entry/2018/02/18/113426","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/kakakakakku.hatenablog.com/","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fkakakakakku.hatenablog.com%2Fentry%2F2018%2F02%2F18%2F113426"},{"__typename":"BookmarkEntry","title":"Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス - Qiita","description":"こちらに移行しました。(2020/05/16) 概要 Vue.jsで作成されたプロジェクトを紹介しているサイト「made with vue.js 」があります。面白くて役立ちそうなツールやサービスをまとめてみました。 UIコンポーネント VueSocial ソーシャルサービスのボタンを作成するVueのコンポーネント CKEditor 5 リッチテキストエディ...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/f4db25cc2569f4f57d1b696a355503b6955e5cfe/height=200;version=1;width=200/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VnVlLmpzJUUzJTgxJUE3JUU0JUJEJTlDJUU2JTg4JTkwJUUzJTgxJTk1JUUzJTgyJThDJUUzJTgxJTlGJUUzJTgwJTgxJUUzJTgxJUExJUUzJTgyJTg3JUUzJTgxJUEzJUUzJTgxJUE4JUU5JTlEJUEyJUU3JTk5JUJEJUUzJTgxJThGJUUzJTgxJUE2JUU1JUJEJUI5JUU3JUFCJThCJUUzJTgxJUExJUUzJTgxJTlEJUUzJTgxJTg2JUUzJTgxJUFBJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkzJUUzJTgyJUI5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0yNjdlM2MwMDlkNzNkYTIzZTJiNTg0ZjcwNzgyMjk0YQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzLXlvc2hpa2kmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTFhZGM3OWY5NTc2NDAyMzRmOGI1ZGE3MDA5N2IxMWEy%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D1d21d90cde2d34a2b2645f0ed07cb10f"},"bookmarksCount":524,"siteURL":"qiita.com","url":"https://qiita.com/s-yoshiki/items/51150b37153b41df1da6","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/qiita.com/s-yoshiki/items/51150b37153b41df1da6","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/qiita.com/s-yoshiki","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fqiita.com%2Fs-yoshiki%2Fitems%2F51150b37153b41df1da6"},{"__typename":"BookmarkEntry","title":"Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ","description":"Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか、次に何を学べばよいのか、その指針となるロードマップを紹介します。【追記】 Angularのロードマップを追加しました。基礎知識（HTML, CSS, JavaScript）、制作者として必要なスキル（Git, HTTPSプロトコル, Terminalなど）をはじめ、Vue.jsとReac...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/75e841ff25576646c033425de8e3651c74cbb58c/height=200;version=1;width=200/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080602-.png"},"bookmarksCount":512,"siteURL":"coliss.com","url":"https://coliss.com/articles/build-websites/operation/javascript/vue-and-react-developer-roadmap.html","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/vue-and-react-developer-roadmap.html","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/coliss.com/","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fvue-and-react-developer-roadmap.html"},{"__typename":"BookmarkEntry","title":"今からVue.jsを始める人のための「知るのを後回しにしてよい」n個のこと - Qiita","description":"Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ＊この記事は2020年3月頭に書かれている記事ですどうも、Vueはいいぞおねーさん(自称)です。 Vue.jsは私に言わせるととてもよいフロントエンドフレームワークであり、その理由の一...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/788f3acaba22d8e72afce542e01290b0174f3925/height=200;version=1;width=200/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU0JUJCJThBJUUzJTgxJThCJUUzJTgyJTg5VnVlLmpzJUUzJTgyJTkyJUU1JUE3JThCJUUzJTgyJTgxJUUzJTgyJThCJUU0JUJBJUJBJUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFJUUzJTgwJThDJUU3JTlGJUE1JUUzJTgyJThCJUUzJTgxJUFFJUUzJTgyJTkyJUU1JUJFJThDJUU1JTlCJTlFJUUzJTgxJTk3JUUzJTgxJUFCJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgyJTg4JUUzJTgxJTg0JUUzJTgwJThEbiVFNSU4MCU4QiVFMyU4MSVBRSVFMyU4MSU5MyVFMyU4MSVBOCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MjQxOGU1OWZiMDBmZDAwYmQ5OTViZTg4ZDc3ODhlOTU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBmcnVpdHJpaW4mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTg2ODIyNjE3ODY1MjYwMTIxYjliOTFiNTFiOTkyMGM1%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44K544K_44OH44Kj44K544OI%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Df579f809b83577c35613807230cee1c4"},"bookmarksCount":509,"siteURL":"qiita.com","url":"https://qiita.com/fruitriin/items/3249bb24d60932bb42ee","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/qiita.com/fruitriin/items/3249bb24d60932bb42ee","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/qiita.com/fruitriin","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fqiita.com%2Ffruitriin%2Fitems%2F3249bb24d60932bb42ee"},{"__typename":"BookmarkEntry","title":"なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 | Nagisaのすゝめ","description":"2018年2月6日なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話余り知られていませんが Nagisa ではアプリだけでなく Web のプロダクトやサービスもあります。マンガZERO や UPTOON! や月刊コミックジヘン辺りがそうです。何れも Vue.js で作られている SPA で、社内・外両方から “なん...","thumbnail":{"__typename":"ResizeableImage","squareImageURL({\"height\":200,\"width\":200})":"https://cdn.image.st-hatena.com/image/square/f08099a4ef003ad92a5a5003b335b89db5d8c62d/height=200;version=1;width=200/https%3A%2F%2Fblog.nagisa-inc.jp%2Fwp-content%2Fuploads%2F2018%2F01%2Fvuejs-1024x512.png"},"bookmarksCount":500,"siteURL":"blog.nagisa-inc.jp","url":"https://blog.nagisa-inc.jp/archives/2980","bookmarkCommentsListURL":"https://b.hatena.ne.jp/entry/s/blog.nagisa-inc.jp/archives/2980","bookmarkSiteEntriesListURL":"https://b.hatena.ne.jp/site/blog.nagisa-inc.jp/","faviconImageURL":"https://cdn-ak2.favicon.st-hatena.com/?url=https%3A%2F%2Fblog.nagisa-inc.jp%2Farchives%2F2980"}]}}}}}},"page":"/keyword/_permalink_reborn","query":{"name":"Vue.js","fromHatenaBlog":""},"buildId":"8MX8gND8BYpmrsrzfNHI8","assetPrefix":"https://live.blog-tags.st-hatena.com","runtimeConfig":{"KOTOBA_GRAPHQL_ENDPOINT":"https://live.blog-tags.hatenaapis.com/api/graphql","KOTOBA_API_KEY":"Vm6DEwznUvNxxOnvDJZquQjC5cQacmbAW2O8CoZf0Xw="}}</script><script async="" data-next-page="/keyword/_permalink_reborn" src="https://live.blog-tags.st-hatena.com/_next/static/8MX8gND8BYpmrsrzfNHI8/pages/keyword/_permalink_reborn.js"></script><script async="" data-next-page="/_app" src="https://live.blog-tags.st-hatena.com/_next/static/8MX8gND8BYpmrsrzfNHI8/pages/_app.js"></script><script src="https://live.blog-tags.st-hatena.com/_next/static/runtime/webpack-035ac2b14bde147cb4a8.js" async=""></script><script src="https://live.blog-tags.st-hatena.com/_next/static/chunks/commons.d78459f0c3cff869b62b.js" async=""></script><script src="https://live.blog-tags.st-hatena.com/_next/static/runtime/main-389f2d5a5a59288bda75.js" async=""></script></body></html>

CINXE.COM

Vue.jsとは 人気・最新記事を集めました - はてな

Vue.jsとは人気・最新記事を集めました - はてな