コード取得設定との連携
コード管理のリポジトリでビュー（コードエディター）のコードも一緒に管理し、コード取得設定と組み合わせて運用する例です。
アクションとビューの変更を同じPRでレビューできるため、関連する変更をまとめて管理できます。
リポジトリ構造の例
my-project/
├── basemachina.config.ts
├── actions/
│ ├── get-users.ts
│ └── fetch-view-code.ts # ビューのコードを取得するアクション
└── views/
└── user-list/
└── index.tsx # ビューのコードTypeScriptの設定
ビューのコード（.tsx）をTypeScriptの型チェック対象に含める場合は、コード管理のリポジトリにダウンロードされるtsconfig.jsonへ次の設定を追加してください。
{
"extends": "@basemachina/sdk/tsconfig.code.json",
"compilerOptions": {
"jsx": "react-jsx"
},
"include": [
"basemachina.config.ts",
"type.d.ts",
"src/**/*.ts",
"views/**/*.tsx"
]
}@basemachina/sdkが提供するtsconfig.code.jsonにはjsxの設定が含まれていないため、ビューのTSXファイルをtscに通すには"jsx": "react-jsx"を個別に指定する必要があります。
また、ビューの型定義（@basemachina/view）はReactの型を参照しているため、reactと@types/reactを別途インストールしてください。
npm install --save-dev react @types/react@basemachina/sdkのpeerDependenciesにはreact/@types/reactは含まれていないため、ビューのコードを同じリポジトリに同居させる場合は個別の追加が必要です。
CIで型チェックを実行する場合、views/**/*.tsxをtsconfig.jsonのincludeに追加しておく必要があります。含めていないビューコードは型チェックの対象になりません。
仕組み
ビューのコード管理は、以下の流れで動作します。
- リポジトリ内の
views/ディレクトリにビューのコードを配置する - CI/CDで、ビューのコードをビルドしてストレージ（GCSやS3など）にアップロードする
- ベースマキナのビューでコード取得設定を有効化し、ストレージからコードを取得するアクションを指定する
- ビューを表示するたびに、ストレージから最新のコードが読み込まれる
GitHub Actionsの設定ファイル例
以下は、ビューのコードをビルドしてGCSにアップロードするワークフローの例です。アクションの反映には公式Composite Action basemachina/bm-action (opens in a new tab)を使用します。
開発環境への反映（.github/workflows/sync-dev.yml）
name: Sync to dev
on:
pull_request:
branches: [main]
push:
branches: [main]
permissions:
contents: read
id-token: write
pull-requests: write
packages: read
jobs:
sync:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: actions/setup-node@v6
with:
node-version: "22"
- run: npm ci
- run: npx tsc --noEmit
# アクションの差分検出・反映
- uses: basemachina/bm-action@v1
with:
audience: "https://basemachina.com"
with-disable: "true"
# ビューのビルド・アップロード
- name: Build views
if: github.event_name == 'push'
run: npm run build:views
- name: Upload to GCS (dev)
if: github.event_name == 'push'
uses: google-github-actions/upload-cloud-storage@v2
with:
path: dist/views
destination: my-bucket/devストレージへのアップロード方法は使用するサービス（GCS、S3など）に合わせて変更してください。
環境ごとのコードの切り替え
変数と組み合わせることで、環境ごとに異なるビューのコードを読み込めます。
例えば、ストレージのパスに環境ごとの変数をプレフィックスとして設定することで、開発環境と本番環境で異なるコードを使用できます。
詳しくはGit管理の「branchの切り替え」をご参照ください。