home about terms twitter

(React)パスカルの三角形をブラウザ上で描画

date: 2021-05-01 | mod: 2021-05-02

前書き

現在の日本の高校数学IIでは、教科書のはじめの方で「二項定理」を学びます。

二項定理とは、

$(a+b)^2 = a^2 + 2ab + b^2$

$(a+b)^3 = a^3 + 3a^2b + 3ab^2 + b^2$

のような多項式の展開（展開式）について、一般的に

$(a+b)^n = {}_n\mathrm{C}_ra^n + _{n}\mathrm{C}_1a^{n+1}b … _{n}\mathrm{C}_nb^{n}$

が成り立つことを言います。

二項定理に関連して、「パスカルの三角形」があります。

これは、多項式を展開した時の係数が三角形のような三角形を描き、またある係数がその上段の係数の和で描かれることに由来します。

今回はブラウザ上での描画です。 得られた出力のみ使いたい方は結果へ飛んでください。

方法

import * as React from 'react'
import * as ReactDOM from 'react-dom'

// factorial function
function Fc(k){
    var j = 1
    for(var i = 1; i <= k; i++){
        j *= i
    }
    return j
}

// Pascal's Triangle
function PascalTri() {
  const [size, setSize] = React.useState(10) // char size
  const [number, setNumber] = React.useState(10) // calculate num
  // when -1 button clicked
  const clickMinus = () => {
    if (number >=1) {
      setSize(size + 1)
      setNumber(number - 1)
    }
  }
  // when +1 button clicked
  const clickPlus = () => {
    if (number <= 15) {
      setSize(size - 1)
      setNumber(number + 1)
    }
  }
  // array for output [[1], [1,1], [1,2,1] ...]
  var array = []
  for (var i = 0; i <= number; i++) {
    loopArray = []
    for(var j = 0; j <= i; j++) {
        loopArray += parseInt(Fc((i))/(Fc((i-j))*Fc(j)))
        loopArray += ' ';
    }
    array += loopArray
    array += '**' // char for split
  }

  return (
    <div>
      {/* + num, - size*/}
      <button
        onClick={clickMinus}
        style={{ marginRight: '20px' }}
      >
      -1
      </button>
      {/* - num, + size*/}
      <button
        onClick={clickPlus}
      >
      +1
      </button>
      <div
        style={{ fontSize: `${size}px` }}
        align='center'
      >
        {/* split array */}
        {array.split('**').map(x => (<div>{x}</div>))}
      </div>

    </div>
  )
}

function App() {
  return <PascalTri />
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

結果

数字を変化させてみましょう。

（241010追記: 三角形の表示を省略しました。）