bricks ctor コマンド群)に同梱されており、個別の npm パッケージをインストールする必要はありません。
生成されたプロジェクトは BRICKS 用の npm パッケージに依存しません。CLI が型付きの
bricks-ctor ライブラリをローカルの ctor/ ディレクトリに生成し、プロジェクトの tsconfig.json が bricks-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 はライフサイクルイベント(firstEnter、enter、exit)をサポートし、ナビゲーションのために相互に切り替え可能です。
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 プロジェクトの構成は以下のとおりです:bun compile(内部で bricks ctor compile を実行)を実行すると、BRICKS ランタイムが実行する JSON 設定にコンパイルされます。
次のステップ
はじめる
環境を設定し、最初の bricks-ctor プロジェクトを作成します。