Blog

技術実装の裏側、設計判断、使っている道具について。

トピック別に読む

関連する記事をシリーズとしてまとめています。まずは興味のあるテーマの入口からどうぞ。

クリエイティブコーディング

12 件

ブラウザでの数学的シミュレーション・自然現象の可視化・生成アートの実装技法

シリーズを読む →

ブラウザゲーム開発

7 件

ゲームループ・衝突判定・経路探索・迷路生成など、ブラウザゲーム開発の実装パターン集

シリーズを読む →

Canvas vs DOM・インタラクティブUI

5 件

CanvasとDOMの使い分け・CSSインタラクション・カスタム物理エンジン・ポートフォリオ設計

シリーズを読む →

Claude Code活用

3 件

Claude Codeを使った大規模リファクタリング・CLAUDE.md設計・セッション管理の実践知

シリーズを読む →

Web Audio・サウンドプログラミング

3 件

Web Audio APIによる音響合成・楽器実装・物理シミュレーション参考文献

シリーズを読む →

TanStack Start × Cloudflare

4 件

TanStack StartとCloudflare Pagesを組み合わせたフルスタック構成・Tailwind v4移行

シリーズを読む →

4 minSEOIndexNowCloudflare

IndexNow × Cloudflare Pages — sitemap.xml を即時インデックス通知する運用

sitemap.xml をソースに IndexNow へ一括送信する実装と運用。Cloudflare Pages のデプロイ後に URL を確実に通知して、新規記事の発見を最短化する。

9 minSimulationAgent-BasedCanvas API

アリの巣シミュレーション — フェロモンで創発する群知能

フェロモンベースの経路探索をエージェントベースモデルで実装し、アリの群知能をブラウザで再現する。蒸発・拡散パラメータの調整で創発パターンがどう変わるかも検証した。

🐜Ant Farm🐦Boids🦠Game of Life
16 minWeb Audio APIMusicBooks

音のプログラミングで参考にしたもの — Web Audio APIと音楽理論の接点

Piano、Guitar、Thereminなど11個の音楽コンポーネント実装で学んだWeb Audio APIの勘所と、音プログラミングで参考にした書籍・リソース集。

🎹Piano🎸Guitar📡Theremin
9 minCanvas APIGameCollision

ブラウザで作るBreakoutゲーム — Canvas APIで反射角とレベルデザインを攻略する

Canvas APIとrequestAnimationFrameでBreakoutゲーム（ブロック崩し）を実装する。パドルの反射角計算、ブロック配置のレベルデザイン、スコア管理の勘所をコンポーネント実装を通じて解説。

🧱Breakout🏓Pong🪩Pinball
13 minDeveloper ExperienceToolsWorkflow

ブラウザゲーム開発者の作業環境 2026 — 203個のコンポーネントを支えるツールチェーン

203個のブラウザゲーム・インタラクションを開発する環境を紹介。Claude Code中心のワークフロー、bun + Biome + Vite、Git Worktreeによる並列開発。

💧Fluid Simulation🪩Pinball🎹Piano
22 minReactCanvas APIDebug

203個のCanvas/DOMコンポーネントで踏んだバグ Top 10 — 実データから見えたパターン

203個のインタラクティブコンポーネントを開発する過程で実際に遭遇したバグをgit履歴から集計し、頻出パターンと修正手法をTop 10形式でまとめた。

💧Fluid Simulation🪩Pinball🦠Game of Life
9 minClaude CodeAI DevelopmentReact

Claude Codeで200コンポーネントを一括修正した実録 — バグ分類・修正・検証の全工程

203個のインタラクティブコンポーネントに潜むバグを、Claude Codeで6コミット・100+ファイル一括修正した実践記録。分類・テンプレート化・検証の全工程を公開。

💧Fluid Simulation🎹Piano🏃Maze Runner
12 minClaude CodeAI DevelopmentDeveloper Experience

CLAUDE.mdを育てる — AIコラボレーション設定ファイルの3ヶ月の変遷

323コミットのプロジェクトでCLAUDE.mdを3ヶ月間更新し続けた記録。効いたルール、効かなかったルール、そして「助言的」設定の限界。

💧Fluid Simulation🧱Breakout🦠Game of Life
15 minCanvas APIReactPerformance

Canvas vs DOM — 203個のコンポーネントで選んだ基準と実測データ

203個のインタラクティブコンポーネントをCanvas APIとDOMに振り分けた判断基準を、実例と実測データで解説する。

🫧Bubble Wrap💧Fluid Simulation🪨Gravity Drop
10 minMathematicsAudioCanvas API

Fourier級数で音を作る — 倍音構成と波形合成の実装

矩形波・鋸歯状波・三角波をFourier級数で合成し、エピサイクルで可視化する。倍音の加算が音色をどう変えるか、Web Audio APIによる音合成の実装を通じて体感する。

〰️Fourier Series🎤Sound Waves📟Oscilloscope
16 minPhysicsArchitecturePerformance

自前物理エンジン180行の限界点 — Matter.jsを捨てた理由と、カバーできなかったこと

physics.tsの166行で2D物理エンジンを自作し、Matter.jsの300KBを4KBに削減した。重力・衝突・バウンドに絞り、拘束・摩擦・スタッキングを諦めたトレードオフを解説する。

🪨Gravity Drop⚫Newton's Cradle🎱Elastic Collision
15 minPhysicsChaosCanvas API

二重振り子のカオスを数値で見る — RK4積分と初期値鋭敏性の実装

二重振り子シミュレーションの実装を通じて、ラグランジュ力学による運動方程式の導出、RK4積分の安定性、NaN対策、初期値鋭敏性の可視化までを解説する。

🔗Double Pendulum🔔Pendulum Wave🦋Lorenz Attractor
14 minAlgorithmMazeVisualization

迷路生成アルゴリズム比較 — 再帰バックトラッキング・Kruskal・Primが作る迷路の違い

再帰バックトラッキング、Kruskal法、Prim法など複数の迷路生成アルゴリズムの特性と、生成される迷路の構造的な違いを比較する。

🏃Maze Runner🏰Maze 3D🟢Tilt Maze
12 minClaude CodeAI DevelopmentProductivity

1セッション1タスク — Claude Codeのコンテキスト管理で学んだ原則

Claude Codeで203コンポーネントを開発する中で、「1セッション1タスク」が最も生産性に効いた原則だった。コンテキスト枯渇の実例と対策。

💧Fluid Simulation🏃Maze Runner🫧Bubble Wrap
12 minBooksPhysicsMathematics

物理シミュレーションに影響を与えた3冊 — 203個の実装を支えた知識の源泉

203個のインタラクティブデモの裏にある物理・数学の知識は、主に3冊の書籍から得た。各書籍のどの章がどの実装に活きたかを具体的に紹介する。

💧Fluid Simulation🔗Double Pendulum🪐N-Body
12 minPhysicsCanvasGame Development

ピンボールの物理シミュレーション — フリッパー・バンパー・重力をCanvas APIで実装する

ピンボールの物理演算をCanvas APIで実装する。フリッパーの回転運動、バンパーの反発、重力とボールの挙動を解説。

🪩Pinball🧱Breakout⚫Newton's Cradle
14 minMathematicsSimulationCanvas API

Reaction-Diffusionのパラメータ空間を探索する — Gray-Scottモデルの4つの顔

Gray-Scott Reaction-Diffusionモデルのfeed/kill率を変えると、斑点・縞模様・珊瑚・細胞分裂と全く異なるパターンが現れる。200×200グリッドでの実装と探索記録。

🧫Reaction Diffusion🧬Particle Life💎Crystal Growth
10 minSimulationCellular AutomataComplexity

砂山モデルと自己組織化臨界 — BTWモデルをブラウザで動かす

Bak-Tang-Wiesenfeld砂山モデルの実装を通じて、自己組織化臨界現象をブラウザで可視化する。べき乗則に従う雪崩分布の計測とフラクタルパターンの生成過程を解説。

🏔️Sand Pile⏳Sand Fall🦠Game of Life
14 minTailwind CSSCSSDark Mode

Tailwind CSS v4移行で壊れたもの — @custom-variantとダークモードの実装記録

Tailwind CSS v3からv4への移行で踏んだ破壊的変更と、@custom-variantを使ったダークモード/ライトモードの実装パターン。

🫧Bubble Wrap🪨Gravity Drop🎛️Fidget Zone
18 minTanStack StartCloudflareVite

TanStack Start × Cloudflare Pages — 詰まった全記録と解決策

CF PagesにTanStack Start v1をデプロイする過程で踏んだ5つの地雷 — Viteプラグイン順序、ServerFnバグ、FOUC対策など — の回避策を実コードで解説する。

🧫Reaction Diffusion☀️Solar System🎹Piano
11 minArchitectureTanStack StartNext.js

Next.jsを選ばなかった理由 — TanStack Startを選んだ判断基準

203個のインタラクティブコンポーネントを載せるポートフォリオで、Next.jsではなくTanStack Start + Cloudflare Pagesを選んだ技術選定の記録。

💧Fluid Simulation🎹Piano🧱Breakout
4 minTypeScriptPhysicsCanvas API

ブラウザで動く物理エンジンを自前で書いた話

ポートフォリオサイトにMatter.jsを使わず約180行の軽量物理エンジンをTypeScriptで自作した経緯と設計判断。バンドルサイズ300KBを4KBに削減しつつ60fpsを維持した手法を解説。

🪨Gravity Drop🎱Elastic Collision🫧Bubble Wrap
6 minCanvas APIPerformanceAnimation

Canvas APIで60fpsパーティクル — 200個でもヌルヌル動く設計

requestAnimationFrame、固定タイムステップ、DPI対応、空間分割を駆使して、Canvas APIで200個以上のパーティクルを60fpsで動かす設計手法を解説。

🎆Fireworks🧬Particle Life🎨Gravity Painter
7 minWeb Audio APITypeScriptSound

Web Audio APIでブラウザ楽器を作った — Piano・Guitar・Kalimbaの実装

Web Audio APIのOscillatorNode、GainNode、ADSRエンベロープを使い、ブラウザで演奏可能なPiano・Guitar・Kalimbaを実装した技術解説。

🎹Piano🎸Guitar🎵Kalimba
8 minSimulationPhysicsCanvas API

ブラウザで流体シミュレーション — 100×60グリッドで実現するリアルタイム演算

Navier-Stokes方程式を簡略化し、100×60のグリッドでリアルタイムに流体を動かす。拡散・移流・圧力ソルバーの実装詳細。

💧Fluid Simulation🔧Fluid Pipes💧Water Ripple
7 minMathCanvas APIFractal

フラクタルの数学をブラウザで描く — マンデルブロ集合からバーンズリーのシダまで

複素数反復、エスケープタイムアルゴリズム、IFS（反復関数系）、再帰描画を使い、ブラウザでフラクタルを描画する実装解説。

🔍Mandelbrot🌿Barnsley Fern🌳Fractal Tree
7 minProcedural GenerationCanvas APIMath

Perlinノイズで自然な地形を生成する — ランダムなのに美しい理由

勾配ノイズの数学的な仕組みからオクターブ合成、Canvas上での3Dメッシュ描画まで、Perlinノイズによる自然な地形生成をステップごとに実装・解説する。

🏔️Perlin Landscape🌳Fractal Tree🌟Starfield
7 minPhysicsTypeScriptGame Development

衝突判定の基礎 — 円と矩形、そしてインパルスベースの衝突応答

physics.tsの実装を解説しながら、円同士・円と矩形の衝突判定アルゴリズム、反発係数によるバウンド制御、インパルスベースの衝突応答の数学的背景を掘り下げる。

🎱Elastic Collision🪩Pinball🧱Breakout
6 minCSSUIAccessibility

CSSだけで作るインタラクティブUI — transform, transition, custom propertiesの実践

FidgetSpinner、InfiniteKnob、ToggleSwitchなどのDOM+CSSベースのインタラクティブUIで活用したtransform、transition、custom propertiesのCSS技法を実例で解説する。

🎛️Fidget Zone🔄Infinite Knob🫠Lava Lamp
6 minPhysicsSimulationCanvas API

波動方程式をブラウザで可視化する — 干渉・回折・共鳴の世界

1D・2D波動方程式を差分法で実装し、干渉・回折・共鳴パターンをCanvasで可視化する。WaveInterference、WaveEquation、ChladniPlateの描画手法と物理の対応を解説。

🌊Wave Equation🌊Wave Interference🔬Chladni Plate
9 minAlgorithmVisualizationTypeScript

探索アルゴリズムを可視化する — A*・BFS・DFSが迷路を解く様子

MazeRunnerコンポーネントで実装したA*、BFS、DFSの探索過程を可視化する技法と、各アルゴリズムの比較を解説する。

🏃Maze Runner👻Pac-Man🐍Snake
8 minSimulationAlgorithmCanvas API

セルオートマトンの世界 — ライフゲームから波動関数崩壊まで

ライフゲーム、WaveFunctionCollapse、SandFallの実装を通じて、ルールベースのセルオートマトンの設計パターンとUint8Arrayによるグリッド最適化手法を解説する。

🦠Game of Life🧩WFC Generator⏳Sand Fall
8 minTypeScriptGame DevelopmentReact

TypeScriptで型安全なゲームループを設計する — Snake・Tetrisの状態管理

Snake、Tetris、Breakoutの実装を通じて、TypeScriptの型システムを活用したゲーム状態管理とフレームレート制御を解説する。

🐍Snake🟦Tetris🧱Breakout
7 minPhysicsSimulationCanvas API

N体問題をブラウザで — 万有引力シミュレーションの実装

NBody、SolarSystem、GravityWellコンポーネントで使った万有引力計算、ベクトル演算、積分法、軌道描画の実装詳細。

🪐N-Body☀️Solar System🕳️Gravity Well

Blog のよくある質問

このブログで何を読めるか、どこから回遊すると深く楽しめるかを短くまとめています。

sakimyto.com の Blog では何が読める？

Canvas API、物理シミュレーション、Web Audio、React パフォーマンス、TanStack Start、Cloudflare Pages など、実際にこのサイトで使っている実装を題材にした技術記事をまとめています。

人気トピックを見る
まず最初に読むならどこから？

一覧上部の Topic Clusters から入るのが最短です。興味に近いトピックページへ進むと、関連する記事をシリーズとして追えます。

/start を開くBlog 一覧を見る
記事を読んだあとに、実際に触れるデモはある？

あります。多くの記事は Play 内のインタラクションやミニゲームとつながっていて、一覧や記事ページからそのまま触れます。

Play へArcade を見る
道具や制作環境の比較も見たいときは？

Picks に、開発で実際に使っているツールや本の比較記事をまとめています。Blog と Picks は相互に行き来できるようにつないでいます。

Picks を見る