本文へスキップ
takushio2525

ElecLab の紹介:LED を光らせる配線パズルと、本物の回路計算で判定する作り

( 更新)9 分で読めます

ElecLab は、電池・LED・抵抗・スイッチを盤面に置いて線でつなぎ、LED を光らせる回路パズルだ。「実行!」を押すと、組んだ回路を実際に計算して、LED が光ったか・焼けていないか・ショートしていないかで結果が決まる。数式は画面に出さず、遊びながら「電気が流れる条件」や「抵抗で電流を抑える」感覚を覚えられるように作った。

ブラウザだけで無料で遊べて、インストールもログインも要らない。PC でもスマホでも動き、日本語と英語に対応している。盤面は、紙に鉛筆で描いたような見た目にしている。

遊び方

  1. https://eleclab.takushio2525.com/ を開き、「はじめる」か「ステージをえらぶ」を押す。
  2. パレットの部品を押してから、盤面のマスを押して置く。最初から置いてある部品は、動かしたり回したりはできるが消せない。
  3. 部品の端子(小さな ◯)を押すと線を引き始める。曲げたいところを押すと角が置け、別の端子か線の上で終わる。線の途中で終えると T 字につながって黒丸が付く。交差しているだけの線はつながっていない。
  4. 「実行!」を押して電気を流す。流している間は回路を変えられないので、直すときは「停止」で編集に戻る。

置いた部品や線はドラッグで動かせて、取り消し・やり直し・リセットもある。

PC ではキーボードでも操作できる。W で線、R で回転、M で移動、G で線ごと移動、Del で削除、⌘Z / ⌘⇧Z で取り消しとやり直し、Enter で実行、Home で全体表示、H でヒント。ホイールで拡大縮小、右ドラッグで表示を動かせる。

スマホでは、指を離したところがタップになり、10px 以上動かすとドラッグになる。2 本指で拡大縮小と表示の移動ができ、線を引いている間は画面の下に「向き」「1 つ戻す」「やめる」「確定」のボタンが出る。

クリアの条件

各ステージには、光らせる LED や、流す電流の範囲のような「目標」のチェックリストがある。それとは別に、どのステージでも「ショートさせない」、LED のあるステージでは「LED を焼かない(25 mA まで)」という安全の条件が付いている。

「実行!」を押すと、まず安全の条件を見て、破っていればその場で失敗になる。次にチェックリストを埋めていき、全部そろえばクリアだ。スイッチのあるステージでは、電気を流したままスイッチを切り替えて、それぞれの状態で目標を満たしていく。

LED は流れる電流で見た目が変わる。5 mA 以上で「点灯」、0.1 mA から 5 mA の間は「うっすら」、25 mA を超えると「焼けた」になる。焼損やショートを起こすと、最初の 1 回だけ「現実なら、LED が焼けて煙が出ていました」のような注意が出て、2 回目からは「L1 が焼けた(100 mA。上限 25 mA)」のように理由だけが短く出る。

たとえばステージ 1-4「抵抗を選ぼう」は、5V の電池と LED に、220Ω・470Ω・1kΩ のうちどれか 1 本の抵抗をつないで、LED に 10 mA 以上流すステージだ。ヒントには「電流はおよそ(5V − 2V)÷ 抵抗 で決まります」とある。この式で見積もると、220Ω なら約 14 mA、470Ω なら約 6 mA、1kΩ なら約 3 mA なので、条件を満たすのは 220Ω になる。こういう見積もりを、実際に組んで光らせながら確かめられる。

11 の章と 62 のステージ

いま遊べるのは第 1 章から第 11 章までの 62 ステージだ。ステージにロックは無く、どこからでも始められる。選択画面では、まだクリアしていない最初のステージに「つぎはここ」が付く。

章 ステージ数 扱うこと
第 1 章 はじめての回路 5 閉回路、抵抗で電流を制限する、スイッチ、オームの法則の入口、2 つの LED の並列と直列
第 2 章 並列と直列 6 直列と並列の違い、明るさを範囲に収める、色によって必要な電圧が違う、合成抵抗、電力
第 3 章 スイッチと条件 5 直列のスイッチ(AND)、並列のスイッチ(OR)、プッシュボタン、3 路スイッチ、信号機
第 4 章 電圧を読む 8 電圧計のつなぎ方、分圧、可変抵抗、プルダウンとプルアップ、サーミスタと CdS でセンサーを読む
第 5 章 コンデンサ 5 電気を貯める、ゆっくり点ける、残光、時定数(τ = RC)、2 段階で点ける
第 6 章 モーター 5 電流の向きと回る向き、電圧と回転数、押さえて止めたときの電流(ロック電流)、逆回転、2 速の切り替え
第 7 章 トランジスタと FET でスイッチする 6 逆接続の保護、ピンの電流では足りない負荷、浮いたゲート、3.3V で動く FET の選び方、リレー、+ 側で切る
第 8 章 モーターを制御する(PWM と H ブリッジ) 6 ロック電流に耐える、PWM で速さを変える、ハーフブリッジ、H ブリッジで正転と逆転、12V の H ブリッジ、モータードライバ IC
第 9 章 デジタル IC で出力を増やす(7 セグと 74HC595) 6 7 セグを光らせる、IC の電源と入力、吐き出しと吸い込み、シフトレジスタで 2 本の線から 8 本の出力、ラッチ、7 セグに数字を送る
第 10 章 アナログ IC でセンサーを読む 5 コンパレータで電圧を比べる、明るさがゆれてもちらつかない街灯、タイマー IC 555 で点滅、オペアンプで小さな信号を大きく、止まったモーターを電流で見つけて切る
第 11 章 電源をつくる 5 9V 電池から 5V を作る、レギュレータの熱とドロップアウト、USB と電池の切り替え、交流を直流に、平滑してから安定化

第 4 章からは、マイコンの入力ピンも部品として出てくる。押しボタンの状態を HIGH / LOW で読んだり、温度や明るさで変わる電圧を読んだりと、電子工作でマイコンにセンサーをつなぐときの考え方につながる内容にしている。第 6 章からは向きが逆になって、マイコンのピンからモーターやリレー、7 セグのような大きな負荷や表示器を動かす出力側の回路を扱う。第 10 章ではセンサーを読む側に戻ってアナログ IC を使い、第 11 章ではそれまでの回路を動かす電源そのものを作る。

ゲームの画面には式を出していないが、各章の裏にある電気の話は、ElecLab の中の「回路のしくみ」に図と計算つきでまとめてある(いまは第 1〜5 章)。LED に付ける抵抗の値の決め方(オームの法則)、直列と並列で電流と電圧がどう変わるか、スイッチを直列にすると AND、並列にすると OR になる理由、分圧回路とプルアップ・プルダウン、コンデンサの時定数 τ = RCを章ごとに読める。ステージの答えは書いていないので、詰まったときに先に読んでも遊ぶ楽しみは減らない。

進み具合の保存

ログインせずに遊ぶと、クリアしたステージと最後に遊んだステージはブラウザの中にだけ保存され、サーバーには何も送らない。

Google でログインすると、同じ進み具合をサーバーにも保存して、別の端末から続きを遊べる。ゲストで遊んだ分もそのまま引き継がれる。サーバーに置くのは表示名・メールアドレス・Google アカウントの識別子と進み具合だけで、アカウントはいつでも削除できる。詳しくは ElecLab のプライバシーポリシーにある。遊んでいる途中の盤面は保存しないので、ステージを離れると組みかけの回路は消える。

回路の計算の作り

ここからは中身の話をする。

「実行!」を押したときの計算は、電子回路のシミュレータで広く使われている修正節点解析(MNA)を自前で書いている。回路のつながりから、各ノードの電圧と電池に流れる電流を未知数にした連立方程式を立て、LU 分解で解く。ノードは多くても数十なので、行列は疎行列にせず、そのまま密行列で持っている。線や閉じたスイッチでつながった端子は、先に Union-Find で同じノードにまとめる。電池のプラスとマイナスが同じノードに入ったら、それがショートだ。

難しいのは LED だった。本物のダイオードは電流が電圧の指数関数で増えるので、そのまま解こうとすると反復計算が必要になる。この作品のもとになった Unity 版では、Shockley の式を Newton 法で解いていて、指数関数の桁あふれや収束しない回路に悩まされた。

そこで ElecLab では、LED を区分線形のモデルにした。消えている LED は線が切れているのと同じ、点いている LED は「順方向電圧(赤なら 2.0V)の電池と 10Ω の抵抗の直列」として扱う。まずどの LED が点いているかを仮定して解き、仮定と食い違う LED を、食い違いの大きいものから 1 つずつ入れ替えて解き直す。入れ替えは最大 256 回で、試した組み合わせは覚えておき、それでも決まらなければ LED 12 個までは全部の組み合わせを試す。計算の回数に必ず上限があるので、どんな配線でも止まらずに答えが返る。

第 5 章のコンデンサは、1 ミリ秒ずつ時間を進めて解いている(後退オイラー法)。抵抗とコンデンサの回路で、教科書の式で出した充電の曲線と 1% 以内で一致することをテストで確かめた。ランダムに作った 2000 通りの配線でも計算が例外で落ちないことも、テストで見ている。

どれも、遊びやすさを優先した近似だ。電池は内部抵抗の無い理想的なものとして扱い、センサーの自己発熱や反応の遅れは入れていない。

盤面は Canvas ではなく SVG で描いた。手書き風の線をベクターのまま描けること、画面の大きさが変わっても端子の当たり判定がずれないこと、端子を DOM の要素にできるのでアクセシビリティを作りやすいこと、が理由だ。部品は数十個しか無いので、Canvas の描画の速さが効く場面もない。

回路のモデル・ソルバ・ステージのデータは、React にもブラウザの DOM にも依存しない TypeScript として分けてあり、リンターでそれを強制している。いずれ Unity(C#)へそのまま移せるようにするためだ。

公開したあとに直したこと

この記事を書いた 2026 年 9 月 28 日の時点では、iPhone の Safari でパレットの部品を盤面に置こうとすると盤面が拡大されて置けない不具合があった(ステージ 4-5 で再現)。9 月 29 日の v1.9.0 で直してある。

記事を書いたあと、10 月に第 10 章と第 11 章が加わって 62 ステージになったので、章の数と表をそれに合わせた。