コードエディターとは
コードエディターとは、ReactとJavaScriptを使って完全にカスタマイズされた画面（ビュー）を作成できる機能です。 コードを書く必要はありますが、ベースマキナが用意した組み込みの関数やコンポーネントを利用できるため、フルスクラッチの画面開発よりも圧倒的に早く管理画面を構築できます。
より簡単に画面を作成したい場合はビジュアルエディターの利用を推奨しています。 各機能の詳しい使い分けについては画面作成機能の使い分けをご覧ください。
コードエディターで使える機能
コードエディターでは、ベースマキナの他の機能を呼び出す関数やReactのhook、さまざまな用途のReactコンポーネントを利用できます。
- アクションの呼び出し
- ログイン・権限情報の利用
- 画面移動（アクション、ビュー、外部URL）
- 別の画面から移動してきた際のURLパラメーターの受け取り
- 組み込みのReactコンポーネント
- chakra (opens in a new tab)のコンポーネント
コードエディターでのビュー作成方法
コードエディターを使ってベースマキナの画面上でビューを作成する方法を説明します。
まず、ビューの一覧・作成画面には画面右上の下記のアイコンをクリックすることで移動できます。
「ビューの一覧」画面から、「ビジュアルエディターで作成」ボタン右側の矢印をクリックし、メニューから「コードエディターで作成」を選択して作成画面へ移動します。
コードエディターでは、通常のWebフロントエンド開発のように、JavaScriptを利用してビューを作成できます。
Reactコンポーネントとして宣言して、default exportされたものが画面に表示されます。
ビューを作成するには、次の情報を入力する必要があります。
- 名前
- 識別子
- コード（JavaScript）
識別子は画面移動時に移動先のビューを特定する際などに使います。
また、フォームでJavaScriptを入力すると画面右側にプレビューが表示されます。
コードエディターで作成するビューのコードは次のようなイメージです。
Reactのコードを呼び出して利用したり、 @basemachina/view というベースマキナ製のパッケージをインポートして利用できます。
また、前述の通りアクションの呼び出しなども関数経由で行なえます。
import { useState } from "react";
import {
Flexbox,
Card,
Chart,
Form,
Image,
DatePicker,
useExecuteAction,
useURLQueries,
...
} from "@basemachina/view";
const BMBankView = () => {
const urlQueries = useURLQueries()
const userId = urlQueries["userId"]
const [deactivate, { errors }] = useExecuteAction("deactivate-action-id")
const handleDeactivateButtonClick = () => {
deactive([{
name: "userId",
value: userId
}])
}
return (
<Flexbox width="full" direction="col">
<Flexbox direction="row" width="full" items="center" justify="between">
<Heading text={`財前 五郎 (userID: ${userId})`} size="xl" />
<Grid gap={2}>
<Button title="無効化する" color="red" onClick={handleDeactivateButtonClick} />
</Grid>
</Flexbox>
<Flexbox direction="row" width="full">
<Box flex={1}>
<Card>
...
</Card>
</Box>
...
</Flexbox>
</Flexbox>
);
};
export default BMBankView;