コード取得設定との連携

ビューの設定自体はdefineViewでコード管理できます。このページで扱うのは、それとは別の仕組みで、コードエディターのビューのコードをストレージ（GCSやS3など）経由で配信する運用です。コード管理のリポジトリでビュー（コードエディター）のコードを管理し、コード取得設定と組み合わせて配信します。

アクションとビューのコードの変更を同じ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を使用します。

開発環境への反映（`.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の切り替え」をご参照ください。