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="Making decisions in your code — conditionals" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Conditionals" hrefLang="en"/><link rel="alternate" title="Entscheidungen in Ihrem Code treffen — Konditionalen" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Scripting/Conditionals" hrefLang="de"/><link rel="alternate" title="Tomando decisiones en tu código — condicionales" href="https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/Conditionals" hrefLang="es"/><link rel="alternate" title="Prendre des décisions dans le code — conditions" href="https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Scripting/Conditionals" hrefLang="fr"/><link rel="alternate" title="판단 내리기 — 조건문" href="https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Scripting/Conditionals" hrefLang="ko"/><link rel="alternate" title="Tomando decisões no seu código — condicionais" href="https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Scripting/Conditionals" hrefLang="pt"/><link rel="alternate" title="Принятие решений в вашем коде — условные конструкции" href="https://developer.mozilla.org/ru/docs/Learn_web_development/Core/Scripting/Conditionals" hrefLang="ru"/><link rel="alternate" title="在代码中做决定——条件语句" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals" hrefLang="zh"/><link rel="alternate" title="在代碼中做出決定 - 條件" href="https://developer.mozilla.org/zh-TW/docs/Learn_web_development/Core/Scripting/Conditionals" hrefLang="zh-Hant"/><link rel="alternate" title="コードでの意思決定 — 条件文" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Scripting/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_web_development/Core/Scripting/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_web_development/Core/Scripting/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.f565372a.js"></script><link href="/static/css/main.3d9e7a02.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=" "><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">Build web projects usable for all</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="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/ja/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/ja/docs/Learn_web_development" 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_web_development" 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_web_development/Core/Structuring_content" 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_web_development/Core/Styling_basics" 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_web_development/Core/Scripting" 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/Learn_web_development/Core/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_web_development%2FCore%2FScripting%2FConditionals" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fja%2Fdocs%2FLearn_web_development%2FCore%2FScripting%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_web_development" 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_web_development/Core" class="breadcrumb" property="item" typeof="WebPage"><span property="name">コア学習モジュール</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Learn_web_development/Core/Scripting" 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_web_development/Core/Scripting/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="en-US" href="/en-US/docs/Learn_web_development/Core/Scripting/Conditionals" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="de" href="/de/docs/Learn_web_development/Core/Scripting/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="es" href="/es/docs/Learn_web_development/Core/Scripting/Conditionals" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn_web_development/Core/Scripting/Conditionals" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Learn_web_development/Core/Scripting/Conditionals" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Learn_web_development/Core/Scripting/Conditionals" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Learn_web_development/Core/Scripting/Conditionals" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals" class="button submenu-item"><span>中文 (简体)</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Learn_web_development/Core/Scripting/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"><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_web_development/Getting_started">Getting started modules</a></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup">Environment setup</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">基本的なソフトウェアのインストール</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">ウェブの閲覧</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors">コードエディター</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">ファイルの扱い</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">コマンドライン短期集中講座</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website">Your first website</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML: コンテンツの作成</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS: コンテンツのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript: 操作の追加</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">ウェブサイトの公開</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards">Web standards</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">ウェブのしくみ</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">ウェブ標準モデル</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites">ブラウザーがウェブサイトを読み込む仕組み</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills">Soft skills</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning">調査と学習</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork">共同作業とチームワーク</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes">ワークフローとプロセス</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews">面接で成功するために</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn_web_development/Core">Core modules</a></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Structuring_content">Structuring content with HTML</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">基本的な HTML の構文</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">ヘッド部には何が入る? ウェブページのメタデータ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">HTML の見出しと段落</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">強調と重要性</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Lists">リスト</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">文書とウェブサイトの構造</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">高度なテキスト装飾</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Creating_links">リンクの作成</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">課題: 手紙のマークアップ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">課題: コンテンツのページの構造化</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML の画像</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">動画と音声のコンテンツ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">HTML の表の基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">HTML 表のアクセシビリティ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">課題: 惑星データの構造化</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_forms">HTML におけるフォームとボタン</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">HTML のデバッグ</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Styling_basics">CSS styling basics</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">CSS とは何か</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started">CSS 入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">課題: 経歴ページのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">基本的な CSS セレクター</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">属性セレクター</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">擬似クラスと擬似要素</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Combinators">結合子</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Box_model">ボックスモデル</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">競合の処理</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS の値と単位</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Sizing">CSS におけるアイテムのサイズ設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">背景と境界線</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Overflow">コンテンツのオーバーフロー</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">画像、メディア、フォーム要素</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Tables">表のスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">CSS のデバッグ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">課題: 基本的な CSS の理解</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">課題: 美しいレターヘッド付きの便箋の作成</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">課題: かっこいいボックス</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Text_styling">CSS text styling</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Fundamentals">基本的なテキストとフォントのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Styling_lists">リストのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Styling_links">リンクのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Web_fonts">ウェブフォント</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">課題: コミュニティスクールのホームページの組版</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/CSS_layout">CSS レイアウト</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Introduction">CSS レイアウト入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Floats">浮動ボックス</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Positioning">位置指定</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox">フレックスボックス</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Grids">CSS グリッドレイアウト</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Media_queries">メディアクエリーの基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">課題: 基礎的なレイアウトの理解</a></li></ol></details></li><li class="toggle"><details open=""><summary><a href="/ja/docs/Learn_web_development/Core/Scripting">Dynamic scripting with JavaScript</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">JavaScript とは</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/A_first_splash">JavaScript の最初の一歩</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Variables">必要な情報を保管する — 変数</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Math">JavaScript での基本演算 — 数値と演算子</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Strings">テキストの扱い — JavaScript での文字列</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Useful_string_methods">便利な文字列メソッド</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Arrays">配列</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Silly_story_generator">課題: バカ話ジェネレーター</a></li><li><em><a href="/ja/docs/Learn_web_development/Core/Scripting/Conditionals" aria-current="page">コードでの意思決定 — 条件文</a></em></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Loops">ループするコード</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Functions">関数 — 再利用可能なコードブロック</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Build_your_own_function">独自の関数を作る</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Return_values">関数の返値</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Events">イベント入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Event_bubbling">イベントのバブリング</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Image_gallery">課題: イメージギャラリー</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript オブジェクトの基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/DOM_scripting">DOM スクリプティング入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Network_requests">ネットワークリクエストを JavaScript で作成</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/JSON">JSON の操作</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">JavaScript のデバッグとエラー処理</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript frameworks and libraries</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">クライアントサイドフレームワークの概要</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">フレームワークの主な機能</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">React を始める</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">React で ToDo リストを始める</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_components">React アプリのコンポーネント化</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state">React での操作の実装: イベントと状態</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering">React での操作の実装: 編集、絞り込み、条件付きレンダリング</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility">React でのアクセシビリティ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_resources">React のリソース</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Accessibility">Accessibility</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">アクセシビリティとは</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Tooling">アクセシビリティツールと支援技術</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/HTML">HTML: アクセシビリティの良き基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティのベストプラクティス</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Multimedia">アクセシブルなマルチメディア</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Mobile">モバイルのアクセシビリティ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">評価: アクセシビリティのトラブルシューティング</a></li></ol></details></li><li><a href="/ja/docs/Learn_web_development/Core/Design_for_developers">Design for developers</a></li><li><a href="/ja/docs/Learn_web_development/Core/Version_control">Version control</a></li><li class="section"><a href="/ja/docs/Learn_web_development/Extensions">Extension modules</a></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">オブジェクトのプロトタイプ</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">オブジェクト指向プログラミング</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">JavaScript のクラス</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">オブジェクト構築の練習</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">練習: バウンスボールのデモに機能を追加する</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs">クライアントサイド Web API</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Web API の紹介</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">動画と音声の API</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">グラフィックの描画</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">クライアント側ストレージ</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">サードパーティ API</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Async_JS">非同期 JavaScript</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing">非同期 JavaScript 入門</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Promises">プロミスの使い方</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">プロミスベースの API の実装方法</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">ワーカー入門</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">課題: アニメーションを順番に再生する</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Forms">ウェブフォーム — ユーザーデータの操作</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Your_first_form">初めてのフォーム</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">フォームの構築方法</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">基本的なネイティブフォームコントロール</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">HTML5 の入力型</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Other_form_controls">その他のフォームコントロール</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">ウェブフォームへのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI 擬似クラス</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Form_validation">クライアント側のフォーム検証</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools">Understanding client-side tools</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Overview">クライアントサイドツールの概要</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">パッケージ管理の基本</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">完全なツールチェーンの導入</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">アプリのデプロイ</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side">Server-side websites</a></summary><ol><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps">Server-side first steps</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">サーバーサイドの概要</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">クライアント・サーバーの概要</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">サーバーサイドウェブフレームワーク</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">ウェブサイトのセキュリティ</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django">Django ウェブフレームワーク (Python)</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Django の紹介</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">Django 開発環境の設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django チュートリアル: 地域図書館ウェブサイト</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models" class="only-in-en-us">Django Tutorial Part 3: Using models</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site" class="only-in-en-us">Django Tutorial Part 4: Django admin site</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page" class="only-in-en-us">Django Tutorial Part 5: Creating our home page</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views" class="only-in-en-us">Django Tutorial Part 6: Generic list and detail views</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions" class="only-in-en-us">Django Tutorial Part 7: Sessions framework</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication" class="only-in-en-us">Django Tutorial Part 8: User authentication and permissions</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms" class="only-in-en-us">Django Tutorial Part 9: Working with forms</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing" class="only-in-en-us">Django Tutorial Part 10: Testing a Django web application</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment" class="only-in-en-us">Django Tutorial Part 11: Deploying Django to production</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security" class="only-in-en-us">Django web application security</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog" class="only-in-en-us">Assessment: DIY Django mini blog</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express web framework (Node.js)</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Express/Node の紹介</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes" class="only-in-en-us">Express Tutorial Part 4: Routes and controllers</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリーデータの表示</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment" class="only-in-en-us">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Performance">Web performance</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/why_web_performance">ウェブパフォーマンスの「なぜ」</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">ウェブパフォーマンスとは</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/Perceived_performance">知覚的パフォーマンス</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/Measuring_performance">パフォーマンスの測定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/Multimedia">マルチメディア: 画像</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/video">マルチメディア: 動画</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript のパフォーマンス</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/HTML">HTML のパフォーマンス機能</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/CSS">CSS のパフォーマンス最適化</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">ウェブパフォーマンスのビジネスケース</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Testing">Testing</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Introduction">はじめてのブラウザー横断テスト</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Testing_strategies">テスト実行のための戦略</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">一般的な HTML と CSS の問題の処理</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Feature_detection">機能検出の実装</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing">自動化テストの紹介</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">テスト自動化環境のセットアップ</a></li></ol></details></li><li><a href="/ja/docs/Learn_web_development/Extensions/Transform_animate">Transform and animate CSS</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Security_privacy">Security and privacy</a></li><li class="section">その他のリソース</li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Howto">How to solve common problems</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Howto/Solve_HTML_problems">HTML を使ってよくある問題を解決する</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Solve_CSS_problems">CSS を使ってよくある問題を解決する</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Solve_JavaScript_problems">JavaScript のコードのよくある問題を解決する</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Web_mechanics">ウェブの仕組み</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Tools_and_setup">ツールとセットアップ</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Design_and_accessibility">デザインとアクセシビリティ</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/About" class="only-in-en-us">About</a></li><li><a href="/ja/docs/Learn_web_development/Educators">Resources for educators</a></li><li><a href="/ja/docs/Learn_web_development/Changelog">Changelog</a></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_web_development/Core/Scripting/Silly_story_generator"><span class="button-wrap"> 前のページ </span></a></li><li><a class="button secondary" href="/ja/docs/Learn_web_development/Core/Scripting"><span class="button-wrap"> Overview: JavaScript による動的スクリプティング</span></a></li><li><a class="button secondary" href="/ja/docs/Learn_web_development/Core/Scripting/Loops"><span class="button-wrap"> 次のページ </span></a></li></ul> <p>どのプログラミング言語でも、コードは様々な入力に応じた決定を迫られ、その結果として動作を起こします。例えば、ゲームではプレイヤーの残機が 0 になった場合、ゲームオーバーとなります。天気アプリは朝に起動された場合は日の出の画像を表示し、夜に起動された場合は星や月の画像を表示します。この記事では、JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">前提知識:</th> <td><a href="/ja/docs/Learn_web_development/Core/Structuring_content">HTML</a>および<a href="/ja/docs/Learn_web_development/Core/Styling_basics">CSS の基礎</a>を理解していること。 </td> </tr> <tr> <th scope="row">学習成果:</th> <td> <ul> <li>条件分岐とは何かを理解すること。条件に応じて異なるコードパスを実行するためのコード構造。</li> <li><code>if</code>/<code>else</code>/<code>else if</code> を使用した条件の実装。</li> <li>比較演算子を使用して条件を作成すること。</li> <li>条件に AND、OR、NOT 論理を実装すること。</li> <li>switch 文。</li> <li>三項演算子。</li> </ul> </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_web_development/Core/Scripting/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_web_development/Core/Scripting/Math#比較演算子">比較演算子</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>条件式</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_web_development/Core/Scripting/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_web_development/Core/Scripting/Math#比較演算子">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 文全体が真を返すということです。</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_web_development/Core/Scripting/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_web_development/Core/Scripting/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(choice); }); function createCalendar(month) { let days = 31; // 条件式をここに書く list.textContent = ""; h1.textContent = month; for (let i = 1; i <= days; i++) { const listItem = document.createElement("li"); listItem.textContent = i; list.appendChild(listItem); } } select.value = "1 月"; createCalendar("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; createCalendar(choice); }); function createCalendar(month) { let days = 31; if (month === "2 月") { days = 28; } else if ( month === "4 月" || month === "6 月" || month === "9 月" || month === "11 月" ) { days = 30; } list.textContent = ""; h1.textContent = month; for (let i = 1; i <= days; i++) { const listItem = document.createElement("li"); listItem.textContent = i; list.appendChild(listItem); } } select.value = "1 月"; createCalendar("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.code === "Tab") { e.preventDefault(); insertAtCaret("\t"); } if (e.code === "Escape") { 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_web_development/Core/Scripting/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> 変数は選択可能な値（<code>white</code>、<code>black</code>、<code>purple</code>、<code>yellow</code>、<code>psychedelic</code>）のうちのどれかです。オプション値は英小文字ですが、ライブ出力に表示されるオプションラベルは日本語であることに注意してください。コードでは英小文字の値を使用しましょう。</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> <iframe id="output" width="100%" height="350px"></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 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 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 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; }`; function outputDocument(code) { const outputBody = ` <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>`; return ` <!doctype html> <html> <head> </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 = "Show solution"; update(); }); solution.addEventListener("click", () => { if (solution.value === "答えを見る") { // remember the state of the user's code // so we can restore it userCode = textarea.value; textarea.value = solutionCode; solution.value = "答えを隠す"; } else { textarea.value = userCode; solution.value = "答えを見る"; } update(); }); // タブキーでテキストエリアから抜けてしまうのを防ぎ、 // 代わりにカーソル位置にタブ文字を挿入する textarea.onkeydown = (e) => { if (e.code === "Tab") { e.preventDefault(); insertAtCaret("\t"); } if (e.code === "Escape") { 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 More color choices sample" id="frame_active_learning_more_color_choices" width="100%" height="950" src="about:blank" data-live-path="/ja/docs/Learn_web_development/Core/Scripting/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_web_development/Core/Scripting/Test_your_skills:_Conditionals">スキルテスト: 条件文</a> を見てください。</p></div></section><section aria-labelledby="まとめ"><h2 id="まとめ"><a href="#まとめ">まとめ</a></h2><div class="section-content"><p>JavaScript で条件構造について、実際に使用する上で本当に必要があるのは、これですべてです。次は、コードのループ処理を見ていきます。</p></div></section><section aria-labelledby="関連情報"><h2 id="関連情報"><a href="#関連情報">関連情報</a></h2><div class="section-content"><ul> <li><a href="/ja/docs/Learn_web_development/Core/Scripting/Math#比較演算子">比較演算子</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_web_development/Core/Scripting/Silly_story_generator"><span class="button-wrap"> 前のページ </span></a></li><li><a class="button secondary" href="/ja/docs/Learn_web_development/Core/Scripting"><span class="button-wrap"> Overview: JavaScript による動的スクリプティング</span></a></li><li><a class="button secondary" href="/ja/docs/Learn_web_development/Core/Scripting/Loops"><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="2025-01-07T15:45:50.000Z">2025年1月7日</time> by <a href="/ja/docs/Learn_web_development/Core/Scripting/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_web_development/core/scripting/conditionals/index.md?plain=1" title="Folder: ja/learn_web_development/core/scripting/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_web_development%2FCore%2FScripting%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_web_development%2Fcore%2Fscripting%2Fconditionals%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FConditionals%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fja%2Flearn_web_development%2Fcore%2Fscripting%2Fconditionals%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2F22de8c274955bfc4de17100c07f2b15bf44f4c04%0A*+Document+last+modified%3A+2025-01-07T15%3A45%3A50.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://mastodon.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 xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></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–2025 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_web_development/Core/Scripting/Conditionals","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Core/Scripting/Silly_story_generator\"><span class=\"button-wrap\"> 前のページ </span></a></li><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Core/Scripting\"><span class=\"button-wrap\"> Overview: JavaScript による動的スクリプティング</span></a></li><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Core/Scripting/Loops\"><span class=\"button-wrap\"> 次のページ </span></a></li></ul>\n<p>どのプログラミング言語でも、コードは様々な入力に応じた決定を迫られ、その結果として動作を起こします。例えば、ゲームではプレイヤーの残機が 0 になった場合、ゲームオーバーとなります。天気アプリは朝に起動された場合は日の出の画像を表示し、夜に起動された場合は星や月の画像を表示します。この記事では、JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">前提知識:</th>\n <td><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content\">HTML</a>および<a href=\"/ja/docs/Learn_web_development/Core/Styling_basics\">CSS の基礎</a>を理解していること。\n </td>\n </tr>\n <tr>\n <th scope=\"row\">学習成果:</th>\n <td>\n <ul>\n <li>条件分岐とは何かを理解すること。条件に応じて異なるコードパスを実行するためのコード構造。</li>\n <li><code>if</code>/<code>else</code>/<code>else if</code> を使用した条件の実装。</li>\n <li>比較演算子を使用して条件を作成すること。</li>\n <li>条件に AND、OR、NOT 論理を実装すること。</li>\n <li>switch 文。</li>\n <li>三項演算子。</li>\n </ul>\n </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><img src=\"/ja/docs/Learn_web_development/Core/Scripting/Conditionals/cookie-choice-small.png\" alt=\"'Cookies' と書かれたクッキーの瓶を持つ人に似た漫画のキャラクター。キャラクターの頭の上には疑問符があります。吹き出しが2つあります。左の吹き出しにはクッキーが1つあります。右の吹き出しにはクッキーが2つあります。共に、キャラクターがクッキーを1枚にするか2枚にするかを決めようとしていることを暗示しています。\" width=\"1280\" height=\"800\" loading=\"lazy\"></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_web_development/Core/Scripting/Math#比較演算子\">比較演算子</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>条件式</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>\n<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_web_development/Core/Scripting/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_web_development/Core/Scripting/Math#比較演算子\">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 文全体が真を返すということです。</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>\n評価する式の値が不明な値にならないのであれば、<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>\n<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_web_development/Core/Scripting/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>\n<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_web_development/Core/Scripting/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>\nこの例は <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 createCalendar(choice);\n});\n\nfunction createCalendar(month) {\n let days = 31;\n\n // 条件式をここに書く\n\n list.textContent = \"\";\n h1.textContent = month;\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\nselect.value = \"1 月\";\ncreateCalendar(\"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 createCalendar(choice);\n});\n\nfunction createCalendar(month) {\n let days = 31;\n\n if (month === \"2 月\") {\n days = 28;\n } else if (\n month === \"4 月\" ||\n month === \"6 月\" ||\n month === \"9 月\" ||\n month === \"11 月\"\n ) {\n days = 30;\n }\n\n list.textContent = \"\";\n h1.textContent = month;\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\nselect.value = \"1 月\";\ncreateCalendar(\"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.code === \"Tab\") {\n e.preventDefault();\n insertAtCaret(\"\\t\");\n }\n\n if (e.code === \"Escape\") {\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>\n<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_web_development/Core/Scripting/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> 変数は選択可能な値（<code>white</code>、<code>black</code>、<code>purple</code>、<code>yellow</code>、<code>psychedelic</code>）のうちのどれかです。オプション値は英小文字ですが、ライブ出力に表示されるオプションラベルは日本語であることに注意してください。コードでは英小文字の値を使用しましょう。</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<iframe id=\"output\" width=\"100%\" height=\"350px\"></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 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 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 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\nfunction outputDocument(code) {\n const outputBody = `\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 return `\n<!doctype html>\n<html>\n <head>\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 = \"Show solution\";\n update();\n});\n\nsolution.addEventListener(\"click\", () => {\n if (solution.value === \"答えを見る\") {\n // remember the state of the user's code\n // so we can restore it\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.code === \"Tab\") {\n e.preventDefault();\n insertAtCaret(\"\\t\");\n }\n\n if (e.code === \"Escape\") {\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>\n<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_web_development/Core/Scripting/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_web_development/Core/Scripting/Test_your_skills:_Conditionals\">スキルテスト: 条件文</a> を見てください。</p>"}},{"type":"prose","value":{"id":"まとめ","title":"まとめ","isH3":false,"content":"<p>JavaScript で条件構造について、実際に使用する上で本当に必要があるのは、これですべてです。次は、コードのループ処理を見ていきます。</p>"}},{"type":"prose","value":{"id":"関連情報","title":"関連情報","isH3":false,"content":"<ul>\n<li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Math#比較演算子\">比較演算子</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>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Core/Scripting/Silly_story_generator\"><span class=\"button-wrap\"> 前のページ </span></a></li><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Core/Scripting\"><span class=\"button-wrap\"> Overview: JavaScript による動的スクリプティング</span></a></li><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Core/Scripting/Loops\"><span class=\"button-wrap\"> 次のページ </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"ja","mdn_url":"/ja/docs/Learn_web_development/Core/Scripting/Conditionals","modified":"2025-01-07T15:45:50.000Z","native":"日本語","noIndexing":false,"other_translations":[{"locale":"en-US","title":"Making decisions in your code — conditionals","native":"English (US)"},{"locale":"de","title":"Entscheidungen in Ihrem Code treffen — Konditionalen","native":"Deutsch"},{"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":"正體中文 (繁體)"}],"pageTitle":"コードでの意思決定 — 条件文 - ウェブ開発の学習 | MDN","parents":[{"uri":"/ja/docs/Learn_web_development","title":"ウェブ開発の学習"},{"uri":"/ja/docs/Learn_web_development/Core","title":"コア学習モジュール"},{"uri":"/ja/docs/Learn_web_development/Core/Scripting","title":"JavaScript による動的スクリプティング"},{"uri":"/ja/docs/Learn_web_development/Core/Scripting/Conditionals","title":"コードでの意思決定 — 条件文"}],"popularity":null,"short_title":"コードでの意思決定 — 条件文","sidebarHTML":"<ol><li class=\"section\"><a href=\"/ja/docs/Learn_web_development/Getting_started\">Getting started modules</a></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup\">Environment setup</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">基本的なソフトウェアのインストール</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">ウェブの閲覧</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">コードエディター</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">ファイルの扱い</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">コマンドライン短期集中講座</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website\">Your first website</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">ウェブサイトをどんな外見にするか</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: コンテンツの作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: コンテンツのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: 操作の追加</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">ウェブサイトの公開</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards\">Web standards</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">ウェブのしくみ</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">ウェブ標準モデル</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">ブラウザーがウェブサイトを読み込む仕組み</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills\">Soft skills</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">調査と学習</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">共同作業とチームワーク</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">ワークフローとプロセス</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">面接で成功するために</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn_web_development/Core\">Core modules</a></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content\">Structuring content with HTML</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">基本的な HTML の構文</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">ヘッド部には何が入る? ウェブページのメタデータ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">HTML の見出しと段落</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">強調と重要性</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Lists\">リスト</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">文書とウェブサイトの構造</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">高度なテキスト装飾</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Creating_links\">リンクの作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">課題: 手紙のマークアップ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">課題: コンテンツのページの構造化</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML の画像</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">動画と音声のコンテンツ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Mozilla のスプラッシュページ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">HTML の表の基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">HTML 表のアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">課題: 惑星データの構造化</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">HTML におけるフォームとボタン</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">HTML のデバッグ</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics\">CSS styling basics</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">CSS とは何か</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started\">CSS 入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">課題: 経歴ページのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">基本的な CSS セレクター</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">属性セレクター</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">擬似クラスと擬似要素</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Combinators\">結合子</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Box_model\">ボックスモデル</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">競合の処理</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS の値と単位</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Sizing\">CSS におけるアイテムのサイズ設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">背景と境界線</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Overflow\">コンテンツのオーバーフロー</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">画像、メディア、フォーム要素</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Tables\">表のスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">CSS のデバッグ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">課題: 基本的な CSS の理解</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">課題: 美しいレターヘッド付きの便箋の作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">課題: かっこいいボックス</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Text_styling\">CSS text styling</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Fundamentals\">基本的なテキストとフォントのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Styling_lists\">リストのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Styling_links\">リンクのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Web_fonts\">ウェブフォント</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">課題: コミュニティスクールのホームページの組版</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout\">CSS レイアウト</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Introduction\">CSS レイアウト入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Floats\">浮動ボックス</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Positioning\">位置指定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox\">フレックスボックス</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS グリッドレイアウト</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">レスポンシブデザイン</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Media_queries\">メディアクエリーの基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">課題: 基礎的なレイアウトの理解</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/ja/docs/Learn_web_development/Core/Scripting\">Dynamic scripting with JavaScript</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">JavaScript とは</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/A_first_splash\">JavaScript の最初の一歩</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/What_went_wrong\">何が間違っている? JavaScript のトラブルシューティング</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Variables\">必要な情報を保管する — 変数</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Math\">JavaScript での基本演算 — 数値と演算子</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Strings\">テキストの扱い — JavaScript での文字列</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">便利な文字列メソッド</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Arrays\">配列</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">課題: バカ話ジェネレーター</a></li><li><em><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Conditionals\" aria-current=\"page\">コードでの意思決定 — 条件文</a></em></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Loops\">ループするコード</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Functions\">関数 — 再利用可能なコードブロック</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">独自の関数を作る</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Return_values\">関数の返値</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Events\">イベント入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Event_bubbling\">イベントのバブリング</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Image_gallery\">課題: イメージギャラリー</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript オブジェクトの基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/DOM_scripting\">DOM スクリプティング入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Network_requests\">ネットワークリクエストを JavaScript で作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/JSON\">JSON の操作</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">JavaScript のデバッグとエラー処理</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript frameworks and libraries</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">クライアントサイドフレームワークの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">フレームワークの主な機能</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">React を始める</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">React で ToDo リストを始める</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">React アプリのコンポーネント化</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React での操作の実装: イベントと状態</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">React での操作の実装: 編集、絞り込み、条件付きレンダリング</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">React でのアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React のリソース</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Accessibility\">Accessibility</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">アクセシビリティとは</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Tooling\">アクセシビリティツールと支援技術</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: アクセシビリティの良き基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS と JavaScript のアクセシビリティのベストプラクティス</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA の基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Multimedia\">アクセシブルなマルチメディア</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Mobile\">モバイルのアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">評価: アクセシビリティのトラブルシューティング</a></li></ol></details></li><li><a href=\"/ja/docs/Learn_web_development/Core/Design_for_developers\">Design for developers</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Version_control\">Version control</a></li><li class=\"section\"><a href=\"/ja/docs/Learn_web_development/Extensions\">Extension modules</a></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">オブジェクトのプロトタイプ</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">オブジェクト指向プログラミング</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">JavaScript のクラス</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">オブジェクト構築の練習</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">練習: バウンスボールのデモに機能を追加する</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs\">クライアントサイド Web API</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Web API の紹介</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">動画と音声の API</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">グラフィックの描画</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">クライアント側ストレージ</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">サードパーティ API</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS\">非同期 JavaScript</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing\">非同期 JavaScript 入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Promises\">プロミスの使い方</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">プロミスベースの API の実装方法</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">ワーカー入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">課題: アニメーションを順番に再生する</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Forms\">ウェブフォーム — ユーザーデータの操作</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Your_first_form\">初めてのフォーム</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">フォームの構築方法</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">基本的なネイティブフォームコントロール</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">HTML5 の入力型</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">その他のフォームコントロール</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">ウェブフォームへのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">フォームへの高度なスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI 擬似クラス</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Form_validation\">クライアント側のフォーム検証</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">フォームデータの送信</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools\">Understanding client-side tools</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">クライアントサイドツールの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">パッケージ管理の基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">完全なツールチェーンの導入</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">アプリのデプロイ</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side\">Server-side websites</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps\">Server-side first steps</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">サーバーサイドの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">クライアント・サーバーの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">サーバーサイドウェブフレームワーク</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">ウェブサイトのセキュリティ</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django\">Django ウェブフレームワーク (Python)</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Django の紹介</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Django 開発環境の設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django チュートリアル: 地域図書館ウェブサイト</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models\" class=\"only-in-en-us\">Django Tutorial Part 3: Using models</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\" class=\"only-in-en-us\">Django Tutorial Part 4: Django admin site</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\" class=\"only-in-en-us\">Django Tutorial Part 5: Creating our home page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\" class=\"only-in-en-us\">Django Tutorial Part 6: Generic list and detail views</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\" class=\"only-in-en-us\">Django Tutorial Part 7: Sessions framework</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\" class=\"only-in-en-us\">Django Tutorial Part 8: User authentication and permissions</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms\" class=\"only-in-en-us\">Django Tutorial Part 9: Working with forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing\" class=\"only-in-en-us\">Django Tutorial Part 10: Testing a Django web application</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\" class=\"only-in-en-us\">Django Tutorial Part 11: Deploying Django to production</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\" class=\"only-in-en-us\">Django web application security</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\" class=\"only-in-en-us\">Assessment: DIY Django mini blog</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express web framework (Node.js)</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Express/Node の紹介</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Node 開発環境の設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express チュートリアル: 地域図書館のウェブサイト</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\" class=\"only-in-en-us\">Express Tutorial Part 4: Routes and controllers</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express チュートリアル Part 5: ライブラリーデータの表示</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express チュートリアル Part 6: フォームの操作</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\" class=\"only-in-en-us\">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Performance\">Web performance</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/why_web_performance\">ウェブパフォーマンスの「なぜ」</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">ウェブパフォーマンスとは</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">知覚的パフォーマンス</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">パフォーマンスの測定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/Multimedia\">マルチメディア: 画像</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/video\">マルチメディア: 動画</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript のパフォーマンス</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/HTML\">HTML のパフォーマンス機能</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/CSS\">CSS のパフォーマンス最適化</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">ウェブパフォーマンスのビジネスケース</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Testing\">Testing</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Introduction\">はじめてのブラウザー横断テスト</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">テスト実行のための戦略</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">一般的な HTML と CSS の問題の処理</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Feature_detection\">機能検出の実装</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing\">自動化テストの紹介</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">テスト自動化環境のセットアップ</a></li></ol></details></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Transform_animate\">Transform and animate CSS</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Security_privacy\">Security and privacy</a></li><li class=\"section\">その他のリソース</li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Howto\">How to solve common problems</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Howto/Solve_HTML_problems\">HTML を使ってよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Solve_CSS_problems\">CSS を使ってよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">JavaScript のコードのよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Web_mechanics\">ウェブの仕組み</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Tools_and_setup\">ツールとセットアップ</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Design_and_accessibility\">デザインとアクセシビリティ</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/About\" class=\"only-in-en-us\">About</a></li><li><a href=\"/ja/docs/Learn_web_development/Educators\">Resources for educators</a></li><li><a href=\"/ja/docs/Learn_web_development/Changelog\">Changelog</a></li></ol>","source":{"folder":"ja/learn_web_development/core/scripting/conditionals","github_url":"https://github.com/mdn/translated-content/blob/main/files/ja/learn_web_development/core/scripting/conditionals/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/22de8c274955bfc4de17100c07f2b15bf44f4c04","filename":"index.md"},"summary":"どのプログラミング言語でも、コードは様々な入力に応じた決定を迫られ、その結果として動作を起こします。例えば、ゲームではプレイヤーの残機が 0 になった場合、ゲームオーバーとなります。天気アプリは朝に起動された場合は日の出の画像を表示し、夜に起動された場合は星や月の画像を表示します。この記事では、JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。","title":"コードでの意思決定 — 条件文","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":"関連情報"}],"pageType":"learn-module-chapter"}}</script></body></html>