今週も、赤イバラを集めたりワンス・アポン・ア・塊魂をしたりなどをしていたからか、記事の執筆に時間を割り当てられずにあっという間に日曜日。
そして、日曜日も相変わらずクズで愚かでバカで無能でゴミでカスで頭が悪いので、午前も午後もクソサボってクソ寝倒してしまう始末。
今週は、夕飯の前にQiitaの記事を書けたので、先週よりもマシだぞ。(五十歩百歩)
……と思ったが、結局あと1時間を切るまでテーマが確定せず。
まあ、今回は先週の反省を活かしてクソ簡単なテーマにしたので……

今回やったこと

なでしこで、パスカルの三角形を表示する。

プログラム

パスカルの三角形 (プログラム貯蔵庫)

ポイント

パラメータの設定

ページサイズは10。

処理に用いるパラメータを用意する。
今回は、1回の出力指示で何段出力するかを設定する。

UIの作成

表示エリアは「DIV」のDOM部品作成。
ボタンエリアは「DIV」のDOM部品作成。
ボタンエリアにDOM親部品設定。
モアボタンは「さらに表示」のボタン作成。
表示エリアにDOM親部品設定。
表示エリアに{
  行揃え: "中央",
  "overflow-x": "auto",
  "text-wrap": "nowrap",
}をDOMスタイル一括設定。
ボタンエリアの「行揃え」に「中央」をDOMスタイル設定。

表示や操作を行うための部品を用意する。
今回は、パスカルの三角形の数値列を入れる部品と、計算の続きを行わせるボタンを入れる部品を用意した。
数値列は、途中で折り返さず、幅が広い場合はスクロールする設定にした。
数値が多くなってくると、うまく中央揃えにならずに左で壁にぶつかって右に偏ってしまうが、一旦まあいいや……

計算

最終段は空配列。

●一段追加とは
  定数の次段は[1n]。
  もし、最終段の要素数が2以上ならば
    iで1から(最終段の要素数-1)まで繰り返す
      最終段@(i-1)と最終段@iを足して次段に配列追加。
    ここまで。
  ここまで。
  もし、最終段の要素数が1以上ならば
    次段に1nを配列追加。
    改行作成。
  ここまで。
  次段を「 」で配列結合してラベル作成。
  最終段は次段。
ここまで。

ページサイズ回、一段追加。

モアボタンをクリックした時には
  ページサイズ回、一段追加。
ここまで。

状態の保存・計算処理・計算処理の呼び出しを行う。
最後に出力した段を変数「最終段」に格納し、「一段追加」する際にこの「最終段」を参照する。
1回の計算 (最初、および「さらに表示」を押した時) には、この「一段追加」を「ページサイズ」回行う。

「一段追加」で次の段の数値列を求める処理は、以下の手順で行う。

1. 「1」を1個格納した配列を用意する (この1は左端になる)

2. 最終段の要素を2個ずつ加算し、この配列の最後に追加していく

3. 配列の最後に「1」を追加する (最初の段ではこれは行わない)

普通の数値ではなく、「n」をつけた BigInt を用いることで、桁数が大きくなってもきちんと計算できるようにした。

次の段の数値列を求めたら、これを文字列に変換して画面に表示し、「最終段」をこれに更新する。

おわりに

なでしこで、パスカルの三角形を表示できた。
桁数を考慮せずに単純に半角空白1個を挟んで結合して表示しているので、最初のうちはそれっぽく見えるが、桁数がちょっと増えるとすぐ前の段の数値とそれを足した数値の位置が合わなくなり、見にくくなってしまう。
まあ、短時間で雑に作るならこんなもんか……