Skip to content

Optimize board rendering#26

Merged
kg0816 merged 5 commits intomainfrom
performance_improvement
Nov 13, 2025
Merged

Optimize board rendering#26
kg0816 merged 5 commits intomainfrom
performance_improvement

Conversation

@kg0816
Copy link
Contributor

@kg0816 kg0816 commented Nov 12, 2025

・ボードの差分のみが更新されるように変更
・セルサイズが更新されないバグの修正
・ユーザーが変更できる変数をcellSizeそのものでなくcellScaleに変更(boardSizeの変更に伴うcellSizeの自動更新とユーザーによる入力の衝突の回避)

@aster-void
Copy link
Contributor

aster-void commented Nov 12, 2025

コードをリロードしたときはコードがすべて読み込み直されるので、毎回 cellSize を適用してやる必要はなさそう。多分こんなんで十分

//変数設定
let boardSize = 20; //盤面の大きさ(20x20)
const cellSize = 500 / boardSize;

@aster-void
Copy link
Contributor

aster-void commented Nov 12, 2025

編集可能性を上げるために、スタイルの確定を一箇所にまとめてやるといいと思う

function getStyle(cell) {
  return cell ? "black" : "white";
}

@aster-void
Copy link
Contributor

結局やってることとしては DOM 要素を使いまわしてるということなので、初期化と更新は完全に別の処理として、

function rerender() {
  for (let i = 0; i < boardSize; i++) {
    for (let j = 0; j < boardSize; j++)
      const nextColor = board[i][j] ? "black" : "white";
      const el = table.children[i].children[j].children[
      if (el.style.backgroundColor != nextColor)
        el.style.backgroundColor = nextColor;
      }
    }
  }
}

というように書いてやるのがシンプルかも!

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Nov 13, 2025

Deploying life-code with  Cloudflare Pages  Cloudflare Pages

Latest commit: a6c1e2d
Status: ✅  Deploy successful!
Preview URL: https://df4ae507.life-code.pages.dev
Branch Preview URL: https://performance-improvement.life-code.pages.dev

View logs

function getStyle(cell) {
return cell ? "black" : "white";
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これは編集しやすいように上の方で定義してやるのがよいと思う

let boardSize = 20; //盤面の大きさ(20x20)
let cellScale = 1.0; //セルの大きさの倍率

let cellSize = Math.floor(cellScale * DEFAULT_CELL_SIZE * (DEFAULT_BOARD_SIZE / boardSize)); //セルの大きさ(px)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#26 (comment)

これね

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cellSizeを直接いじられるとiframe内に収めるための自動調整(DEFAULT_CELL_SIZE * (DEFAULT_BOARD_SIZE / boardSize))と衝突しちゃうのでできるだけcellScaleをいじってほしいな、という感じの実装です。
cellScaleをいじるだけなら盤面がはみ出さないようになってます。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

そっちではなく、 DEFAULT_BOARD_SIZEDEFAULT_CELL_SIZE が必要でないんでない?という話

cellScale もいじられると自動調整がうまく働かなくなりそうなので、 iframe の許容横幅 (コード例では500) から直接計算するのが良さそう

Copy link
Contributor

@aster-void aster-void left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

よさそう
好きなタイミングでマージしてね

@kg0816 kg0816 merged commit da0b9d4 into main Nov 13, 2025
4 checks passed
@kg0816 kg0816 deleted the performance_improvement branch November 13, 2025 12:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

Comments