ビューをコードで管理できるようになりました！

ベースマキナの更新情報をお届けします。

ビューのコード管理

設定のコード管理でビューを扱えるようになりました。これまでコード管理の対象はアクションだけでしたが、ビューの設定もTypeScriptのコードとしてGitリポジトリで管理し、bm syncで環境へ反映できます。

アクションとビューをまとめて1つのPull Requestでレビューできるため、「アクションを追加したのに、それを使うビューの更新が漏れていた」といった食い違いを防げます。ビューの変更履歴もGitに残るため、いつ誰が何を変えたのかを後から追えます。

defineViewでビューを定義する

ビューはdefineViewで定義します。typeでビューの種別を指定し、種別に応じたフィールドを設定します。

コードエディターのビューは、codeにビューのコードを指定します。

import { defineView, readFile } from "@basemachina/sdk/oac";

export const userListView = defineView({
  type: "codeEditor",
  id: "user-list",
  name: "ユーザー一覧",
  code: readFile("./view-codes/user-list.tsx"),
});

ビジュアルエディターのビューは、configに画面構成を指定します。アクションテーブルやアクションフォームなどのコンポーネントの配置、クエリパラメーターの定義をコードで表現できます。

import { defineView } from "@basemachina/sdk/oac";

export const orderListView = defineView({
  type: "visualEditor",
  id: "order-list",
  name: "注文一覧",
  config: {
    pageSetting: { title: "注文一覧" },
    components: [
      {
        type: "actionTable",
        id: "order-table",
        actionSetting: {
          type: "onComponentRender",
          actionId: "list-orders",
          args: {},
        },
        columnCustomizationSetting: [],
        resultTransformationSetting: { enabled: false },
      },
    ],
  },
  queryParameters: [
    { name: "status", required: false, valueForEditing: "shipped" },
  ],
});

定義したビューは、defineConfigのviewsに指定します。開発環境でのみ動作確認したいビューはdevelopmentViewsに指定すると、他環境への同期の対象から外れます。

import { defineConfig } from "@basemachina/sdk/oac";
import { userListView } from "./src/views/user-list";

export default defineConfig({
  project: { id: "your-project-id" },
  actions: [],
  views: [userListView],
});

画面上で作成したビューを取り込む

すでにベースマキナ上にあるビューは、手で書き起こす必要はありません。「設定」→「開発設定」の「コード管理」から設定ファイル一式をダウンロードすると、アクションと同じようにコード管理対応のビューも含まれた状態でリポジトリを用意できます。

bm pullは、設定ファイルのviews配列にまだ含まれていないWeb管理のビューを取り込みます。ダウンロードの後に画面上でビューを作成した場合も、このコマンドでリポジトリに取り込めます。取り込むとsrc/views/<識別子>.tsに定義ファイルが生成され、設定ファイルのviews配列にも追加されます。コードエディターのビューは、コード本体もsrc/views/view-codes/<識別子>.jsxとして書き出されます。

取り込みの対象から外れるビューもあります。コード取得設定が有効なビューは、コード管理では扱えないため対象外です。ビジュアルエディターのビューは、参照しているアクションが削除されている場合や、参照先のアクションに識別子が設定されていない場合にスキップされ、実行結果に理由が表示されます。参照先を直してから、あらためてbm pullを実行してください。

アクションと同じフローで環境へ反映する

bm syncはアクションとビューの両方を同期の対象にします。設定ファイルとベースマキナ上の設定を識別子で突きあわせ、差分があるビューを開発環境へ反映します。環境IDを指定すれば、開発環境から検証環境や本番環境へ、バージョンと有効化設定をまとめて同期できます。

bm sync --dryの出力では、アクションとは別に「コード管理のビュー」「ビューの同期内容」のブロックが表示され、作成・更新・有効化の件数と対象を反映前に確認できます。GitHub ActionsやGitLab CI上では折り畳み可能なMarkdownとして出力されるため、PRのコメントでそのままレビューできます。

### コード管理のビュー

- 作成: 1 件
- 更新: 2 件
- 変更なし: 5 件

設定ファイルから削除したビューは、--with-disableを指定すると開発環境で無効化されます。無効化してもビューのデータと識別子は残るため、設定ファイルに戻して再度bm syncを実行すれば再有効化されます。

ビューの識別子を変更したい場合は、previousIdに変更前の識別子を宣言します。bm syncは「旧識別子のビューを削除して新規作成」ではなく、既存ビューの識別子の変更として扱います。

コードエディターのビューのコードの置き場所

コードエディターのビューのコードは、2つの方法で管理できます。readFileでコード管理のリポジトリ内のファイルを読み込む方法と、これまでどおりコード取得設定でストレージから取得する方法です。

コード取得設定を使っているビューは、引き続き画面上とストレージで管理してください。

詳しくはドキュメントのコード管理、defineViewをご参照ください。