電卓風の見た目で逆ポーランド記法の式を作成する（vue & Typescript)

<template>
  <div style="border:1px solid #ccc; background: #ccc">
    {{ localTemplateIni || '数式を入力してください' }}<hr>
    逆ポーランド：{{ formula }}
  </div>
  <div class="row justify-end">
    <div v-for="(row) in ['(', ')','ac', '変換']" :key="row" class="col-xs-3 col-md-2 q-px-sm q-mb-xs">
      <button style="width:100%;background-color: blue;color:white" @click="pushKey(row)">{{ row }}</button>
    </div>
  </div>
  <div class="row">
    <div class="col-9">
      <div class="row">
        <div v-for="(row) in [1,2,3,4,5,6,7,8,9,0, '.']" :key="row" class="col-xs-4 q-px-sm q-mb-xs">
          <button style="width:100%;background-color: pink;" @click="pushKey(row)">{{ row }}</button>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div v-for="(row) in ['+', '-', '*', '/']" :key="row" class="q-px-sm q-mb-xs">
        <button style="width:100%; background-color: orange;" @click="pushKey(row)">{{ row }}</button>
      </div>
    </div>
  </div>
</template>

/** 逆ポーランドマシーン */
import { ref } from 'vue';

type stringOrNumber = string | number;

const localTemplateIni = ref('');
const formula = ref<stringOrNumber[]>([]);

/**
 * キーが押下されたときの処理
 */
function pushKey (key: string | number) {
  if (key === '変換') {
    // 文字列の数式を逆ポーランド式に変形する
    formula.value = infixToPostfix(localTemplateIni.value);
  } else if (typeof key === 'number' || key === '.') {
    // 数値の場合はスペースを入れずつなげて入力する。小数点も同様
    localTemplateIni.value += `${key}`;
  } else if (key === 'ac') {
    localTemplateIni.value = '';
  } else if (['+', '-', '*', '/', '(', ')'].includes(key)) {
    localTemplateIni.value += ` ${key} `;
  } else {
    // このサンプルではこのルートは通りません
  }
}

/**
 * 演算子
 */
function prec (c: string) {
  if (c === '/' || c === '*') return 2;
  if (c === '+' || c === '-') return 1;
  return -1;
}

const operands = ['+', '-', '*', '/'];
/**
 * 通常の数式を逆ポーランド記法に変換します
 */
function infixToPostfix (s: string) {
  const st:string[] = [];
  const result:stringOrNumber[] = [];
  // 数式を半角スペースを基準に分解する
  const arr = s.split(' ');
  arr.forEach(c => {
    if (c === '(') {
      // カッコの処理。スタックつみ
      st.push('(');
    } else if (c === ')') {
      // 閉じカッコの処理。
      while (st[st.length - 1] !== '(') {
        result.push(st[st.length - 1]);
        st.pop();
      }
      st.pop();
    } else if (operands.includes(c)) {
      // このルートはオペランド + - * / ( )の処理
      while (st.length !== 0 && prec(c) <= prec(st[st.length - 1])) {
        result.push(st[st.length - 1]);
        st.pop();
      }
      st.push(c);
    } else {
      if (c) {
        result.push(parseFloat(c));
      }
    }
  })
  while (st.length !== 0) {
    result.push(st[st.length - 1]);
    st.pop();
  }
  return result;
}

const calc = computed(() => {
  // 例えば[ 2, 6, "*", 9, "*" ]のような形の配列として渡ってきます
  const formula = props.formula;
  const stack:number[] = [];
  formula.forEach(v => {
    if (v === '+') {
      const b = stack.pop();
      const a = stack.pop();
      if (typeof a === 'number' && typeof b === 'number') {
        const ans = a + b;
        stack.push(ans);
      }
    } else if (v === '-') {
      const b = stack.pop();
      const a = stack.pop();
      if (typeof a === 'number' && typeof b === 'number') {
        const ans = a - b;
        stack.push(ans);
      }
    } else if (v === '*') {
      const b = stack.pop();
      const a = stack.pop();
      if (typeof a === 'number' && typeof b === 'number') {
        const ans = a * b;
        stack.push(ans);
      }
    } else if (v === '/') {
      const b = stack.pop();
      const a = stack.pop();
      if (typeof a === 'number' && typeof b === 'number') {
        const ans = a / b;
        stack.push(ans);
      }
    } else if (typeof v === 'number') {
      stack.push(v);
    } else if (typeof v === 'string') {
      // ここはNipoPlus独自仕様なので省略します
    } else {
      Notify.create({ message: '計算式に問題があります' });
    }
  })
  return stack[0];
})