Skip to main content
bricks-ctor は、BRICKS アプリケーションをコードとして定義・構築・デプロイできる TypeScript SDK です。ビジュアルエディタで作業する代わりに TypeScript を書くと、BRICKS ランタイムが理解できる設定にコンパイルされます。 bricks-ctor のツールは BRICKS CLIbricks ctor コマンド群)に同梱されており、個別の npm パッケージをインストールする必要はありません。
生成されたプロジェクトは BRICKS 用の npm パッケージに依存しません。CLI が型付きの bricks-ctor ライブラリをローカルの ctor/ ディレクトリに生成し、プロジェクトの tsconfig.jsonbricks-ctor インポートエイリアスをそこにマッピングするため、import ... from 'bricks-ctor' は依存関係なしで動作します。

コードで書くメリット

  • 型安全性 — TypeScript の完全サポートにより、コンパイル時にエラーを検出
  • バージョン管理 — Git で変更を追跡、差分をレビュー、チームで協力
  • AI 支援開発 — プロジェクトファイルを読み書きできる AI コーディングエージェントと協業
  • 自動化 — CLI または GitHub Actions などの CI/CD パイプラインでデプロイ

コアコンセプト

bricks-ctor アプリケーションは、組み合わせ可能なエンティティのツリーです。構成要素は以下のとおりです:

Subspaces

Subspace は独立した機能単位で、画面や機能モジュールと考えてください。各 subspace は独自の brick、generator、data、canvas、animation を持ちます。アプリケーションのエントリーポイントは rootSubspace です。

Canvases

Canvas はビューレイアウトを定義します。アイテム(brick または subspace 参照)を frame 座標(x、y、幅、高さ)でグリッドに配置します。Canvas はライフサイクルイベント(firstEnterenterexit)をサポートし、ナビゲーションのために相互に切り替え可能です。

Bricks

Brick はビジュアル構築要素 — コンテンツを表示しインタラクションを処理する UI コンポーネントです。主な例: Brick はスタイル付け、アニメーション、プレスイベント応答が可能で、プロパティをデータに動的にバインドできます。

Generators

Generator は外部 I/O とデータ処理をすべて担当します。アプリを API、データベース、ハードウェア、AI モデルなどに接続します。各 generator はアウトレット(出力チャネル)を通じてデータに値を流し、イベントでアクションをトリガーします。 Generator のカテゴリー:

Data

Data ノードはアプリケーションの状態を保持します。型を持ち(string、number、boolean、array、object)、brick や generator のプロパティにリンクすることでリアクティブ更新が可能です。Generator のアウトレットが値を出力すると、リンクされた data が更新され、そのデータにバインドされた brick が自動的に再レンダリングされます。

Data Calculations

Data calculation はデータを変換する JavaScript 関数です。サンドボックス環境で実行され、25 種類以上の組込みライブラリ(lodash、moment、crypto など)が利用できます。フォーマット、パース、派生値の計算に使用します。

Actions とイベント

Action はイベントによってトリガーされるコマンドです。Brick と generator はイベント(press、response、error、タイマーティック)を発生させ、canvas の切替、data の更新、generator のトリガー、animation の実行などの action に接続します。

プロジェクト構成

bricks-ctor プロジェクトの構成は以下のとおりです:
アプリのロジックはすべて TypeScript ファイルで定義します。bun compile(内部で bricks ctor compile を実行)を実行すると、BRICKS ランタイムが実行する JSON 設定にコンパイルされます。

次のステップ

はじめる

環境を設定し、最初の bricks-ctor プロジェクトを作成します。