CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>コードでの意思決定 — 条件文 - ウェブ開発を学ぶ | MDN</title><link rel="alternate" title="Entscheidungen in Ihrem Code treffen — Bedingte Anweisungen" href="https://developer.mozilla.org/de/docs/Learn/JavaScript/Building_blocks/conditionals" hrefLang="de"/><link rel="alternate" title="Making decisions in your code — conditionals" href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals" hrefLang="en"/><link rel="alternate" title="Tomando decisiones en tu código — condicionales" href="https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals" hrefLang="es"/><link rel="alternate" title="Prendre des décisions dans le code — conditions" href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/conditionals" hrefLang="fr"/><link rel="alternate" title="판단 내리기 — 조건문" href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/conditionals" hrefLang="ko"/><link rel="alternate" title="Tomando decisões no seu código — condicionais" href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/conditionals" hrefLang="pt"/><link rel="alternate" title="Принятие решений в вашем коде — условные конструкции" href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/conditionals" hrefLang="ru"/><link rel="alternate" title="在代码中做决定——条件语句" href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals" hrefLang="zh"/><link rel="alternate" title="在代碼中做出決定 - 條件" href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Building_blocks/conditionals" hrefLang="zh-Hant"/><link rel="alternate" title="コードでの意思決定 — 条件文" href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/conditionals" hrefLang="ja"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="どのプログラミング言語でも、コードは様々な入力に応じた決定を迫られ、その結果として動作を起こします。例えば、ゲームではプレイヤーの残機が 0 になった場合、ゲームオーバーとなります。天気アプリは朝に起動された場合は日の出の画像を表示し、夜に起動された場合は星や月の画像を表示します。この記事では、JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。"/><meta property="og:url" content="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/conditionals"/><meta property="og:title" content="コードでの意思決定 — 条件文 - ウェブ開発を学ぶ | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="ja"/><meta property="og:description" content="どのプログラミング言語でも、コードは様々な入力に応じた決定を迫られ、その結果として動作を起こします。例えば、ゲームではプレイヤーの残機が 0 になった場合、ゲームオーバーとなります。天気アプリは朝に起動された場合は日の出の画像を表示し、夜に起動された場合は星や月の画像を表示します。この記事では、JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。"/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/conditionals"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.5e889624.js"></script><link href="/static/css/main.26c64ea7.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-javascript document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/ja/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/ja/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/ja/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/ja/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/ja/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/ja/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/ja/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/ja/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/ja/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class="apis-link-container desktop-only "><a href="/ja/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a href="/ja/docs/Learn" class="top-level-entry">Guides</a><ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"><li class="apis-link-container mobile-only "><a href="/ja/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/ja/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/ja/docs/Learn/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/ja/docs/Learn/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/ja/docs/Learn/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/ja/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/ja/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/ja/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/ja/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/ja/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/ja/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/ja/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fja%2Fdocs%2FLearn%2FJavaScript%2FBuilding_blocks%2Fconditionals" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fja%2Fdocs%2FLearn%2FJavaScript%2FBuilding_blocks%2Fconditionals" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Learn" class="breadcrumb" property="item" typeof="WebPage"><span property="name">ウェブ開発を学ぶ</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Learn/JavaScript" class="breadcrumb" property="item" typeof="WebPage"><span property="name">JavaScript — 動的クライアントサイドスクリプト</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Learn/JavaScript/Building_blocks" class="breadcrumb" property="item" typeof="WebPage"><span property="name">JavaScript の構成要素</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">コードでの意思決定 — 条件文</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>日本語</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="de" href="/de/docs/Learn/JavaScript/Building_blocks/conditionals" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="es" href="/es/docs/Learn/JavaScript/Building_blocks/conditionals" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn/JavaScript/Building_blocks/conditionals" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Learn/JavaScript/Building_blocks/conditionals" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Learn/JavaScript/Building_blocks/conditionals" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals" class="button submenu-item"><span>中文 (简体)</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Learn/JavaScript/Building_blocks/conditionals" class="button submenu-item"><span>正體中文 (繁體)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard localized-content-note"><p><a href="/ja/docs/MDN/Community/Contributing/Translated_content#アクティブなロケール">このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar" data-macro="LearnSidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">この記事では</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#すべては条件次第">すべては条件次第</a></li><li class="document-toc-item "><a class="document-toc-link" href="#if...else_文">if...else 文</a></li><li class="document-toc-item "><a class="document-toc-link" href="#switch_文">switch 文</a></li><li class="document-toc-item "><a class="document-toc-link" href="#三項演算子">三項演算子</a></li><li class="document-toc-item "><a class="document-toc-link" href="#アクティブラーニング_単純なカレンダー">アクティブラーニング: 単純なカレンダー</a></li><li class="document-toc-item "><a class="document-toc-link" href="#アクティブラーニング_もっとたくさんの色から選ぶ">アクティブラーニング: もっとたくさんの色から選ぶ</a></li><li class="document-toc-item "><a class="document-toc-link" href="#スキルテスト">スキルテスト</a></li><li class="document-toc-item "><a class="document-toc-link" href="#まとめ">まとめ</a></li><li class="document-toc-item "><a class="document-toc-link" href="#関連情報">関連情報</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/ja/docs/Learn/Getting_started_with_the_web">完全な初心者はこちらから!</a></li><li><details><summary>ウェブ入門</summary><ol><li><a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">ウェブサイトの公開</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">ウェブのしくみ</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/HTML">HTML — ウェブの構造化</a></li><li><details><summary>HTML概論</summary><ol><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML を始めよう</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">ヘッド部には何が入る? HTML のメタデータ</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">高度なテキスト整形</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">文書とウェブサイトの構造</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML のデバッグ</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">手紙のマークアップ</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">コンテンツのページの構造化</a></li></ol></details></li><li><details><summary>マルチメディアと埋め込み</summary><ol><li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアとその埋め込み</a></li><li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a></li><li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li><li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">object から iframe まで — その他の埋め込み技術</a></li><li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ウェブへのベクターグラフィックの追加</a></li><li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li><li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li></ol></details></li><li><details><summary>HTML 表</summary><ol><li><a href="/ja/docs/Learn/HTML/Tables">HTML 表</a></li><li><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML の表の基本</a></li><li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML 表の高度な機能とアクセシビリティ</a></li><li><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">惑星データの構造化</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/CSS">CSS — ウェブのスタイル設定</a></li><li><details><summary>CSS の第一歩</summary><ol><li><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a></li><li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か</a></li><li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></li><li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の構造</a></li><li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか</a></li><li><a href="/ja/docs/Learn/CSS/First_steps/Styling_a_biography_page">経歴ページのスタイル設定</a></li></ol></details></li><li><details><summary>CSS の構成要素</summary><ol><li><a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素型、クラス、ID セレクター</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスと擬似要素</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケード、詳細度、継承</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_layers">カスケードレイヤー</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と境界線</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキストの様々な方向の扱い</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のオーバーフロー</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像、メディア、フォーム要素</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイル設定</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">ボックスの高度な効果</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension">基本的な CSS の理解</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">美しいレターヘッド付きの便箋の作成</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/A_cool_looking_box">かっこいいボックス</a></li></ol></details></li><li><details><summary>テキストの装飾</summary><ol><li><a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a></li><li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントのスタイル設定</a></li><li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li><li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクのスタイル設定</a></li><li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li><li><a href="/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li></ol></details></li><li><details><summary>CSS レイアウト</summary><ol><li><a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">浮動ボックス</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーの対応</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/JavaScript">JavaScript — 動的クライアントサイドスクリプト</a></li><li><details><summary>JavaScript の第一歩</summary><ol><li><a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript とは</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript の最初の一歩</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保管する — 変数</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での基本演算 — 数値と演算子</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストの扱い — JavaScript での文字列</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">バカ話ジェネレーター</a></li></ol></details></li><li><details open=""><summary>JavaScript の構成要素</summary><ol><li><a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a></li><li><em><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals" aria-current="page">コードでの意思決定 — 条件文</a></em></li><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループするコード</a></li><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の返値</a></li><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベント入門</a></li><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Event_bubbling">イベントのバブリング</a></li><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li></ol></details></li><li><details><summary>JavaScript オブジェクトの紹介</summary><ol><li><a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクト入門</a></li><li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a></li><li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">オブジェクトのプロトタイプ</a></li><li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_programming">オブジェクト指向プログラミング</a></li><li><a href="/ja/docs/Learn/JavaScript/Objects/Classes_in_JavaScript">JavaScript のクラス</a></li><li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON の操作</a></li><li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト構築の練習</a></li><li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールのデモに機能を追加する</a></li></ol></details></li><li><details><summary>非同期 JavaScript</summary><ol><li><a href="/ja/docs/Learn/JavaScript/Asynchronous">非同期 JavaScript</a></li><li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Introducing">非同期 JavaScript 入門</a></li><li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Promises">プロミスの使い方</a></li><li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API">プロミスベースの API の実装方法</a></li><li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Introducing_workers">ワーカー入門</a></li><li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Sequencing_animations">アニメーションを順番に再生する</a></li></ol></details></li><li><details><summary>クライアントサイド Web API</summary><ol><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs">クライアントサイド Web API</a></li><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">文書の操作</a></li><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバーからのデータ取得</a></li><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></li><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></li><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側ストレージ</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/Forms">ウェブフォーム — ユーザーデータの操作</a></li><li><details><summary>ウェブフォームの構成要素</summary><ol><li><a href="/ja/docs/Learn/Forms">ウェブフォームの構成要素</a></li><li><a href="/ja/docs/Learn/Forms/Your_first_form">初めてのフォーム</a></li><li><a href="/ja/docs/Learn/Forms/How_to_structure_a_web_form">フォームの構築方法</a></li><li><a href="/ja/docs/Learn/Forms/Basic_native_form_controls">基本的なネイティブフォームコントロール</a></li><li><a href="/ja/docs/Learn/Forms/HTML5_input_types">HTML5 の入力型</a></li><li><a href="/ja/docs/Learn/Forms/Other_form_controls">その他のフォームコントロール</a></li><li><a href="/ja/docs/Learn/Forms/Styling_web_forms">ウェブフォームへのスタイル設定</a></li><li><a href="/ja/docs/Learn/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li><li><a href="/ja/docs/Learn/Forms/UI_pseudo-classes">UI 擬似クラス</a></li><li><a href="/ja/docs/Learn/Forms/Form_validation">クライアント側のフォーム検証</a></li><li><a href="/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li></ol></details></li><li><details><summary>高度なウェブフォームテクニック</summary><ol><li><a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls">カスタムフォームコントロールの作成方法</a></li><li><a href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li><li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">フォームコントロール向けの CSS プロパティの互換性一覧表</a></li><li><a href="/ja/docs/Learn/Forms/HTML_forms_in_legacy_browsers">古いブラウザーでの HTML フォーム</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/Accessibility">アクセシビリティ — 誰もウェブを利用できるようにする</a></li><li><details><summary>アクセシビリティガイド</summary><ol><li><a href="/ja/docs/Learn/Accessibility">アクセシビリティ</a></li><li><a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは</a></li><li><a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの良き基本</a></li><li><a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティのベストプラクティス</a></li><li><a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a></li><li><a href="/ja/docs/Learn/Accessibility/Multimedia">アクセシブルなマルチメディア</a></li><li><a href="/ja/docs/Learn/Accessibility/Mobile">モバイルのアクセシビリティ</a></li><li><a href="/ja/docs/Learn/Accessibility/Accessibility_troubleshooting">評価: アクセシビリティのトラブルシューティング</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/Performance">パフォーマンス — ウェブサイトを高速かつ応答性の高いものにする</a></li><li><details><summary>パフォーマンスガイド</summary><ol><li><a href="/ja/docs/Learn/Performance">ウェブパフォーマンス</a></li><li><a href="/ja/docs/Learn/Performance/why_web_performance">ウェブパフォーマンスの「なぜ」</a></li><li><a href="/ja/docs/Learn/Performance/What_is_web_performance">ウェブパフォーマンスとは</a></li><li><a href="/ja/docs/Learn/Performance/Perceived_performance">知覚的パフォーマンス</a></li><li><a href="/ja/docs/Learn/Performance/Measuring_performance">パフォーマンスの測定</a></li><li><a href="/ja/docs/Learn/Performance/Multimedia">マルチメディア: 画像</a></li><li><a href="/ja/docs/Learn/Performance/video">マルチメディア: 動画</a></li><li><a href="/ja/docs/Learn/Performance/JavaScript">JavaScript のパフォーマンス</a></li><li><a href="/ja/docs/Learn/Performance/HTML">HTML のパフォーマンス機能</a></li><li><a href="/ja/docs/Learn/Performance/CSS">CSS のパフォーマンス最適化</a></li><li><a href="/ja/docs/Learn/Performance/business_case_for_performance">ウェブパフォーマンスのビジネスケース</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/MathML">MathML — MathML を使用して数学を記述する</a></li><li><details><summary>MathML の最初のステップ</summary><ol><li><a href="/ja/docs/Learn/MathML/First_steps">MathML 第一歩の概要</a></li><li><a href="/ja/docs/Learn/MathML/First_steps/Getting_started">MathML を始めよう</a></li><li><a href="/ja/docs/Learn/MathML/First_steps/Text_containers">MathML テキストコンテナー</a></li><li><a href="/ja/docs/Learn/MathML/First_steps/Fractions_and_roots">MathML 分数と根号</a></li><li><a href="/ja/docs/Learn/MathML/First_steps/Scripts">MathML 添字要素</a></li><li><a href="/ja/docs/Learn/MathML/First_steps/Tables">MathML 表</a></li><li><a href="/ja/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas">三大数式</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/../Games">ゲーム — ウェブ用ゲームの開発</a></li><li><details><summary>ガイドとチュートリアル</summary><ol><li><a href="/ja/docs/Games/Introduction">ウェブ用のゲーム開発入門</a></li><li><a href="/ja/docs/Games/Techniques">ゲーム開発テクニック</a></li><li><a href="/ja/docs/Games/Tutorials">チュートリアル</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Games/Publishing_games">Publishing games</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/Tools_and_testing">ツールとテスト</a></li><li><details><summary>クライアントサイドウェブ開発ツール</summary><ol><li><a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools">クライアントサイドウェブ開発ツールの理解</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">クライアントサイドツールの概要</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">コマンドライン短期集中講座</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">パッケージ管理の基本</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">完全なツールチェーンの導入</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">アプリのデプロイ</a></li></ol></details></li><li><details><summary>クライアントサイドフレームワークの概要</summary><ol><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">クライアントサイドフレームワークの概要</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">フレームワークの主な機能</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">React を始める</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">React ToDoリストをはじめる</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">React アプリのコンポーネント化</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React のリソース</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Vue refs and lifecycle methods for focus management</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Svelte をはじめる</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte to-do list app</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Angular をはじめる</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Angular todo リストアプリの事始め</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Angular アプリのスタイリング</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">item コンポーネントの作成</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">To Do アイテムのフィルタリング</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Angular アプリケーションのビルドとその他のリソース</a></li></ol></details></li><li><details><summary>Git と GitHub</summary><ol><li><a href="/ja/docs/Learn/Tools_and_testing/GitHub">Git と GitHub</a></li></ol></details></li><li><details><summary>ブラウザー横断テスト</summary><ol><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">ブラウザー横断テスト</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">はじめてのブラウザー横断テスト</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">テスト実行のための戦略</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">一般的な HTML と CSS の問題への対処</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">よくある JavaScript の問題の扱い</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">よくあるアクセシビリティの問題を扱う</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">機能検出の実装</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">自動化テストの紹介</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">テスト自動化環境のセットアップ</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/Server-side">サーバーサイドウェブサイトプログラミング</a></li><li><details><summary>サーバーサイドのウェブサイトプログラミングの第一歩</summary><ol><li><a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドのウェブサイトプログラミングの第一歩</a></li><li><a href="/ja/docs/Learn/Server-side/First_steps/Introduction">サーバーサイドの概要</a></li><li><a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview">クライアント・サーバーの概要</a></li><li><a href="/ja/docs/Learn/Server-side/First_steps/Web_frameworks">サーバーサイドウェブフレームワーク</a></li><li><a href="/ja/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトのセキュリティ</a></li></ol></details></li><li><details><summary>Django ウェブフレームワーク (Python)</summary><ol><li><a href="/ja/docs/Learn/Server-side/Django">Django ウェブフレームワーク (Python)</a></li><li><a href="/ja/docs/Learn/Server-side/Django/Introduction">Django の紹介</a></li><li><a href="/ja/docs/Learn/Server-side/Django/development_environment">Django 開発環境の設定</a></li><li><a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django チュートリアル: 地域図書館ウェブサイト</a></li><li><a href="/ja/docs/Learn/Server-side/Django/skeleton_website">Django チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">Assessment: DIY Django mini blog</a></li></ol></details></li><li><details><summary>Express ウェブフレームワーク (Node.js/JavaScript)</summary><ol><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs">Express ウェブフレームワーク (Node.js/JavaScript)</a></li><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node の紹介</a></li><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリーデータの表示</a></li><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/Common_questions">その他のリソース</a></li><li><details><summary>よくある質問</summary><ol><li><a href="/ja/docs/Learn/Common_questions">よくある質問</a></li><li><a href="/ja/docs/Learn/HTML/Howto">HTML を使ってよくある問題を解決する</a></li><li><a href="/ja/docs/Learn/CSS/Howto">CSS を使ってよくある問題を解決する</a></li><li><a href="/ja/docs/Learn/JavaScript/Howto">JavaScript のコードのよくある問題を解決する</a></li><li><a href="/ja/docs/Learn/Common_questions/Web_mechanics">ウェブの仕組み</a></li><li><a href="/ja/docs/Learn/Common_questions/Tools_and_setup">ツールとセットアップ</a></li><li><a href="/ja/docs/Learn/Common_questions/Design_and_accessibility">デザインとアクセシビリティ</a></li></ol></details></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">この記事では</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#すべては条件次第">すべては条件次第</a></li><li class="document-toc-item "><a class="document-toc-link" href="#if...else_文">if...else 文</a></li><li class="document-toc-item "><a class="document-toc-link" href="#switch_文">switch 文</a></li><li class="document-toc-item "><a class="document-toc-link" href="#三項演算子">三項演算子</a></li><li class="document-toc-item "><a class="document-toc-link" href="#アクティブラーニング_単純なカレンダー">アクティブラーニング: 単純なカレンダー</a></li><li class="document-toc-item "><a class="document-toc-link" href="#アクティブラーニング_もっとたくさんの色から選ぶ">アクティブラーニング: もっとたくさんの色から選ぶ</a></li><li class="document-toc-item "><a class="document-toc-link" href="#スキルテスト">スキルテスト</a></li><li class="document-toc-item "><a class="document-toc-link" href="#まとめ">まとめ</a></li><li class="document-toc-item "><a class="document-toc-link" href="#関連情報">関連情報</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="ja"><header><h1>コードでの意思決定 — 条件文</h1></header><div class="section-content"><ul class="prev-next"> <li><a class="button secondary" href="/ja/docs/Learn/JavaScript/Building_blocks"><span class="button-wrap"> Overview: JavaScript の構成要素</span></a></li> <li><a class="button secondary" href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code"><span class="button-wrap"> 次のページ </span></a></li> </ul> <p>どのプログラミング言語でも、コードは様々な入力に応じた決定を迫られ、その結果として動作を起こします。例えば、ゲームではプレイヤーの残機が 0 になった場合、ゲームオーバーとなります。天気アプリは朝に起動された場合は日の出の画像を表示し、夜に起動された場合は星や月の画像を表示します。この記事では、JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">前提条件:</th> <td> HTML、CSS、 <a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>への基本的な理解。 </td> </tr> <tr> <th scope="row">目標:</th> <td>JavaScript における条件分岐構造をどのように使用するかを理解する。</td> </tr> </tbody> </table></figure></div><section aria-labelledby="すべては条件次第"><h2 id="すべては条件次第"><a href="#すべては条件次第">すべては条件次第</a></h2><div class="section-content"><p>人類（と他の動物たち）は小さいもの（「クッキーを 1 つ食べるべきか、2 つ食べるべきか」）から大きいもの（「故郷に残って親父の農場を継ぐべきか、アメリカに渡って宇宙物理学を学ぶべきか」）まで、生活に関わるすべての決定を下します。</p> <p>JavaScript では、条件文を使ってそのような決定を下すことが可能です。条件文は、選ばなければならない選択肢（例えば「クッキーを 1 つまたは 2 つ食べる」）からそれを選んだ場合の結果を導き出します（おそらく「1 つクッキーを食べる」を選んだら、「まだちょっとお腹が空いている」という結果となるでしょうし、「2 つクッキーを食べる」を選んだら「お腹いっぱい。だけどクッキーを全部食べてママに怒られる」という結果となってしまうでしょう。）</p> <p> <img src="/ja/docs/Learn/JavaScript/Building_blocks/conditionals/cookie-choice-small.png" alt="'Cookies' と書かれたクッキーの瓶を持つ人に似た漫画のキャラクター。キャラクターの頭の上には疑問符があります。吹き出しが2つあります。左の吹き出しにはクッキーが1つあります。右の吹き出しにはクッキーが2つあります。共に、キャラクターがクッキーを1枚にするか2枚にするかを決めようとしていることを暗示しています。" width="1280" height="800" loading="lazy"> </p></div></section><section aria-labelledby="if...else_文"><h2 id="if...else_文"><a href="#if...else_文">if...else 文</a></h2><div class="section-content"><p>それでは、JavaScript で最もよく使われる条件文から始めましょう。それは <a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else"><code>if ... else</code> 文</a>です。</p></div></section><section aria-labelledby="if...else_の基本的な構文"><h3 id="if...else_の基本的な構文"><a href="#if...else_の基本的な構文">if...else の基本的な構文</a></h3><div class="section-content"><p><code>if...else</code> の基本的な構文は次のようになっています。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>if (条件式) { /* 条件式が true の場合に実行されるコード */ } else { /* それ以外の場合に実行されるコード */ } </code></pre></div> <p>ここでは...</p> <ol> <li><code>if</code> キーワードの後ろに括弧が並んでいます。</li> <li>判断に用いる条件式はその括弧の中にあります（たいていの場合は「この値はもう一方より大きい」や、「この値は存在する」などです）。この条件には、前回のモジュールで習った<a href="/ja/docs/Learn/JavaScript/First_steps/Math#%E6%AF%94%E8%BC%83%E6%BC%94%E7%AE%97%E5%AD%90">比較演算子</a>を使用し、 <code>true</code> または <code>false</code> を返します。</li> <li>中にコードが書いてある（実際のコードはどんなものでも構いません）中括弧のペアは、条件式が <code>true</code> の場合に実行されます。</li> <li>続いて <code>else</code> キーワードがあります。</li> <li>さらに他のコードが書いてある（こちらもどんなコードでも構いません）中括弧のペアは条件式が <code>true</code> ではない場合に実行されます。</li> </ol> <p>このコードは（英語を使う人には）とても読みやすいものになっています。このコードは「もし ( <strong>if</strong> ) 条件式 ( <strong>condition</strong> ) が <code>true</code> を返したら A のコードを実行し、それ以外ならば ( <strong>else</strong> ) B のコードを実行する」と読めます。</p> <p><code>else</code> とそれに続く中括弧は必ずしも書く必要がないことを覚えておきましょう。次のコードも全く問題のないコードです。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>if (条件式) { /* 条件式が true の場合に実行されるコード */ } /* 普通に実行されるコード */ </code></pre></div> <p>ここで注意しておかなければならないことがあります。それは 2 つ目のコードブロックは、条件分岐の管理下になく、条件式が <code>true</code> か <code>false</code> かに関係なく、<strong>常に</strong>実行されることです。これはまったく悪いことではないのですが、条件に応じてどちらか一方のみ動かしたいと思っている場合には、気を付けておかないと思った通りの動作をしないでしょう。</p> <p>最後の確認点として、<code>if...else</code> 文が中括弧なしで書かれているのを見ることがあります。以下のような省略した書き方です。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>if (条件式) /* 条件式が true の場合に実行されるコード */ else /* それ以外の場合に実行されるコード */ </code></pre></div> <p>この構文は完全に有効ですが、中括弧を使用してコードのブロックを区切り、複数行とインデントを使用した方がコードを理解しやすくなります。</p></div></section><section aria-labelledby="実際の例"><h3 id="実際の例"><a href="#実際の例">実際の例</a></h3><div class="section-content"><p>この構文をよりよく理解するために、実際の例を考えてみましょう。子どもが母親か父親に雑用を頼まれたとします。親は「買い物に行って手伝ってくれたら、お小遣いをあげるから、欲しかったおもちゃを買いなさい」と言うかもしれません。JavaScriptではこのように表します。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let shoppingDone = false; let childsAllowance; if (shoppingDone === true) { childsAllowance = 10; } else { childsAllowance = 5; } </code></pre></div> <p>このコードは常に <code>shoppingDone</code> 変数が <code>false</code> なので、かわいそうな子供は追加のお小遣いを受け取れません。両親が子供がお使いを完了した場合に <code>shoppingDone</code> 変数を <code>true</code> にセットしてあげるかどうかはプログラム次第です（つまり私たち次第です。）</p> <div class="notecard note"> <p><strong>メモ:</strong> <a href="https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/allowance-updater.html" class="external" target="_blank">GitHub で上記のコードの完全なバージョン</a>が公開されています。（<a href="https://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html" class="external" target="_blank">ライブ実行</a>でも確認できます。）</p> </div></div></section><section aria-labelledby="else_if"><h3 id="else_if"><a href="#else_if">else if</a></h3><div class="section-content"><p>先ほどの例では実行結果は 2 つだけでしたが、もっと選択肢がある場合はどうでしょうか？</p> <p><code>else if</code> を使って、追加の選択肢を <code>if...else</code> に繋ぐ方法があります。追加の選択肢は <code>if() { }</code> と <code>else { }</code> の間に、コードブロックを続けて追加する必要があります。具体的な例として、天気予報のアプリケーションの一部を見てみましょう。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><label for="weather">今日の天気を選択してください: </label> <select id="weather"> <option value="">--選択してください--</option> <option value="sunny">晴れ</option> <option value="rainy">雨</option> <option value="snowing">雪</option> <option value="overcast">曇り</option> </select> <p></p> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const select = document.querySelector("select"); const para = document.querySelector("p"); select.addEventListener("change", setWeather); function setWeather() { const choice = select.value; if (choice === "sunny") { para.textContent = "今日はとてもいい天気です。半ズボンをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！"; } else if (choice === "rainy") { para.textContent = "外は雨が降っています。レインコートと傘を忘れないようにして、できる限り室内で過ごしましょう。"; } else if (choice === "snowing") { para.textContent = "雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。"; } else if (choice === "overcast") { para.textContent = "雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持っていきましょう。"; } else { para.textContent = ""; } } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="else if sample" id="frame_else_if" width="100%" height="100" src="about:blank" data-live-path="/ja/docs/Learn/JavaScript/Building_blocks/conditionals" data-live-id="else_if" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <ol> <li>HTML に、天気を選ぶことが可能な <a href="/ja/docs/Web/HTML/Element/select"><code><select></code></a> 要素があり、1 つの段落がありますね。</li> <li>JavaScript では、<a href="/ja/docs/Web/HTML/Element/select"><code><select></code></a> と <a href="/ja/docs/Web/HTML/Element/p"><code><p></code></a> の各要素について、参照を取得して保持し、<code><select></code> 要素にはイベントリスナーを設定しています。もし、要素の値が変わったら <code>setWeather()</code> 関数が動きます。</li> <li>この関数が実行されると、まずは <code>choice</code> という変数に、<code><select></code> 要素の現在選択されている値を入れます。そして、条件文を使い、<code>choice</code> の値に応じた文字列が段落に設定されます。最初の <code>if() { }</code> のブロックを除いて、どのように <code>else if() { }</code> のブロックで判定しているか注目してください。</li> <li>一番下の <code>else { }</code> 選択肢は、「最後の手段」となるオプションで、この中のコードは、どの条件にも一致しなかった場合（<code>true</code> とならなかった場合）に実行されます。今回の場合選択されていない場合に、段落を空にしています。何も選択されていない場合というのは、ユーザーが再度最初に表示されていた「--選択してください--」というオプションを選んだ場合です。</li> </ol> <div class="notecard note"> <p><strong>メモ:</strong> <a href="https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/simple-else-if.html" class="external" target="_blank">GitHub で上記のコードの完全なバージョン</a>が公開されています。（<a href="https://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html" class="external" target="_blank">ライブ実行</a>でも確認できます。）</p> </div></div></section><section aria-labelledby="比較演算子に関するメモ"><h3 id="比較演算子に関するメモ"><a href="#比較演算子に関するメモ">比較演算子に関するメモ</a></h3><div class="section-content"><p>比較演算子は条件文の中で使われます。<a href="/ja/docs/Learn/JavaScript/First_steps/Math#%E6%AF%94%E8%BC%83%E6%BC%94%E7%AE%97%E5%AD%90">JavaScript での基本演算 — 数値と演算子</a>で初めて出てきましたね。演算子には以下のようなものがありました。</p> <ul> <li><code>===</code> と <code>!==</code> は、ある値がもう一方の値と等しいか、もしくは等しくないかを判定します。</li> <li><code><</code> と <code>></code> は、ある値がもう一方の値より大きいか、より小さいかを判定します。</li> <li><code><=</code> と <code>>=</code> は、ある値がもう一方の値以上か、以下かを判定します。</li> </ul> <p>論理値 (<code>true</code>/<code>false</code>) を判定する場合には、少しの配慮が必要であることを付け加えさせてください。おそらく何度かつまずくであろう、よくあるパターンです。条件文で何らかの値が検査される場合、<code>false</code>、<code>undefined</code>、<code>null</code>、<code>0</code>、<code>NaN</code>、空文字列 (<code>''</code>) 以外であれば <code>true</code> となります。ですから、その値が <code>true</code> であるか判定したい場合や、その値が存在するか（例えば、<code>undefined</code> ではないこと）判定したい場合は単に変数名を使用するだけです。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let cheese = "チェダー"; if (cheese) { console.log("やった！チーズトーストを作るチーズがあるよ。"); } else { console.log("今日はチーズトーストのチーズがないよ。"); } </code></pre></div> <p>先ほどの子供のお使いの例に戻ると、以下のようにも書くことができます。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let shoppingDone = false; let childsAllowance; // 'shoppingDone === true' と明示的に指定する必要はありません if (shoppingDone) { childsAllowance = 10; } else { childsAllowance = 5; } </code></pre></div></div></section><section aria-labelledby="入れ子の_if...else"><h3 id="入れ子の_if...else"><a href="#入れ子の_if...else">入れ子の if...else</a></h3><div class="section-content"><p><code>if...else</code> 文を入れ子にして、他の <code>if...else</code> 文の中で使用することは全く問題ありません。例えば、天気予報アプリケーションで気温に応じて表示する内容を切り替えたい場合以下のように書くことができます。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>if (choice === "sunny") { if (temperature < 30) { para.textContent = `外の気温は ${temperature} 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう。`; } else if (temperature >= 30) { para.textContent = `外の気温は ${temperature} 度です — かなり暑いです！外に出るときは、日焼け止めを塗りましょう。`; } } </code></pre></div> <p>たとえコードがすべて一緒に動作したとしても、それぞれの <code>if...else</code> 文は完全に独立して動作します。</p></div></section><section aria-labelledby="論理演算子_and_と_or_と_not"><h3 id="論理演算子_and_と_or_と_not"><a href="#論理演算子_and_と_or_と_not">論理演算子: AND と OR と NOT</a></h3><div class="section-content"><p>複数の条件を入れ子の <code>if...else</code> 文を書かずに判定したいなら、<a href="/ja/docs/Web/JavaScript/Reference/Operators">論理演算子</a>の出番です。条件で使用すると、最初の 2 つは以下のようになります。</p> <ul> <li><code>&&</code> — AND は 2 つ以上の式を一つに繋げ、それぞれの式を個別に評価して、すべて <code>true</code> になった場合、その式全体が <code>true</code> として返します。</li> <li><code>||</code> — OR は 2 つ以上の式を 1 つに繋げ、それぞれの式を個別に評価し、最初に <code>true</code> になったところで、その式全体を <code>true</code> として返します。</li> </ul> <p>AND の例を示すため、先ほどのコードを書き直すと以下のようになります。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>if (choice === "sunny" && temperature < 30) { para.textContent = `外の気温は ${temperature} 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう。`; } else if (choice === "sunny" && temperature >= 30) { para.textContent = `外の気温は ${temperature} 度です — かなり暑いです！外に出るときは、日焼け止めを塗りましょう。`; } </code></pre></div> <p>例では、最初のブロックは <code>choice === 'sunny'</code> <em>および</em> <code>temperature < 30</code> のどちらも <code>true</code> となった場合にのみ実行されます。</p> <p>今度は OR の例を見てみましょう。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>if (iceCreamVanOutside || houseStatus === "火事") { console.log("すぐに家から出ましょう。"); } else { console.log("それでは家にいましょう。"); } </code></pre></div> <p>論理演算子の最後は NOT です。<code>!</code> 演算子で表され、式を否定するのに使用します。それでは先ほどの OR と組み合わせてみましょう。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>if (!(iceCreamVanOutside || houseStatus === "火事")) { console.log("それでは家にいましょう。"); } else { console.log("すぐに家から出ましょう。"); } </code></pre></div> <p>このコード例では、OR 文が <code>true</code> となれば、 NOT 演算子がそれを否定します。そのため、式全体は <code>false</code> となります。</p> <p>論理文は思うがままに、いくつでも繋げることが可能です。次の例では両方の OR 文が真を返した場合に AND 文が真となり、<code>if</code> の中のコードが実行されます。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === "スティーブ")) { // コードを実行 } </code></pre></div> <p>論理 OR 演算子を使用するうえでよくある間違いは、判定しようとしている変数を一度だけ書いて、その後に判定したい値を <code>||</code> (OR) 演算子で区切って指定する誤りです。次のような例です。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>if (x === 5 || 7 || 10 || 20) { // コードを実行する } </code></pre></div> <p>この場合、<code>if ()</code> の条件式は常に真となります。なぜなら 7 (もしくはその他 0 以外の数値) が常に <code>true</code> と評価されるためです。この条件式は「もし x が 5 であるか 7 が真であるならば (7 は常に真です)」となります。これは求めているものではありませんよね！このコードの誤りを修正するためには、OR 演算子の隣に常に完全な条件を書かなければなりません。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>if (x === 5 || x === 7 || x === 10 || x === 20) { // コードを実行する } </code></pre></div></div></section><section aria-labelledby="switch_文"><h2 id="switch_文"><a href="#switch_文">switch 文</a></h2><div class="section-content"><p><code>if...else</code> 文は条件の判定を上手くこなしていましたが、欠点がないわけではありません。いくつかの選択肢しかない場合には申し分ないのですが、AND / OR の条件が複雑になるにつれて（例えば、複数の論理演算子を使ったりする場合など）、相当量のコードを書かなければなりません。ある選択肢に応じて値を変数に設定したり、特定の条件に応じて何かを表示したりするとき、選択肢がたくさんあると、<code>if...else</code> 文を書くのは面倒です。</p> <p><a href="/ja/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code> 文</a>はそんなときの味方です。<code>switch</code> 文は一つの式または値を受け取り、それに合致する値が見つかるまで選択肢を探します。そして合致した選択肢に対応するコードを実行します。まずは擬似コードを見て、雰囲気をつかみましょう。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>switch (式) { case 選択肢1: // このコードを実行する break; case 選択肢2: // 代わりにこのコードを実行する break; // 以下に選択肢を好きなだけ並べる default: // 既定でこのコードを実行する break; } </code></pre></div> <p>上記のコードには...</p> <ol> <li><code>switch</code> キーワードに続き、一組の括弧があります。</li> <li>括弧の中には、式または値があります。</li> <li><code>case</code> キーワードに続き、選択肢となる式または値、それにコロン (<code>:</code>) が並んでいます。</li> <li>もしその選択肢にマッチすれば、コードが実行されます。</li> <li><code>break</code> 文とセミコロン (<code>;</code>) があります。もし前の選択肢にマッチして入ればブラウザーはコードの実行をここでやめ、switch 文の後ろにあるコードに移動します。</li> <li><code>case</code> 節 (上記 3. から 5. ) は好きなだけ書くことができます。</li> <li>上記 3. から 5.の <code>case</code> 節と全く同じコードパターンで書かれている <code>default</code> キーワードがあります。違いは <code>default</code> の後ろに選択肢が書かれていないことです。また、後ろに続くコードがないので、ここには <code>break</code> 文が必要ありません。もし、選択肢のどれにもマッチするものがない場合に既定のオプションとして実行されます。</li> </ol> <div class="notecard note"> <p><strong>メモ:</strong> 評価する式の値が不明な値にならないのであれば、<code>default</code> 節は書く必要はありません。しかし、式が不明な値となり、それに対処する必要があるのなら、<code>default</code> 節を書くことで対応が可能です。</p> </div></div></section><section aria-labelledby="switch_の例"><h3 id="switch_の例"><a href="#switch_の例">switch の例</a></h3><div class="section-content"><p>それでは実際の例を見てみましょう。先ほどの天気予報アプリを switch 文を使用して書き直してみました。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><label for="weather">今日の天気を選択してください: </label> <select id="weather"> <option value="">--選択してください--</option> <option value="sunny">晴れ</option> <option value="rainy">雨</option> <option value="snowing">雪</option> <option value="overcast">曇り</option> </select> <p></p> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const select = document.querySelector("select"); const para = document.querySelector("p"); select.addEventListener("change", setWeather); function setWeather() { const choice = select.value; switch (choice) { case "sunny": para.textContent = "今日はとてもいい天気です。半ズボンをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！"; break; case "rainy": para.textContent = "外は雨が降っています。レインコートと傘を忘れないようにして、できる限り室内で過ごしましょう。"; break; case "snowing": para.textContent = "雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。"; break; case "overcast": para.textContent = "雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持っていきましょう。"; break; default: para.textContent = ""; } } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="A switch example sample" id="frame_a_switch_example" width="100%" height="100" src="about:blank" data-live-path="/ja/docs/Learn/JavaScript/Building_blocks/conditionals" data-live-id="a_switch_example" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <div class="notecard note"> <p><strong>メモ:</strong> <a href="https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/simple-switch.html" class="external" target="_blank">このサンプルを GitHub で見る</a>ことができます。（<a href="https://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html" class="external" target="_blank">実行可能なデモ</a>もあります。）</p> </div></div></section><section aria-labelledby="三項演算子"><h2 id="三項演算子"><a href="#三項演算子">三項演算子</a></h2><div class="section-content"><p>例題に進む前に、ちょっとした構文をご紹介しましょう。<a href="/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator">三項演算子 (もしくは条件演算子)</a> は条件式を判定し、その結果に応じて 2 つの値または式のうち、どちらか一方を返します。これはある状況においてはとても便利です。単純に <code>true</code>/<code>false</code> で判定可能な 2 つの選択肢のうちより片方を選ぶという場合には、<code>if...else</code> ブロックを書くよりも多くのコードを節約できます。この擬似コードは以下のようなものになります。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>条件式 ? こちらのコードを実行する : 代わりにこちらのコードを実行する </code></pre></div> <p>それでは実際に例を見て見ましょう。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const greeting = isBirthday ? "スミスさん、誕生日おめでとうございます！良い一日を。" : "スミスさんおはようございます。"; </code></pre></div> <p>この例では <code>isBirthday</code> という変数があり、この変数が <code>true</code> の場合、お客に誕生日を祝福するメッセージを送ります。そうでなければ、通常の挨拶を送ります。</p></div></section><section aria-labelledby="三項演算子を使用する例"><h3 id="三項演算子を使用する例"><a href="#三項演算子を使用する例">三項演算子を使用する例</a></h3><div class="section-content"><p>三項演算子を変数の代入にのみ使用する必要はありません。関数や、複数行に渡るコードを実行する場合にも (それ以外にも好きなように) 使用できます。次の例は三項演算子を使用してサイトにテーマを適用しています。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><label for="theme">テーマを選んでください: </label> <select id="theme"> <option value="white">白</option> <option value="black">黒</option> </select> <h1>私のウェブサイト</h1> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const select = document.querySelector("select"); const html = document.querySelector("html"); document.body.style.padding = "10px"; function update(bgColor, textColor) { html.style.backgroundColor = bgColor; html.style.color = textColor; } select.addEventListener("change", () => select.value === "black" ? update("black", "white") : update("white", "black"), ); </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Ternary operator example sample" id="frame_ternary_operator_example" width="100%" height="300" src="about:blank" data-live-path="/ja/docs/Learn/JavaScript/Building_blocks/conditionals" data-live-id="ternary_operator_example" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>上記の例では、テーマ（黒または白）を選択することができる <a href="/ja/docs/Web/HTML/Element/select"><code><select></code></a> 要素と、サイトのタイトルが書かれた単純な <a href="/ja/docs/Web/HTML/Element/Heading_Elements">h1</a> 要素があります。さらに <code>update()</code> という関数があり、その関数は引数（入力値）として 2 つの色を取ります。この関数が呼ばれると、ウェブサイトの背景色は 1 つ目の引数に、文字の色は 2 つの目の引数に設定されます。</p> <p>さらに、三項演算子を含む <a href="/ja/docs/Web/API/HTMLElement/change_event">onchange</a> イベントリスナーがあります。<code>select.value === 'black'</code> という条件式で始まっています。この式が <code>true</code> であるならば、<code>update()</code> 関数を引数に <code>'black'</code>、<code>'white'</code> を指定して実行します (つまり、背景色を黒、文字色を白に設定します)。この式が <code>false</code> であるならば、<code>update()</code> 関数を引数に <code>'white'</code>、<code>'black'</code> を指定して実行します (つまり、背景色を逆にします)。</p> <div class="notecard note"> <p><strong>メモ:</strong> この例は <a href="https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/simple-ternary.html" class="external" target="_blank">GitHub でも公開しています</a>。（<a href="https://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html" class="external" target="_blank">ライブ実行</a>でも確認できます。）</p> </div></div></section><section aria-labelledby="アクティブラーニング_単純なカレンダー"><h2 id="アクティブラーニング_単純なカレンダー"><a href="#アクティブラーニング_単純なカレンダー">アクティブラーニング: 単純なカレンダー</a></h2><div class="section-content"><p>この例では、単純なカレンダーアプリケーションの作成を手伝ってもらいます。現在、以下の内容がコードに書かれています。</p> <ul> <li>ユーザーが月を選択できるように <a href="/ja/docs/Web/HTML/Element/select"><code><select></code></a> 要素があります。</li> <li><code><select></code> メニューの選択内容が変更された場合に、イベントを捕捉できるように <code>onchange</code> イベントハンドラーが設定されています。</li> <li>カレンダーを描画し、 <a href="/ja/docs/Web/HTML/Element/Heading_Elements">h1</a> 要素に適切な月を設定する <code>createCalendar()</code> と呼ばれる関数があります。</li> </ul> <p>あなたには、<code>onchange</code> ハンドラーの内部に条件式を書いてもらいます。<code>// 条件式をここに書く</code> というコメントのすぐ下に...</p> <ol> <li>選択されている月を取得します。（これは <code>choice</code> 変数に格納されています。この値は <code><select></code> 要素で選択された後の値で、例えば 1 月なら、"1" といった値です。）</li> <li><code>days</code> という変数に、選択された月の日数を設定します。そのためには、1 年の各月の日数を調べる必要があるでしょう。うるう年はこの例題の目的から外れるため、無視してください。</li> </ol> <p>ヒント:</p> <ul> <li>ほとんどの月は日数が同じなので、複数の月を OR 演算子を用いて一つの条件式にまとめるのが良いでしょう。</li> <li>どの月が最も多い日数なのか考えてください。そして、その日数を既定値として使用しましょう。</li> </ul> <p>もし間違ってしまっても、「リセット」ボタンを押すことでいつでも元に戻せます。詰まってしまったら、「答えを見る」ボタンで答えが見られます。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><h2>ライブ出力</h2> <iframe id="output" width="100%" height="600px"></iframe> <h2>コードエディター</h2> <p class="a11y-label"> コードエディターから抜けるには Esc キーを押して下さい（Tab はタブ文字を挿入します）。 </p> <textarea id="code" class="playable-code" style="height: 400px;width: 95%"> const select = document.querySelector('select'); const list = document.querySelector('ul'); const h1 = document.querySelector('h1'); select.addEventListener('change', () => { const choice = select.value; // 条件式をここに書く createCalendar(days, choice); }); function createCalendar(days, choice) { list.innerHTML = ''; h1.textContent = choice; for (let i = 1; i <= days; i++) { const listItem = document.createElement('li'); listItem.textContent = i; list.appendChild(listItem); } } createCalendar(31, '1 月'); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="リセット" /> <input id="solution" type="button" value="答えを見る" /> </div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } </code></pre></div> <div class="code-example"><pre class="brush: js hidden notranslate"><code>const reset = document.getElementById("reset"); const solution = document.getElementById("solution"); const outputIFrame = document.querySelector("#output"); const textarea = document.getElementById("code"); const initialCode = textarea.value; let userCode = textarea.value; const solutionCode = `const select = document.querySelector("select"); const list = document.querySelector("ul"); const h1 = document.querySelector("h1"); select.addEventListener("change", () => { const choice = select.value; let days = 31; if (choice === "2 月") { days = 28; } else if ( choice === "4 月" || choice === "6 月" || choice === "9 月" || choice === "11 月" ) { days = 30; } createCalendar(days, choice); }); function createCalendar(days, choice) { list.innerHTML = ""; h1.textContent = choice; for (let i = 1; i <= days; i++) { const listItem = document.createElement("li"); listItem.textContent = i; list.appendChild(listItem); } } createCalendar(31, "1 月");`; function outputDocument(code) { const outputBody = ` <div class="output" style="height: 500px; overflow: auto"> <label for="month">月を選択: </label> <select id="month"> <option value="1 月">1 月</option> <option value="2 月">2 月</option> <option value="3 月">3 月</option> <option value="4 月">4 月</option> <option value="5 月">5 月</option> <option value="6 月">6 月</option> <option value="7 月">7 月</option> <option value="8 月">8 月</option> <option value="9 月">9 月</option> <option value="10 月">10 月</option> <option value="11 月">11 月</option> <option value="12 月">12 月</option> </select> <h1></h1> <ul></ul> </div>`; const outputStyle = ` .output * { box-sizing: border-box; } .output ul { padding-left: 0; } .output li { display: block; float: left; width: 25%; border: 2px solid white; padding: 5px; height: 40px; background-color: #4a2db6; color: white; } html { font-family: sans-serif; } h2 { font-size: 16px; }`; return ` <!doctype html> <html> <head> <style>${outputStyle}</style> </head> <body> ${outputBody} <script>${code}</script> </body> </html>`; } function update() { output.setAttribute("srcdoc", outputDocument(textarea.value)); } update(); textarea.addEventListener("input", update); reset.addEventListener("click", () => { textarea.value = initialCode; userEntry = textarea.value; solution.value = "答えを見る"; update(); }); solution.addEventListener("click", () => { if (solution.value === "答えを見る") { // 戻せるように、ユーザーのコードを // 記憶しておく userCode = textarea.value; textarea.value = solutionCode; solution.value = "答えを隠す"; } else { textarea.value = userCode; solution.value = "答えを見る"; } update(); }); // タブキーでテキストエリアから抜けてしまうのを防ぎ、 // 代わりにカーソル位置にタブ文字を挿入する textarea.onkeydown = (e) => { if (e.keyCode === 9) { e.preventDefault(); insertAtCaret("\t"); } if (e.keyCode === 27) { textarea.blur(); } }; function insertAtCaret(text) { const scrollPos = textarea.scrollTop; let caretPos = textarea.selectionStart; const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Active learning A simple calendar sample" id="frame_active_learning_a_simple_calendar" width="100%" height="1210" src="about:blank" data-live-path="/ja/docs/Learn/JavaScript/Building_blocks/conditionals" data-live-id="active_learning_a_simple_calendar" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="アクティブラーニング_もっとたくさんの色から選ぶ"><h2 id="アクティブラーニング_もっとたくさんの色から選ぶ"><a href="#アクティブラーニング_もっとたくさんの色から選ぶ">アクティブラーニング: もっとたくさんの色から選ぶ</a></h2><div class="section-content"><p>この例では、先ほどの三項演算子の例を switch 文に変換し、単純なウェブサイトに、より多くの選択肢を与えます。<a href="/ja/docs/Web/HTML/Element/select"><code><select></code></a> 要素を見てください。今回は先ほどの 2 つではなく、5 つの選択肢があります。<code>// ここに SWITCH 文を書く</code> というコメントの真下に switch 文を追加してください。</p> <ul> <li><code>choice</code> 変数を判定する式として使用します。</li> <li>各ケース (case) で、<code>choice</code> 変数は選択可能な値（'white'、'black'、'purple'、'yellow'、'psychedelic'）のうちのどれかです。</li> <li>各ケース (case) で、<code>update()</code> 関数が実行されるようにしてください。関数には 2 つの引数を指定します。1 つ目の引数は背景色、2 つ目の色は前景色です。色は文字列なので、忘れずに引用符で囲みましょう。</li> </ul> <p>もし間違ってしまっても、「リセット」ボタンを押すことでいつでも元に戻せます。詰まってしまったら、「答えを見る」ボタンで答えが見られます。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><h2>ライブ出力</h2> <div class="output" style="height: 300px;"> <label for="theme">テーマを選んでください: </label> <select id="theme"> <option value="white">白</option> <option value="black">黒</option> <option value="purple">紫</option> <option value="yellow">黄</option> <option value="psychedelic">サイケ</option> </select> <h1>私のウェブサイト</h1> </div> <h2>コードエディター</h2> <p class="a11y-label"> コードエディターから抜けるには Esc キーを押して下さい（Tab はタブ文字を挿入します）。 </p> <textarea id="code" class="playable-code" style="height: 450px;width: 95%"> const select = document.querySelector('select'); const html = document.querySelector('.output'); select.addEventListener('change', () => { const choice = select.value; // ここに SWITCH 文を書く }); function update(bgColor, textColor) { html.style.backgroundColor = bgColor; html.style.color = textColor; } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="リセット" /> <input id="solution" type="button" value="答えを見る" /> </div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } </code></pre></div> <div class="code-example"><pre class="brush: js hidden notranslate"><code>const textarea = document.getElementById("code"); const reset = document.getElementById("reset"); const solution = document.getElementById("solution"); let code = textarea.value; let userEntry = textarea.value; function updateCode() { eval(textarea.value); } reset.addEventListener("click", function () { textarea.value = code; userEntry = textarea.value; solutionEntry = jsSolution; solution.value = "答えを見る"; updateCode(); }); solution.addEventListener("click", function () { if (solution.value === "答えを見る") { textarea.value = solutionEntry; solution.value = "答えを隠す"; } else { textarea.value = userEntry; solution.value = "答えを見る"; } updateCode(); }); const jsSolution = `const select = document.querySelector('select'); const html = document.querySelector('.output'); select.addEventListener('change', () => { const choice = select.value; switch(choice) { case 'black': update('black','white'); break; case 'white': update('white','black'); break; case 'purple': update('purple','white'); break; case 'yellow': update('yellow','purple'); break; case 'psychedelic': update('lime','purple'); break; } }); function update(bgColor, textColor) { html.style.backgroundColor = bgColor; html.style.color = textColor; }`; let solutionEntry = jsSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // タブキーでテキストエリアから抜けてしまうのを防ぎ、 // 代わりにカーソル位置にタブ文字を挿入する textarea.onkeydown = function (e) { if (e.keyCode === 9) { e.preventDefault(); insertAtCaret("\t"); } if (e.keyCode === 27) { textarea.blur(); } }; function insertAtCaret(text) { const scrollPos = textarea.scrollTop; let caretPos = textarea.selectionStart; const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; } // ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する textarea.onkeyup = function () { // ユーザーのコードが表示されているときのみ状態を保存し、 // 答えのコードでユーザーコードが上書きされないようにする if (solution.value === "答えを見る") { userEntry = textarea.value; } else { solutionEntry = textarea.value; } updateCode(); }; </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Active learning More color choices sample" id="frame_active_learning_more_color_choices" width="100%" height="950" src="about:blank" data-live-path="/ja/docs/Learn/JavaScript/Building_blocks/conditionals" data-live-id="active_learning_more_color_choices" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="スキルテスト"><h2 id="スキルテスト"><a href="#スキルテスト">スキルテスト</a></h2><div class="section-content"><p>この記事の最後まで来ましたが、最も大事な情報を覚えていますか？先に進む前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">スキルテスト: 条件文</a> を見てください。</p></div></section><section aria-labelledby="まとめ"><h2 id="まとめ"><a href="#まとめ">まとめ</a></h2><div class="section-content"><p>これで JavaScript での条件構造について今知っておくべきことはすべてです。簡単な例を通してそのコンセプトが理解できたと思います。もし理解できないことがあれば、何度も記事を読み返しましょう。<a href="/ja/docs/Learn#contact_us">私たちに連絡を</a>しても構いません。</p></div></section><section aria-labelledby="関連情報"><h2 id="関連情報"><a href="#関連情報">関連情報</a></h2><div class="section-content"><ul> <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math#%E6%AF%94%E8%BC%83%E6%BC%94%E7%AE%97%E5%AD%90">比較演算子</a></li> <li><a href="/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#conditional_statements">条件式についての詳細</a></li> <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if...else リファレンス</a></li> <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator">条件（三項）演算子リファレンス</a></li> </ul><ul class="prev-next"> <li><a class="button secondary" href="/ja/docs/Learn/JavaScript/Building_blocks"><span class="button-wrap"> Overview: JavaScript の構成要素</span></a></li> <li><a class="button secondary" href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code"><span class="button-wrap"> 次のページ </span></a></li> </ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/translated-content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2024-07-28T14:16:48.000Z">2024年7月28日</time> by <a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content/blob/main/files/ja/learn/javascript/building_blocks/conditionals/index.md?plain=1" title="Folder: ja/learn/javascript/building_blocks/conditionals (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/translated-content/issues/new?template=page-report-ja.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FLearn%2FJavaScript%2FBuilding_blocks%2Fconditionals&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60ja%2Flearn%2Fjavascript%2Fbuilding_blocks%2Fconditionals%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FLearn%2FJavaScript%2FBuilding_blocks%2Fconditionals%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fja%2Flearn%2Fjavascript%2Fbuilding_blocks%2Fconditionals%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2Fd0b2c197900fdd5941d9beeb412575d016392263%0A*+Document+last+modified%3A+2024-07-28T14%3A16%3A48.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mozilla.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg width="112" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mozilla-footer-logo-svg">Mozilla logo</title><path d="M41.753 14.218c-2.048 0-3.324 1.522-3.324 4.157 0 2.423 1.119 4.286 3.29 4.286 2.082 0 3.447-1.678 3.447-4.347 0-2.826-1.522-4.096-3.413-4.096Zm54.89 7.044c0 .901.437 1.618 1.645 1.618 1.427 0 2.949-1.024 3.044-3.352-.649-.095-1.365-.185-2.02-.185-1.426-.005-2.668.397-2.668 1.92Z" fill="currentColor"></path><path d="M0 0v32h111.908V0H0Zm32.56 25.426h-5.87v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h1.864v3.044h-5.864v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h2.669v3.044H6.642v-3.044h1.863v-7.918H6.642V11.42h5.864v2.11c.839-1.489 2.3-2.39 4.252-2.39 2.02 0 3.878.963 4.566 3.01.778-1.862 2.361-3.01 4.566-3.01 2.512 0 4.812 1.522 4.812 4.84v6.402h1.863v3.044h-.005Zm9.036.307c-4.314 0-7.296-2.635-7.296-7.106 0-4.096 2.484-7.481 7.514-7.481s7.481 3.38 7.481 7.29c0 4.472-3.228 7.297-7.699 7.297Zm22.578-.307H51.942l-.403-2.11 7.7-8.846h-4.376l-.621 2.17-2.888-.313.498-4.907h12.294l.313 2.11-7.767 8.852h4.533l.654-2.172 3.167.308-.872 4.908Zm7.99 0h-4.191v-5.03h4.19v5.03Zm0-8.976h-4.191v-5.03h4.19v5.03Zm2.618 8.976 6.054-21.358h3.945l-6.054 21.358h-3.945Zm8.136 0 6.048-21.358h3.945l-6.054 21.358h-3.939Zm21.486.307c-1.863 0-2.887-1.085-3.072-2.792-.805 1.427-2.232 2.792-4.498 2.792-2.02 0-4.314-1.085-4.314-4.006 0-3.447 3.323-4.253 6.518-4.253.778 0 1.584.034 2.3.124v-.465c0-1.427-.034-3.133-2.3-3.133-.84 0-1.488.061-2.143.402l-.453 1.578-3.195-.34.549-3.224c2.45-.996 3.692-1.27 5.992-1.27 3.01 0 5.556 1.55 5.556 4.75v6.083c0 .805.314 1.085.963 1.085.184 0 .375-.034.587-.095l.034 2.11a5.432 5.432 0 0 1-2.524.654Z" fill="currentColor"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under <a href="/ja/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/ja/docs/Learn/JavaScript/Building_blocks/conditionals","doc":{"isMarkdown":true,"isTranslated":true,"isActive":true,"flaws":{},"title":"コードでの意思決定 — 条件文","mdn_url":"/ja/docs/Learn/JavaScript/Building_blocks/conditionals","locale":"ja","native":"日本語","sidebarHTML":"<ol><li class=\"section\"><a href=\"/ja/docs/Learn/Getting_started_with_the_web\">完全な初心者はこちらから!</a></li><li><details><summary>ウェブ入門</summary><ol><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web\">ウェブ入門</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">基本的なソフトウェアのインストール</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like\">ウェブサイトをどんな外見にするか</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">ファイルの扱い</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/HTML_basics\">HTML の基本</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/CSS_basics\">CSS の基本</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics\">JavaScript の基本</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website\">ウェブサイトの公開</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works\">ウェブのしくみ</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/HTML\">HTML — ウェブの構造化</a></li><li><details><summary>HTML概論</summary><ol><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML\">HTML 入門</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">HTML を始めよう</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\">ヘッド部には何が入る? HTML のメタデータ</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML テキストの基礎</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">ハイパーリンクの作成</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting\">高度なテキスト整形</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure\">文書とウェブサイトの構造</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML\">HTML のデバッグ</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter\">手紙のマークアップ</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content\">コンテンツのページの構造化</a></li></ol></details></li><li><details><summary>マルチメディアと埋め込み</summary><ol><li><a href=\"/ja/docs/Learn/HTML/Multimedia_and_embedding\">マルチメディアとその埋め込み</a></li><li><a href=\"/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">HTML の画像</a></li><li><a href=\"/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content\">動画と音声のコンテンツ</a></li><li><a href=\"/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies\">object から iframe まで — その他の埋め込み技術</a></li><li><a href=\"/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web\">ウェブへのベクターグラフィックの追加</a></li><li><a href=\"/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\">レスポンシブ画像</a></li><li><a href=\"/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page\">Mozilla のスプラッシュページ</a></li></ol></details></li><li><details><summary>HTML 表</summary><ol><li><a href=\"/ja/docs/Learn/HTML/Tables\">HTML 表</a></li><li><a href=\"/ja/docs/Learn/HTML/Tables/Basics\">HTML の表の基本</a></li><li><a href=\"/ja/docs/Learn/HTML/Tables/Advanced\">HTML 表の高度な機能とアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn/HTML/Tables/Structuring_planet_data\">惑星データの構造化</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/CSS\">CSS — ウェブのスタイル設定</a></li><li><details><summary>CSS の第一歩</summary><ol><li><a href=\"/ja/docs/Learn/CSS/First_steps\">CSS の第一歩</a></li><li><a href=\"/ja/docs/Learn/CSS/First_steps/What_is_CSS\">CSS とは何か</a></li><li><a href=\"/ja/docs/Learn/CSS/First_steps/Getting_started\">CSS 入門</a></li><li><a href=\"/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured\">CSS の構造</a></li><li><a href=\"/ja/docs/Learn/CSS/First_steps/How_CSS_works\">CSS はどう働くか</a></li><li><a href=\"/ja/docs/Learn/CSS/First_steps/Styling_a_biography_page\">経歴ページのスタイル設定</a></li></ol></details></li><li><details><summary>CSS の構成要素</summary><ol><li><a href=\"/ja/docs/Learn/CSS/Building_blocks\">CSS の構成要素</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Selectors\">CSS セレクター</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors\">要素型、クラス、ID セレクター</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors\">属性セレクター</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements\">擬似クラスと擬似要素</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators\">結合子</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance\">カスケード、詳細度、継承</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Cascade_layers\">カスケードレイヤー</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/The_box_model\">ボックスモデル</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders\">背景と境界線</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions\">テキストの様々な方向の扱い</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Overflowing_content\">要素のオーバーフロー</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Values_and_units\">CSS の値と単位</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS\">CSS によるサイズ設定</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements\">画像、メディア、フォーム要素</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Styling_tables\">表のスタイル設定</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Advanced_styling_effects\">ボックスの高度な効果</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS\">CSS のデバッグ</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Organizing\">CSS の整理</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension\">基本的な CSS の理解</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper\">美しいレターヘッド付きの便箋の作成</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/A_cool_looking_box\">かっこいいボックス</a></li></ol></details></li><li><details><summary>テキストの装飾</summary><ol><li><a href=\"/ja/docs/Learn/CSS/Styling_text\">テキストの装飾</a></li><li><a href=\"/ja/docs/Learn/CSS/Styling_text/Fundamentals\">基本的なテキストとフォントのスタイル設定</a></li><li><a href=\"/ja/docs/Learn/CSS/Styling_text/Styling_lists\">リストの装飾</a></li><li><a href=\"/ja/docs/Learn/CSS/Styling_text/Styling_links\">リンクのスタイル設定</a></li><li><a href=\"/ja/docs/Learn/CSS/Styling_text/Web_fonts\">ウェブフォント</a></li><li><a href=\"/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage\">コミュニティスクールのホームページの組版</a></li></ol></details></li><li><details><summary>CSS レイアウト</summary><ol><li><a href=\"/ja/docs/Learn/CSS/CSS_layout\">CSS レイアウト</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Introduction\">CSS レイアウト入門</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Normal_Flow\">通常フロー</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Flexbox\">フレックスボックス</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Grids\">グリッド</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Floats\">浮動ボックス</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Positioning\">位置指定</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout\">段組みレイアウト</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Responsive_Design\">レスポンシブデザイン</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Media_queries\">メディアクエリーの初心者向けガイド</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods\">過去のレイアウト方法</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers\">古いブラウザーの対応</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension\">基礎的なレイアウトの理解</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/JavaScript\">JavaScript — 動的クライアントサイドスクリプト</a></li><li><details><summary>JavaScript の第一歩</summary><ol><li><a href=\"/ja/docs/Learn/JavaScript/First_steps\">JavaScript の第一歩</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript\">JavaScript とは</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/A_first_splash\">JavaScript の最初の一歩</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/What_went_wrong\">何が間違っている? JavaScript のトラブルシューティング</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/Variables\">必要な情報を保管する — 変数</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/Math\">JavaScript での基本演算 — 数値と演算子</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/Strings\">テキストの扱い — JavaScript での文字列</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods\">便利な文字列メソッド</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/Arrays\">配列</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator\">バカ話ジェネレーター</a></li></ol></details></li><li><details open=\"\"><summary>JavaScript の構成要素</summary><ol><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks\">JavaScript の構成要素</a></li><li><em><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/conditionals\" aria-current=\"page\">コードでの意思決定 — 条件文</a></em></li><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/Looping_code\">ループするコード</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/Functions\">関数 — 再利用可能なコードブロック</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function\">独自の関数を作る</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/Return_values\">関数の返値</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/Events\">イベント入門</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/Event_bubbling\">イベントのバブリング</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery\">イメージギャラリー</a></li></ol></details></li><li><details><summary>JavaScript オブジェクトの紹介</summary><ol><li><a href=\"/ja/docs/Learn/JavaScript/Objects\">JavaScript オブジェクト入門</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Objects/Basics\">JavaScript オブジェクトの基本</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Objects/Object_prototypes\">オブジェクトのプロトタイプ</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Objects/Object-oriented_programming\">オブジェクト指向プログラミング</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Objects/Classes_in_JavaScript\">JavaScript のクラス</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Objects/JSON\">JSON の操作</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Objects/Object_building_practice\">オブジェクト構築の練習</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features\">バウンスボールのデモに機能を追加する</a></li></ol></details></li><li><details><summary>非同期 JavaScript</summary><ol><li><a href=\"/ja/docs/Learn/JavaScript/Asynchronous\">非同期 JavaScript</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Asynchronous/Introducing\">非同期 JavaScript 入門</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Asynchronous/Promises\">プロミスの使い方</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API\">プロミスベースの API の実装方法</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Asynchronous/Introducing_workers\">ワーカー入門</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Asynchronous/Sequencing_animations\">アニメーションを順番に再生する</a></li></ol></details></li><li><details><summary>クライアントサイド Web API</summary><ol><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs\">クライアントサイド Web API</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction\">Web API の紹介</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents\">文書の操作</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data\">サーバーからのデータ取得</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs\">サードパーティ API</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics\">グラフィックの描画</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs\">動画と音声の API</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage\">クライアント側ストレージ</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/Forms\">ウェブフォーム — ユーザーデータの操作</a></li><li><details><summary>ウェブフォームの構成要素</summary><ol><li><a href=\"/ja/docs/Learn/Forms\">ウェブフォームの構成要素</a></li><li><a href=\"/ja/docs/Learn/Forms/Your_first_form\">初めてのフォーム</a></li><li><a href=\"/ja/docs/Learn/Forms/How_to_structure_a_web_form\">フォームの構築方法</a></li><li><a href=\"/ja/docs/Learn/Forms/Basic_native_form_controls\">基本的なネイティブフォームコントロール</a></li><li><a href=\"/ja/docs/Learn/Forms/HTML5_input_types\">HTML5 の入力型</a></li><li><a href=\"/ja/docs/Learn/Forms/Other_form_controls\">その他のフォームコントロール</a></li><li><a href=\"/ja/docs/Learn/Forms/Styling_web_forms\">ウェブフォームへのスタイル設定</a></li><li><a href=\"/ja/docs/Learn/Forms/Advanced_form_styling\">フォームへの高度なスタイル設定</a></li><li><a href=\"/ja/docs/Learn/Forms/UI_pseudo-classes\">UI 擬似クラス</a></li><li><a href=\"/ja/docs/Learn/Forms/Form_validation\">クライアント側のフォーム検証</a></li><li><a href=\"/ja/docs/Learn/Forms/Sending_and_retrieving_form_data\">フォームデータの送信</a></li></ol></details></li><li><details><summary>高度なウェブフォームテクニック</summary><ol><li><a href=\"/ja/docs/Learn/Forms/How_to_build_custom_form_controls\">カスタムフォームコントロールの作成方法</a></li><li><a href=\"/ja/docs/Learn/Forms/Sending_forms_through_JavaScript\">JavaScript によるフォームの送信</a></li><li><a href=\"/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls\">フォームコントロール向けの CSS プロパティの互換性一覧表</a></li><li><a href=\"/ja/docs/Learn/Forms/HTML_forms_in_legacy_browsers\">古いブラウザーでの HTML フォーム</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/Accessibility\">アクセシビリティ — 誰もウェブを利用できるようにする</a></li><li><details><summary>アクセシビリティガイド</summary><ol><li><a href=\"/ja/docs/Learn/Accessibility\">アクセシビリティ</a></li><li><a href=\"/ja/docs/Learn/Accessibility/What_is_accessibility\">アクセシビリティとは</a></li><li><a href=\"/ja/docs/Learn/Accessibility/HTML\">HTML: アクセシビリティの良き基本</a></li><li><a href=\"/ja/docs/Learn/Accessibility/CSS_and_JavaScript\">CSS と JavaScript のアクセシビリティのベストプラクティス</a></li><li><a href=\"/ja/docs/Learn/Accessibility/WAI-ARIA_basics\">WAI-ARIA の基本</a></li><li><a href=\"/ja/docs/Learn/Accessibility/Multimedia\">アクセシブルなマルチメディア</a></li><li><a href=\"/ja/docs/Learn/Accessibility/Mobile\">モバイルのアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn/Accessibility/Accessibility_troubleshooting\">評価: アクセシビリティのトラブルシューティング</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/Performance\">パフォーマンス — ウェブサイトを高速かつ応答性の高いものにする</a></li><li><details><summary>パフォーマンスガイド</summary><ol><li><a href=\"/ja/docs/Learn/Performance\">ウェブパフォーマンス</a></li><li><a href=\"/ja/docs/Learn/Performance/why_web_performance\">ウェブパフォーマンスの「なぜ」</a></li><li><a href=\"/ja/docs/Learn/Performance/What_is_web_performance\">ウェブパフォーマンスとは</a></li><li><a href=\"/ja/docs/Learn/Performance/Perceived_performance\">知覚的パフォーマンス</a></li><li><a href=\"/ja/docs/Learn/Performance/Measuring_performance\">パフォーマンスの測定</a></li><li><a href=\"/ja/docs/Learn/Performance/Multimedia\">マルチメディア: 画像</a></li><li><a href=\"/ja/docs/Learn/Performance/video\">マルチメディア: 動画</a></li><li><a href=\"/ja/docs/Learn/Performance/JavaScript\">JavaScript のパフォーマンス</a></li><li><a href=\"/ja/docs/Learn/Performance/HTML\">HTML のパフォーマンス機能</a></li><li><a href=\"/ja/docs/Learn/Performance/CSS\">CSS のパフォーマンス最適化</a></li><li><a href=\"/ja/docs/Learn/Performance/business_case_for_performance\">ウェブパフォーマンスのビジネスケース</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/MathML\">MathML — MathML を使用して数学を記述する</a></li><li><details><summary>MathML の最初のステップ</summary><ol><li><a href=\"/ja/docs/Learn/MathML/First_steps\">MathML 第一歩の概要</a></li><li><a href=\"/ja/docs/Learn/MathML/First_steps/Getting_started\">MathML を始めよう</a></li><li><a href=\"/ja/docs/Learn/MathML/First_steps/Text_containers\">MathML テキストコンテナー</a></li><li><a href=\"/ja/docs/Learn/MathML/First_steps/Fractions_and_roots\">MathML 分数と根号</a></li><li><a href=\"/ja/docs/Learn/MathML/First_steps/Scripts\">MathML 添字要素</a></li><li><a href=\"/ja/docs/Learn/MathML/First_steps/Tables\">MathML 表</a></li><li><a href=\"/ja/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas\">三大数式</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/../Games\">ゲーム — ウェブ用ゲームの開発</a></li><li><details><summary>ガイドとチュートリアル</summary><ol><li><a href=\"/ja/docs/Games/Introduction\">ウェブ用のゲーム開発入門</a></li><li><a href=\"/ja/docs/Games/Techniques\">ゲーム開発テクニック</a></li><li><a href=\"/ja/docs/Games/Tutorials\">チュートリアル</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Games/Publishing_games\">Publishing games</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/Tools_and_testing\">ツールとテスト</a></li><li><details><summary>クライアントサイドウェブ開発ツール</summary><ol><li><a href=\"/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools\">クライアントサイドウェブ開発ツールの理解</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview\">クライアントサイドツールの概要</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">コマンドライン短期集中講座</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management\">パッケージ管理の基本</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain\">完全なツールチェーンの導入</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment\">アプリのデプロイ</a></li></ol></details></li><li><details><summary>クライアントサイドフレームワークの概要</summary><ol><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction\">クライアントサイドフレームワークの概要</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features\">フレームワークの主な機能</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started\">React を始める</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning\">React ToDoリストをはじめる</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components\">React アプリのコンポーネント化</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state\">React interactivity: Events and state</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering\">React interactivity: Editing, filtering, conditional rendering</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility\">Accessibility in React</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources\">React のリソース</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started\">Getting started with Ember</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization\">Ember app structure and componentization</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state\">Ember interactivity: Events, classes and state</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer\">Ember Interactivity: Footer functionality, conditional rendering</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing\">Routing in Ember</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources\">Ember resources and troubleshooting</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started\">Getting started with Vue</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component\">Creating our first Vue component</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists\">Rendering a list of Vue components</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models\">Adding a new todo form: Vue events, methods, and models</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling\">Styling Vue components with CSS</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties\">Using Vue computed properties</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering\">Vue conditional rendering: editing existing todos</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management\">Vue refs and lifecycle methods for focus management</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources\">Vue resources</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started\">Svelte をはじめる</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning\">Starting our Svelte to-do list app</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props\">Dynamic behavior in Svelte: working with variables and props</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components\">Componentizing our Svelte app</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility\">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores\">Working with Svelte stores</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript\">TypeScript support in Svelte</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next\">Deployment and next steps</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started\">Angular をはじめる</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning\">Angular todo リストアプリの事始め</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling\">Angular アプリのスタイリング</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component\">item コンポーネントの作成</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering\">To Do アイテムのフィルタリング</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building\">Angular アプリケーションのビルドとその他のリソース</a></li></ol></details></li><li><details><summary>Git と GitHub</summary><ol><li><a href=\"/ja/docs/Learn/Tools_and_testing/GitHub\">Git と GitHub</a></li></ol></details></li><li><details><summary>ブラウザー横断テスト</summary><ol><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing\">ブラウザー横断テスト</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">はじめてのブラウザー横断テスト</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies\">テスト実行のための戦略</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS\">一般的な HTML と CSS の問題への対処</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript\">よくある JavaScript の問題の扱い</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility\">よくあるアクセシビリティの問題を扱う</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection\">機能検出の実装</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing\">自動化テストの紹介</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment\">テスト自動化環境のセットアップ</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/Server-side\">サーバーサイドウェブサイトプログラミング</a></li><li><details><summary>サーバーサイドのウェブサイトプログラミングの第一歩</summary><ol><li><a href=\"/ja/docs/Learn/Server-side/First_steps\">サーバーサイドのウェブサイトプログラミングの第一歩</a></li><li><a href=\"/ja/docs/Learn/Server-side/First_steps/Introduction\">サーバーサイドの概要</a></li><li><a href=\"/ja/docs/Learn/Server-side/First_steps/Client-Server_overview\">クライアント・サーバーの概要</a></li><li><a href=\"/ja/docs/Learn/Server-side/First_steps/Web_frameworks\">サーバーサイドウェブフレームワーク</a></li><li><a href=\"/ja/docs/Learn/Server-side/First_steps/Website_security\">ウェブサイトのセキュリティ</a></li></ol></details></li><li><details><summary>Django ウェブフレームワーク (Python)</summary><ol><li><a href=\"/ja/docs/Learn/Server-side/Django\">Django ウェブフレームワーク (Python)</a></li><li><a href=\"/ja/docs/Learn/Server-side/Django/Introduction\">Django の紹介</a></li><li><a href=\"/ja/docs/Learn/Server-side/Django/development_environment\">Django 開発環境の設定</a></li><li><a href=\"/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website\">Django チュートリアル: 地域図書館ウェブサイト</a></li><li><a href=\"/ja/docs/Learn/Server-side/Django/skeleton_website\">Django チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Models\">Django Tutorial Part 3: Using models</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Admin_site\">Django Tutorial Part 4: Django admin site</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Home_page\">Django Tutorial Part 5: Creating our home page</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Generic_views\">Django Tutorial Part 6: Generic list and detail views</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Sessions\">Django Tutorial Part 7: Sessions framework</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Authentication\">Django Tutorial Part 8: User authentication and permissions</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Forms\">Django Tutorial Part 9: Working with forms</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Testing\">Django Tutorial Part 10: Testing a Django web application</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Deployment\">Django Tutorial Part 11: Deploying Django to production</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/web_application_security\">Django web application security</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/django_assessment_blog\">Assessment: DIY Django mini blog</a></li></ol></details></li><li><details><summary>Express ウェブフレームワーク (Node.js/JavaScript)</summary><ol><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs\">Express ウェブフレームワーク (Node.js/JavaScript)</a></li><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs/Introduction\">Express/Node の紹介</a></li><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs/development_environment\">Node 開発環境の設定</a></li><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express チュートリアル: 地域図書館のウェブサイト</a></li><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website\">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs/mongoose\">Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/routes\">Express Tutorial Part 4: Routes and controllers</a></li><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data\">Express チュートリアル Part 5: ライブラリーデータの表示</a></li><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs/forms\">Express チュートリアル Part 6: フォームの操作</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/deployment\">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/Common_questions\">その他のリソース</a></li><li><details><summary>よくある質問</summary><ol><li><a href=\"/ja/docs/Learn/Common_questions\">よくある質問</a></li><li><a href=\"/ja/docs/Learn/HTML/Howto\">HTML を使ってよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn/CSS/Howto\">CSS を使ってよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Howto\">JavaScript のコードのよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn/Common_questions/Web_mechanics\">ウェブの仕組み</a></li><li><a href=\"/ja/docs/Learn/Common_questions/Tools_and_setup\">ツールとセットアップ</a></li><li><a href=\"/ja/docs/Learn/Common_questions/Design_and_accessibility\">デザインとアクセシビリティ</a></li></ol></details></li></ol>","sidebarMacro":"LearnSidebar","body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\">\n \n <li><a class=\"button secondary\" href=\"/ja/docs/Learn/JavaScript/Building_blocks\"><span class=\"button-wrap\"> Overview: JavaScript の構成要素</span></a></li>\n <li><a class=\"button secondary\" href=\"/ja/docs/Learn/JavaScript/Building_blocks/Looping_code\"><span class=\"button-wrap\"> 次のページ </span></a></li>\n</ul>\n<p>どのプログラミング言語でも、コードは様々な入力に応じた決定を迫られ、その結果として動作を起こします。例えば、ゲームではプレイヤーの残機が 0 になった場合、ゲームオーバーとなります。天気アプリは朝に起動された場合は日の出の画像を表示し、夜に起動された場合は星や月の画像を表示します。この記事では、JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">前提条件:</th>\n <td>\n HTML、CSS、\n <a href=\"/ja/docs/Learn/JavaScript/First_steps\">JavaScript の第一歩</a>への基本的な理解。\n </td>\n </tr>\n <tr>\n <th scope=\"row\">目標:</th>\n <td>JavaScript における条件分岐構造をどのように使用するかを理解する。</td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"すべては条件次第","title":"すべては条件次第","isH3":false,"content":"<p>人類（と他の動物たち）は小さいもの（「クッキーを 1 つ食べるべきか、2 つ食べるべきか」）から大きいもの（「故郷に残って親父の農場を継ぐべきか、アメリカに渡って宇宙物理学を学ぶべきか」）まで、生活に関わるすべての決定を下します。</p>\n<p>JavaScript では、条件文を使ってそのような決定を下すことが可能です。条件文は、選ばなければならない選択肢（例えば「クッキーを 1 つまたは 2 つ食べる」）からそれを選んだ場合の結果を導き出します（おそらく「1 つクッキーを食べる」を選んだら、「まだちょっとお腹が空いている」という結果となるでしょうし、「2 つクッキーを食べる」を選んだら「お腹いっぱい。だけどクッキーを全部食べてママに怒られる」という結果となってしまうでしょう。）</p>\n<p>\n <img src=\"/ja/docs/Learn/JavaScript/Building_blocks/conditionals/cookie-choice-small.png\" alt=\"'Cookies' と書かれたクッキーの瓶を持つ人に似た漫画のキャラクター。キャラクターの頭の上には疑問符があります。吹き出しが2つあります。左の吹き出しにはクッキーが1つあります。右の吹き出しにはクッキーが2つあります。共に、キャラクターがクッキーを1枚にするか2枚にするかを決めようとしていることを暗示しています。\" width=\"1280\" height=\"800\" loading=\"lazy\">\n</p>"}},{"type":"prose","value":{"id":"if...else_文","title":"if...else 文","isH3":false,"content":"<p>それでは、JavaScript で最もよく使われる条件文から始めましょう。それは <a href=\"/ja/docs/Web/JavaScript/Reference/Statements/if...else\"><code>if ... else</code> 文</a>です。</p>"}},{"type":"prose","value":{"id":"if...else_の基本的な構文","title":"if...else の基本的な構文","isH3":true,"content":"<p><code>if...else</code> の基本的な構文は次のようになっています。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>if (条件式) {\n /* 条件式が true の場合に実行されるコード */\n} else {\n /* それ以外の場合に実行されるコード */\n}\n</code></pre></div>\n<p>ここでは...</p>\n<ol>\n <li><code>if</code> キーワードの後ろに括弧が並んでいます。</li>\n <li>判断に用いる条件式はその括弧の中にあります（たいていの場合は「この値はもう一方より大きい」や、「この値は存在する」などです）。この条件には、前回のモジュールで習った<a href=\"/ja/docs/Learn/JavaScript/First_steps/Math#%E6%AF%94%E8%BC%83%E6%BC%94%E7%AE%97%E5%AD%90\">比較演算子</a>を使用し、 <code>true</code> または <code>false</code> を返します。</li>\n <li>中にコードが書いてある（実際のコードはどんなものでも構いません）中括弧のペアは、条件式が <code>true</code> の場合に実行されます。</li>\n <li>続いて <code>else</code> キーワードがあります。</li>\n <li>さらに他のコードが書いてある（こちらもどんなコードでも構いません）中括弧のペアは条件式が <code>true</code> ではない場合に実行されます。</li>\n</ol>\n<p>このコードは（英語を使う人には）とても読みやすいものになっています。このコードは「もし ( <strong>if</strong> ) 条件式 ( <strong>condition</strong> ) が <code>true</code> を返したら A のコードを実行し、それ以外ならば ( <strong>else</strong> ) B のコードを実行する」と読めます。</p>\n<p><code>else</code> とそれに続く中括弧は必ずしも書く必要がないことを覚えておきましょう。次のコードも全く問題のないコードです。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>if (条件式) {\n /* 条件式が true の場合に実行されるコード */\n}\n\n/* 普通に実行されるコード */\n</code></pre></div>\n<p>ここで注意しておかなければならないことがあります。それは 2 つ目のコードブロックは、条件分岐の管理下になく、条件式が <code>true</code> か <code>false</code> かに関係なく、<strong>常に</strong>実行されることです。これはまったく悪いことではないのですが、条件に応じてどちらか一方のみ動かしたいと思っている場合には、気を付けておかないと思った通りの動作をしないでしょう。</p>\n<p>最後の確認点として、<code>if...else</code> 文が中括弧なしで書かれているのを見ることがあります。以下のような省略した書き方です。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>if (条件式) /* 条件式が true の場合に実行されるコード */\nelse /* それ以外の場合に実行されるコード */\n</code></pre></div>\n<p>この構文は完全に有効ですが、中括弧を使用してコードのブロックを区切り、複数行とインデントを使用した方がコードを理解しやすくなります。</p>"}},{"type":"prose","value":{"id":"実際の例","title":"実際の例","isH3":true,"content":"<p>この構文をよりよく理解するために、実際の例を考えてみましょう。子どもが母親か父親に雑用を頼まれたとします。親は「買い物に行って手伝ってくれたら、お小遣いをあげるから、欲しかったおもちゃを買いなさい」と言うかもしれません。JavaScriptではこのように表します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let shoppingDone = false;\nlet childsAllowance;\n\nif (shoppingDone === true) {\n childsAllowance = 10;\n} else {\n childsAllowance = 5;\n}\n</code></pre></div>\n<p>このコードは常に <code>shoppingDone</code> 変数が <code>false</code> なので、かわいそうな子供は追加のお小遣いを受け取れません。両親が子供がお使いを完了した場合に <code>shoppingDone</code> 変数を <code>true</code> にセットしてあげるかどうかはプログラム次第です（つまり私たち次第です。）</p>\n<div class=\"notecard note\">\n <p><strong>メモ:</strong> <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/allowance-updater.html\" class=\"external\" target=\"_blank\">GitHub で上記のコードの完全なバージョン</a>が公開されています。（<a href=\"https://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html\" class=\"external\" target=\"_blank\">ライブ実行</a>でも確認できます。）</p>\n</div>"}},{"type":"prose","value":{"id":"else_if","title":"else if","isH3":true,"content":"<p>先ほどの例では実行結果は 2 つだけでしたが、もっと選択肢がある場合はどうでしょうか？</p>\n<p><code>else if</code> を使って、追加の選択肢を <code>if...else</code> に繋ぐ方法があります。追加の選択肢は <code>if() { }</code> と <code>else { }</code> の間に、コードブロックを続けて追加する必要があります。具体的な例として、天気予報のアプリケーションの一部を見てみましょう。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><label for=\"weather\">今日の天気を選択してください: </label>\n<select id=\"weather\">\n <option value=\"\">--選択してください--</option>\n <option value=\"sunny\">晴れ</option>\n <option value=\"rainy\">雨</option>\n <option value=\"snowing\">雪</option>\n <option value=\"overcast\">曇り</option>\n</select>\n\n<p></p>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const select = document.querySelector(\"select\");\nconst para = document.querySelector(\"p\");\n\nselect.addEventListener(\"change\", setWeather);\n\nfunction setWeather() {\n const choice = select.value;\n\n if (choice === \"sunny\") {\n para.textContent =\n \"今日はとてもいい天気です。半ズボンをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！\";\n } else if (choice === \"rainy\") {\n para.textContent =\n \"外は雨が降っています。レインコートと傘を忘れないようにして、できる限り室内で過ごしましょう。\";\n } else if (choice === \"snowing\") {\n para.textContent =\n \"雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。\";\n } else if (choice === \"overcast\") {\n para.textContent =\n \"雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持っていきましょう。\";\n } else {\n para.textContent = \"\";\n }\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"else if sample\" id=\"frame_else_if\" width=\"100%\" height=\"100\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn/JavaScript/Building_blocks/conditionals\" data-live-id=\"else_if\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<ol>\n <li>HTML に、天気を選ぶことが可能な <a href=\"/ja/docs/Web/HTML/Element/select\"><code><select></code></a> 要素があり、1 つの段落がありますね。</li>\n <li>JavaScript では、<a href=\"/ja/docs/Web/HTML/Element/select\"><code><select></code></a> と <a href=\"/ja/docs/Web/HTML/Element/p\"><code><p></code></a> の各要素について、参照を取得して保持し、<code><select></code> 要素にはイベントリスナーを設定しています。もし、要素の値が変わったら <code>setWeather()</code> 関数が動きます。</li>\n <li>この関数が実行されると、まずは <code>choice</code> という変数に、<code><select></code> 要素の現在選択されている値を入れます。そして、条件文を使い、<code>choice</code> の値に応じた文字列が段落に設定されます。最初の <code>if() { }</code> のブロックを除いて、どのように <code>else if() { }</code> のブロックで判定しているか注目してください。</li>\n <li>一番下の <code>else { }</code> 選択肢は、「最後の手段」となるオプションで、この中のコードは、どの条件にも一致しなかった場合（<code>true</code> とならなかった場合）に実行されます。今回の場合選択されていない場合に、段落を空にしています。何も選択されていない場合というのは、ユーザーが再度最初に表示されていた「--選択してください--」というオプションを選んだ場合です。</li>\n</ol>\n<div class=\"notecard note\">\n <p><strong>メモ:</strong> <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/simple-else-if.html\" class=\"external\" target=\"_blank\">GitHub で上記のコードの完全なバージョン</a>が公開されています。（<a href=\"https://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html\" class=\"external\" target=\"_blank\">ライブ実行</a>でも確認できます。）</p>\n</div>"}},{"type":"prose","value":{"id":"比較演算子に関するメモ","title":"比較演算子に関するメモ","isH3":true,"content":"<p>比較演算子は条件文の中で使われます。<a href=\"/ja/docs/Learn/JavaScript/First_steps/Math#%E6%AF%94%E8%BC%83%E6%BC%94%E7%AE%97%E5%AD%90\">JavaScript での基本演算 — 数値と演算子</a>で初めて出てきましたね。演算子には以下のようなものがありました。</p>\n<ul>\n <li><code>===</code> と <code>!==</code> は、ある値がもう一方の値と等しいか、もしくは等しくないかを判定します。</li>\n <li><code><</code> と <code>></code> は、ある値がもう一方の値より大きいか、より小さいかを判定します。</li>\n <li><code><=</code> と <code>>=</code> は、ある値がもう一方の値以上か、以下かを判定します。</li>\n</ul>\n<p>論理値 (<code>true</code>/<code>false</code>) を判定する場合には、少しの配慮が必要であることを付け加えさせてください。おそらく何度かつまずくであろう、よくあるパターンです。条件文で何らかの値が検査される場合、<code>false</code>、<code>undefined</code>、<code>null</code>、<code>0</code>、<code>NaN</code>、空文字列 (<code>''</code>) 以外であれば <code>true</code> となります。ですから、その値が <code>true</code> であるか判定したい場合や、その値が存在するか（例えば、<code>undefined</code> ではないこと）判定したい場合は単に変数名を使用するだけです。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let cheese = \"チェダー\";\n\nif (cheese) {\n console.log(\"やった！チーズトーストを作るチーズがあるよ。\");\n} else {\n console.log(\"今日はチーズトーストのチーズがないよ。\");\n}\n</code></pre></div>\n<p>先ほどの子供のお使いの例に戻ると、以下のようにも書くことができます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let shoppingDone = false;\nlet childsAllowance;\n\n// 'shoppingDone === true' と明示的に指定する必要はありません\nif (shoppingDone) {\n childsAllowance = 10;\n} else {\n childsAllowance = 5;\n}\n</code></pre></div>"}},{"type":"prose","value":{"id":"入れ子の_if...else","title":"入れ子の if...else","isH3":true,"content":"<p><code>if...else</code> 文を入れ子にして、他の <code>if...else</code> 文の中で使用することは全く問題ありません。例えば、天気予報アプリケーションで気温に応じて表示する内容を切り替えたい場合以下のように書くことができます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>if (choice === \"sunny\") {\n if (temperature < 30) {\n para.textContent = `外の気温は ${temperature} 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう。`;\n } else if (temperature >= 30) {\n para.textContent = `外の気温は ${temperature} 度です — かなり暑いです！外に出るときは、日焼け止めを塗りましょう。`;\n }\n}\n</code></pre></div>\n<p>たとえコードがすべて一緒に動作したとしても、それぞれの <code>if...else</code> 文は完全に独立して動作します。</p>"}},{"type":"prose","value":{"id":"論理演算子_and_と_or_と_not","title":"論理演算子: AND と OR と NOT","isH3":true,"content":"<p>複数の条件を入れ子の <code>if...else</code> 文を書かずに判定したいなら、<a href=\"/ja/docs/Web/JavaScript/Reference/Operators\">論理演算子</a>の出番です。条件で使用すると、最初の 2 つは以下のようになります。</p>\n<ul>\n <li><code>&&</code> — AND は 2 つ以上の式を一つに繋げ、それぞれの式を個別に評価して、すべて <code>true</code> になった場合、その式全体が <code>true</code> として返します。</li>\n <li><code>||</code> — OR は 2 つ以上の式を 1 つに繋げ、それぞれの式を個別に評価し、最初に <code>true</code> になったところで、その式全体を <code>true</code> として返します。</li>\n</ul>\n<p>AND の例を示すため、先ほどのコードを書き直すと以下のようになります。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>if (choice === \"sunny\" && temperature < 30) {\n para.textContent = `外の気温は ${temperature} 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう。`;\n} else if (choice === \"sunny\" && temperature >= 30) {\n para.textContent = `外の気温は ${temperature} 度です — かなり暑いです！外に出るときは、日焼け止めを塗りましょう。`;\n}\n</code></pre></div>\n<p>例では、最初のブロックは <code>choice === 'sunny'</code> <em>および</em> <code>temperature < 30</code> のどちらも <code>true</code> となった場合にのみ実行されます。</p>\n<p>今度は OR の例を見てみましょう。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>if (iceCreamVanOutside || houseStatus === \"火事\") {\n console.log(\"すぐに家から出ましょう。\");\n} else {\n console.log(\"それでは家にいましょう。\");\n}\n</code></pre></div>\n<p>論理演算子の最後は NOT です。<code>!</code> 演算子で表され、式を否定するのに使用します。それでは先ほどの OR と組み合わせてみましょう。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>if (!(iceCreamVanOutside || houseStatus === \"火事\")) {\n console.log(\"それでは家にいましょう。\");\n} else {\n console.log(\"すぐに家から出ましょう。\");\n}\n</code></pre></div>\n<p>このコード例では、OR 文が <code>true</code> となれば、 NOT 演算子がそれを否定します。そのため、式全体は <code>false</code> となります。</p>\n<p>論理文は思うがままに、いくつでも繋げることが可能です。次の例では両方の OR 文が真を返した場合に AND 文が真となり、<code>if</code> の中のコードが実行されます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === \"スティーブ\")) {\n // コードを実行\n}\n</code></pre></div>\n<p>論理 OR 演算子を使用するうえでよくある間違いは、判定しようとしている変数を一度だけ書いて、その後に判定したい値を <code>||</code> (OR) 演算子で区切って指定する誤りです。次のような例です。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>if (x === 5 || 7 || 10 || 20) {\n // コードを実行する\n}\n</code></pre></div>\n<p>この場合、<code>if ()</code> の条件式は常に真となります。なぜなら 7 (もしくはその他 0 以外の数値) が常に <code>true</code> と評価されるためです。この条件式は「もし x が 5 であるか 7 が真であるならば (7 は常に真です)」となります。これは求めているものではありませんよね！このコードの誤りを修正するためには、OR 演算子の隣に常に完全な条件を書かなければなりません。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>if (x === 5 || x === 7 || x === 10 || x === 20) {\n // コードを実行する\n}\n</code></pre></div>"}},{"type":"prose","value":{"id":"switch_文","title":"switch 文","isH3":false,"content":"<p><code>if...else</code> 文は条件の判定を上手くこなしていましたが、欠点がないわけではありません。いくつかの選択肢しかない場合には申し分ないのですが、AND / OR の条件が複雑になるにつれて（例えば、複数の論理演算子を使ったりする場合など）、相当量のコードを書かなければなりません。ある選択肢に応じて値を変数に設定したり、特定の条件に応じて何かを表示したりするとき、選択肢がたくさんあると、<code>if...else</code> 文を書くのは面倒です。</p>\n<p><a href=\"/ja/docs/Web/JavaScript/Reference/Statements/switch\"><code>switch</code> 文</a>はそんなときの味方です。<code>switch</code> 文は一つの式または値を受け取り、それに合致する値が見つかるまで選択肢を探します。そして合致した選択肢に対応するコードを実行します。まずは擬似コードを見て、雰囲気をつかみましょう。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>switch (式) {\n case 選択肢1:\n // このコードを実行する\n break;\n\n case 選択肢2:\n // 代わりにこのコードを実行する\n break;\n\n // 以下に選択肢を好きなだけ並べる\n\n default:\n // 既定でこのコードを実行する\n break;\n}\n</code></pre></div>\n<p>上記のコードには...</p>\n<ol>\n <li><code>switch</code> キーワードに続き、一組の括弧があります。</li>\n <li>括弧の中には、式または値があります。</li>\n <li><code>case</code> キーワードに続き、選択肢となる式または値、それにコロン (<code>:</code>) が並んでいます。</li>\n <li>もしその選択肢にマッチすれば、コードが実行されます。</li>\n <li><code>break</code> 文とセミコロン (<code>;</code>) があります。もし前の選択肢にマッチして入ればブラウザーはコードの実行をここでやめ、switch 文の後ろにあるコードに移動します。</li>\n <li><code>case</code> 節 (上記 3. から 5. ) は好きなだけ書くことができます。</li>\n <li>上記 3. から 5.の <code>case</code> 節と全く同じコードパターンで書かれている <code>default</code> キーワードがあります。違いは <code>default</code> の後ろに選択肢が書かれていないことです。また、後ろに続くコードがないので、ここには <code>break</code> 文が必要ありません。もし、選択肢のどれにもマッチするものがない場合に既定のオプションとして実行されます。</li>\n</ol>\n<div class=\"notecard note\">\n <p><strong>メモ:</strong> 評価する式の値が不明な値にならないのであれば、<code>default</code> 節は書く必要はありません。しかし、式が不明な値となり、それに対処する必要があるのなら、<code>default</code> 節を書くことで対応が可能です。</p>\n</div>"}},{"type":"prose","value":{"id":"switch_の例","title":"switch の例","isH3":true,"content":"<p>それでは実際の例を見てみましょう。先ほどの天気予報アプリを switch 文を使用して書き直してみました。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><label for=\"weather\">今日の天気を選択してください: </label>\n<select id=\"weather\">\n <option value=\"\">--選択してください--</option>\n <option value=\"sunny\">晴れ</option>\n <option value=\"rainy\">雨</option>\n <option value=\"snowing\">雪</option>\n <option value=\"overcast\">曇り</option>\n</select>\n\n<p></p>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const select = document.querySelector(\"select\");\nconst para = document.querySelector(\"p\");\n\nselect.addEventListener(\"change\", setWeather);\n\nfunction setWeather() {\n const choice = select.value;\n\n switch (choice) {\n case \"sunny\":\n para.textContent =\n \"今日はとてもいい天気です。半ズボンをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！\";\n break;\n case \"rainy\":\n para.textContent =\n \"外は雨が降っています。レインコートと傘を忘れないようにして、できる限り室内で過ごしましょう。\";\n break;\n case \"snowing\":\n para.textContent =\n \"雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。\";\n break;\n case \"overcast\":\n para.textContent =\n \"雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持っていきましょう。\";\n break;\n default:\n para.textContent = \"\";\n }\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"A switch example sample\" id=\"frame_a_switch_example\" width=\"100%\" height=\"100\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn/JavaScript/Building_blocks/conditionals\" data-live-id=\"a_switch_example\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<div class=\"notecard note\">\n <p><strong>メモ:</strong> <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/simple-switch.html\" class=\"external\" target=\"_blank\">このサンプルを GitHub で見る</a>ことができます。（<a href=\"https://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html\" class=\"external\" target=\"_blank\">実行可能なデモ</a>もあります。）</p>\n</div>"}},{"type":"prose","value":{"id":"三項演算子","title":"三項演算子","isH3":false,"content":"<p>例題に進む前に、ちょっとした構文をご紹介しましょう。<a href=\"/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator\">三項演算子 (もしくは条件演算子)</a> は条件式を判定し、その結果に応じて 2 つの値または式のうち、どちらか一方を返します。これはある状況においてはとても便利です。単純に <code>true</code>/<code>false</code> で判定可能な 2 つの選択肢のうちより片方を選ぶという場合には、<code>if...else</code> ブロックを書くよりも多くのコードを節約できます。この擬似コードは以下のようなものになります。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>条件式 ? こちらのコードを実行する : 代わりにこちらのコードを実行する\n</code></pre></div>\n<p>それでは実際に例を見て見ましょう。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const greeting = isBirthday\n ? \"スミスさん、誕生日おめでとうございます！良い一日を。\"\n : \"スミスさんおはようございます。\";\n</code></pre></div>\n<p>この例では <code>isBirthday</code> という変数があり、この変数が <code>true</code> の場合、お客に誕生日を祝福するメッセージを送ります。そうでなければ、通常の挨拶を送ります。</p>"}},{"type":"prose","value":{"id":"三項演算子を使用する例","title":"三項演算子を使用する例","isH3":true,"content":"<p>三項演算子を変数の代入にのみ使用する必要はありません。関数や、複数行に渡るコードを実行する場合にも (それ以外にも好きなように) 使用できます。次の例は三項演算子を使用してサイトにテーマを適用しています。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><label for=\"theme\">テーマを選んでください: </label>\n<select id=\"theme\">\n <option value=\"white\">白</option>\n <option value=\"black\">黒</option>\n</select>\n\n<h1>私のウェブサイト</h1>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const select = document.querySelector(\"select\");\nconst html = document.querySelector(\"html\");\ndocument.body.style.padding = \"10px\";\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}\n\nselect.addEventListener(\"change\", () =>\n select.value === \"black\"\n ? update(\"black\", \"white\")\n : update(\"white\", \"black\"),\n);\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Ternary operator example sample\" id=\"frame_ternary_operator_example\" width=\"100%\" height=\"300\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn/JavaScript/Building_blocks/conditionals\" data-live-id=\"ternary_operator_example\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>上記の例では、テーマ（黒または白）を選択することができる <a href=\"/ja/docs/Web/HTML/Element/select\"><code><select></code></a> 要素と、サイトのタイトルが書かれた単純な <a href=\"/ja/docs/Web/HTML/Element/Heading_Elements\">h1</a> 要素があります。さらに <code>update()</code> という関数があり、その関数は引数（入力値）として 2 つの色を取ります。この関数が呼ばれると、ウェブサイトの背景色は 1 つ目の引数に、文字の色は 2 つの目の引数に設定されます。</p>\n<p>さらに、三項演算子を含む <a href=\"/ja/docs/Web/API/HTMLElement/change_event\">onchange</a> イベントリスナーがあります。<code>select.value === 'black'</code> という条件式で始まっています。この式が <code>true</code> であるならば、<code>update()</code> 関数を引数に <code>'black'</code>、<code>'white'</code> を指定して実行します (つまり、背景色を黒、文字色を白に設定します)。この式が <code>false</code> であるならば、<code>update()</code> 関数を引数に <code>'white'</code>、<code>'black'</code> を指定して実行します (つまり、背景色を逆にします)。</p>\n<div class=\"notecard note\">\n <p><strong>メモ:</strong> この例は <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/simple-ternary.html\" class=\"external\" target=\"_blank\">GitHub でも公開しています</a>。（<a href=\"https://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html\" class=\"external\" target=\"_blank\">ライブ実行</a>でも確認できます。）</p>\n</div>"}},{"type":"prose","value":{"id":"アクティブラーニング_単純なカレンダー","title":"アクティブラーニング: 単純なカレンダー","isH3":false,"content":"<p>この例では、単純なカレンダーアプリケーションの作成を手伝ってもらいます。現在、以下の内容がコードに書かれています。</p>\n<ul>\n <li>ユーザーが月を選択できるように <a href=\"/ja/docs/Web/HTML/Element/select\"><code><select></code></a> 要素があります。</li>\n <li><code><select></code> メニューの選択内容が変更された場合に、イベントを捕捉できるように <code>onchange</code> イベントハンドラーが設定されています。</li>\n <li>カレンダーを描画し、 <a href=\"/ja/docs/Web/HTML/Element/Heading_Elements\">h1</a> 要素に適切な月を設定する <code>createCalendar()</code> と呼ばれる関数があります。</li>\n</ul>\n<p>あなたには、<code>onchange</code> ハンドラーの内部に条件式を書いてもらいます。<code>// 条件式をここに書く</code> というコメントのすぐ下に...</p>\n<ol>\n <li>選択されている月を取得します。（これは <code>choice</code> 変数に格納されています。この値は <code><select></code> 要素で選択された後の値で、例えば 1 月なら、\"1\" といった値です。）</li>\n <li><code>days</code> という変数に、選択された月の日数を設定します。そのためには、1 年の各月の日数を調べる必要があるでしょう。うるう年はこの例題の目的から外れるため、無視してください。</li>\n</ol>\n<p>ヒント:</p>\n<ul>\n <li>ほとんどの月は日数が同じなので、複数の月を OR 演算子を用いて一つの条件式にまとめるのが良いでしょう。</li>\n <li>どの月が最も多い日数なのか考えてください。そして、その日数を既定値として使用しましょう。</li>\n</ul>\n<p>もし間違ってしまっても、「リセット」ボタンを押すことでいつでも元に戻せます。詰まってしまったら、「答えを見る」ボタンで答えが見られます。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><h2>ライブ出力</h2>\n<iframe id=\"output\" width=\"100%\" height=\"600px\"></iframe>\n\n<h2>コードエディター</h2>\n<p class=\"a11y-label\">\n コードエディターから抜けるには Esc キーを押して下さい（Tab はタブ文字を挿入します）。\n</p>\n\n<textarea id=\"code\" class=\"playable-code\" style=\"height: 400px;width: 95%\">\nconst select = document.querySelector('select');\nconst list = document.querySelector('ul');\nconst h1 = document.querySelector('h1');\n\nselect.addEventListener('change', () => {\n const choice = select.value;\n\n // 条件式をここに書く\n\n createCalendar(days, choice);\n});\n\nfunction createCalendar(days, choice) {\n list.innerHTML = '';\n h1.textContent = choice;\n for (let i = 1; i <= days; i++) {\n const listItem = document.createElement('li');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n}\n\ncreateCalendar(31, '1 月');\n</textarea>\n\n<div class=\"playable-buttons\">\n <input id=\"reset\" type=\"button\" value=\"リセット\" />\n <input id=\"solution\" type=\"button\" value=\"答えを見る\" />\n</div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>html {\n font-family: sans-serif;\n}\n\nh2 {\n font-size: 16px;\n}\n\n.a11y-label {\n margin: 0;\n text-align: right;\n font-size: 0.7rem;\n width: 98%;\n}\n\nbody {\n margin: 10px;\n background: #f5f9fa;\n}\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: js hidden notranslate\"><code>const reset = document.getElementById(\"reset\");\nconst solution = document.getElementById(\"solution\");\nconst outputIFrame = document.querySelector(\"#output\");\nconst textarea = document.getElementById(\"code\");\nconst initialCode = textarea.value;\nlet userCode = textarea.value;\n\nconst solutionCode = `const select = document.querySelector(\"select\");\nconst list = document.querySelector(\"ul\");\nconst h1 = document.querySelector(\"h1\");\n\nselect.addEventListener(\"change\", () => {\n const choice = select.value;\n\n let days = 31;\n if (choice === \"2 月\") {\n days = 28;\n } else if (\n choice === \"4 月\" ||\n choice === \"6 月\" ||\n choice === \"9 月\" ||\n choice === \"11 月\"\n ) {\n days = 30;\n }\n\n createCalendar(days, choice);\n});\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \"\";\n h1.textContent = choice;\n for (let i = 1; i <= days; i++) {\n const listItem = document.createElement(\"li\");\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n}\n\ncreateCalendar(31, \"1 月\");`;\n\nfunction outputDocument(code) {\n const outputBody = `\n<div class=\"output\" style=\"height: 500px; overflow: auto\">\n <label for=\"month\">月を選択: </label>\n <select id=\"month\">\n <option value=\"1 月\">1 月</option>\n <option value=\"2 月\">2 月</option>\n <option value=\"3 月\">3 月</option>\n <option value=\"4 月\">4 月</option>\n <option value=\"5 月\">5 月</option>\n <option value=\"6 月\">6 月</option>\n <option value=\"7 月\">7 月</option>\n <option value=\"8 月\">8 月</option>\n <option value=\"9 月\">9 月</option>\n <option value=\"10 月\">10 月</option>\n <option value=\"11 月\">11 月</option>\n <option value=\"12 月\">12 月</option>\n </select>\n\n <h1></h1>\n\n <ul></ul>\n</div>`;\n\n const outputStyle = `\n.output * {\n box-sizing: border-box;\n}\n\n.output ul {\n padding-left: 0;\n}\n\n.output li {\n display: block;\n float: left;\n width: 25%;\n border: 2px solid white;\n padding: 5px;\n height: 40px;\n background-color: #4a2db6;\n color: white;\n}\nhtml {\n font-family: sans-serif;\n}\n\nh2 {\n font-size: 16px;\n}`;\n return `\n<!doctype html>\n<html>\n <head>\n <style>${outputStyle}</style>\n </head>\n <body>\n ${outputBody}\n <script>${code}</script>\n </body>\n</html>`;\n}\n\nfunction update() {\n output.setAttribute(\"srcdoc\", outputDocument(textarea.value));\n}\n\nupdate();\n\ntextarea.addEventListener(\"input\", update);\n\nreset.addEventListener(\"click\", () => {\n textarea.value = initialCode;\n userEntry = textarea.value;\n solution.value = \"答えを見る\";\n update();\n});\n\nsolution.addEventListener(\"click\", () => {\n if (solution.value === \"答えを見る\") {\n // 戻せるように、ユーザーのコードを\n // 記憶しておく\n userCode = textarea.value;\n textarea.value = solutionCode;\n solution.value = \"答えを隠す\";\n } else {\n textarea.value = userCode;\n solution.value = \"答えを見る\";\n }\n update();\n});\n\n// タブキーでテキストエリアから抜けてしまうのを防ぎ、\n// 代わりにカーソル位置にタブ文字を挿入する\ntextarea.onkeydown = (e) => {\n if (e.keyCode === 9) {\n e.preventDefault();\n insertAtCaret(\"\\t\");\n }\n\n if (e.keyCode === 27) {\n textarea.blur();\n }\n};\n\nfunction insertAtCaret(text) {\n const scrollPos = textarea.scrollTop;\n let caretPos = textarea.selectionStart;\n const front = textarea.value.substring(0, caretPos);\n const back = textarea.value.substring(\n textarea.selectionEnd,\n textarea.value.length,\n );\n\n textarea.value = front + text + back;\n caretPos += text.length;\n textarea.selectionStart = caretPos;\n textarea.selectionEnd = caretPos;\n textarea.focus();\n textarea.scrollTop = scrollPos;\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Active learning A simple calendar sample\" id=\"frame_active_learning_a_simple_calendar\" width=\"100%\" height=\"1210\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn/JavaScript/Building_blocks/conditionals\" data-live-id=\"active_learning_a_simple_calendar\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"アクティブラーニング_もっとたくさんの色から選ぶ","title":"アクティブラーニング: もっとたくさんの色から選ぶ","isH3":false,"content":"<p>この例では、先ほどの三項演算子の例を switch 文に変換し、単純なウェブサイトに、より多くの選択肢を与えます。<a href=\"/ja/docs/Web/HTML/Element/select\"><code><select></code></a> 要素を見てください。今回は先ほどの 2 つではなく、5 つの選択肢があります。<code>// ここに SWITCH 文を書く</code> というコメントの真下に switch 文を追加してください。</p>\n<ul>\n <li><code>choice</code> 変数を判定する式として使用します。</li>\n <li>各ケース (case) で、<code>choice</code> 変数は選択可能な値（'white'、'black'、'purple'、'yellow'、'psychedelic'）のうちのどれかです。</li>\n <li>各ケース (case) で、<code>update()</code> 関数が実行されるようにしてください。関数には 2 つの引数を指定します。1 つ目の引数は背景色、2 つ目の色は前景色です。色は文字列なので、忘れずに引用符で囲みましょう。</li>\n</ul>\n<p>もし間違ってしまっても、「リセット」ボタンを押すことでいつでも元に戻せます。詰まってしまったら、「答えを見る」ボタンで答えが見られます。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><h2>ライブ出力</h2>\n<div class=\"output\" style=\"height: 300px;\">\n <label for=\"theme\">テーマを選んでください: </label>\n <select id=\"theme\">\n <option value=\"white\">白</option>\n <option value=\"black\">黒</option>\n <option value=\"purple\">紫</option>\n <option value=\"yellow\">黄</option>\n <option value=\"psychedelic\">サイケ</option>\n </select>\n\n <h1>私のウェブサイト</h1>\n</div>\n\n<h2>コードエディター</h2>\n<p class=\"a11y-label\">\n コードエディターから抜けるには Esc キーを押して下さい（Tab はタブ文字を挿入します）。\n</p>\n\n<textarea id=\"code\" class=\"playable-code\" style=\"height: 450px;width: 95%\">\nconst select = document.querySelector('select');\nconst html = document.querySelector('.output');\n\nselect.addEventListener('change', () => {\n const choice = select.value;\n\n // ここに SWITCH 文を書く\n});\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}\n</textarea>\n\n<div class=\"playable-buttons\">\n <input id=\"reset\" type=\"button\" value=\"リセット\" />\n <input id=\"solution\" type=\"button\" value=\"答えを見る\" />\n</div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>html {\n font-family: sans-serif;\n}\n\nh2 {\n font-size: 16px;\n}\n\n.a11y-label {\n margin: 0;\n text-align: right;\n font-size: 0.7rem;\n width: 98%;\n}\n\nbody {\n margin: 10px;\n background: #f5f9fa;\n}\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: js hidden notranslate\"><code>const textarea = document.getElementById(\"code\");\nconst reset = document.getElementById(\"reset\");\nconst solution = document.getElementById(\"solution\");\nlet code = textarea.value;\nlet userEntry = textarea.value;\n\nfunction updateCode() {\n eval(textarea.value);\n}\n\nreset.addEventListener(\"click\", function () {\n textarea.value = code;\n userEntry = textarea.value;\n solutionEntry = jsSolution;\n solution.value = \"答えを見る\";\n updateCode();\n});\n\nsolution.addEventListener(\"click\", function () {\n if (solution.value === \"答えを見る\") {\n textarea.value = solutionEntry;\n solution.value = \"答えを隠す\";\n } else {\n textarea.value = userEntry;\n solution.value = \"答えを見る\";\n }\n updateCode();\n});\n\nconst jsSolution = `const select = document.querySelector('select');\nconst html = document.querySelector('.output');\n\nselect.addEventListener('change', () => {\n const choice = select.value;\n\n switch(choice) {\n case 'black':\n update('black','white');\n break;\n case 'white':\n update('white','black');\n break;\n case 'purple':\n update('purple','white');\n break;\n case 'yellow':\n update('yellow','purple');\n break;\n case 'psychedelic':\n update('lime','purple');\n break;\n }\n});\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}`;\n\nlet solutionEntry = jsSolution;\n\ntextarea.addEventListener(\"input\", updateCode);\nwindow.addEventListener(\"load\", updateCode);\n\n// タブキーでテキストエリアから抜けてしまうのを防ぎ、\n// 代わりにカーソル位置にタブ文字を挿入する\n\ntextarea.onkeydown = function (e) {\n if (e.keyCode === 9) {\n e.preventDefault();\n insertAtCaret(\"\\t\");\n }\n\n if (e.keyCode === 27) {\n textarea.blur();\n }\n};\n\nfunction insertAtCaret(text) {\n const scrollPos = textarea.scrollTop;\n let caretPos = textarea.selectionStart;\n const front = textarea.value.substring(0, caretPos);\n const back = textarea.value.substring(\n textarea.selectionEnd,\n textarea.value.length,\n );\n\n textarea.value = front + text + back;\n caretPos += text.length;\n textarea.selectionStart = caretPos;\n textarea.selectionEnd = caretPos;\n textarea.focus();\n textarea.scrollTop = scrollPos;\n}\n\n// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する\n\ntextarea.onkeyup = function () {\n // ユーザーのコードが表示されているときのみ状態を保存し、\n // 答えのコードでユーザーコードが上書きされないようにする\n if (solution.value === \"答えを見る\") {\n userEntry = textarea.value;\n } else {\n solutionEntry = textarea.value;\n }\n\n updateCode();\n};\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Active learning More color choices sample\" id=\"frame_active_learning_more_color_choices\" width=\"100%\" height=\"950\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn/JavaScript/Building_blocks/conditionals\" data-live-id=\"active_learning_more_color_choices\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"スキルテスト","title":"スキルテスト","isH3":false,"content":"<p>この記事の最後まで来ましたが、最も大事な情報を覚えていますか？先に進む前に、この情報を保持しているか検証するテストがあります — <a href=\"/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals\">スキルテスト: 条件文</a> を見てください。</p>"}},{"type":"prose","value":{"id":"まとめ","title":"まとめ","isH3":false,"content":"<p>これで JavaScript での条件構造について今知っておくべきことはすべてです。簡単な例を通してそのコンセプトが理解できたと思います。もし理解できないことがあれば、何度も記事を読み返しましょう。<a href=\"/ja/docs/Learn#contact_us\">私たちに連絡を</a>しても構いません。</p>"}},{"type":"prose","value":{"id":"関連情報","title":"関連情報","isH3":false,"content":"<ul>\n <li><a href=\"/ja/docs/Learn/JavaScript/First_steps/Math#%E6%AF%94%E8%BC%83%E6%BC%94%E7%AE%97%E5%AD%90\">比較演算子</a></li>\n <li><a href=\"/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#conditional_statements\">条件式についての詳細</a></li>\n <li><a href=\"/ja/docs/Web/JavaScript/Reference/Statements/if...else\">if...else リファレンス</a></li>\n <li><a href=\"/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator\">条件（三項）演算子リファレンス</a></li>\n</ul><ul class=\"prev-next\">\n \n <li><a class=\"button secondary\" href=\"/ja/docs/Learn/JavaScript/Building_blocks\"><span class=\"button-wrap\"> Overview: JavaScript の構成要素</span></a></li>\n <li><a class=\"button secondary\" href=\"/ja/docs/Learn/JavaScript/Building_blocks/Looping_code\"><span class=\"button-wrap\"> 次のページ </span></a></li>\n</ul>"}}],"toc":[{"text":"すべては条件次第","id":"すべては条件次第"},{"text":"if...else 文","id":"if...else_文"},{"text":"switch 文","id":"switch_文"},{"text":"三項演算子","id":"三項演算子"},{"text":"アクティブラーニング: 単純なカレンダー","id":"アクティブラーニング_単純なカレンダー"},{"text":"アクティブラーニング: もっとたくさんの色から選ぶ","id":"アクティブラーニング_もっとたくさんの色から選ぶ"},{"text":"スキルテスト","id":"スキルテスト"},{"text":"まとめ","id":"まとめ"},{"text":"関連情報","id":"関連情報"}],"summary":"どのプログラミング言語でも、コードは様々な入力に応じた決定を迫られ、その結果として動作を起こします。例えば、ゲームではプレイヤーの残機が 0 になった場合、ゲームオーバーとなります。天気アプリは朝に起動された場合は日の出の画像を表示し、夜に起動された場合は星や月の画像を表示します。この記事では、JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。","popularity":0.002,"modified":"2024-07-28T14:16:48.000Z","other_translations":[{"locale":"de","title":"Entscheidungen in Ihrem Code treffen — Bedingte Anweisungen","native":"Deutsch"},{"locale":"en-US","title":"Making decisions in your code — conditionals","native":"English (US)"},{"locale":"es","title":"Tomando decisiones en tu código — condicionales","native":"Español"},{"locale":"fr","title":"Prendre des décisions dans le code — conditions","native":"Français"},{"locale":"ko","title":"판단 내리기 — 조건문","native":"한국어"},{"locale":"pt-BR","title":"Tomando decisões no seu código — condicionais","native":"Português (do Brasil)"},{"locale":"ru","title":"Принятие решений в вашем коде — условные конструкции","native":"Русский"},{"locale":"zh-CN","title":"在代码中做决定——条件语句","native":"中文 (简体)"},{"locale":"zh-TW","title":"在代碼中做出決定 - 條件","native":"正體中文 (繁體)"}],"pageType":"unknown","source":{"folder":"ja/learn/javascript/building_blocks/conditionals","github_url":"https://github.com/mdn/translated-content/blob/main/files/ja/learn/javascript/building_blocks/conditionals/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/d0b2c197900fdd5941d9beeb412575d016392263","filename":"index.md"},"short_title":"コードでの意思決定 — 条件文","parents":[{"uri":"/ja/docs/Learn","title":"ウェブ開発を学ぶ"},{"uri":"/ja/docs/Learn/JavaScript","title":"JavaScript — 動的クライアントサイドスクリプト"},{"uri":"/ja/docs/Learn/JavaScript/Building_blocks","title":"JavaScript の構成要素"},{"uri":"/ja/docs/Learn/JavaScript/Building_blocks/conditionals","title":"コードでの意思決定 — 条件文"}],"pageTitle":"コードでの意思決定 — 条件文 - ウェブ開発を学ぶ | MDN","noIndexing":false}}</script></body></html>