Apps

25 分の作業と 5 分の休憩を繰り返すポモドーロ・テクニックのタイマー。長さや自動で始めるかを変えられ、終えた作業の回数を日ごとに記録します。

• React
• TypeScript
• Web Audio API
• Notifications API

退職金の額と勤続年数から、退職所得控除と所得税・住民税を差し引いた手取りを計算します。iDeCo の一時金と受け取る時期による税金の違いも比べられます。

• React
• TypeScript
• 退職所得控除

毎月の積立額と想定利回りから将来の資産額を計算し、目標額から必要な積立額も逆算できます。元本と運用益の推移をグラフと表で確認できます。

• React
• TypeScript
• SVG

年収と家族構成から、2026 年のふるさと納税で自己負担 2,000 円に収まる寄附額の目安を計算します。社会保険料や各種控除を入れた詳しい計算もできます。

• React
• TypeScript

月給と賞与から、社会保険料・所得税・住民税を差し引いた 2026 年の手取りを計算します。都道府県別の健康保険料率と家族構成を反映し、毎月・賞与・年間の内訳を確認できます。

• React
• TypeScript

借入額・金利・返済期間から毎月の返済額と総返済額を計算します。元利均等と元金均等の比較や、繰上返済（期間短縮型・返済額軽減型）で減る利息も確認できます。

• React
• TypeScript
• SVG

年収と掛金から、iDeCo で毎年減る所得税・住民税を計算します。受け取るまでの節税額の合計や運用益、一時金で受け取るときの税金も確認できます。

• React
• TypeScript

毎月の積立額と想定利回りから、新NISAで積み立てたときの将来の資産額を計算します。積立額の合計が生涯投資枠の1,800万円に達したら積立をやめ、その後は運用だけを続けます。

• React
• TypeScript
• SVG

働いた期間と平均年収から、老齢基礎年金と老齢厚生年金の見込み額を令和 8 年度の額で計算します。60〜75 歳のどこから受け取るかで変わる年金額と、総額が逆転する年齢をグラフで比べられます。

• React
• TypeScript
• SVG

5 台のノードがリーダーを選び、ログを複製してコミットする様子を、メッセージの動きで見せます。ノードの停止やネットワークの分断、メッセージの損失を起こして、Raft がどう立ち直るかを確かめられます。

• React
• TypeScript
• SVG
• Raft
• 離散イベントシミュレーション

巡回セールスマン問題の経路を、選択・交叉・突然変異で世代ごとに改良していく様子を見せます。交叉や選択の方法、突然変異の確率を変えて、結果の違いを比べられます。

• React
• TypeScript
• SVG
• 遺伝的アルゴリズム
• 巡回セールスマン問題

平面上の 2 種類の点を分けるニューラルネットワークが、学習につれて境界を形づくっていく様子を見せます。層やニューロンの数・入力の特徴・活性化関数・学習率を変えて、各ニューロンが何を捉えているかを確かめられます。

• React
• TypeScript
• Canvas
• 誤差逆伝播法

画像が JPEG になるまでの色の変換・8×8 の DCT・量子化・ハフマン符号を、ブロックごとに見せます。品質や色差の間引き方を変えて、ファイルの大きさと画質の関係や、ブロックノイズが出るしくみを確かめられます。

• React
• TypeScript
• Canvas
• DCT
• ハフマン符号

ばね・二重振り子・惑星の軌道・三体問題を、オイラー法・シンプレクティック・オイラー法・速度ベルレ法・ルンゲ＝クッタ法で同時に動かします。エネルギーのずれのグラフで計算の誤差を比べ、カオスの初期値敏感性も確かめられます。

• React
• TypeScript
• Canvas
• 数値積分

参照カウント・マーク&スイープ・マーク&コンパクト・コピー GC・世代別 GC が、ヒープの上でゴミを見つけて回収する様子を 1 手ずつ見せます。循環参照や断片化、短命なオブジェクトの多いプログラムで方式ごとの違いを比べられます。

• React
• TypeScript
• SVG
• 三色マーキング

正規表現を NFA（トンプソンの構成法）・DFA（部分集合構成法）・最小 DFA に変換して状態遷移図を描き、文字列を 1 文字ずつ照合する様子を見せます。バックトラック型のエンジンで時間が爆発する ReDoS の例も比べられます。

• React
• TypeScript
• SVG
• オートマトン

二分探索木・AVL 木・赤黒木・B 木・二分ヒープへの挿入・削除・探索を、回転や分割を含めて 1 コマずつ見せます。同じキーを入れたときの木の高さや比較の回数も比べられます。

• React
• TypeScript
• SVG
• 平衡二分探索木

ランレングス・ハフマン符号・LZ77・LZW が文字列を縮めていく様子を 1 手ずつ見せます。ハフマン木や辞書ができていく様子と、方式ごとの圧縮率やエントロピーとの関係を確かめられます。

• React
• TypeScript
• SVG
• ハフマン符号
• LZ77

合成音・マイク・音声ファイルの音を FFT で周波数に分けて、波形・スペクトル・スペクトログラムで表示します。窓関数の違いや、標本化で起きるエイリアシングも確かめられます。

• React
• TypeScript
• Web Audio API
• Canvas
• FFT

バブル・挿入・マージ・クイックなど 7 種類のソートが配列を並べ替える様子を棒グラフのアニメーションで見せます。同じデータで並べて比べたり、1 手ずつ確かめたりできます。

• React
• TypeScript
• Canvas

マス目に壁や重いマスを描き、BFS・ダイクストラ法・A* など 5 種類の経路探索がゴールへの道を探す順番をアニメーションで見せます。迷路の自動生成や、同じマス目での結果の比較もできます。

• React
• TypeScript
• Canvas
• A*

穴掘り法・棒倒し法・クラスカル法・ウィルソン法など 10 種類のアルゴリズムで、迷路ができていく様子をアニメーションで見られます。同じシードで作った迷路の行き止まりの数や正解の道の長さを比べられます。

• React
• TypeScript
• Canvas
• Union-Find

点の集まりを k 個のクラスタに分ける k-means 法が、割り当てと中心の更新を繰り返して収束していく様子をアニメーションで見せます。初期化の方法による結果の違いや、エルボー法での k の選び方も確かめられます。

• React
• TypeScript
• Canvas
• k-means++

矩形波などの波形や手描きの絵を、回転する円（エピサイクル）の連なりで描きます。円の数を変えて元の形に近づいていく様子や、ギブズ現象を確かめられます。

• React
• TypeScript
• Canvas
• 離散フーリエ変換

SHA-256 がハッシュ値を作るまでの 64 ラウンドを 1 つずつ、RSA の鍵の生成・暗号化・復号を途中の計算ごとに見せます。1 ビットの違いで値が大きく変わる雪崩効果や、小さい鍵が素因数分解で破られる様子も確かめられます。

• React
• TypeScript
• BigInt
• SHA-256
• RSA

落ちてくる 7 種類のミノを回して並べ、横 1 列をそろえて消すパズル。ホールド・ネクスト・ゴーストがあり、T スピンや Back-to-Back も判定します。マラソンと 40 ラインの 2 つのモードで遊べます。

• React
• TypeScript
• Canvas
• SRS
• 7 種 1 巡

次のカードが表のカードより強いか弱いかを当てるトランプのゲーム。当てるたびに配当が 2 倍になり、続けるか受け取るかを選びます。残りの山札から計算した確率と、出たカードの枚数も表示できます。

• React
• TypeScript
• 確率
• 期待値

Windows のソリティアでおなじみのクロンダイク。1 枚めくり・3 枚めくりを選べて、ヒントや自動で仕上げる機能、めくる枚数ごとの記録もあります。

• React
• TypeScript
• Pointer Events

9 路盤の囲碁。モンテカルロ木探索で打つ 3 段階の強さの CPU、または 2 人で対戦できます。日本ルール・中国ルールの数え方、形勢判断とヒント、死に石の推定に対応しています。

• React
• TypeScript
• モンテカルロ木探索
• Web Worker

タイルを空きマスへ滑らせて、1 から順に並べ直すスライドパズル。3×3 と 4×4 で遊べ、IDA* が求めた最短の手順でヒントを出したり、自動で解いたりできます。

• React
• TypeScript
• IDA*
• パターンデータベース
• Web Worker

行と列の数字を手がかりにマスを塗り、隠れた絵を浮かび上がらせるパズル。10 枚の絵の問題と、5×5〜20×20 のランダムな問題で遊べ、どれも推理だけで解けます。

• React
• TypeScript
• 動的計画法
• 制約伝播

縦に立てた盤へ交互に駒を落とし、縦・横・斜めに 4 つ並べたら勝ち。3 段階の強さの CPU、または 2 人で対戦でき、各列の形勢も表示できます。

• React
• TypeScript
• αβ探索
• 置換表
• Web Worker

サイコロの目だけ駒を進め、先に 15 個すべてを上がらせたら勝ち。3 段階の強さの CPU、または 2 人で対戦でき、ダブリングキューブやギャモンの得点も扱います。

• React
• TypeScript
• 期待値探索

CPU 1〜5 人と対戦するノーリミットのポーカー。2 枚の手札と 5 枚の共通カードで役を作り、チップを奪い合います。モンテカルロ法で求めた勝率も表示できます。

• React
• TypeScript
• モンテカルロ法
• 役の判定

荷物を押して、すべてを印の付いた置き場に運ぶパズル。全 15 面で、何手でも戻せます。最少の押す回数を探すソルバーでヒントと自動で解く機能を備えています。

• React
• TypeScript
• A*
• デッドロック検出
• Web Worker

ディーラーと勝負するトランプのブラックジャック。6 デッキの靴で、ダブル・スプリット・サレンダー・保険が使えます。基本戦略のヒントとハイ・ロー法のカウントで練習できます。

• React
• TypeScript
• 基本戦略
• ハイ・ロー法

花札 48 枚で CPU と 1 対 1 で遊ぶこいこい。同じ月の札を合わせて取り、役ができたら「勝負」か「こいこい」かを選びます。CPU は 3 段階、3・6・12 か月の勝負が選べます。

• React
• TypeScript
• モンテカルロ法
• 役の判定

左右に動きながら降りてくる 55 体のインベーダーを、砲台で撃ち落とすシューティング。トーチカは弾で削れ、ときどき UFO も現れます。難しさは 3 段階です。

• React
• TypeScript
• Canvas
• ドット絵
• 衝突判定

縦・横・斜めに石を 5 つ並べたら勝ち。3 段階の強さの CPU、または 2 人で対戦でき、禁じ手のある連珠ルールも選べます。

• React
• TypeScript
• 四追い探索

餌を食べるたびに伸びていく蛇を操って、壁や自分の体にぶつからないように進むアクションゲーム。キーボードでもスワイプでも遊べます。

• React
• TypeScript
• Canvas

CPU 3 人と対戦するトランプの大富豪。革命・8 切り・都落ち・スート縛り・スペ3返しの公式ルールで、ラウンドを重ねて通算成績を競います。

• React
• TypeScript
• ヒューリスティック評価

7 から順に、同じスートで隣の数のカードを出していくトランプゲーム。3 段階の強さの CPU と 2〜4 人で対戦でき、A と K をつなぐトンネルも選べます。

• React
• TypeScript
• ヒューリスティック

9×9 の盤で指す平手の本将棋。3 段階の強さの CPU、または 2 人で対戦できます。二歩・打ち歩詰めなどの反則や千日手も判定します。

• React
• TypeScript
• αβ探索
• Web Worker

同じ数字のタイルを重ねて合体させ、2048 のタイルを目指すパズル。キーボードでもスワイプでも遊べ、1 手だけ戻すこともできます。

• React
• TypeScript
• CSS Transitions

パドルでボールを打ち返し、ブロックをすべて壊すアクションゲーム。固いブロックのある 5 つのステージを、マウス・タッチ・キーボードで遊べます。

• React
• TypeScript
• Canvas
• 衝突判定

円盤を 1 枚ずつ動かし、小さい円盤の上に大きい円盤を置かずに、すべて右の棒へ移すパズル。3〜8 枚で遊べ、ヒントや自動で解く機能で最短手順も確かめられます。

• React
• TypeScript
• 再帰
• Pointer Events

裏向きに並べたトランプを 2 枚ずつめくり、同じ数字をそろえるゲーム。記憶力を 3 段階から選べる CPU との対戦のほか、ひとりで回数と時間に挑戦したり、2 人で対戦したりできます。

• React
• TypeScript
• 記憶のモデル化

8×8 の盤で指す国際ルールのチェス。3 段階の強さの CPU、または 2 人で対戦できます。キャスリング・アンパッサン・昇格に対応し、棋譜を PGN 形式で保存できます。

• React
• TypeScript
• αβ探索
• Web Worker

縦・横・3×3 のブロックに 1〜9 の数字を 1 つずつ入れるパズル。かんたん・ふつう・むずかしいの 3 段階で、毎回新しい問題を作ります。

• React
• TypeScript
• バックトラック

コンウェイのライフゲーム。セルを描いたり有名なパターンを呼び出したりして、生命の移り変わりを観察できます。

• React
• TypeScript
• Canvas

数字を手がかりに地雷を避けてすべてのマスを開くパズル。初級・中級・上級の 3 段階で遊べます。

• React
• TypeScript

4 つのフリーセルを使って、すべてのカードを組札に積み上げるソリティア。Windows 版と同じ番号の配り方で遊べます。

• React
• TypeScript
• Pointer Events

3 段階の強さの CPU、または 2 人で対戦できるリバーシ。

• React
• TypeScript
• αβ探索