tscircuit：TypeScriptで電子回路設計をコード化しGitで管理する革新的なOSSツール

この記事ではUIデザインに特化して解説します。デザインシステム・UI生成全般は デザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに完全解説 をご覧ください。

tscircuit概要：TypeScriptで電子回路設計を再発明する

tscircuit（GitHub Stars: 2,000超）は、TypeScriptとReactを使って電子回路設計をコードで記述できるオープンソースフレームワークです。従来の回路設計ツールといえばKiCad、Altium Designer、Eagle CADなど、専用GUIで図を描くものが主流でした。tscircuitはそのパラダイムを根本から覆し、「回路図もコードだ」という思想のもとで開発されています。

GitHubのリポジトリには Create real electronics with TypeScript and React という説明が付いています。Webフロントエンド開発者がJSXでUIを組み立てるように、電子回路のコンポーネントをTypeScriptのJSX構文で記述し、リアルタイムでブラウザ上に3Dプレビューとして表示できます。設計が完了したら、Gerberファイル（基板製造データ）やBOM（部品表）、Pick’n’Placeファイルを自動エクスポートし、そのまま基板製造会社に発注できます。

ソフトウェア開発者にとっての革命的な点は、回路設計の変更履歴をGitでコミットし、GitHubでプルリクエストレビューできることです。「最新の回路図がどれかわからない」「誰がどこを変更したか追えない」という旧来のハードウェア開発の課題が、ソフトウェア開発と同じワークフローで解消されます。MITライセンスで完全無料、商用利用も可能です。

技術アーキテクチャ：ReactコンポーネントとしてのPCB設計

tscircuitの技術スタックは、Webフロントエンドエンジニアに馴染みのある構成です。

コア設計思想

tscircuitはReactのコンポーネントツリーを利用して回路のネットリスト（接続情報）を生成します。各電子部品（抵抗、コンデンサ、ICチップなど）はReactコンポーネントとして定義され、propsでパラメータ（抵抗値、容量、パッケージタイプなど）を受け取ります。JSXの木構造が回路のトポロジーを表現し、<trace>要素で配線を宣言的に記述します。

主要コンポーネント

tscircuitのエコシステムは以下のサブパッケージで構成されています：

AIを活用したフットプリント生成機能も内蔵されており、テキストで部品の寸法を説明するとフットプリントデータが自動生成されます。これはKiCadのフットプリントライブラリに存在しない新型部品を扱う際に特に威力を発揮します。

インストール・セットアップ：5分で始める回路設計

CLIのインストールと起動

# グローバルインストール
npm install -g tscircuit

# 新しい回路プロジェクトを作成
mkdir my-circuit && cd my-circuit

# 開発サーバーを起動
tsci dev

コマンド実行後、ブラウザで http://localhost:3020 にアクセスすると開発環境が立ち上がります。ファイルの変更をホットリロードで反映するため、エディタとブラウザを並べて作業できます。

コンポーネントパッケージの管理

# レジストリからコンポーネントを追加（例：Arduino Nano互換フットプリント）
tsci add @tsci/arduinouno

# 自作コンポーネントをレジストリに公開
tsci push

# 利用可能なコンポーネントを検索
tsci search esp32

基本的な回路記述例

import { Board, Resistor, Capacitor, Ground, Trace } from "@tscircuit/core"

// LEDドライバー回路の例
const LEDDriverCircuit = () => (
  <board width="30mm" height="20mm">
    {/* 電流制限抵抗 */}
    <resistor
      name="R1"
      resistance="330ohm"
      footprint="0402"
      pcb_x="5mm"
      pcb_y="0mm"
    />
    {/* デカップリングコンデンサ */}
    <capacitor
      name="C1"
      capacitance="100nF"
      footprint="0402"
      pcb_x="10mm"
      pcb_y="5mm"
    />
    {/* グランド接続 */}
    <ground name="GND" x={15} y={0} />
    {/* 配線：R1の右ピンからC1の左ピン */}
    <trace path={[".R1 > .right", ".C1 > .left"]} />
    {/* 配線：C1の右ピンからGND */}
    <trace path={[".C1 > .right", ".GND > .gnd"]} />
  </board>
)

export default LEDDriverCircuit

Gerberファイルのエクスポート

# 製造用ファイルを一括エクスポート
tsci export --format gerber --output ./output/

# BOMとPick & Placeファイルも同時出力
tsci export --format all --output ./manufacturing/

出力されたZIPファイルをJLCPCBやPCBWayなどの基板製造サービスにアップロードするだけで発注が完了します。

実践的ユースケース：どんな場面で威力を発揮するか

ユースケース1：IoTデバイスの試作を高速化

Arduinoや Raspberry Pi Picoをベースにしたセンサーデバイスを作る場合、従来はKiCadで数時間かけて回路図を描く必要がありました。tscircuitでは既存コンポーネントパッケージをtsci addでインストールし、TypeScriptで接続を宣言するだけで即座に基板データが生成されます。試作→評価→修正のサイクルを大幅に短縮できます。

ユースケース2：チームでの回路設計レビュー

ハードウェアスタートアップでは複数エンジニアが同じ基板設計に関わることが多いです。tscircuitを使えば、回路の変更をGitのプルリクエストとして管理し、ソフトウェア開発と同じフローでコードレビューが実施できます。変更差分がテキストベースのため、「どの抵抗値が変わったか」「配線が追加されたか」がひと目でわかります。

ユースケース3：AI支援による部品設計

tscircuitのAIフットプリント生成機能は、部品のデータシートに記載された寸法情報をテキストで入力するとフットプリントを自動生成します。新型センサーやカスタムコネクタなど、既存ライブラリにない部品も自分で定義できます。

ユースケース4：教育・学習用途

電子工学の学生やホビイストにとって、回路設計の入り口はKiCadのような専門ツールの習得でした。TypeScriptを知っている開発者であれば、tscircuitを使うことで回路設計の本質的な部分（接続、部品の役割、電気的特性）に集中でき、ツール習得のコストを大幅に削減できます。

ユースケース5：自動化テストとCI/CD

回路設計のルールチェック（DRC: Design Rule Check）をCIパイプラインに組み込めます。GitHubアクションでtscircuitを実行し、プルリクエスト時に設計違反を自動検出する仕組みが構築できます。

# .github/workflows/circuit-check.yml
name: Circuit Design Check
on: [pull_request]
jobs:
  drc:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm install -g tscircuit
      - run: tsci check --strict
      - run: tsci export --format gerber --output ./artifacts/
      - uses: actions/upload-artifact@v4
        with:
          name: gerber-files
          path: ./artifacts/

競合ツールとの比較

tscircuitは「プログラマー向けEDA（Electronic Design Automation）ツール」という独自のポジションを確立しています。

tscircuitが最も輝くのは「プログラマーが簡単にPCBを設計したい」「チームでGit管理したい」「AI支援でフットプリントを作りたい」というユースケースです。本格的な商業製品の複雑な多層基板設計では、まだKiCadやAltiumの方が成熟しています。しかし、IoTプロトタイプ、ホビープロジェクト、教育用途では今すぐ実用的な選択肢です。