index.html

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
    <title>ルートの中を簡単にする</title>
    <style>
      @import url(./css/material-design-3/light.css);
      @import url(./css/material-design-3/dark.css);
      html {
        touch-action: manipulation;
      }
      body {
        margin: 1em;
        background: var(--md-sys-color-background);
        color: var(--md-sys-color-on-surface);
      }
      * {
        transition-property: background;
        transition-duration: .5s;
        user-select: none;
      }
      h1, span, p {
        font-family: 'Roboto';
      }

      .head-border {
        display: flex;
        align-items: center;
        margin: 1rem 0 1rem 0;
      }
      .head-border:before,
      .head-border:after {
        content: "";
        height: 1px;
        flex-grow: 1;
        background-color: var(--md-sys-color-outline-variant);
        max-width: 15rem;
        margin: auto;
      }
      .head-border:before {
        margin-right: 1rem;
      }
      .head-border:after {
        margin-left: 1rem;
      }
      body.dark #dark {
        display: none;
      }
      body.light #light {
        display: none;
      }

      .line {
  display: flex;
  align-items: center;
}
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <script type="importmap">
          {
            "imports": {
              "@material/web/": "https://esm.run/@material/web/"
            }
          }
        </script>
    <script type="module">
      import '@material/web/all.js';
      import { styles as typescaleStyles } from '@material/web/typography/md-typescale-styles.js';

      document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
    </script>
    <script src="./material-design-3-fix.js"></script>
    <script>
      function isPrimeBigInt(n) {
        const b = BigInt(n);
        if (b <= 1n) {
          return false;
        }
        if (b <= 3n) { // 2n, 3n は素数
          return true;
        }
        if (b % 2n === 0n || b % 3n === 0n) {
          return false;
        }

        // 6k ± 1 の形式で試す
        // nの平方根まで試す
        for (let i = 5n; i * i <= b; i = i + 6n) {
          if (b % i === 0n || b % (i + 2n) === 0n) {
            return false;
          }
        }

        return true;
      }

      function primeNumbersCalc(length = 0n, offset = 0n) {
        if (typeof length !== "number" && typeof length !== "bigint") {
          console.warn("primeNumbersCalc(): length の値が Number または BigInt ではないため、正常に処理されない可能性があります。");
        }
        if (typeof offset !== "number" && typeof offset !== "bigint") {
          console.warn("primeNumbersCalc(): offset の値が Number または BigInt ではないため、正常に処理されない可能性があります。");
        }
        let prime_numbers = [];
        for (let i = 0n; i < BigInt(length) + BigInt(offset); i++) {
          if (isPrimeBigInt(i + 1n)) {
            prime_numbers.push(i + 1n);
          }
        }
        return prime_numbers;
      }

      function isPrimeBigInt(n) {
        const b = BigInt(n);
        if (b <= 1n) {
          return false;
        }
        if (b <= 3n) { // 2n, 3n は素数
          return true;
        }
        if (b % 2n === 0n || b % 3n === 0n) {
          return false;
        }

        // 6k ± 1 の形式で試す
        // nの平方根まで試す
        for (let i = 5n; i * i <= b; i = i + 6n) {
          if (b % i === 0n || b % (i + 2n) === 0n) {
            return false;
          }
        }

        return true;
      }

      function primeNumbersCalc(length = 0n, offset = 0n) {
        if (typeof length !== "number" && typeof length !== "bigint") {
          console.warn("primeNumbersCalc(): length の値が Number または BigInt ではないため、正常に処理されない可能性があります。");
        }
        if (typeof offset !== "number" && typeof offset !== "bigint") {
          console.warn("primeNumbersCalc(): offset の値が Number または BigInt ではないため、正常に処理されない可能性があります。");
        }
        let prime_numbers = [];
        for (let i = 0n; i < BigInt(length) + BigInt(offset); i++) {
          if (isPrimeBigInt(i + 1n)) {
            prime_numbers.push(i + 1n);
          }
        }
        return prime_numbers;
      }

      /**
       * 与えられたBigIntの素因数分解を行い、筆算で出てくるような素数のリストを返します。
       * primeNumbersCalc関数とisPrimeBigInt関数は事前に定義されているものとします。
       *
       * @param {bigint} number - 素因数分解する正の整数（BigInt）
       * @returns {bigint[]} - 素因数のリスト
       */
      function primeFactorization(number) {
        if (typeof number !== 'bigint' && typeof number !== 'number') {
          console.warn("primeFactorization(): number の値が Number または BigInt ではないため、正常に処理されない可能性があります。");
        }

        let num = BigInt(number);
        if (num <= 1n) {
          return [num];
        }

        const factors = [];
        let currentPrime = 2n; // 最初の素数から開始
        let primeGeneratorLimit = 1n; // 素数生成の初期上限

        while (num > 1n) {
          // 現在の素数がnumの平方根より大きい場合、残りのnumは素数
          if (currentPrime * currentPrime > num) {
            factors.push(num);
            break;
          }

          if (num % currentPrime === 0n) {
            // 割り切れたら、その素数をリストに追加し、numを割る
            factors.push(currentPrime);
            num /= currentPrime;
          } else {
            // 割り切れなければ、次の素数を探す
            // ここで、isPrimeBigInt を直接使って次の素数を検索します。
            // primeNumbersCalc を使って大量の素数を事前に生成するのではなく、
            // 必要なときに必要な素数を探索する方が効率的です。
            do {
              currentPrime++;
            } while (!isPrimeBigInt(currentPrime));
          }
        }
        return factors;
      }

      function separateGroups(arr) {
        const counts = new Map();
        // 各要素の出現回数をカウント
        for (const item of arr) {
          counts.set(item, (counts.get(item) || 0n) + 1n); // BigIntの加算
        }

        const groupedItems = [];
        const ungroupedItems = [];

        for (const [value, count] of counts.entries()) {
          // 2個以上のペアがある場合
          if (count >= 2n) {
            const numGroups = count / 2n; // 作れるペアの数 (整数部)
            for (let i = 0n; i < numGroups; i++) {
              groupedItems.push(value); // グループとして1つ追加
            }
            const remaining = count % 2n; // ペアにならなかった残りの数
            if (remaining === 1n) {
              ungroupedItems.push(value);
            }
          } else {
            // ペアがない場合（1個しか出現しない場合）
            ungroupedItems.push(value);
          }
        }

        return {
          grouped: groupedItems,
          ungrouped: ungroupedItems
        };
      }

      /**
       * @param {bigint | string | number} originalNumber
       * @param {bigint[]} factors
       */
      function createPrimeFactorizationUI(originalNumber, factors) {
        let html = '';
        let currentNumber = BigInt(originalNumber);

        // 各行を生成
        for (let i = 0; i < factors.length; i++) {
          const factor = factors[i];
          const isLastLine = (i === factors.length - 1);
          const lineNumber = isLastLine ? factors[i] : (currentNumber / factor);

          html += `${isLastLine ? '' : factor + " ) "}${currentNumber}\n`;

          currentNumber /= factor;
        }

        function alignParentheses(text) {
          const lines = text.split('\n');
          let maxLeftLength = 0;
          let maxRightLength = 0;

          // 各行を処理し、最大文字数を計算
          lines.forEach(line => {
            const parenthesisIndex = line.indexOf(')');
            if (parenthesisIndex !== -1) {
              const leftPart = line.substring(0, parenthesisIndex).trim();
              const rightPart = line.substring(parenthesisIndex + 1).trim();
              if (leftPart.length > maxLeftLength) {
                maxLeftLength = leftPart.length;
              }
              if (rightPart.length > maxRightLength) {
                maxRightLength = rightPart.length;
              }
            } else {
              // 括弧がない行の文字数も考慮
              if (line.trim().length > maxLeftLength) {
                maxLeftLength = line.trim().length;
              }
            }
          });

          // 新しい文字列を生成
          const newLines = lines.map(line => {
            const parenthesisIndex = line.indexOf(')');
            if (parenthesisIndex !== -1) {
              const leftPart = line.substring(0, parenthesisIndex).trim();
              const rightPart = line.substring(parenthesisIndex + 1).trim();
              const leftPadding = ' '.repeat(maxLeftLength - leftPart.length);
              const rightPadding = ' '.repeat(maxRightLength - rightPart.length);

              return `${leftPadding}${leftPart} ) ${rightPart}${rightPadding}`;
            } else {
              const lineText = line.trim();
              // 括弧がない行の左側に、計算されたスペースに加えて1つ追加
              const totalWidth = maxLeftLength + maxRightLength + 3;
              const totalPadding = totalWidth - lineText.length;
              const leftPadding = ' '.repeat(maxLeftLength + 3);
              const rightPadding = ' '.repeat(totalPadding - leftPadding.length);

              return `${leftPadding}${lineText}${rightPadding}`;
            }
          });

          return newLines.join('\n');
        }

        return `<br><span>素因数分解の筆算</span><br><br><tt style="white-space:pre-wrap;user-select:text">${alignParentheses(html.replace(/\n$/, "")).replace(/(\).+)/g, '<u style="user-select:text">$1</u>')}</tt>`;
      }

      document.addEventListener("DOMContentLoaded", () => {
        document.getElementById("dark").addEventListener("click", () => {
          changeToDarkTheme();
        });
        document.getElementById("light").addEventListener("click", () => {
          changeToLightTheme();
        });

        document.getElementById("calc").addEventListener("click", async(e) => {
          // e.target.setAttribute("disabled", "");
          let el = document.getElementById("root_num");
          let num = el.value;
          if (/^\d+$/.test(num)) {
            el.removeAttribute("error");
            const start_time = performance.now();
            const factors = primeFactorization(num);
            let group = separateGroups(factors);
            let result = "";
            /*
            2(8 | 2(4
            2(4 |   2
              2 | 
            */
            if (group.grouped.length) {
              result += group.grouped.reduce((accumulator, currentValue) => accumulator * currentValue);
              if (group.ungrouped.length) {
                result += "√" + group.ungrouped?.reduce((accumulator, currentValue) => accumulator * currentValue);
              }
            }
            /*
            2(6
              3
            */
            else if (group.ungrouped.length) {
              result += (group.ungrouped.length === 1 && group.ungrouped[0] <= 1n ? "" : "√") + group.ungrouped?.reduce((accumulator, currentValue) => accumulator * currentValue);
            }
            let content = "";
            if (factors[0] !== BigInt(num)) {
              content = createPrimeFactorizationUI(num, factors);
            }
            document.getElementById("prime_factorization").innerHTML = content;
            // `${group.grouped.reduce((accumulator, currentValue) => accumulator * currentValue)}${group.ungrouped.length ? ("√" + group.ungrouped?.reduce((accumulator, currentValue) => accumulator * currentValue)) : ""}`
            document.getElementById("result").innerText = result;
            document.getElementById("time").innerText = Math.floor(performance.now() - start_time) / 1000;
          }
          else {
            el.setAttribute("error", "");
          }
          // e.target.removeAttribute("disabled");
        });
        const root_num_el = document.getElementById("root_num");
        root_num_el.addEventListener("keydown", (e) => {
          if (event.key === "Enter") {
            document.getElementById("calc").click();
            root_num_el.focus();
          }
        });
        document.addEventListener("readystatechange", () => {
          if (document.readyState === "complete") {
            root_num_el.focus();
          }
        });
      });
    </script>
  </head>
  <body class="light" style="display:none;text-align:center">
    <h1 class="md-typescale-display-medium" style="margin-top:.75em">ルートの中を簡単にする</span></h1>
    <p>あの中3で習うルートの中を簡単にするやつです</p>
    <p>※数を大きくしすぎると計算に時間がかかってUIが止まることがあります</p>
    <div style="display:flex;justify-content:center;text-align:center;flex-direction:column;margin-top:3rem">
      <div style="display:flex;justify-content:flex-start;align-items:center;flex-direction:row"><span style="margin-right:1rem;font-size:1.5rem">√</span><md-outlined-text-field style="flex-grow:1" id="root_num" type="number" min="0" label="ルートの中の数" error-text="空欄にする、または数字以外の文字を使用することはできません。" autofocus></md-outlined-text-field></div>
      <md-filled-button id="calc" style="margin:1em auto auto auto">計算する</md-filled-button>
      <span class="head-border md-typescale-body-medium">結果はこの下に表示されます</span>
      <span id="result" style="user-select:text!important"></span>
      <div id="prime_factorization"></div>
      <br>
      <span>計算時間: <span id="time">--</span> 秒</span>
    </div>

    <!-- テーマ変更用のボタン -->
    <div style="position:fixed;right:1rem;bottom:1rem;z-index:10000">
      <!-- <md-outlined-icon-button id="dark">
        <md-icon>
          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
        </md-icon>
      </md-outlined-icon-button>
      <md-outlined-icon-button id="light">
        <md-icon>
          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>
        </md-icon>
      </md-outlined-icon-button> -->
      <md-fab variant="primary" size="medium" id="dark">
        <md-icon slot="icon">
          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
        </md-icon>
      </md-fab>
      <md-fab variant="primary" size="medium" id="light">
        <md-icon slot="icon">
          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>
        </md-icon>
      </md-fab>
    </div>

  </body>
</html>