はじめに
こんにちは！ヒヨドリです
HTML/JS/CSS 高機能な、論理回路シミュレータを作りました！
AIも活用しました！
github page で公開しているのでぜひ何か作ってみてください！
リンクはこちら
📖 使い方マニュアル
ブラウザだけで動作する高機能論理回路シミュレーターです。
インストール不要で、直感的な操作で回路設計からCPU作成まで行えます。
🖱 基本操作
マウスとキーボードを使って操作します。
| 操作 | 説明 |
|---|---|
| ドラッグ & ドロップ | 左サイドバーから部品をキャンバスへ配置します。 |
| 左クリック | 部品の選択、スイッチ/ボタンのON/OFF操作。 |
| 右クリック | 部品やワイヤーの削除。 |
| ドラッグ (部品上) | 部品の移動。 |
| ドラッグ (ピン上) | ワイヤー（配線）の引き出し・接続。 |
| ホイール | 画面の拡大・縮小（ズーム）。 |
| スペース + ドラッグ | 画面の移動（パン）。中クリックドラッグでも可能です。 |
| Shift + ドラッグ | 範囲選択（矩形選択）。まとめて移動やコピーができます。 |
⌨️ ショートカットキー
作業効率を上げるためのショートカットキーです。
-
Ctrl + Z: 元に戻す (Undo) -
Ctrl + C: 選択した部品をコピー -
Ctrl + V: ペースト -
Delete/BackSpace: 選択した部品・ワイヤーの削除 -
E: プロパティ編集 (重要：ラベル変更、ROMデータ編集、サイズ変更など) -
C: 選択したワイヤーの色を変更 -
Esc: 選択解除、ワイヤー配線の中止
🛠 主な機能解説
1. 配線のしかた
部品の端にある「丸い点」が接続ピンです。
- 出力ピン（右側・凸） からドラッグを開始します。
- 入力ピン（左側・凹） でドロップすると線が繋がります。
- 配線を消すときは、ワイヤーの上で右クリックするか、選択してDeleteキーを押します。
- 途中で配線を曲げたい場合は、「その他」カテゴリにある**中継点 (Joint)**を使用してください。
2. 部品の設定変更（プロパティ）
部品を選択してキーボードの E を押すと、部品に応じた詳細設定が可能です。
- スイッチ/キー: キーボードの割り当てキー変更、トグルモード切替。
- ROM: 16進数データの編集（スペース区切りで入力）。
- 7セグ/マトリクスLED: 表示桁数や、行・列のサイズ変更。
- クロック/遅延: 周波数(Hz)や遅延時間(ms)の変更。
- ラベル: 部品に表示されるテキストの変更。
3. カスタムICの作り方（回路の部品化）
作った回路を一つのブラックボックス（ICチップ）として保存・再利用できる強力な機能です。
- IC化したい回路を作ります。
- 外部との接続点には**「IC作成用パーツ」カテゴリにある「入力ピン (Pin In)」「出力ピン (Pin Out)」**を使用してください。
- マウスドラッグで、IC化したい範囲をすべて選択状態にします。
- 左メニュー下の**「⚡ 選択範囲をIC化」**ボタンを押します。
- 名前を付けると、サイドバーの「ユーザー定義チップ」欄に新しいパーツとして追加されます。
4. 保存と共有
作成した回路はテキストデータとして扱えます。
- 「💾 保存 / 📂 開く」: ファイル（.json）としてPCに保存・読込ができます。
- 「📋 テキストデータ共有」: 回路データをJSONテキストとしてクリップボードにコピーします。SNSやチャットでの共有に便利です。
5. シミュレーション速度の変更
サイドバーにあるスライダーでシミュレーション速度を変更できます。
大規模な回路や、クロックを高速に動かしたい場合は x10 や x100 に設定してください。
📦 部品カテゴリ一覧
- IC作成用パーツ: 独自のICを作る時の入出力ポート。
- 入力 (INPUT): スイッチ、ボタン、キーボード、クロックなど。
- 出力 (OUTPUT): LED、7セグ、ブザー、RGBマトリクスLEDなど。
- 論理ゲート: AND, OR, NOT, NAND, XOR。
- メモリ / CPU: D/JKフリップフロップ、カウンタ、RAM/ROM、デコーダ。
- その他: ラベル、遅延素子(Delay)、中継点(Joint)。
おわりに
このツールは元々、「CPUの仕組みをブラックボックスなしで、ゼロから理解したい」という自分の学習用に作り始めたものです。
既存のシミュレーターはインストールが必要だったり、操作が複雑だったりすることが多かったため、**「URLを開くだけで誰でもすぐに実験できる環境」**を目指して、HTML1ファイル完結にこだわりました。
フレームワークを使わずにVanilla JSとCanvas APIだけで実装するのは泥臭い作業でしたが、その分、描画パフォーマンスのチューニングやデータ構造の設計など、Webフロントエンドの基礎体力をつける良い経験になりました。
電子工作の学習用としてはもちろん、パズル感覚で遊ぶだけでも楽しいと思います。
もし気に入っていただけたら、LGTM（いいね）やストックをいただけると開発の励みになります！
バグ報告や「こんな機能が欲しい」といったアイデアがあれば、コメント欄やGitHubのIssueでお気軽にお知らせください。
最後まで読んでいただきありがとうございました。
(この記事を書くのにもAIを活用しています)