CINXE.COM

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8" /><title>PlantUML で ER 図（ERD）を描く（似非ではないです） #uml - Qiita</title><meta content="はじめにPlantUML ではバージョン 1.2017.08 から ER 図に対応しています。[^1]以前の「 PlantUML で ER 図を描く（似非） - Qiita 」の記事ではクラス図…" name="description" /><meta content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover" name="viewport" /><meta content="#ffffff" name="theme-color" /><meta content="XWpkTG32-_C4joZoJ_UsmDUi-zaH-hcrjF6ZC_FoFbk" name="google-site-verification" /><meta content="telephone=no" name="format-detection" /><link rel="canonical" href="https://qiita.com/Tachy_Pochy/items/752ef6e3d38e970378f0" /><link href="/manifest.json" rel="manifest" /><link href="/opensearch.xml" rel="search" title="Qiita" type="application/opensearchdescription+xml" /><link as="script" href="https://www.googletagservices.com/tag/js/gpt.js" rel="preload" /><link href="https://securepubads.g.doubleclick.net" rel="preconnect" /><script async="" src="https://www.googletagservices.com/tag/js/gpt.js"></script><meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="_Xv1pvrp9SZIjuBckEfvVosAUUCwhKJ3VX7_1q0mrMu7JouLJ3lRuLb-6nE3-Zfik-PG1kkPPL-EFooaQtqoFQ" /><link rel="icon" type="image/x-icon" href="https://cdn.qiita.com/assets/favicons/public/production-c620d3e403342b1022967ba5e3db1aaa.ico" /><link rel="apple-touch-icon" type="image/png" href="https://cdn.qiita.com/assets/favicons/public/apple-touch-icon-ec5ba42a24ae923f16825592efdc356f.png" /><link rel="stylesheet" href="https://cdn.qiita.com/assets/public/article-351863a56ac0932d28ddf7458f39e063.min.css" media="all" /><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,500,0..1,-25..0" media="all" /><script src="https://cdn.qiita.com/assets/public/v3-article-bundle-b8a14c647ffcf5fe.min.js" defer="defer"></script><meta name="twitter:card" content="summary_large_image"><meta content="@Qiita" name="twitter:site" /><meta content="@Tachy_Pochy" name="twitter:creator" /><meta property="og:type" content="article"><meta property="og:title" content="PlantUML で ER 図（ERD）を描く（似非ではないです） - Qiita"><meta property="og:image" content="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzc1NTQlMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODc0NjY_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9YTFmNzU0NjVjYmUyZTdhZjM5ZGE4ZjM5ZWIzOTllMmI%26blend-x%3D120%26blend-y%3D467%26blend-w%3D82%26blend-h%3D82%26blend-mode%3Dnormal%26s%3D32f3c9d4cb79af9b4e989f4ab4087fd6?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9UGxhbnRVTUwlMjAlRTMlODElQTclMjBFUiUyMCVFNSU5QiVCMyVFRiVCQyU4OEVSRCVFRiVCQyU4OSVFMyU4MiU5MiVFNiU4RiU4RiVFMyU4MSU4RiVFRiVCQyU4OCVFNCVCQyVCQyVFOSU5RCU5RSVFMyU4MSVBNyVFMyU4MSVBRiVFMyU4MSVBQSVFMyU4MSU4NCVFMyU4MSVBNyVFMyU4MSU5OSVFRiVCQyU4OSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTVlYjhlNzkwZmQ4Nzc5NGMyYTA5MzQ4ZmVmYzQ3MzIx&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBUYWNoeV9Qb2NoeSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWUzZmNjZjA0NGViZTU3MGZkOTFiYWU5NTVhNWM0NjJl&blend-x=242&blend-y=480&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&s=90597acb8f6ff1b9fadddab9746ac714"><meta property="og:description" content="はじめにPlantUML ではバージョン 1.2017.08 から ER 図に対応しています。[^1]以前の「 PlantUML で ER 図を描く（似非） - Qiita 」の記事ではクラス図…"><meta content="https://qiita.com/Tachy_Pochy/items/752ef6e3d38e970378f0" property="og:url" /><meta content="Qiita" property="og:site_name" /><meta content="564524038" property="fb:admins" /><meta content="uml,PlantUML,ER図" name="keywords" /><script>!function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '305156090176370'); fbq('trackSingle', '305156090176370', 'PageView');</script><noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=305156090176370&ev=PageView&noscript=1"/></noscript><style data-emotion="style-global qgd36e">.style-qgd36e{background:var(--color-background);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:56px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:16px 24px 0;}@media (max-width: 1199px){.style-qgd36e{gap:24px;}}@media (max-width: 769px){.style-qgd36e{padding:16px 16px 0;}}@media (max-width: 479px){.style-qgd36e{padding:16px 0 0;}}</style><style data-emotion="style-global 1hl01qi">.style-1hl01qi{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:16px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;position:-webkit-sticky;position:sticky;top:40px;z-index:5;}@media (max-width: 769px){.style-1hl01qi{display:none;}}</style><style data-emotion="style-global c1wjhj">.style-c1wjhj{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><style data-emotion="style-global 1duml6f">.style-1duml6f{height:40px;width:40px;position:relative;}.style-1duml6f svg{cursor:auto;pointer-events:none;}</style><style data-emotion="style-global ftns26">.style-ftns26{fill:none;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}.style-ftns26 .circle,.style-ftns26 .heart-stroke,.style-ftns26 .heart-fill,.style-ftns26 .particle{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;transform-origin:center center;}.style-ftns26 .circle{fill:var(--color-surface);stroke:var(--color-divider);stroke-width:1;}.style-ftns26 .heart-stroke{fill:var(--color-mediumEmphasis);}.style-ftns26 .heart-fill{fill:var(--color-qiitaGreen);opacity:0;}.style-ftns26 .particles{rotate:var(--rotate);transform-origin:center center;}.style-ftns26 .particle{opacity:0;}.style-ftns26.liked .circle{-webkit-animation-delay:90ms;animation-delay:90ms;-webkit-animation-duration:60ms;animation-duration:60ms;-webkit-animation-name:animation-1n63bow;animation-name:animation-1n63bow;}.style-ftns26.liked .heart-stroke{-webkit-animation-duration:150ms;animation-duration:150ms;-webkit-animation-name:animation-d4tj02;animation-name:animation-d4tj02;}.style-ftns26.liked .heart-fill{-webkit-animation-delay:150ms;animation-delay:150ms;-webkit-animation-duration:100ms;animation-duration:100ms;-webkit-animation-name:animation-19addpb;animation-name:animation-19addpb;}.style-ftns26.liked .particle{-webkit-animation-delay:150ms;animation-delay:150ms;-webkit-animation-duration:var(--duration);animation-duration:var(--duration);-webkit-animation-name:animation-1spcwjj;animation-name:animation-1spcwjj;}</style><style data-emotion="style-global animation-1spcwjj">@-webkit-keyframes animation-1spcwjj{1%{opacity:1;}90%{opacity:1;}100%{cx:var(--x);cy:var(--y);opacity:0;}}@keyframes animation-1spcwjj{1%{opacity:1;}90%{opacity:1;}100%{cx:var(--x);cy:var(--y);opacity:0;}}</style><style data-emotion="style-global animation-19addpb">@-webkit-keyframes animation-19addpb{1%{scale:1.2;opacity:1;}100%{scale:1;opacity:1;}}@keyframes animation-19addpb{1%{scale:1.2;opacity:1;}100%{scale:1;opacity:1;}}</style><style data-emotion="style-global animation-d4tj02">@-webkit-keyframes animation-d4tj02{40%{fill:currentColor;scale:0.85;}100%{fill:var(--color-qiitaGreen);}}@keyframes animation-d4tj02{40%{fill:currentColor;scale:0.85;}100%{fill:var(--color-qiitaGreen);}}</style><style data-emotion="style-global animation-1n63bow">@-webkit-keyframes animation-1n63bow{100%{stroke:var(--color-qiitaGreen);}}@keyframes animation-1n63bow{100%{stroke:var(--color-qiitaGreen);}}</style><style data-emotion="style-global 10ttvi6">.style-10ttvi6{background-color:transparent;border:none;cursor:pointer;height:40px;padding:0;position:absolute;width:40px;}.style-10ttvi6:disabled{cursor:not-allowed;}</style><style data-emotion="style-global wknrvb">@media (max-width: 769px){.style-wknrvb{display:block;}}</style><style data-emotion="style-global 3fim88">.style-3fim88{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}</style><style data-emotion="style-global 1a6dkvp">.style-1a6dkvp{color:var(--color-mediumEmphasis);cursor:pointer;font-size:var(--font-size-body-2);font-weight:bold;}</style><style data-emotion="style-global 16g96ve">.style-16g96ve{background-color:var(--color-grayContainer);border-radius:4px;color:var(--color-onContainerText);font-size:var(--font-size-body-3);max-width:280px;overflow-wrap:break-word;padding:4px 8px;position:absolute;pointer-events:none;display:none;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:calc(100% + 0px + 4px);}.style-16g96ve::after{background-color:var(--color-grayContainer);content:"";position:absolute;}.style-16g96ve::after{-webkit-clip-path:polygon(0% 50%, 100% 0%, 100% 100%, 0% 50%);clip-path:polygon(0% 50%, 100% 0%, 100% 100%, 0% 50%);height:8px;right:100%;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:4px;}</style><style data-emotion="style-global 1bc9a2c">.style-1bc9a2c{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><style data-emotion="style-global 100tu0r">.style-100tu0r{display:inline-block;fill:var(--color-mediumEmphasis);height:24px;width:24px;}</style><style data-emotion="style-global 1vem4tk">.style-1vem4tk{color:var(--color-mediumEmphasis);font-size:14px;font-weight:bold;}@media (max-width: 769px){.style-1vem4tk{display:inline;}}</style><style data-emotion="style-global 1n9ulpr">.style-1n9ulpr{border:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--color-mediumEmphasis);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:20px;height:32px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:0;width:32px;}</style><style data-emotion="style-global 1b1cd5z">.style-1b1cd5z{height:20px;fill:var(--color-twitter);width:20px;}</style><style data-emotion="style-global 157xj1g">.style-157xj1g{height:20px;fill:#1877f2;width:20px;}</style><style data-emotion="style-global 1uu7u3w">.style-1uu7u3w{height:20px;width:20px;}</style><style data-emotion="style-global 79elbk">.style-79elbk{position:relative;}</style><style data-emotion="style-global v2p563">.style-v2p563{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:24px;height:24px;overflow:hidden;width:24px;}</style><style data-emotion="style-global oi42s2">.style-oi42s2:modal{background-color:transparent;border:none;max-height:none;max-width:none;width:100%;height:100dvh;display:grid;place-items:center;padding:16px;}.style-oi42s2::backdrop{background-color:rgb(0 0 0 / .32);}</style><style data-emotion="style-global 2aaf4j">.style-2aaf4j{background-color:var(--color-surface);border-radius:8px;color:var(--color-highEmphasis);max-width:600px;max-height:calc(100vh - 160px);overflow-y:auto;padding:24px;width:100%;scrollbar-width:thin;scrollbar-color:var(--scrollbar-color-scrollbarThumb) transparent;}.style-2aaf4j::-webkit-scrollbar{width:8px;}.style-2aaf4j::-webkit-scrollbar-track{background:transparent;}.style-2aaf4j::-webkit-scrollbar-thumb{background:var(--scrollbar-color-scrollbarThumb);border-radius:4px;}</style><style data-emotion="style-global bxc62b">.style-bxc62b{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid var(--color-divider);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:8px;}</style><style data-emotion="style-global 1snuvpu">.style-1snuvpu{font-size:var(--font-size-subhead-2);font-weight:600;line-height:1.4;}</style><style data-emotion="style-global o8tyjw">.style-o8tyjw{background-color:transparent;color:var(--color-mediumEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:4px;}</style><style data-emotion="style-global 6vdptm">.style-6vdptm{font-size:var(--font-size-body-1);margin-top:16px;}</style><style data-emotion="style-global 111ab2g">.style-111ab2g{border-top:1px solid var(--color-divider);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;margin-top:16px;padding-top:16px;}</style><style data-emotion="style-global hreeih">.style-hreeih{border-radius:8px;box-sizing:border-box;cursor:pointer;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;font-weight:600;line-height:1.8;margin-bottom:0;min-height:34px;min-width:64px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-surface);border:1px solid var(--color-grayBorder);color:var(--color-grayText);padding:3px 15px;}.style-hreeih:disabled{box-shadow:none;cursor:not-allowed;opacity:0.32;}.style-hreeih:active{background-color:var(--color-background);}@media (hover: hover) and (pointer: fine){.style-hreeih:hover{background-color:var(--color-background);}}</style><style data-emotion="style-global y54waz">.style-y54waz{border-radius:8px;box-sizing:border-box;cursor:pointer;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;font-weight:600;line-height:1.8;margin-bottom:0;min-height:34px;min-width:64px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-redContainer);color:var(--color-onContainerText);padding:4px 16px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:4px;}.style-y54waz:disabled{box-shadow:none;cursor:not-allowed;opacity:0.32;}.style-y54waz:active{background-color:var(--color-redContainerDim);}@media (hover: hover) and (pointer: fine){.style-y54waz:hover{background-color:var(--color-redContainerDim);}}</style><style data-emotion="style-global 1jvcm2e">.style-1jvcm2e{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;height:16px;overflow:hidden;width:16px;}</style><style data-emotion="style-global 1hbd3g7">.style-1hbd3g7{height:250px;}</style><style data-emotion="style-global uaiz0z">.style-uaiz0z{height:90px;margin-bottom:32px;}@media (max-width: 1227px){.style-uaiz0z{height:50px;}}@media (max-width: 769px){.style-uaiz0z{display:none;}}</style><style data-emotion="style-global itrjxe">.style-itrjxe{background-color:var(--color-surface);border-radius:8px;padding:32px 56px;margin-bottom:24px;}@media (max-width: 769px){.style-itrjxe{padding:24px 32px;}}@media (max-width: 479px){.style-itrjxe{border-radius:0;margin:0 0 40px;padding:24px 16px;}}</style><style data-emotion="style-global 8qb8m4">.style-8qb8m4{margin-bottom:48px;}</style><style data-emotion="style-global i43zkt">.style-i43zkt{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-2);gap:0 8px;line-height:var(--line-height-body);width:100%;}</style><style data-emotion="style-global 17gh4w8">.style-17gh4w8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:0 8px;width:calc(100% - 40px);}</style><style data-emotion="style-global mavs84">.style-mavs84{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-highEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}</style><style data-emotion="style-global kcbbwa">.style-kcbbwa{border-radius:50%;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;overflow:hidden;position:relative;width:24px;height:24px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:8px;}.style-kcbbwa::before{background-color:var(--color-gray0);border-radius:50%;content:"";height:23px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:23px;}</style><style data-emotion="style-global 1wqqt93">.style-1wqqt93{display:block;height:24px;object-fit:contain;position:relative;width:24px;}</style><style data-emotion="style-global 15fzge">.style-15fzge{margin-left:4px;}</style><style data-emotion="style-global wo2a1i">.style-wo2a1i{font-size:28px;font-weight:600;line-height:var(--line-height-headline);margin-top:8px;word-break:break-all;}</style><style data-emotion="style-global 28f073">.style-28f073{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:4px;margin-top:16px;}</style><style data-emotion="style-global mp1hhj">.style-mp1hhj{background-color:var(--color-surfaceVariant);border-radius:4px;color:var(--color-mediumEmphasis);display:block;font-size:var(--font-size-body-2);line-height:var(--line-height-body-dense);padding:0 6px;position:relative;z-index:1;}.style-mp1hhj:active{-webkit-text-decoration:none;text-decoration:none;background-color:var(--color-surfaceVariantDim);}@media (hover: hover) and (pointer: fine){.style-mp1hhj:hover{-webkit-text-decoration:none;text-decoration:none;background-color:var(--color-surfaceVariantDim);}}</style><style data-emotion="style-global 1npej5s">.style-1npej5s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:var(--font-size-body-2);gap:0 8px;margin-top:8px;}</style><style data-emotion="style-global 163v3sq">.style-163v3sq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-top:32px;}</style><style data-emotion="style-global 1f18zs1">.style-1f18zs1{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16px;}</style><style data-emotion="style-global aaiy04">.style-aaiy04{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:4px;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><style data-emotion="style-global buogjo">@media (max-width: 769px){.style-buogjo{display:none;}}</style><style data-emotion="style-global uw35c3">.style-uw35c3{background-color:var(--color-grayContainer);border-radius:4px;color:var(--color-onContainerText);font-size:var(--font-size-body-3);max-width:280px;overflow-wrap:break-word;padding:4px 8px;position:absolute;pointer-events:none;display:none;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1;bottom:calc(100% + 0px + 4px);left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}.style-uw35c3::after{background-color:var(--color-grayContainer);content:"";position:absolute;}.style-uw35c3::after{-webkit-clip-path:polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);height:4px;left:50%;top:100%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:8px;}</style><style data-emotion="style-global izmm4j">.style-izmm4j{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:4px;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><style data-emotion="style-global 1129w32">.style-1129w32{color:var(--color-mediumEmphasis);font-size:14px;font-weight:bold;}@media (max-width: 769px){.style-1129w32{display:none;}}</style><style data-emotion="style-global tzv11m">.style-tzv11m{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;color:var(--color-highEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-2);gap:4px;padding:0 4px;}.style-tzv11m:active{background-color:var(--color-surfaceVariant);-webkit-text-decoration:none;text-decoration:none;}@media (hover: hover) and (pointer: fine){.style-tzv11m:hover{background-color:var(--color-surfaceVariant);-webkit-text-decoration:none;text-decoration:none;}}</style><style data-emotion="style-global n5k90r">.style-n5k90r{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;height:16px;overflow:hidden;width:16px;color:var(--color-mediumEmphasis);}</style><style data-emotion="style-global rwy56f">.style-rwy56f{background-image:url(//cdn.qiita.com/assets/public/image-qiitan_for_login_modal-014e085d3e40a240e3fe8d61b70b29a9.png);-webkit-background-position:bottom 24px right 24px;background-position:bottom 24px right 24px;background-repeat:no-repeat;-webkit-background-size:140px;background-size:140px;border:1px solid var(--color-greenBorder);border-radius:8px;margin:40px auto 0;max-width:572px;padding:24px;}@media (max-width: 769px){.style-rwy56f{width:100%;background-image:none;}}</style><style data-emotion="style-global 1nyasl8">.style-1nyasl8{font-size:var(--font-size-subhead-1);font-weight:600;line-height:1.4;}@media (max-width: 769px){.style-1nyasl8{font-size:var(--font-size-subhead-2);}}</style><style data-emotion="style-global 1i89dtz">.style-1i89dtz{font-size:var(--font-size-body-1);font-weight:600;list-style-position:inside;margin-top:16px;}@media (max-width: 769px){.style-1i89dtz{font-size:var(--font-size-body-2);}}</style><style data-emotion="style-global dzaums">.style-dzaums{display:inline-block;font-size:var(--font-size-body-2);margin-top:16px;-webkit-text-decoration:underline;text-decoration:underline;}</style><style data-emotion="style-global geahq7">.style-geahq7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16px;margin-top:16px;}@media (max-width: 769px){.style-geahq7{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}</style><style data-emotion="style-global 1dq3d3h">.style-1dq3d3h{border-radius:8px;box-sizing:border-box;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;font-weight:600;line-height:1.8;min-height:34px;min-width:64px;opacity:1;pointer-events:auto;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-greenContainer);color:var(--color-onContainerText);padding:4px 16px;gap:16px;}.style-1dq3d3h:hover{-webkit-text-decoration:none;text-decoration:none;}.style-1dq3d3h:active{background-color:var(--color-greenContainerDim);}@media (hover: hover) and (pointer: fine){.style-1dq3d3h:hover{background-color:var(--color-greenContainerDim);}}@media (max-width: 769px){.style-1dq3d3h{width:100%;}}</style><style data-emotion="style-global tfrxbl">.style-tfrxbl{border-radius:8px;box-sizing:border-box;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;font-weight:600;line-height:1.8;min-height:34px;min-width:64px;opacity:1;pointer-events:auto;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-surface);border:1px solid var(--color-grayBorder);color:var(--color-grayText);padding:3px 15px;gap:16px;}.style-tfrxbl:hover{-webkit-text-decoration:none;text-decoration:none;}.style-tfrxbl:active{background-color:var(--color-background);}@media (hover: hover) and (pointer: fine){.style-tfrxbl:hover{background-color:var(--color-background);}}@media (max-width: 769px){.style-tfrxbl{width:100%;}}</style><style data-emotion="style-global 1395ble">.style-1395ble{background-color:var(--color-background);bottom:0;box-shadow:0px 1px 1px 0px rgba(30, 33, 33, 0.25),0px 0px 0px 1px var(--elevation-color-elevationDivider);display:none;height:calc(env(safe-area-inset-bottom, 0px) + 56px);-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding-bottom:env(safe-area-inset-bottom, 0px);position:fixed;width:100%;z-index:1000;}@media (max-width: 769px){.style-1395ble{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><style data-emotion="style-global 5jpx49">.style-5jpx49{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;-webkit-justify-content:space-evenly;justify-content:space-evenly;width:100%;}</style><style data-emotion="style 1xwfn2v 1o9h1hg 1vr7y3r 3k9iaf">.style-1xwfn2v{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:var(--color-surface);border:1px solid var(--color-divider);border-radius:50%;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:40px;}.style-1o9h1hg{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--color-mediumEmphasis);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:20px;height:32px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:0;width:32px;}.style-1vr7y3r{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:50%;color:var(--color-mediumEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-subhead-1);height:32px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:0;width:32px;}.style-3k9iaf{color:var(--color-mediumEmphasis);}</style><style data-emotion="style-global 1736035">.style-1736035{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-2);font-weight:600;list-style:none;max-width:1656px;overflow-x:auto;padding:0 32px;width:100%;scrollbar-width:thin;scrollbar-color:var(--scrollbar-color-scrollbarThumb) transparent;}.style-1736035::-webkit-scrollbar{height:8px;}.style-1736035::-webkit-scrollbar-track{background:transparent;}.style-1736035::-webkit-scrollbar-thumb{background:var(--scrollbar-color-scrollbarThumb);border-radius:4px;}@media (max-width: 769px){.style-1736035{padding:0 16px;}}</style><style data-emotion="style-global 1cnt4b8">.style-1cnt4b8{background-color:var(--color-surface);}</style><style data-emotion="style-global ymuwam">.style-ymuwam{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:auto;max-width:1656px;padding:8px 32px 0;width:100%;}@media (max-width: 769px){.style-ymuwam{padding:8px 16px 0;}}</style><style data-emotion="style-global fv3lde">.style-fv3lde{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><style data-emotion="style-global 1etvg7j">.style-1etvg7j{background-color:var(--color-qiitaGreen);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:6px 10px;border-radius:4px;}.style-1etvg7j >svg{fill:var(--color-gray0);height:18px;}</style><style data-emotion="style-global 1dodnso">.style-1dodnso{padding:4px 12px 0;}</style><style data-emotion="style-global c2uxn6">.style-c2uxn6{width:30px;height:30px;}</style><style data-emotion="style-global 1afofdy">.style-1afofdy{-webkit-transform:scale(0,0);-moz-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0);position:absolute;}</style><style data-emotion="style-global 68a7fl">.style-68a7fl{margin-right:12px;position:relative;width:320px;}@media (max-width: 991px){.style-68a7fl{display:none;}}</style><style data-emotion="style-global 18lpml7">.style-18lpml7{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;height:16px;overflow:hidden;width:16px;color:var(--color-mediumEmphasis);left:8px;position:absolute;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}</style><style data-emotion="style-global 1gmi769">.style-1gmi769{background-color:var(--color-surfaceVariant);border:none;border-radius:8px;color:var(--color-highEmphasis);font-size:var(--font-size-body-1);line-height:var(--line-height-body);padding:4px 8px 4px 32px;width:100%;}.style-1gmi769::-webkit-input-placeholder{color:var(--color-disabled);}.style-1gmi769::-moz-placeholder{color:var(--color-disabled);}.style-1gmi769:-ms-input-placeholder{color:var(--color-disabled);}.style-1gmi769::placeholder{color:var(--color-disabled);}.style-1gmi769::-webkit-search-cancel-button{-webkit-appearance:none;}</style><style data-emotion="style-global 17ja8a3">.style-17ja8a3{display:none;}@media (max-width: 991px){.style-17ja8a3{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:inherit;color:var(--color-mediumEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-1);-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:10px;}}.style-17ja8a3:active{color:var(--color-highEmphasis);}@media (hover: hover) and (pointer: fine){.style-17ja8a3:hover{color:var(--color-highEmphasis);}}</style><style data-emotion="style-global v2p563">.style-v2p563{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:24px;height:24px;overflow:hidden;width:24px;}</style><style data-emotion="style-global 1sn73cs">.style-1sn73cs{border-radius:8px;box-sizing:border-box;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:14px;font-weight:600;line-height:1.8;min-height:34px;min-width:64px;opacity:1;pointer-events:auto;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-surface);border:1px solid var(--color-greenBorder);color:var(--color-greenText);padding:3px 15px;margin-left:4px;}.style-1sn73cs:hover{-webkit-text-decoration:none;text-decoration:none;}.style-1sn73cs:active{background-color:var(--color-background);}@media (hover: hover) and (pointer: fine){.style-1sn73cs:hover{background-color:var(--color-background);}}</style><style data-emotion="style-global 1r635es">.style-1r635es{border-radius:8px;box-sizing:border-box;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:14px;font-weight:600;line-height:1.8;min-height:34px;min-width:64px;opacity:1;pointer-events:auto;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-greenContainer);color:var(--color-onContainerText);padding:4px 16px;margin-left:8px;}.style-1r635es:hover{-webkit-text-decoration:none;text-decoration:none;}.style-1r635es:active{background-color:var(--color-greenContainerDim);}@media (hover: hover) and (pointer: fine){.style-1r635es:hover{background-color:var(--color-greenContainerDim);}}</style><style data-emotion="style-global o5vjsc">.style-o5vjsc{display:none;margin:8px auto 0;width:calc(100vw - 32px);position:relative;}</style><style data-emotion="style-global 1l4w6pd">.style-1l4w6pd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><style data-emotion="style-global 1ygoan4">.style-1ygoan4{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-mediumEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;white-space:nowrap;padding:4px 12px;margin:4px 0;}.style-1ygoan4:hover{background-color:var(--color-surfaceVariant);border-radius:4px;color:var(--color-highEmphasis);-webkit-text-decoration:none;text-decoration:none;}</style><style data-emotion="style-global 14sigh5">.style-14sigh5{width:16px;height:16px;margin-right:4px;}</style><style data-emotion="style-global 1o3zxqp">.style-1o3zxqp{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;height:16px;overflow:hidden;width:16px;margin-left:4px;}</style><style data-emotion="style-global 34fkwz">.style-34fkwz{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;height:16px;overflow:hidden;width:16px;margin-right:2px;color:var(--color-greenText);}</style><style data-emotion="style "></style><style data-emotion="style "></style><style data-emotion="style-global 1geho0x">.style-1geho0x{color:var(--color-gray0);background-color:var(--color-gray90);display:grid;grid-template-columns:minmax(0, 1592px);-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-top:64px;padding:48px 32px;width:100%;}@media (max-width: 991px){.style-1geho0x{padding-inline:16px;}}</style><style data-emotion="style-global 1vesoht">.style-1vesoht{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}@media (max-width: 1199px){.style-1vesoht{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}</style><style data-emotion="style-global 1xygyrj">.style-1xygyrj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-right:48px;}</style><style data-emotion="style-global j7qwjs">.style-j7qwjs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}</style><style data-emotion="style-global 1g0k1wk">.style-1g0k1wk{fill:var(--color-gray0);}</style><style data-emotion="style-global 754ift">.style-754ift{font-size:var(--font-size-body-2);margin-top:16px;}</style><style data-emotion="style-global zsz8fb">.style-zsz8fb{display:block;margin-top:16px;}</style><style data-emotion="style-global 1efditc">.style-1efditc{border-radius:8px;display:block;}</style><style data-emotion="style-global 120vwzo">.style-120vwzo{font-size:var(--font-size-body-3);}@media (max-width: 1199px){.style-120vwzo{margin-top:24px;}}</style><style data-emotion="style-global 15fzge">.style-15fzge{margin-left:4px;}</style><style data-emotion="style-global 16bbk6m">.style-16bbk6m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:48px;}@media (max-width: 1199px){.style-16bbk6m{gap:32px;margin-top:48px;}}@media (max-width: 769px){.style-16bbk6m{gap:24px;}}@media (max-width: 479px){.style-16bbk6m{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}}</style><style data-emotion="style-global u4ybgy">.style-u4ybgy{width:160px;}</style><style data-emotion="style-global 35ezg3">.style-35ezg3{font-weight:600;}</style><style data-emotion="style-global 1fhgjcy">.style-1fhgjcy{margin-top:4px;}</style><style data-emotion="style-global ah54os">.style-ah54os{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-gray0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-2);padding-top:4px;padding-bottom:4px;}</style><style data-emotion="style-global ox3ag9">.style-ox3ag9{height:14px;fill:currentColor;width:14px;}</style><style data-emotion="style "></style><link as="style" crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" onload="this.onload=null;this.rel='stylesheet'" referrerpolicy="no-referrer" rel="preload" /><noscript><link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" referrerpolicy="no-referrer" rel="stylesheet" /></noscript></head><body><div class="allWrapper"><div id="GlobalHeader-react-component-4bc25042-5e64-41c2-b591-96f0e45c201e"><div class="style-1cnt4b8"><header><div class="style-ymuwam"><div class="style-fv3lde"><a href="/" aria-label="Qiita" class="style-1etvg7j"><svg viewBox="0 0 426.57 130" aria-hidden="true"><circle cx="167.08" cy="21.4" r="12.28"></circle><path d="M250.81 29.66h23.48v18.9h-23.48z"></path><path d="M300.76 105.26a22.23 22.23 0 01-6.26-.86 12.68 12.68 0 01-5.17-3 14.41 14.41 0 01-3.56-5.76 28 28 0 01-1.3-9.22V48.56h29.61v-18.9h-29.52V3.29h-20.17v83.34q0 11.16 2.83 18.27a27.71 27.71 0 007.7 11.2 26.86 26.86 0 0011.43 5.62 47.56 47.56 0 0012.34 1.53h15.16v-18zM0 61.7a58.6 58.6 0 015-24.21A62.26 62.26 0 0118.73 17.9 63.72 63.72 0 0139 4.78 64.93 64.93 0 0164 0a65 65 0 0124.85 4.78 64.24 64.24 0 0120.38 13.12A62 62 0 01123 37.49a58.6 58.6 0 015 24.21 58.34 58.34 0 01-4 21.46 62.8 62.8 0 01-10.91 18.16l11.1 11.1a10.3 10.3 0 010 14.52 10.29 10.29 0 01-14.64 0l-12.22-12.41a65 65 0 01-15.78 6.65 66.32 66.32 0 01-17.55 2.3 64.63 64.63 0 01-45.23-18A62.82 62.82 0 015 85.81 58.3 58.3 0 010 61.7zm21.64.08a43.13 43.13 0 0012.42 30.63 42.23 42.23 0 0013.43 9.09A41.31 41.31 0 0064 104.8a42 42 0 0030-12.39 42.37 42.37 0 009-13.64 43.43 43.43 0 003.3-17 43.77 43.77 0 00-3.3-17A41.7 41.7 0 0080.55 22 41.78 41.78 0 0064 18.68 41.31 41.31 0 0047.49 22a42.37 42.37 0 00-13.43 9.08 43.37 43.37 0 00-12.42 30.7zM331.89 78a47.59 47.59 0 013.3-17.73 43.22 43.22 0 019.34-14.47A44.25 44.25 0 01359 36a47.82 47.82 0 0118.81-3.58 42.72 42.72 0 019.26 1 46.5 46.5 0 018.22 2.58 40 40 0 017 3.84 44.39 44.39 0 015.71 4.63l1.22-9.47h17.35v85.83h-17.35l-1.17-9.42a42.54 42.54 0 01-5.84 4.67 43.11 43.11 0 01-7 3.79 44.86 44.86 0 01-8.17 2.59 43 43 0 01-9.22 1A47.94 47.94 0 01359 119.9a43.3 43.3 0 01-14.47-9.71 44.17 44.17 0 01-9.34-14.47 47 47 0 01-3.3-17.72zm20.27-.08a29.16 29.16 0 002.17 11.34 27 27 0 005.92 8.88 26.69 26.69 0 008.76 5.76 29.19 29.19 0 0021.44 0 26.11 26.11 0 008.72-5.76 27.57 27.57 0 005.88-8.84 29 29 0 002.16-11.38 28.62 28.62 0 00-2.16-11.22 26.57 26.57 0 00-5.93-8.8 27.68 27.68 0 00-19.51-7.9 28.29 28.29 0 00-10.77 2.05 26.19 26.19 0 00-8.71 5.75 27.08 27.08 0 00-5.84 8.8 28.94 28.94 0 00-2.13 11.31zm-194.97-30.5h19.78v73.54h-19.78zm49.25 0h19.78v73.54h-19.78z"></path><circle cx="216.33" cy="21.4" r="12.28"></circle></svg></a><a href="/advent-calendar" class="style-1dodnso"><span aria-hidden="true"><svg class="style-c2uxn6" viewBox="0 0 30 30" fill="none"><path d="M1.72271 23.209L1.72273 23.2089L11.7016 11.9457C11.7016 11.9457 11.7016 11.9457 11.7016 11.9457C12.0963 11.5004 12.792 11.5004 13.1867 11.9457C13.1867 11.9457 13.1867 11.9457 13.1867 11.9457L23.1659 23.2089L23.1659 23.209C23.589 23.6864 23.2499 24.4398 22.612 24.4398H2.27663C1.63872 24.4398 1.29967 23.6864 1.72271 23.209Z" fill="var(--color-greenContainer)" stroke="var(--color-greenBorder)"></path><path d="M14.579 22.8737H10.4212C9.96753 22.8737 9.59973 23.2415 9.59973 23.6952V28.7609C9.59973 29.2146 9.96753 29.5824 10.4212 29.5824H14.579C15.0327 29.5824 15.4005 29.2146 15.4005 28.7609V23.6952C15.4005 23.2415 15.0327 22.8737 14.579 22.8737Z" fill="var(--color-greenContainer)"></path><path d="M20.8857 15.2169L20.8857 15.217C20.994 15.3578 20.9946 15.5138 20.9223 15.6467C20.8483 15.7827 20.6941 15.8952 20.4752 15.8952H4.41374C4.19464 15.8952 4.04041 15.7827 3.96637 15.6467C3.89407 15.5139 3.89458 15.3579 4.00294 15.2169C4.00294 15.2169 4.00294 15.2169 4.00295 15.2169L10.3263 6.98949L10.4013 6.89188L10.4225 6.7706L10.4392 6.6745L10.4858 6.40696L10.2868 6.22222L8.75164 4.79746L8.75153 4.79736C8.72894 4.7764 8.72314 4.7603 8.72106 4.75148C8.71851 4.74069 8.71848 4.72658 8.72412 4.71024C8.73436 4.68057 8.76427 4.64114 8.83772 4.63052L10.9704 4.32239L11.2208 4.28622L11.34 4.06313L12.3078 2.25149L12.3079 2.25123C12.3273 2.21491 12.3705 2.1823 12.442 2.18225C12.5135 2.1822 12.557 2.21483 12.5765 2.25127L13.5475 4.06167L13.667 4.28453L13.9173 4.32032L16.0504 4.62536L16.0505 4.62538C16.1241 4.63588 16.154 4.67528 16.1643 4.70489C16.17 4.72121 16.17 4.73531 16.1674 4.74611C16.1654 4.75494 16.1596 4.77106 16.137 4.79205L16.137 4.7921L14.6044 6.21903L14.4059 6.40379L14.4525 6.67089L14.4711 6.77753L14.4922 6.89876L14.5672 6.99632L20.8857 15.2169Z" fill="var(--color-greenContainer)" stroke="var(--color-greenBorder)"></path><path d="M14.1996 14.6496C15.1934 14.6496 15.9991 13.844 15.9991 12.8501C15.9991 11.8562 15.1934 11.0505 14.1996 11.0505C13.2057 11.0505 12.4 11.8562 12.4 12.8501C12.4 13.844 13.2057 14.6496 14.1996 14.6496Z" fill="var(--color-gray0)"></path><path d="M10.3422 21.6882C11.336 21.6882 12.1417 20.8825 12.1417 19.8887C12.1417 18.8948 11.336 18.0891 10.3422 18.0891C9.34829 18.0891 8.5426 18.8948 8.5426 19.8887C8.5426 20.8825 9.34829 21.6882 10.3422 21.6882Z" fill="var(--color-gray0)"></path><path d="M28.292 19.9321H17.3233C17.0344 19.9321 16.8003 20.1663 16.8003 20.4551V29.0598C16.8003 29.3486 17.0344 29.5827 17.3233 29.5827H28.292C28.5808 29.5827 28.815 29.3486 28.815 29.0598V20.4551C28.815 20.1663 28.5808 19.9321 28.292 19.9321Z" fill="#BD0505"></path><path d="M21.433 19.9036C21.0396 19.9036 20.6837 19.7442 20.4258 19.4866C20.1679 19.229 20.0085 18.8731 20.0085 18.48C20.0085 18.087 20.1679 17.7311 20.4258 17.4735C20.6837 17.2159 21.0396 17.0565 21.433 17.0565C21.8264 17.0565 22.1823 17.2159 22.4402 17.4735C22.6978 17.7311 22.8574 18.087 22.8574 18.48V19.9318L21.4333 19.9032L21.433 19.9036Z" fill="var(--color-gray0)" stroke="#BD0505" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M24.2816 19.9036C24.675 19.9036 25.0309 19.7442 25.2888 19.4866C25.5464 19.229 25.7061 18.8731 25.7061 18.48C25.7061 18.087 25.5467 17.7311 25.2888 17.4735C25.0312 17.2159 24.675 17.0565 24.2816 17.0565C23.8882 17.0565 23.5324 17.2159 23.2744 17.4735C23.0165 17.7311 22.8572 18.087 22.8572 18.48V19.9318L24.2813 19.9032L24.2816 19.9036Z" fill="var(--color-gray0)" stroke="#BD0505" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.0491 24.7572H27.5666" stroke="var(--color-gray0)" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"></path><path d="M22.8076 21.2563V28.2584" stroke="var(--color-gray0)" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="style-1afofdy">Go to Qiita Advent Calendar 2024 Top</span></a></div><div class="style-fv3lde"><form action="/search" method="get" role="search" aria-label="Search" class="style-68a7fl"><span class="material-symbols-outlined style-18lpml7" aria-hidden="true">search</span><input type="search" autoComplete="off" placeholder="Search" value="" name="q" required="" class="style-1gmi769"/></form><button class="style-17ja8a3"><span class="material-symbols-outlined style-v2p563" aria-hidden="true">search</span><span class="style-1afofdy">Search</span></button><a href="/login?callback_action=login_or_signup&redirect_to=%2FTachy_Pochy%2Fitems%2F752ef6e3d38e970378f0&realm=qiita" rel="nofollow" class="style-1sn73cs">Login</a><a href="/signup?callback_action=login_or_signup&redirect_to=%2FTachy_Pochy%2Fitems%2F752ef6e3d38e970378f0&realm=qiita" rel="nofollow" class="style-1r635es">Signup</a></div></div><form action="/search" method="get" role="search" aria-label="Search" class="style-o5vjsc"><span class="material-symbols-outlined style-18lpml7" aria-hidden="true">search</span><input type="text" autoComplete="off" placeholder="Search" value="" name="q" required="" class="style-1gmi769"/></form></header><nav aria-label="Global" class="style-1l4w6pd"><ol class="style-1736035"><li><a href="/" class="style-1ygoan4">Trend</a></li><li><a href="/question-feed" class="style-1ygoan4">Question</a></li><li><a href="/advent-calendar" class="style-1ygoan4"><svg class="style-14sigh5" viewBox="0 0 20 20" fill="none"><g><path d="M9.27965 7.40752L2.84145 14.6741C2.38405 15.1903 2.75065 16.0047 3.44025 16.0047H16.5599C17.2495 16.0047 17.6161 15.1903 17.1587 14.6741L10.7205 7.40752C10.3375 6.97532 9.66265 6.97532 9.27965 7.40752Z" fill="var(--color-greenContainer)" stroke="var(--color-greenBorder)"></path><path d="M8.56648 15.5H11.4335C11.4387 15.5 11.4508 15.5013 11.4671 15.5189C11.484 15.5371 11.5 15.5689 11.5 15.6123V19.3877C11.5 19.4311 11.484 19.4629 11.4671 19.4811C11.4508 19.4987 11.4387 19.5 11.4335 19.5H8.56648C8.5613 19.5 8.5492 19.4987 8.53293 19.4811C8.51605 19.4629 8.5 19.4311 8.5 19.3877V15.6123C8.5 15.5689 8.51605 15.5371 8.53293 15.5189C8.5492 15.5013 8.5613 15.5 8.56648 15.5Z" fill="var(--color-greenContainer)" stroke="var(--color-greenBorder)"></path><path d="M15.702 9.53557L11.6256 4.23197L11.6136 4.16317L12.6024 3.24257C12.845 3.01677 12.71 2.62777 12.3724 2.57957L10.9962 2.38277L10.3698 1.21477C10.2162 0.928372 9.7806 0.928572 9.6276 1.21537L9.0032 2.38417L7.6272 2.58297C7.2898 2.63177 7.1554 3.02097 7.3984 3.24637L8.3888 4.16557L8.378 4.22757L4.2984 9.53557C3.9916 9.93477 4.2952 10.4924 4.8192 10.4924H15.1814C15.7054 10.4924 16.0088 9.93457 15.702 9.53557Z" fill="var(--color-greenContainer)" stroke="var(--color-greenBorder)"></path><path d="M11.1324 9.36595C11.7736 9.36595 12.2934 8.84615 12.2934 8.20495C12.2934 7.56374 11.7736 7.04395 11.1324 7.04395C10.4912 7.04395 9.97144 7.56374 9.97144 8.20495C9.97144 8.84615 10.4912 9.36595 11.1324 9.36595Z" fill="var(--color-gray0)"></path><path d="M8.64391 13.907C9.28511 13.907 9.80491 13.3872 9.80491 12.746C9.80491 12.1048 9.28511 11.585 8.64391 11.585C8.00271 11.585 7.48291 12.1048 7.48291 12.746C7.48291 13.3872 8.00271 13.907 8.64391 13.907Z" fill="var(--color-gray0)"></path></g><defs><clipPath><rect width="20" height="20" fill="var(--color-gray0)"></rect></clipPath></defs></svg>Advent Calendar</a></li><li><a href="/official-events" class="style-1ygoan4">Official Event</a></li><li><a href="/official-columns" target="_blank" class="style-1ygoan4">Official Column<span class="material-symbols-outlined style-1o3zxqp" aria-hidden="true">open_in_new</span></a></li><li><a href="/opportunities/findy" class="style-1ygoan4"><span class="material-symbols-outlined style-34fkwz" aria-hidden="true">signpost</span>Findy Contents</a></li><li><a href="/organizations" class="style-1ygoan4">Organization</a></li></ol></nav></div></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="GlobalHeader" data-dom-id="GlobalHeader-react-component-4bc25042-5e64-41c2-b591-96f0e45c201e">{"isHideGlobalNavigation":false}</script> <div id="AlertMessage-react-component-f7530883-192e-4edd-b342-79de5c17ae19"></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="AlertMessage" data-dom-id="AlertMessage-react-component-f7530883-192e-4edd-b342-79de5c17ae19">{"isShowTfaDownloadAlert":null}</script> <div class="mainWrapper"><script type="application/ld+json">{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/","name":"Qiita"}},{"@type":"ListItem","position":2,"item":{"@id":"/tags/plantuml","name":"PlantUML"}}]}</script><script type="application/ld+json">{"@context":"http://schema.org","@type":"Article","datePublished":"2017-07-27T18:12:34.000+09:00","dateModified":"2024-05-04T09:17:23.000+09:00","headline":"PlantUML で ER 図（ERD）を描く（似非ではないです）","image":"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzc1NTQlMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODc0NjY_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9YTFmNzU0NjVjYmUyZTdhZjM5ZGE4ZjM5ZWIzOTllMmI%26blend-x%3D120%26blend-y%3D467%26blend-w%3D82%26blend-h%3D82%26blend-mode%3Dnormal%26s%3D32f3c9d4cb79af9b4e989f4ab4087fd6?ixlib=rb-4.0.0\u0026w=1200\u0026fm=jpg\u0026mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9UGxhbnRVTUwlMjAlRTMlODElQTclMjBFUiUyMCVFNSU5QiVCMyVFRiVCQyU4OEVSRCVFRiVCQyU4OSVFMyU4MiU5MiVFNiU4RiU4RiVFMyU4MSU4RiVFRiVCQyU4OCVFNCVCQyVCQyVFOSU5RCU5RSVFMyU4MSVBNyVFMyU4MSVBRiVFMyU4MSVBQSVFMyU4MSU4NCVFMyU4MSVBNyVFMyU4MSU5OSVFRiVCQyU4OSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTVlYjhlNzkwZmQ4Nzc5NGMyYTA5MzQ4ZmVmYzQ3MzIx\u0026mark-x=120\u0026mark-y=112\u0026blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBUYWNoeV9Qb2NoeSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWUzZmNjZjA0NGViZTU3MGZkOTFiYWU5NTVhNWM0NjJl\u0026blend-x=242\u0026blend-y=480\u0026blend-w=838\u0026blend-h=46\u0026blend-fit=crop\u0026blend-crop=left%2Cbottom\u0026blend-mode=normal\u0026s=90597acb8f6ff1b9fadddab9746ac714","mainEntityOfPage":"https://qiita.com/Tachy_Pochy/items/752ef6e3d38e970378f0","author":{"@type":"Person","address":"","email":null,"identifier":"Tachy_Pochy","name":"Tachy_Pochy","image":"https://qiita-user-profile-images.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F37554%2Fprofile-images%2F1473687466?ixlib=rb-4.0.0\u0026auto=compress%2Cformat\u0026lossless=0\u0026w=75\u0026s=efb54d6241624eb385dfd76d28c4c032","url":"https://qiita.com/Tachy_Pochy","description":"","memberOf":[]},"publisher":{"@type":"Organization","name":"Qiita","logo":{"@type":"ImageObject","url":"https://cdn.qiita.com/assets/public/qiita-logo-c39ded593afa388e2e1ba435b110554e.png"}}}</script><style type="text/css">html { scroll-behavior: smooth; }</style><script type="application/json" id="js-react-on-rails-context">{"railsEnv":"production","inMailer":false,"i18nLocale":"en","i18nDefaultLocale":"en","rorVersion":"13.4.0","rorPro":false,"href":"https://qiita.com/Tachy_Pochy/items/752ef6e3d38e970378f0","location":"/Tachy_Pochy/items/752ef6e3d38e970378f0","scheme":"https","host":"qiita.com","port":null,"pathname":"/Tachy_Pochy/items/752ef6e3d38e970378f0","search":null,"httpAcceptLanguage":null,"actionPath":"public/items#show","settings":{"analyticsTrackingId":"G-KEVS5DBRVN","tagManagerId":"GTM-W9W5TX4","assetsMap":{},"csrfToken":"uoGB0JPvCNG9O9drYd0jnlvgvTf0x4k2z9A0hyIzlH_83P_9Tn-sT0NL3UbGY1sqQwMqoQ1MF_4euEFLzc-QoQ","locale":"en","pushOne":{"accessToken":"4bc4bb057a0601d388a7b9e499ca2307e9eb4fc172804e310c59e511d7cac356","dialogImageUrl":"//cdn.qiita.com/assets/public/push_notification/image-qiitan-572179a3bbde375850422ea48b2b6272.png"},"textlint":{"workerUrl":"//cdn.qiita.com/assets/public/textlint-worker-428d514da98d8b84007e40519b9f530f.min.js"}},"currentUser":null,"isLoggedIn":false,"isQiitaConference2024AutumnBeingHeld":false,"isFindyPageReleased":true,"recaptchaSiteKey":"6LdDE6gpAAAAANCGOJu9_xiI5Z-txJxHCz8uBP8Y","errorIconPath":"//cdn.qiita.com/assets/icons/large/missing-profile-image-828ed5829a93fbb35746a6c0f7c8107e.png","additionalParams":{"query_parameters":{},"path_parameters":{"controller":"public/items","action":"show","user_id":"Tachy_Pochy","type":"items","id":"752ef6e3d38e970378f0"},"request_id":"e0a91358-e14e-4794-8d26-183399c94a5a","user_id":null},"realms":[{"humanName":"Qiita","isCurrentRealm":true,"isQiita":true,"isQiitaTeam":false,"loggedInUser":null,"teamId":null,"url":"https://qiita.com/"}],"serverSide":false}</script> <div id="PersonalArticlePage-react-component-0573330a-0d77-483e-ba20-1ca82ceff99f"><main class=" style-qgd36e"><section class="style-1hl01qi"><div class="style-c1wjhj"><div class="style-1duml6f"><svg width="64" height="64" viewBox="0 0 64 64" class="style-ftns26"><circle cx="32" cy="32" r="19" class="circle"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M30.5865 41.1378C31.3272 41.8221 32.6722 41.8319 33.4129 41.1574L33.4718 41.1037C38.5554 36.4713 41.8819 33.4401 41.746 29.6619C41.6875 28.0001 40.8396 26.4068 39.4654 25.4684C37.3743 24.0305 34.8841 24.4462 33.1038 25.7333C32.6936 26.0299 32.321 26.3728 31.9997 26.75C31.6783 26.3727 31.3056 26.03 30.8952 25.7338C29.115 24.4491 26.625 24.0385 24.5341 25.4684C23.1599 26.4068 22.312 28.0001 22.2535 29.6619C22.1268 33.4546 25.4697 36.4947 30.5865 41.1378ZM23.7526 29.7133C23.7953 28.5111 24.4144 27.3665 25.38 26.7071L25.3808 26.7065C27.1492 25.4973 29.4926 26.12 30.8579 27.7227L31.543 28.527C31.7826 28.8082 32.2169 28.8082 32.4565 28.527L33.1416 27.7227C34.5102 26.1161 36.8515 25.4914 38.6155 26.7044L38.6195 26.7071C39.5855 27.3667 40.2046 28.512 40.2469 29.7146L40.247 29.7158C40.2969 31.1036 39.73 32.4647 38.3804 34.1435C37.0091 35.8492 34.9938 37.6874 32.403 40.0483C32.3636 40.0842 32.2314 40.1587 32.0103 40.1572C31.7898 40.1556 31.6512 40.0792 31.6044 40.036L31.5995 40.0315L31.5945 40.027C29.0048 37.677 26.9919 35.8432 25.6225 34.1408C24.2752 32.4657 23.7066 31.1034 23.7526 29.7133Z" class="heart-stroke"></path><path d="M33.4129 41.1574C32.6722 41.8319 31.3272 41.8221 30.5865 41.1378C25.4697 36.4947 22.1268 33.4546 22.2535 29.6619C22.312 28.0001 23.1599 26.4068 24.5341 25.4684C27.1071 23.7089 30.2844 24.7363 31.9997 26.75C33.7151 24.7363 36.8924 23.6991 39.4654 25.4684C40.8396 26.4068 41.6875 28.0001 41.746 29.6619C41.8824 33.4546 38.5297 36.4947 33.4129 41.1574Z" class="heart-fill"></path><g class="particles" style="--rotate:30deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:102deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:174deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:246deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:318deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g></svg><button aria-label="Like" aria-pressed="false" title="Like" class="style-10ttvi6"></button></div><div class="style-wknrvb"><div class="style-3fim88"><a href="/Tachy_Pochy/items/752ef6e3d38e970378f0/likers" aria-label="448Likes" aria-describedby="like-tooltip" class="style-1a6dkvp">448</a><p role="tooltip" id="like-tooltip" aria-hidden="false" class="style-16g96ve">Go to list of users who liked</p></div></div></div><div class="style-1bc9a2c"><button aria-haspopup="dialog" aria-expanded="false" aria-controls="ButtonBAhJIhNBcnRpY2xlLTUxMTU2OAY6BkVU--fd13d966b00a219b3e8e0a50ca9d5ced9338da96f70a3d7c7ed1cfe36664ed9b" aria-label="Stock" class="style-1xwfn2v" type="button"><svg class="style-100tu0r" height="32" viewBox="0 0 32 32" width="32" aria-hidden="true"><path d="M6.5 5H25.5C25.7761 5 26 5.22386 26 5.5V6.5C26 6.77614 25.7761 7 25.5 7H6.5C6.22386 7 6 6.77614 6 6.5V5.5C6 5.22386 6.22386 5 6.5 5ZM24 19V11.5C24 11.3674 23.9473 11.2402 23.8536 11.1464C23.7598 11.0527 23.6326 11 23.5 11H8.5C8.36739 11 8.24021 11.0527 8.14645 11.1464C8.05268 11.2402 8 11.3674 8 11.5V19C8 20.8565 8.7375 22.637 10.0503 23.9497C11.363 25.2625 13.1435 26 15 26H17C18.8565 26 20.637 25.2625 21.9497 23.9497C23.2625 22.637 24 20.8565 24 19ZM6.58579 9.58579C6.96086 9.21071 7.46957 9 8 9H24C24.5304 9 25.0391 9.21071 25.4142 9.58579C25.7893 9.96086 26 10.4696 26 11V19C26 21.3869 25.0518 23.6761 23.364 25.364C21.6761 27.0518 19.3869 28 17 28H15C12.6131 28 10.3239 27.0518 8.63604 25.364C6.94821 23.6761 6 21.3869 6 19V11C6 10.4696 6.21071 9.96086 6.58579 9.58579Z"></path></svg></button><span class="style-1vem4tk">407</span></div><button aria-label="Share on X(Twitter)" title="Post" class="style-1n9ulpr" type="button"><svg class="style-1b1cd5z" viewBox="0 0 20 20"><path d="m11.68 8.62 6.55-7.62h-1.55l-5.69 6.62-4.55-6.62h-5.25l6.88 10.01-6.88 7.99h1.55l6.01-6.99 4.8 6.99h5.24l-7.13-10.38zm-2.13 2.47-.7-1-5.54-7.92h2.39l4.47 6.4.7 1 5.82 8.32h-2.39l-4.75-6.79z"></path></svg></button><button aria-label="Share on facebook" title="Share on Facebook" class="style-1n9ulpr" type="button"><svg class="style-157xj1g" height="20" viewBox="0 0 20 20" width="20"><path d="m20 10c0-5.52-4.48-10-10-10s-10 4.48-10 10c0 4.99 3.66 9.13 8.44 9.88v-6.99h-2.54v-2.89h2.54v-2.2c0-2.51 1.49-3.89 3.78-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.77l-.44 2.89h-2.33v6.99c4.78-.75 8.44-4.89 8.44-9.88z"></path><path d="m13.89 12.89.44-2.89h-2.77v-1.88c0-.79.39-1.56 1.63-1.56h1.26v-2.46s-1.14-.2-2.24-.2c-2.28 0-3.78 1.38-3.78 3.89v2.2h-2.54v2.89h2.54v6.99c.51.08 1.03.12 1.56.12s1.05-.04 1.56-.12v-6.99h2.33z" fill="#ffffff"></path></svg></button><a class="style-1o9h1hg" href="https://b.hatena.ne.jp/entry/s/qiita.com/Tachy_Pochy/items/752ef6e3d38e970378f0" rel="noopener noreferrer" target="_blank" title="Hatena Bookmark"><svg class="style-1uu7u3w" viewBox="0 0 20 20"><rect height="18" rx="3.67" width="18" x="1" y="1" fill="#1d9bf0"></rect><g fill="#ffffff"><path d="m11.01 10.29c-.33-.36-.78-.57-1.36-.61.52-.14.89-.35 1.13-.62s.35-.64.35-1.11c0-.37-.08-.69-.24-.97s-.39-.5-.69-.67c-.26-.15-.58-.25-.94-.31-.37-.06-1.01-.09-1.93-.09h-2.24v8.18h2.31c.93 0 1.6-.03 2.01-.09s.75-.17 1.03-.32c.34-.18.61-.44.79-.77s.28-.72.28-1.15c0-.61-.16-1.09-.49-1.46zm-3.85-2.57h.48c.55 0 .93.06 1.12.19s.29.34.29.65-.1.5-.31.63c-.21.12-.58.18-1.13.18h-.45v-1.64zm1.9 4.69c-.22.13-.59.2-1.12.2h-.78v-1.79h.81c.54 0 .91.07 1.11.2.2.14.3.38.3.72 0 .31-.11.53-.33.66z"></path><path d="m13.87 12.02c-.57 0-1.04.46-1.04 1.04s.46 1.04 1.04 1.04 1.04-.46 1.04-1.04-.46-1.04-1.04-1.04z"></path><path d="m12.97 5.91h1.8v5.45h-1.8z"></path></g></svg></a><div class="style-79elbk"><button aria-haspopup="menu" aria-expanded="false" aria-controls="ArticleStickyMenuDropdown" class="style-1vr7y3r" aria-label="Open options" type="button"><span class="material-symbols-outlined style-v2p563" aria-hidden="true">more_horiz</span></button><dialog aria-modal="true" aria-labelledby="ArticleDeleteConfirmationModal-label" class="style-oi42s2"><div class="style-2aaf4j"><div class="style-bxc62b"><p id="ArticleDeleteConfirmationModal-label" class="style-1snuvpu">Delete article</p><button type="button" aria-label="" class="style-o8tyjw"><span class="material-symbols-outlined style-v2p563" aria-hidden="true">close</span></button></div><div class="style-6vdptm"><p>Deleted articles cannot be recovered.</p><p>Draft of this article would be also deleted.</p><p>Are you sure you want to delete this article?</p></div><div class="style-111ab2g"><button font-size="16" type="button" class="style-hreeih">Cancel</button><button font-size="16" type="button" class="style-y54waz">Delete<span class="material-symbols-outlined is-fill style-1jvcm2e" aria-hidden="true">delete</span></button></div></div></dialog></div></section><div class="p-items_options"><aside><div class="style-1hbd3g7"></div></aside><div class="p-items_toc"><aside><div class="style-1hbd3g7"></div></aside></div></div><div class="p-items_main"><div class="style-uaiz0z"></div><article class="style-itrjxe"><div class="style-8qb8m4"><div data-logly-image="true" class="style-i43zkt"><div class="style-17gh4w8"><a href="/Tachy_Pochy" class="style-mavs84"><div class="style-kcbbwa"><img height="24" loading="lazy" src="https://qiita-user-profile-images.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F37554%2Fprofile-images%2F1473687466?ixlib=rb-4.0.0&auto=compress%2Cformat&lossless=0&w=48&s=c7aeb87723189d5afd2dd817f4b33472" width="24" class="style-1wqqt93"/></div>@Tachy_Pochy<span class="style-15fzge">(Tachy Pochy)</span></a></div></div><h1 data-logly-title="true" class="style-wo2a1i">PlantUML で ER 図（ERD）を描く（似非ではないです）</h1><ul class="style-28f073"><li><a href="/tags/uml" class="style-mp1hhj">uml</a></li><li><a href="/tags/plantuml" class="style-mp1hhj">PlantUML</a></li><li><a href="/tags/er%e5%9b%b3" class="style-mp1hhj">ER図</a></li></ul><div class="style-1npej5s"><span class="style-3k9iaf">Last updated at <time dateTime="2024-05-04T00:17:23Z">2024-05-04</time></span><span class="style-3k9iaf">Posted at 2017-07-27</span></div></div><section class="it-MdContent"><div id="personal-public-article-body"><div class="mdContent-inner"><h2 data-sourcepos="1:1-1:15"> <span id="はじめに" class="fragment"></span><a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB"><i class="fa fa-link"></i></a>はじめに</h2> <p data-sourcepos="3:1-3:109"><a href="http://plantuml.com/" rel="nofollow noopener" target="_blank">PlantUML</a> ではバージョン 1.2017.08 から ER 図に対応しています。<sup><a href="#fn-1" id="fnref-1">1</a></sup></p> <p data-sourcepos="5:1-5:229">以前の「 <a href="http://qiita.com/Tachy_Pochy/items/d074e6cbf2f5f4527fa7" id="reference-a021b17570a11e3eaaaf">PlantUML で ER 図を描く（似非） - Qiita</a> 」の記事ではクラス図を流用しましたが、こちらの記事はそうではありません。</p> <p data-sourcepos="7:1-7:207">しかしどうやらクラス図のキーワード "class" に "entity" というエイリアスをかぶせて実現しているようで、クラス図とほとんど同じように書けます。<sup><a href="#fn-2" id="fnref-2">2</a></sup><sup><a href="#fn-3" id="fnref-3">3</a></sup></p> <h2 data-sourcepos="9:1-9:27"> <span id="カーディナリティ" class="fragment"></span><a href="#%E3%82%AB%E3%83%BC%E3%83%87%E3%82%A3%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3"><i class="fa fa-link"></i></a>カーディナリティ</h2> <p data-sourcepos="11:1-11:63">カーディナリティにはこんな種類があります。</p> <div class="code-frame" data-lang="puml" data-sourcepos="13:1-21:3"> <div class="code-lang"><span class="bold">カーディナリティ</span></div> <div class="highlight"><pre><code> ------ :1 ----|| :1 and only 1 ----o| :0 or 1 -----{ :many ----|{ :1 or more ----o{ :0 or many </code></pre></div> </div> <p data-sourcepos="22:1-22:12">描画結果</p> <p data-sourcepos="24:1-24:104"><a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F37554%2F7a1282f6-4355-92a4-6209-fceb87c795fe.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9fef845cec096ec40efdfb03e1b2c1c9" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F37554%2F7a1282f6-4355-92a4-6209-fceb87c795fe.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9fef845cec096ec40efdfb03e1b2c1c9" alt="test.png" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F37554%2F7a1282f6-4355-92a4-6209-fceb87c795fe.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=6a0c926cb6ee0949d8768a73a4eadba9 1x" data-canonical-src="https://qiita-image-store.s3.amazonaws.com/0/37554/7a1282f6-4355-92a4-6209-fceb87c795fe.png" loading="lazy"></a></p> <p data-sourcepos="26:1-26:282">このサンプルでは不要な水平線が入っています。この水平線はクラス図の「プロパティ（フィールド）」と「メソッド」を分ける「区切り線」ですが、<code>hide empty members</code> を最初に書いておくと非表示に出来ます。</p> <p data-sourcepos="28:1-28:47">参考：<a href="http://plantuml.com/class-diagram#Hide" class="autolink" rel="nofollow noopener" target="_blank">http://plantuml.com/class-diagram#Hide</a></p> <h2 data-sourcepos="30:1-30:15"> <span id="er-図とは" class="fragment"></span><a href="#er-%E5%9B%B3%E3%81%A8%E3%81%AF"><i class="fa fa-link"></i></a>ER 図とは</h2> <p data-sourcepos="32:1-33:110">ER図そのものについては下記のサイトが詳しいです。<br> <a href="http://itref.fc2web.com/technology/entity_relationship_diagram.html" rel="nofollow noopener" target="_blank">ER図（Entity Relationship Diagram）</a></p> <p data-sourcepos="35:1-36:76">また、書き方については下記の書籍が詳しいです。オススメです。<br> <a href="http://www.shoeisha.co.jp/book/detail/9784798110660" rel="nofollow noopener" target="_blank">楽々ERDレッスン</a></p> <h2 data-sourcepos="38:1-38:15"> <span id="サンプル" class="fragment"></span><a href="#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB"><i class="fa fa-link"></i></a>サンプル</h2> <p data-sourcepos="40:1-40:181"><a href="http://qiita.com/Tachy_Pochy/items/d074e6cbf2f5f4527fa7">前回</a> 同様、下記のページからテーブル構成を参考にして、PlantUML で ER 図を書いてみます。</p> <p data-sourcepos="42:1-42:145"><a href="http://it-koala.com/entity-relationship-diagram-1897" rel="nofollow noopener" target="_blank">若手プログラマー必読！５分で理解できるER図の書き方５ステップ</a></p> <div class="code-frame" data-lang="puml" data-sourcepos="44:1-154:3"> <div class="code-lang"><span class="bold">サンプル</span></div> <div class="highlight"><pre><code>@startuml /' 図の中で目立たせたいエンティティに着色するための色の名前（定数）を定義します。 '/ !define MAIN_ENTITY #E2EFDA-C6E0B4 !define MAIN_ENTITY_2 #FCE4D6-F8CBAD /' 他の色も、用途が分りやすいように名前をつけます。 '/ !define METAL #F2F2F2-D9D9D9 !define MASTER_MARK_COLOR AAFFAA !define TRANSACTION_MARK_COLOR FFAA00 /' デフォルトのスタイルを設定します。この場合の指定は class です。entity ではエラーになります。 '/ skinparam class { BackgroundColor METAL BorderColor Black ArrowColor Black } package "外部データベース" as ext <<Database>> { entity "顧客マスタ" as customer <<M,MASTER_MARK_COLOR>> { + 顧客ID [PK] -- 顧客名郵便番号住所電話番号 FAX } } package "開発対象システム" as target_system { /' マスターテーブルを M、トランザクションを T などと安直にしていますが、チーム内でルールを決めればなんでも良いと思います。交差テーブルは "I" とか。角丸四角形が描けない代替です。１文字なら "主" とか "従" とか日本語でも OK だったのがウケる。 '/ entity "注文テーブル" as order <<主,TRANSACTION_MARK_COLOR>> MAIN_ENTITY { + 注文ID [PK] -- # 顧客ID [FK] 注文日時配送希望日配送方法お届け先名お届け先住所決済方法合計金額消費税額 } entity "注文明細テーブル" as order_detail <<T,TRANSACTION_MARK_COLOR>> MAIN_ENTITY_2 { + 注文ID [PK] + 明細番号 [PK] -- # SKU [FK] 注文数税抜価格税込価格 } entity "SKUマスタ" as sku <<M,MASTER_MARK_COLOR>> { + SKU [PK] -- # 商品ID [FK] カラーサイズ重量販売単価仕入単価 } entity "商品マスタ" as product <<M,MASTER_MARK_COLOR>> { + 商品ID [PK] -- 商品名原産国 # 仕入先ID [FK] 商品カテゴリ配送必要日数 } entity "仕入先マスタ" as vendor <<M,MASTER_MARK_COLOR>> { + 仕入先ID [PK] -- 仕入れ先名郵便番号住所電話番号 FAX番号 } } customer |o-ri-o{ order order ||-ri-|{ order_detail order_detail }-do-|| sku sku }-le-|| product product }o-le-|| vendor note bottom of customer : 別プロジェクト\nDB-Linkで参照する @enduml </code></pre></div> </div> <h2 data-sourcepos="156:1-156:9"> <span id="結果" class="fragment"></span><a href="#%E7%B5%90%E6%9E%9C"><i class="fa fa-link"></i></a>結果</h2> <p data-sourcepos="158:1-158:115"><a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F37554%2Fd6d2c34e-d36f-56e2-eaf9-f31b18c32b11.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9ff9292b6bed90a7478094f1cef2e2f2" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F37554%2Fd6d2c34e-d36f-56e2-eaf9-f31b18c32b11.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9ff9292b6bed90a7478094f1cef2e2f2" alt="newpumlTemplate.png" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F37554%2Fd6d2c34e-d36f-56e2-eaf9-f31b18c32b11.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=61079e3e5a1a8eea270c057631aabc57 1x" data-canonical-src="https://qiita-image-store.s3.amazonaws.com/0/37554/d6d2c34e-d36f-56e2-eaf9-f31b18c32b11.png" loading="lazy"></a></p> <section class="footnotes"> <ol> <li id="fn-1"> <p data-sourcepos="160:7-160:438">初め、1.2017.08 が「2017年の08月にリリースが予定されているバージョン」と勘違いしてしまいました。「2017年の８回目のリリース」のようで、３月に出ています。 <a href="https://github.com/plantuml/plantuml/pull/31" rel="nofollow noopener" target="_blank">こちら</a> の冒頭のコードがエラーになったので未サポートだと思っていました。記事投稿現在のバージョンは 1.2017.15 です。 <a href="#fnref-1" class="">↩</a></p> </li> <li id="fn-2"> <p data-sourcepos="162:7-162:233">その所為なのかリリースノートにも書かれていないなど、あまりおおっぴらに「ERD サポート！」と言っていませんね。ひょっとして ER 図の需要は少ないのでしょうか。 <a href="#fnref-2" class="">↩</a></p> </li> <li id="fn-3"> <p data-sourcepos="164:7-164:136">デフォルトのスタイルを設定する <code>skinparam</code> 構文では <code>class</code> を指定するなど、名残が見られます。 <a href="#fnref-3" class="">↩</a></p> </li> </ol> </section> </div></div></section><div class="style-163v3sq"><div class="style-1f18zs1"><div class="style-aaiy04"><div class="style-1duml6f"><svg width="64" height="64" viewBox="0 0 64 64" class="style-ftns26"><circle cx="32" cy="32" r="19" class="circle"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M30.5865 41.1378C31.3272 41.8221 32.6722 41.8319 33.4129 41.1574L33.4718 41.1037C38.5554 36.4713 41.8819 33.4401 41.746 29.6619C41.6875 28.0001 40.8396 26.4068 39.4654 25.4684C37.3743 24.0305 34.8841 24.4462 33.1038 25.7333C32.6936 26.0299 32.321 26.3728 31.9997 26.75C31.6783 26.3727 31.3056 26.03 30.8952 25.7338C29.115 24.4491 26.625 24.0385 24.5341 25.4684C23.1599 26.4068 22.312 28.0001 22.2535 29.6619C22.1268 33.4546 25.4697 36.4947 30.5865 41.1378ZM23.7526 29.7133C23.7953 28.5111 24.4144 27.3665 25.38 26.7071L25.3808 26.7065C27.1492 25.4973 29.4926 26.12 30.8579 27.7227L31.543 28.527C31.7826 28.8082 32.2169 28.8082 32.4565 28.527L33.1416 27.7227C34.5102 26.1161 36.8515 25.4914 38.6155 26.7044L38.6195 26.7071C39.5855 27.3667 40.2046 28.512 40.2469 29.7146L40.247 29.7158C40.2969 31.1036 39.73 32.4647 38.3804 34.1435C37.0091 35.8492 34.9938 37.6874 32.403 40.0483C32.3636 40.0842 32.2314 40.1587 32.0103 40.1572C31.7898 40.1556 31.6512 40.0792 31.6044 40.036L31.5995 40.0315L31.5945 40.027C29.0048 37.677 26.9919 35.8432 25.6225 34.1408C24.2752 32.4657 23.7066 31.1034 23.7526 29.7133Z" class="heart-stroke"></path><path d="M33.4129 41.1574C32.6722 41.8319 31.3272 41.8221 30.5865 41.1378C25.4697 36.4947 22.1268 33.4546 22.2535 29.6619C22.312 28.0001 23.1599 26.4068 24.5341 25.4684C27.1071 23.7089 30.2844 24.7363 31.9997 26.75C33.7151 24.7363 36.8924 23.6991 39.4654 25.4684C40.8396 26.4068 41.6875 28.0001 41.746 29.6619C41.8824 33.4546 38.5297 36.4947 33.4129 41.1574Z" class="heart-fill"></path><g class="particles" style="--rotate:30deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:102deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:174deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:246deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:318deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g></svg><button aria-label="Like" aria-pressed="false" title="Like" class="style-10ttvi6"></button></div><div class="style-buogjo"><div class="style-3fim88"><a href="/Tachy_Pochy/items/752ef6e3d38e970378f0/likers" aria-label="448Likes" aria-describedby="like-tooltip" class="style-1a6dkvp">448</a><p role="tooltip" id="like-tooltip" aria-hidden="false" class="style-uw35c3">Go to list of users who liked</p></div></div></div><div class="style-izmm4j"><button aria-haspopup="dialog" aria-expanded="false" aria-controls="ButtonBAhJIhNBcnRpY2xlLTUxMTU2OAY6BkVU--fd13d966b00a219b3e8e0a50ca9d5ced9338da96f70a3d7c7ed1cfe36664ed9b" aria-label="Stock" class="style-1xwfn2v" type="button"><svg class="style-100tu0r" height="32" viewBox="0 0 32 32" width="32" aria-hidden="true"><path d="M6.5 5H25.5C25.7761 5 26 5.22386 26 5.5V6.5C26 6.77614 25.7761 7 25.5 7H6.5C6.22386 7 6 6.77614 6 6.5V5.5C6 5.22386 6.22386 5 6.5 5ZM24 19V11.5C24 11.3674 23.9473 11.2402 23.8536 11.1464C23.7598 11.0527 23.6326 11 23.5 11H8.5C8.36739 11 8.24021 11.0527 8.14645 11.1464C8.05268 11.2402 8 11.3674 8 11.5V19C8 20.8565 8.7375 22.637 10.0503 23.9497C11.363 25.2625 13.1435 26 15 26H17C18.8565 26 20.637 25.2625 21.9497 23.9497C23.2625 22.637 24 20.8565 24 19ZM6.58579 9.58579C6.96086 9.21071 7.46957 9 8 9H24C24.5304 9 25.0391 9.21071 25.4142 9.58579C25.7893 9.96086 26 10.4696 26 11V19C26 21.3869 25.0518 23.6761 23.364 25.364C21.6761 27.0518 19.3869 28 17 28H15C12.6131 28 10.3239 27.0518 8.63604 25.364C6.94821 23.6761 6 21.3869 6 19V11C6 10.4696 6.21071 9.96086 6.58579 9.58579Z"></path></svg></button><span class="style-1129w32">407</span></div><div class="style-3fim88"><a href="#comments" aria-label="0Comments" aria-describedby="comments-tooltip" class="style-tzv11m"><span class="material-symbols-outlined style-n5k90r" aria-hidden="true">comment</span>0</a><p role="tooltip" id="comments-tooltip" aria-hidden="false" class="style-uw35c3">Go to list of comments</p></div></div><div class="style-1f18zs1"></div></div><div class="style-rwy56f"><p class="style-1nyasl8">Register as a new user and use Qiita more conveniently</p><ol class="style-1i89dtz"><li>You get articles that match your needs</li><li>You can efficiently read back useful information</li><li>You can use dark theme</li></ol><a href="https://help.qiita.com/ja/articles/qiita-login-user" target="_blank" rel="noopener noreferrer" class="style-dzaums">What you can do with signing up</a><div class="style-geahq7"><a href="/signup?callback_action=login_or_signup&redirect_to=%2FTachy_Pochy%2Fitems%2F752ef6e3d38e970378f0&realm=qiita" rel="nofollow" class="style-1dq3d3h">Sign up</a><a href="/login?callback_action=login_or_signup&redirect_to=%2FTachy_Pochy%2Fitems%2F752ef6e3d38e970378f0&realm=qiita" rel="nofollow" class="style-tfrxbl">Login</a></div></div></article><div></div></div></main><div class="style-1395ble"><div class="style-5jpx49"><div class="style-aaiy04"><div class="style-1duml6f"><svg width="64" height="64" viewBox="0 0 64 64" class="style-ftns26"><circle cx="32" cy="32" r="19" class="circle"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M30.5865 41.1378C31.3272 41.8221 32.6722 41.8319 33.4129 41.1574L33.4718 41.1037C38.5554 36.4713 41.8819 33.4401 41.746 29.6619C41.6875 28.0001 40.8396 26.4068 39.4654 25.4684C37.3743 24.0305 34.8841 24.4462 33.1038 25.7333C32.6936 26.0299 32.321 26.3728 31.9997 26.75C31.6783 26.3727 31.3056 26.03 30.8952 25.7338C29.115 24.4491 26.625 24.0385 24.5341 25.4684C23.1599 26.4068 22.312 28.0001 22.2535 29.6619C22.1268 33.4546 25.4697 36.4947 30.5865 41.1378ZM23.7526 29.7133C23.7953 28.5111 24.4144 27.3665 25.38 26.7071L25.3808 26.7065C27.1492 25.4973 29.4926 26.12 30.8579 27.7227L31.543 28.527C31.7826 28.8082 32.2169 28.8082 32.4565 28.527L33.1416 27.7227C34.5102 26.1161 36.8515 25.4914 38.6155 26.7044L38.6195 26.7071C39.5855 27.3667 40.2046 28.512 40.2469 29.7146L40.247 29.7158C40.2969 31.1036 39.73 32.4647 38.3804 34.1435C37.0091 35.8492 34.9938 37.6874 32.403 40.0483C32.3636 40.0842 32.2314 40.1587 32.0103 40.1572C31.7898 40.1556 31.6512 40.0792 31.6044 40.036L31.5995 40.0315L31.5945 40.027C29.0048 37.677 26.9919 35.8432 25.6225 34.1408C24.2752 32.4657 23.7066 31.1034 23.7526 29.7133Z" class="heart-stroke"></path><path d="M33.4129 41.1574C32.6722 41.8319 31.3272 41.8221 30.5865 41.1378C25.4697 36.4947 22.1268 33.4546 22.2535 29.6619C22.312 28.0001 23.1599 26.4068 24.5341 25.4684C27.1071 23.7089 30.2844 24.7363 31.9997 26.75C33.7151 24.7363 36.8924 23.6991 39.4654 25.4684C40.8396 26.4068 41.6875 28.0001 41.746 29.6619C41.8824 33.4546 38.5297 36.4947 33.4129 41.1574Z" class="heart-fill"></path><g class="particles" style="--rotate:30deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:102deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:174deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:246deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:318deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g></svg><button aria-label="Like" aria-pressed="false" title="Like" class="style-10ttvi6"></button></div><div class="style-wknrvb"><div class="style-3fim88"><a href="/Tachy_Pochy/items/752ef6e3d38e970378f0/likers" aria-label="448Likes" aria-describedby="like-tooltip" class="style-1a6dkvp">448</a><p role="tooltip" id="like-tooltip" aria-hidden="false" class="style-uw35c3">Go to list of users who liked</p></div></div></div><div class="style-izmm4j"><button aria-haspopup="dialog" aria-expanded="false" aria-controls="ButtonBAhJIhNBcnRpY2xlLTUxMTU2OAY6BkVU--fd13d966b00a219b3e8e0a50ca9d5ced9338da96f70a3d7c7ed1cfe36664ed9b" aria-label="Stock" class="style-1xwfn2v" type="button"><svg class="style-100tu0r" height="32" viewBox="0 0 32 32" width="32" aria-hidden="true"><path d="M6.5 5H25.5C25.7761 5 26 5.22386 26 5.5V6.5C26 6.77614 25.7761 7 25.5 7H6.5C6.22386 7 6 6.77614 6 6.5V5.5C6 5.22386 6.22386 5 6.5 5ZM24 19V11.5C24 11.3674 23.9473 11.2402 23.8536 11.1464C23.7598 11.0527 23.6326 11 23.5 11H8.5C8.36739 11 8.24021 11.0527 8.14645 11.1464C8.05268 11.2402 8 11.3674 8 11.5V19C8 20.8565 8.7375 22.637 10.0503 23.9497C11.363 25.2625 13.1435 26 15 26H17C18.8565 26 20.637 25.2625 21.9497 23.9497C23.2625 22.637 24 20.8565 24 19ZM6.58579 9.58579C6.96086 9.21071 7.46957 9 8 9H24C24.5304 9 25.0391 9.21071 25.4142 9.58579C25.7893 9.96086 26 10.4696 26 11V19C26 21.3869 25.0518 23.6761 23.364 25.364C21.6761 27.0518 19.3869 28 17 28H15C12.6131 28 10.3239 27.0518 8.63604 25.364C6.94821 23.6761 6 21.3869 6 19V11C6 10.4696 6.21071 9.96086 6.58579 9.58579Z"></path></svg></button><span class="style-1vem4tk">407</span></div><div class="style-79elbk"><button aria-haspopup="menu" aria-expanded="false" aria-controls="ArticleStickyMenuDropdown" class="style-1vr7y3r" aria-label="Open options" type="button"><span class="material-symbols-outlined style-v2p563" aria-hidden="true">more_horiz</span></button><dialog aria-modal="true" aria-labelledby="ArticleDeleteConfirmationModal-label" class="style-oi42s2"><div class="style-2aaf4j"><div class="style-bxc62b"><p id="ArticleDeleteConfirmationModal-label" class="style-1snuvpu">Delete article</p><button type="button" aria-label="" class="style-o8tyjw"><span class="material-symbols-outlined style-v2p563" aria-hidden="true">close</span></button></div><div class="style-6vdptm"><p>Deleted articles cannot be recovered.</p><p>Draft of this article would be also deleted.</p><p>Are you sure you want to delete this article?</p></div><div class="style-111ab2g"><button font-size="16" type="button" class="style-hreeih">Cancel</button><button font-size="16" type="button" class="style-y54waz">Delete<span class="material-symbols-outlined is-fill style-1jvcm2e" aria-hidden="true">delete</span></button></div></div></dialog></div></div></div></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="PersonalArticlePage" data-dom-id="PersonalArticlePage-react-component-0573330a-0d77-483e-ba20-1ca82ceff99f">{"authorAnalyticsTrackingId":null,"findyEventPopup":null,"laprasLogoImageUrl":"//cdn.qiita.com/assets/public/popup/logo-lapras-941668abbf66682ce8d99f2ee1be2257.png","forkwellLogoImageUrl":"//cdn.qiita.com/assets/public/popup/logo-forkwell-9f13ec7d93d1bef99827b20095decc59.svg","jobDraftLogoImageUrl":"//cdn.qiita.com/assets/public/popup/logo-job-draft-39aa27ab036c5bf4eaf7b39886ce2127.png","techPlayLogoImageUrl":"//cdn.qiita.com/assets/public/popup/logo-tech-play-e962097aeab9db19f70b70bf18a2add4.png","headerBanner":{"bannerDisplayKey":"header_text_banner_displayed","isDisplayable":true},"organizationAnalyticsTrackingId":null,"promptLoginMessageImageSrc":"//cdn.qiita.com/assets/public/image-qiitan_for_login_modal-014e085d3e40a240e3fe8d61b70b29a9.png","isPostCompletePromptShow":false,"postCompleteModalImages":[],"isDisplayAdAboveArticle":true,"isDisplayHeaderTextBanner":false,"adventCalendarBeingHeldImageSrc":"//cdn.qiita.com/assets/public/advent_calendar/image-advent_calendar_being_held-bafa166cb2e60037f5e4ba3599642d8f.png","engineerFesta2024LabelImageSrc":"//cdn.qiita.com/assets/public/official_campaigns/engineer_festa_2024/back-label_decoration-38495dd16cb6a3347397f4c3e6fefc62.png","qiitaConferenceImageSrc":"//cdn.qiita.com/assets/public/official_campaigns/qiita_conference_2024_autumn/image-under_article-c092ea0d42603790520f0858acf803a7.png","adventCalendarRibbonImageSrc":"//cdn.qiita.com/assets/public/advent_calendar/back-advent_calendar_ribbon-ce0efac1d490b78816e848f879968544.png"}</script> </div><div id="GlobalFooter-react-component-ff0080d3-dd1c-4bf2-9ac9-43667bc6cc8f"><footer class="style-1geho0x"><div class="style-1vesoht"><div class="style-1xygyrj"><div class="style-j7qwjs"><a href="/"><svg role="img" aria-label="To top Qiita" viewBox="0 0 426.57 130" width="110" height="33.5" class="style-1g0k1wk"><circle cx="167.08" cy="21.4" r="12.28"></circle><path d="M250.81 29.66h23.48v18.9h-23.48z"></path><path d="M300.76 105.26a22.23 22.23 0 01-6.26-.86 12.68 12.68 0 01-5.17-3 14.41 14.41 0 01-3.56-5.76 28 28 0 01-1.3-9.22V48.56h29.61v-18.9h-29.52V3.29h-20.17v83.34q0 11.16 2.83 18.27a27.71 27.71 0 007.7 11.2 26.86 26.86 0 0011.43 5.62 47.56 47.56 0 0012.34 1.53h15.16v-18zM0 61.7a58.6 58.6 0 015-24.21A62.26 62.26 0 0118.73 17.9 63.72 63.72 0 0139 4.78 64.93 64.93 0 0164 0a65 65 0 0124.85 4.78 64.24 64.24 0 0120.38 13.12A62 62 0 01123 37.49a58.6 58.6 0 015 24.21 58.34 58.34 0 01-4 21.46 62.8 62.8 0 01-10.91 18.16l11.1 11.1a10.3 10.3 0 010 14.52 10.29 10.29 0 01-14.64 0l-12.22-12.41a65 65 0 01-15.78 6.65 66.32 66.32 0 01-17.55 2.3 64.63 64.63 0 01-45.23-18A62.82 62.82 0 015 85.81 58.3 58.3 0 010 61.7zm21.64.08a43.13 43.13 0 0012.42 30.63 42.23 42.23 0 0013.43 9.09A41.31 41.31 0 0064 104.8a42 42 0 0030-12.39 42.37 42.37 0 009-13.64 43.43 43.43 0 003.3-17 43.77 43.77 0 00-3.3-17A41.7 41.7 0 0080.55 22 41.78 41.78 0 0064 18.68 41.31 41.31 0 0047.49 22a42.37 42.37 0 00-13.43 9.08 43.37 43.37 0 00-12.42 30.7zM331.89 78a47.59 47.59 0 013.3-17.73 43.22 43.22 0 019.34-14.47A44.25 44.25 0 01359 36a47.82 47.82 0 0118.81-3.58 42.72 42.72 0 019.26 1 46.5 46.5 0 018.22 2.58 40 40 0 017 3.84 44.39 44.39 0 015.71 4.63l1.22-9.47h17.35v85.83h-17.35l-1.17-9.42a42.54 42.54 0 01-5.84 4.67 43.11 43.11 0 01-7 3.79 44.86 44.86 0 01-8.17 2.59 43 43 0 01-9.22 1A47.94 47.94 0 01359 119.9a43.3 43.3 0 01-14.47-9.71 44.17 44.17 0 01-9.34-14.47 47 47 0 01-3.3-17.72zm20.27-.08a29.16 29.16 0 002.17 11.34 27 27 0 005.92 8.88 26.69 26.69 0 008.76 5.76 29.19 29.19 0 0021.44 0 26.11 26.11 0 008.72-5.76 27.57 27.57 0 005.88-8.84 29 29 0 002.16-11.38 28.62 28.62 0 00-2.16-11.22 26.57 26.57 0 00-5.93-8.8 27.68 27.68 0 00-19.51-7.9 28.29 28.29 0 00-10.77 2.05 26.19 26.19 0 00-8.71 5.75 27.08 27.08 0 00-5.84 8.8 28.94 28.94 0 00-2.13 11.31zm-194.97-30.5h19.78v73.54h-19.78zm49.25 0h19.78v73.54h-19.78z"></path><circle cx="216.33" cy="21.4" r="12.28"></circle></svg></a><p class="style-754ift">How developers code is here.</p><a href="/advent-calendar" class="style-zsz8fb"><img src="//cdn.qiita.com/assets/public/banner-qiita_advent_calendar_2024-8fefcb4d8f1b460321d6efd20e955784.png" alt="Qiita Advent Calendar 2024 will be held!: 12/1(Sun) - 12/25(Wed)" height="60" width="300" class="style-1efditc"/></a></div><small class="style-120vwzo">© 2011-2024<span class="style-15fzge">Qiita Inc.</span></small></div><nav aria-label="Footer" class="style-16bbk6m"><div class="style-u4ybgy"><p id="guideHelp" class="style-35ezg3">Guide & Help</p><ul aria-labelledby="guideHelp" class="style-1fhgjcy"><li><a href="/about" class="style-ah54os">About</a></li><li><a href="/terms" class="style-ah54os">Terms</a></li><li><a href="/privacy" class="style-ah54os">Privacy</a></li><li><a href="http://help.qiita.com/ja/articles/qiita-community-guideline" target="_blank" class="style-ah54os">Guideline</a></li><li><a href="https://help.qiita.com/ja/articles/others-brand-guideline" target="_blank" class="style-ah54os">Media Kit</a></li><li><a href="https://github.com/increments/qiita-discussions/discussions/116" target="_blank" class="style-ah54os">Feedback/Requests</a></li><li><a href="https://help.qiita.com" target="_blank" class="style-ah54os">Help</a></li><li><a href="https://business.qiita.com/?utm_source=qiita&utm_medium=referral&utm_content=footer" target="_blank" class="style-ah54os">Advertisement</a></li></ul></div><div class="style-u4ybgy"><p id="contents" class="style-35ezg3">Contents</p><ul aria-labelledby="contents" class="style-1fhgjcy"><li><a href="/release-notes" class="style-ah54os">Release Note</a></li><li><a href="/official-events" class="style-ah54os">Official Event</a></li><li><a href="/official-columns" class="style-ah54os">Official Column</a></li><li><a href="/advent-calendar/2024" class="style-ah54os">Advent Calendar</a></li><li><a href="/qiita-award" class="style-ah54os">Qiita Award</a></li><li><a href="/white_papers/2023" class="style-ah54os">Engineer White Paper</a></li><li><a href="/api/v2/docs" class="style-ah54os">API</a></li><li><a href="/opportunities/findy" class="style-ah54os">Findy Contents</a></li></ul></div><div class="style-u4ybgy"><p id="sns" class="style-35ezg3">Official Accounts</p><ul aria-labelledby="sns" class="style-1fhgjcy"><li><a href="https://x.com/qiita" target="_blank" class="style-ah54os"><svg class="style-ox3ag9" viewBox="0 0 20 20" aria-label="X(Twitter)"><path d="m11.68 8.62 6.55-7.62h-1.55l-5.69 6.62-4.55-6.62h-5.25l6.88 10.01-6.88 7.99h1.55l6.01-6.99 4.8 6.99h5.24l-7.13-10.38zm-2.13 2.47-.7-1-5.54-7.92h2.39l4.47 6.4.7 1 5.82 8.32h-2.39l-4.75-6.79z"></path></svg><span class="style-15fzge">@Qiita</span></a></li><li><a href="https://x.com/qiita_milestone" target="_blank" class="style-ah54os"><svg class="style-ox3ag9" viewBox="0 0 20 20" aria-label="X(Twitter)"><path d="m11.68 8.62 6.55-7.62h-1.55l-5.69 6.62-4.55-6.62h-5.25l6.88 10.01-6.88 7.99h1.55l6.01-6.99 4.8 6.99h5.24l-7.13-10.38zm-2.13 2.47-.7-1-5.54-7.92h2.39l4.47 6.4.7 1 5.82 8.32h-2.39l-4.75-6.79z"></path></svg><span class="style-15fzge">@qiita_milestone</span></a></li><li><a href="https://x.com/qiitapoi" target="_blank" class="style-ah54os"><svg class="style-ox3ag9" viewBox="0 0 20 20" aria-label="X(Twitter)"><path d="m11.68 8.62 6.55-7.62h-1.55l-5.69 6.62-4.55-6.62h-5.25l6.88 10.01-6.88 7.99h1.55l6.01-6.99 4.8 6.99h5.24l-7.13-10.38zm-2.13 2.47-.7-1-5.54-7.92h2.39l4.47 6.4.7 1 5.82 8.32h-2.39l-4.75-6.79z"></path></svg><span class="style-15fzge">@qiitapoi</span></a></li><li><a href="https://www.facebook.com/qiita/" target="_blank" class="style-ah54os">Facebook</a></li><li><a href="https://www.youtube.com/@qiita5366" target="_blank" class="style-ah54os">YouTube</a></li><li><a href="https://open.spotify.com/show/4E7yCLeCLeQUsNqM4HXFXA" target="_blank" class="style-ah54os">Podcast</a></li></ul></div><div class="style-u4ybgy"><p id="service" class="style-35ezg3">Our service</p><ul aria-labelledby="service" class="style-1fhgjcy"><li><a href="https://teams.qiita.com/" target="_blank" class="style-ah54os">Qiita Team</a></li><li><a href="https://zine.qiita.com?utm_source=qiita&utm_medium=referral&utm_content=footer" target="_blank" class="style-ah54os">Qiita Zine</a></li><li><a href="https://suzuri.jp/qiita" target="_blank" class="style-ah54os">Official Shop</a></li></ul></div><div class="style-u4ybgy"><p id="corporate" class="style-35ezg3">Company</p><ul aria-labelledby="corporate" class="style-1fhgjcy"><li><a href="https://corp.qiita.com/company" target="_blank" class="style-ah54os">About Us</a></li><li><a href="https://corp.qiita.com/jobs/" target="_blank" class="style-ah54os">Careers</a></li><li><a href="https://blog.qiita.com" target="_blank" class="style-ah54os">Qiita Blog</a></li><li><a href="https://corp.qiita.com/releases/" target="_blank" class="style-ah54os">News Release</a></li></ul></div></nav></div></footer></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="GlobalFooter" data-dom-id="GlobalFooter-react-component-ff0080d3-dd1c-4bf2-9ac9-43667bc6cc8f">{"currentYear":2024,"pathInfo":"/Tachy_Pochy/items/752ef6e3d38e970378f0","bannerUrl":"//cdn.qiita.com/assets/public/banner-qiita_conference_autumn-acfb92b76b77776d8cee890b18ae255f.png","adventCalendarBannerUrl":"//cdn.qiita.com/assets/public/banner-qiita_advent_calendar_2024-8fefcb4d8f1b460321d6efd20e955784.png","latestHeldAdventCalendarYear":2024,"latestHeldWhitePaperYear":2023,"qiitaTeamLandingPageRootUrl":"https://teams.qiita.com/"}</script> <div id="Snackbar-react-component-6f40b2ac-7355-4b0d-a1eb-dbf0b38281b2"></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="Snackbar" data-dom-id="Snackbar-react-component-6f40b2ac-7355-4b0d-a1eb-dbf0b38281b2">{}</script> <div id="LoginModal-react-component-5fd17f51-a274-4cdf-b73e-039ee5f759a0"></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="LoginModal" data-dom-id="LoginModal-react-component-5fd17f51-a274-4cdf-b73e-039ee5f759a0">{"imageUrl":"//cdn.qiita.com/assets/public/image-qiitan_for_login_modal_glimpse-c148ec9e4debf1f4b880deec194b6fc8.png","githubAuthUrl":"https://oauth.qiita.com/auth/github?callback_action=login_or_signup\u0026realm=qiita\u0026redirect_to=%2FTachy_Pochy%2Fitems%2F752ef6e3d38e970378f0","googleAuthUrl":"https://oauth.qiita.com/auth/google?callback_action=login_or_signup\u0026realm=qiita\u0026redirect_to=%2FTachy_Pochy%2Fitems%2F752ef6e3d38e970378f0","twitterAuthUrl":"https://oauth.qiita.com/auth/twitter?callback_action=login_or_signup\u0026realm=qiita\u0026redirect_to=%2FTachy_Pochy%2Fitems%2F752ef6e3d38e970378f0"}</script> </div><div id="dataContainer" style="display: none;" data-config="{"actionPath":"public/items#show","settings":{"analyticsTrackingId":"G-KEVS5DBRVN","tagManagerId":"GTM-W9W5TX4","assetsMap":{},"csrfToken":"tqt4fanCtZFFsK-PvzjaUBlQQgTB7lg9r1K8ky9GwrTw9gZQdFIRD7vApaIYhqLkAbPVkjhlxvV-OslfwLrGag","locale":"en","pushOne":{"accessToken":"4bc4bb057a0601d388a7b9e499ca2307e9eb4fc172804e310c59e511d7cac356","dialogImageUrl":"//cdn.qiita.com/assets/public/push_notification/image-qiitan-572179a3bbde375850422ea48b2b6272.png"},"textlint":{"workerUrl":"//cdn.qiita.com/assets/public/textlint-worker-428d514da98d8b84007e40519b9f530f.min.js"}},"currentUser":null,"additionalParams":{"query_parameters":{},"path_parameters":{"controller":"public/items","action":"show","user_id":"Tachy_Pochy","type":"items","id":"752ef6e3d38e970378f0"},"request_id":"e0a91358-e14e-4794-8d26-183399c94a5a","user_id":null}}" /></body></html><script type="application/json" data-js-react-on-rails-store="AppStoreWithReactOnRails">{"snackbar":{"type":"","body":"","isActive":false},"adventCalendar":{"adventCalendar":{"currentMonth":11,"isAdventCalendarBeingHeld":false,"isCalendarCreatable":true,"isLatestHeldYear":true,"isPreRegistering":true,"isRankingBeingHeld":false,"isSubscribable":true,"year":2024,"years":[2024,2023,2022,2021,2020,2019,2018,2017,2016,2015,2014,2013,2012,2011]}},"article":{"article":{"body":"\u003ch2 data-sourcepos=\"1:1-1:15\"\u003e\n\u003cspan id=\"はじめに\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003eはじめに\u003c/h2\u003e\n\u003cp data-sourcepos=\"3:1-3:109\"\u003e\u003ca href=\"http://plantuml.com/\" rel=\"nofollow noopener\" target=\"_blank\"\u003ePlantUML\u003c/a\u003e ではバージョン 1.2017.08 から ER 図に対応しています。\u003csup\u003e\u003ca href=\"#fn-1\" id=\"fnref-1\"\u003e1\u003c/a\u003e\u003c/sup\u003e\u003c/p\u003e\n\u003cp data-sourcepos=\"5:1-5:229\"\u003e以前の「 \u003ca href=\"http://qiita.com/Tachy_Pochy/items/d074e6cbf2f5f4527fa7\" id=\"reference-a021b17570a11e3eaaaf\"\u003ePlantUML で ER 図を描く（似非） - Qiita\u003c/a\u003e 」の記事ではクラス図を流用しましたが、こちらの記事はそうではありません。\u003c/p\u003e\n\u003cp data-sourcepos=\"7:1-7:207\"\u003eしかしどうやらクラス図のキーワード \"class\" に \"entity\" というエイリアスをかぶせて実現しているようで、クラス図とほとんど同じように書けます。\u003csup\u003e\u003ca href=\"#fn-2\" id=\"fnref-2\"\u003e2\u003c/a\u003e\u003c/sup\u003e\u003csup\u003e\u003ca href=\"#fn-3\" id=\"fnref-3\"\u003e3\u003c/a\u003e\u003c/sup\u003e\u003c/p\u003e\n\u003ch2 data-sourcepos=\"9:1-9:27\"\u003e\n\u003cspan id=\"カーディナリティ\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E3%82%AB%E3%83%BC%E3%83%87%E3%82%A3%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003eカーディナリティ\u003c/h2\u003e\n\u003cp data-sourcepos=\"11:1-11:63\"\u003eカーディナリティにはこんな種類があります。\u003c/p\u003e\n\u003cdiv class=\"code-frame\" data-lang=\"puml\" data-sourcepos=\"13:1-21:3\"\u003e\n\u003cdiv class=\"code-lang\"\u003e\u003cspan class=\"bold\"\u003eカーディナリティ\u003c/span\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003ccode\u003e ------ :1\n ----|| :1 and only 1\n ----o| :0 or 1\n -----{ :many\n ----|{ :1 or more\n ----o{ :0 or many\n\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cp data-sourcepos=\"22:1-22:12\"\u003e描画結果\u003c/p\u003e\n\u003cp data-sourcepos=\"24:1-24:104\"\u003e\u003ca href=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F37554%2F7a1282f6-4355-92a4-6209-fceb87c795fe.png?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=9fef845cec096ec40efdfb03e1b2c1c9\" target=\"_blank\" rel=\"nofollow noopener\"\u003e\u003cimg src=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F37554%2F7a1282f6-4355-92a4-6209-fceb87c795fe.png?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=9fef845cec096ec40efdfb03e1b2c1c9\" alt=\"test.png\" srcset=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F37554%2F7a1282f6-4355-92a4-6209-fceb87c795fe.png?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;w=1400\u0026amp;fit=max\u0026amp;s=6a0c926cb6ee0949d8768a73a4eadba9 1x\" data-canonical-src=\"https://qiita-image-store.s3.amazonaws.com/0/37554/7a1282f6-4355-92a4-6209-fceb87c795fe.png\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp data-sourcepos=\"26:1-26:282\"\u003eこのサンプルでは不要な水平線が入っています。この水平線はクラス図の「プロパティ（フィールド）」と「メソッド」を分ける「区切り線」ですが、\u003ccode\u003ehide empty members\u003c/code\u003e を最初に書いておくと非表示に出来ます。\u003c/p\u003e\n\u003cp data-sourcepos=\"28:1-28:47\"\u003e参考：\u003ca href=\"http://plantuml.com/class-diagram#Hide\" class=\"autolink\" rel=\"nofollow noopener\" target=\"_blank\"\u003ehttp://plantuml.com/class-diagram#Hide\u003c/a\u003e\u003c/p\u003e\n\u003ch2 data-sourcepos=\"30:1-30:15\"\u003e\n\u003cspan id=\"er-図とは\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#er-%E5%9B%B3%E3%81%A8%E3%81%AF\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003eER 図とは\u003c/h2\u003e\n\u003cp data-sourcepos=\"32:1-33:110\"\u003eER図そのものについては下記のサイトが詳しいです。\u003cbr\u003e\n\u003ca href=\"http://itref.fc2web.com/technology/entity_relationship_diagram.html\" rel=\"nofollow noopener\" target=\"_blank\"\u003eER図（Entity Relationship Diagram）\u003c/a\u003e\u003c/p\u003e\n\u003cp data-sourcepos=\"35:1-36:76\"\u003eまた、書き方については下記の書籍が詳しいです。オススメです。\u003cbr\u003e\n\u003ca href=\"http://www.shoeisha.co.jp/book/detail/9784798110660\" rel=\"nofollow noopener\" target=\"_blank\"\u003e楽々ERDレッスン\u003c/a\u003e\u003c/p\u003e\n\u003ch2 data-sourcepos=\"38:1-38:15\"\u003e\n\u003cspan id=\"サンプル\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003eサンプル\u003c/h2\u003e\n\u003cp data-sourcepos=\"40:1-40:181\"\u003e\u003ca href=\"http://qiita.com/Tachy_Pochy/items/d074e6cbf2f5f4527fa7\"\u003e前回\u003c/a\u003e 同様、下記のページからテーブル構成を参考にして、PlantUML で ER 図を書いてみます。\u003c/p\u003e\n\u003cp data-sourcepos=\"42:1-42:145\"\u003e\u003ca href=\"http://it-koala.com/entity-relationship-diagram-1897\" rel=\"nofollow noopener\" target=\"_blank\"\u003e若手プログラマー必読！５分で理解できるER図の書き方５ステップ\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"code-frame\" data-lang=\"puml\" data-sourcepos=\"44:1-154:3\"\u003e\n\u003cdiv class=\"code-lang\"\u003e\u003cspan class=\"bold\"\u003eサンプル\u003c/span\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003ccode\u003e@startuml\n\n/'\n 図の中で目立たせたいエンティティに着色するための\n 色の名前（定数）を定義します。\n'/\n!define MAIN_ENTITY #E2EFDA-C6E0B4\n!define MAIN_ENTITY_2 #FCE4D6-F8CBAD\n\n/' 他の色も、用途が分りやすいように名前をつけます。 '/\n!define METAL #F2F2F2-D9D9D9\n!define MASTER_MARK_COLOR AAFFAA\n!define TRANSACTION_MARK_COLOR FFAA00\n\n/'\n デフォルトのスタイルを設定します。\n この場合の指定は class です。entity ではエラーになります。\n'/\nskinparam class {\n BackgroundColor METAL\n BorderColor Black\n ArrowColor Black\n}\n\npackage \"外部データベース\" as ext \u0026lt;\u0026lt;Database\u0026gt;\u0026gt; {\n entity \"顧客マスタ\" as customer \u0026lt;\u0026lt;M,MASTER_MARK_COLOR\u0026gt;\u0026gt; {\n + 顧客ID [PK]\n --\n 顧客名\n 郵便番号\n 住所\n 電話番号\n FAX\n }\n}\n\npackage \"開発対象システム\" as target_system {\n /'\n マスターテーブルを M、トランザクションを T などと安直にしていますが、\n チーム内でルールを決めればなんでも良いと思います。交差テーブルは \"I\" とか。\n 角丸四角形が描けない代替です。\n １文字なら \"主\" とか \"従\" とか日本語でも OK だったのがウケる。\n '/\n entity \"注文テーブル\" as order \u0026lt;\u0026lt;主,TRANSACTION_MARK_COLOR\u0026gt;\u0026gt; MAIN_ENTITY {\n + 注文ID [PK]\n --\n # 顧客ID [FK]\n 注文日時\n 配送希望日\n 配送方法\n お届け先名\n お届け先住所\n 決済方法\n 合計金額\n 消費税額\n }\n\n entity \"注文明細テーブル\" as order_detail \u0026lt;\u0026lt;T,TRANSACTION_MARK_COLOR\u0026gt;\u0026gt; MAIN_ENTITY_2 {\n + 注文ID [PK]\n + 明細番号 [PK]\n --\n # SKU [FK]\n 注文数\n 税抜価格\n 税込価格\n }\n\n entity \"SKUマスタ\" as sku \u0026lt;\u0026lt;M,MASTER_MARK_COLOR\u0026gt;\u0026gt; {\n + SKU [PK]\n --\n # 商品ID [FK]\n カラー\n サイズ\n 重量\n 販売単価\n 仕入単価\n }\n\n entity \"商品マスタ\" as product \u0026lt;\u0026lt;M,MASTER_MARK_COLOR\u0026gt;\u0026gt; {\n + 商品ID [PK]\n --\n 商品名\n 原産国\n # 仕入先ID [FK]\n 商品カテゴリ\n 配送必要日数\n }\n\n entity \"仕入先マスタ\" as vendor \u0026lt;\u0026lt;M,MASTER_MARK_COLOR\u0026gt;\u0026gt; {\n + 仕入先ID [PK]\n --\n 仕入れ先名\n 郵便番号\n 住所\n 電話番号\n FAX番号\n }\n}\n\ncustomer |o-ri-o{ order\norder ||-ri-|{ order_detail\norder_detail }-do-|| sku\nsku }-le-|| product\nproduct }o-le-|| vendor\n\nnote bottom of customer : 別プロジェクト\\nDB-Linkで参照する\n\n@enduml\n\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003ch2 data-sourcepos=\"156:1-156:9\"\u003e\n\u003cspan id=\"結果\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E7%B5%90%E6%9E%9C\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003e結果\u003c/h2\u003e\n\u003cp data-sourcepos=\"158:1-158:115\"\u003e\u003ca href=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F37554%2Fd6d2c34e-d36f-56e2-eaf9-f31b18c32b11.png?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=9ff9292b6bed90a7478094f1cef2e2f2\" target=\"_blank\" rel=\"nofollow noopener\"\u003e\u003cimg src=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F37554%2Fd6d2c34e-d36f-56e2-eaf9-f31b18c32b11.png?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=9ff9292b6bed90a7478094f1cef2e2f2\" alt=\"newpumlTemplate.png\" srcset=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F37554%2Fd6d2c34e-d36f-56e2-eaf9-f31b18c32b11.png?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;w=1400\u0026amp;fit=max\u0026amp;s=61079e3e5a1a8eea270c057631aabc57 1x\" data-canonical-src=\"https://qiita-image-store.s3.amazonaws.com/0/37554/d6d2c34e-d36f-56e2-eaf9-f31b18c32b11.png\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003csection class=\"footnotes\"\u003e\n\u003col\u003e\n\u003cli id=\"fn-1\"\u003e\n\u003cp data-sourcepos=\"160:7-160:438\"\u003e初め、1.2017.08 が「2017年の08月にリリースが予定されているバージョン」と勘違いしてしまいました。「2017年の８回目のリリース」のようで、３月に出ています。 \u003ca href=\"https://github.com/plantuml/plantuml/pull/31\" rel=\"nofollow noopener\" target=\"_blank\"\u003eこちら\u003c/a\u003e の冒頭のコードがエラーになったので未サポートだと思っていました。記事投稿現在のバージョンは 1.2017.15 です。 \u003ca href=\"#fnref-1\" class=\"\"\u003e↩\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli id=\"fn-2\"\u003e\n\u003cp data-sourcepos=\"162:7-162:233\"\u003eその所為なのかリリースノートにも書かれていないなど、あまりおおっぴらに「ERD サポート！」と言っていませんね。ひょっとして ER 図の需要は少ないのでしょうか。 \u003ca href=\"#fnref-2\" class=\"\"\u003e↩\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli id=\"fn-3\"\u003e\n\u003cp data-sourcepos=\"164:7-164:136\"\u003eデフォルトのスタイルを設定する \u003ccode\u003eskinparam\u003c/code\u003e 構文では \u003ccode\u003eclass\u003c/code\u003e を指定するなど、名残が見られます。 \u003ca href=\"#fnref-3\" class=\"\"\u003e↩\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003c/section\u003e\n","comments":{"totalCount":0},"createdAt":"2017-07-27T09:12:34Z","elapsedYearsFromLastModifiedAt":0,"encryptedId":"BAhJIhNBcnRpY2xlLTUxMTU2OAY6BkVU--fd13d966b00a219b3e8e0a50ca9d5ced9338da96f70a3d7c7ed1cfe36664ed9b","isBanned":false,"isDeprecated":false,"isDestroyableByViewer":false,"isEditRequestReadableByViewer":true,"isEditRequestSendableByViewer":true,"isLikableByViewer":true,"isLikedByViewer":false,"isPublic":true,"isSlide":false,"isStockableByViewer":true,"isStockedByViewer":false,"isSubscribableByViewer":false,"isSubscribedByViewer":false,"isUpdatableByViewer":false,"isUpdated":true,"lastModifiedAt":"2024-05-04T00:17:23Z","publishedAt":"2017-07-27T09:12:34Z","likesCount":448,"linkUrl":"https://qiita.com/Tachy_Pochy/items/752ef6e3d38e970378f0","organization":null,"stockedCount":407,"title":"PlantUML で ER 図（ERD）を描く（似非ではないです）","toc":"\u003cul\u003e\n\u003cli\u003e\n\u003ca href=\"#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB\"\u003eはじめに\u003c/a\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#%E3%82%AB%E3%83%BC%E3%83%87%E3%82%A3%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3\"\u003eカーディナリティ\u003c/a\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#er-%E5%9B%B3%E3%81%A8%E3%81%AF\"\u003eER 図とは\u003c/a\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB\"\u003eサンプル\u003c/a\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#%E7%B5%90%E6%9E%9C\"\u003e結果\u003c/a\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n","totalPv":93522,"uuid":"752ef6e3d38e970378f0","banReason":null,"adventCalendarItem":null,"author":{"encryptedId":"BAhJIg9Vc2VyLTM3NTU0BjoGRVQ=--a5af9d43696e6987bdc5385423bd8ac1c73cc9eabe19cb9ddf10adfe99d9913d","isBlockingViewer":false,"isFollowableByViewer":true,"isFollowedByViewer":false,"isTweetWebNotificationReceivable":true,"profileImageUrlW48":"https://qiita-user-profile-images.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F37554%2Fprofile-images%2F1473687466?ixlib=rb-4.0.0\u0026auto=compress%2Cformat\u0026lossless=0\u0026w=48\u0026s=c7aeb87723189d5afd2dd817f4b33472","profileImageUrlOriginal":"https://qiita-image-store.s3.amazonaws.com/0/37554/profile-images/1473687466","urlName":"Tachy_Pochy","twitterUrlName":"Tachy_Pochy","name":"Tachy Pochy","organizations":{"edges":[]}},"tags":[{"name":"uml","urlName":"uml"},{"name":"PlantUML","urlName":"plantuml"},{"name":"ER図","urlName":"er%e5%9b%b3"}],"followingLikers":[],"recentlyFollowingLikers":[],"postingCampaign":null},"comments":[],"client":null,"adsEventEmitter":null}}</script>