メインコンテンツまでスキップ

変数構造を検討する - IM-BloomMaker

IM-BloomMakerで定義する変数の命名方法や、その変数構造をどのように設計するかについてのルールを説明しています。

本ページのルールを参考にすることで、複数人による開発や複数アプリケーションでの内部コードの統一化を促進することが期待できます。

慣れていないかたや、はじめてローコード開発をする際には、まずこのルールにしたがって開発をすることをおすすめします。一方で、ローコード開発の経験がある場合などには、このルールを参考に活用できる箇所をご自身のプロジェクトに反映していただくような利用を想定しています。

変数の命名例​

  • 略称の使用を避ける
    • 略称についての統一的な認識がされていない場合、可読性の低下につながります。
  • 変数名はキャメルケース（区切り文字のみ大文字）とする
    • 例：tableData
  • 真偽値はtrue／falseの状態がわかる命名とする
    • 例：isChanged, isUserLocked, ...
  • 意味や役割の固まり（オブジェクト）ごとに変数をまとめる
    • 例：state, control, endPoint, ...
備考

IM-BloomMakerでは変数のほかに定数や多言語の定義を追加・設定できます。たとえば以下のように命名します。

  • 定数・多言語はコンスタントケース（すべて大文字）とする
    • 例：MAX_LENGTH

変数構造の設計例​

具体的にIM-BloomMakerの変数構造をどのように設計するかを一例として紹介します。

変数構造の設計はJSON形式で記述していくことをおすすめします。設計したJSONをIM-BloomMakerのJSONエディタにペーストすることで、そのままIM-BloomMakerの変数構造にできるためです。

変数構造の全体像​

以下のような4つのオブジェクトから構成する変数構造を例に説明します。

変数構造のイメージ図

JSONを表示する
{
  "state": { 
    "tableData": {
      "{%一覧データごとのオブジェクト%}": [], 
    },
    "entityData": {
      "{%エンティティごとのオブジェクト%}" : {}
    },
    "{%コンテナページ名%}": {}
  },
  "control": {
    "isError" : false,
    "isChanged": false,
    "isConfirmed": false,
    "searchObject":{
      "searchCondition": {
        "{%検索対象のカラム%}": "",
      },
      "sortCondition": [
        {
          "key": "",
          "order": ""
        }
      ],
      "pagination": {
        "current": 1,
        "total": 10,
        "limit": 10,
        "offset": 0
      }
    },
    "visibility": {
      "{%対象エレメントのオブジェクト%}" : {
        "isVisible": false,
      }
    },
    "exclusiveControl": {
      "isUserLocked": false,
      "businessKeys": {
        "{%ロックしたい画面を特定するキー%}": ""
      }
    },
    "eventGroupKey": {
      "{%履歴コメントモジュール用に一意に履歴情報を指定するためのキー%}": ""
    }
  },
  "endPoint": {
    "{%エンドポイントごとのオブジェクト%}" : {
      "requestParameter" : {},
      "responseData" : {
        "error": false,
        "errorMessage": "",
        "{%これ以降に、フロー定義の出力と同じ変数を定義%}": {}
      }
    }
  },
  "temporary": {
    "{%一時保存用ごとのオブジェクト%}": "",
  }
}

JSONの活用方法​

  1. 上記「JSONを表示する」をクリックして、折りたたみを開く
  2. 右上のコピーアイコンをクリックして、クリップボードにコピーする
  3. お使いのテキストエディタにペーストして、後述の説明を参考に内容を編集する
注意
  • JSON内の{% %}で囲まれたオブジェクトの名称は、利用目的に応じて書き換えてください。
  • JSONエディタにペーストする前に、//や/* */のコメントを削除してください。コメントがあると保存できません。
  1. IM-BloomMakerのJSONエディタにJSONをペーストして、決定をクリックする
  2. 変数タブで変数の型が正しいかどうかを確認する
注意

JSONの定義から変数のデータ型が自動で変換されますが、値の定義によっては意図しない型になる場合があります。必ず変数の型を確認し、必要に応じて編集してください。

表記について​

以降の説明で、JSON上の各変数のコメントに頻出度を基準にしたラベルを付けています。

  • すべての変数が毎回アプリケーションの作成で必要になるわけではありません。
  • あくまで一例ですが、ラベルで頻出度を視覚化していますので、はじめて開発をするかたは参考にしてください。
ラベル説明
【一般】一般的なアプリケーション開発でよく利用する
【複雑】少し複雑な作りの場合に利用する
【特殊】あまり利用しない、利用する際には少し特殊なつくりとなるケースが多い
【依存】 特定のエレメントやアクション利用時に必要な変数構造

state​

画面表示系（ラベルの文字など）に関わるものを格納します。

JSONを表示する
  "state": { // 画面表示に関わるものを格納
    "tableData": { //【一般】一覧画面の場合に利用
      "{%一覧データID%}": [], 
    },
    "entityData": { //【一般】入力画面の場合に利用（≒トランザクションデータ）
      "{%エンティティID%}" : {}
    },
    "{%コンテナページ名%}": {} //【複雑】一覧や入力以外のサブ項目をコンテナページとして分けている場合に利用
  }
  • tableData：一覧画面を作成する場合、{%一覧データID%}をテーブル行の配列要素として格納する
  • entityData：データベースのデータを参照・更新する場合、{%エンティティID%}にトランザクションデータを格納する
  • {%コンテナページ名%}：上記以外に画面表示したい文字列をコンテナページ単位で格納する
コンテナページとは？

コンテナページとは、IM-BloomMakerで作成する画面部品の単位のことです。たとえば、一覧画面のサンプル資材の場合、BulmaとModalのコンテナページが定義されています。

IM-BloomMakerのコンテナページ

ヒント

一覧やトランザクションデータがひとつの画面コンテンツに複数存在する場合は、まず画面コンテンツを分けることができないかを検討することをおすすめします。ひとつの画面コンテンツに機能を詰め込むと実装が複雑になり、メンテナンスコストが高くなるためです。

ひとつの画面コンテンツに{%エンティティID%}や{%一覧データID%}を複数定義する場合には、someId1、someId2のように必要なだけ並列定義します。

control​

画面やアクションの操作に関わるものを格納します。

  • 例：エレメントの表示・非表示の切り替えや、バリデーションチェック用の変数など
JSONを表示する
  "control": {
    "isError" : false, //【特殊】汎用エラー用
    "isChanged": false, //【一般】 画面の変更検知用
    "isConfirmed": false, //【一般】「メッセージ〇を確認ダイアログで表示する」の判定用
    "searchObject":{ //【一般】検索用のオブジェクト
      "searchKeywords": {
        "{%検索対象のカラム%}": "",
      },
      "sortCondition": [ // ソート対象（複数ソートの場合は配列の若い順に優先ソート）
        {
          "key": "", // ソートキー
          "order": "" // ソート方向（ASC,DESC）
        }
      ],
      "pagination": { // ページネーションに必要な情報
        "current": 1, // 現在のページ番号
        "total": 10, // 検索結果総数
        "limit": 10, // 検索時に取得する件数
        "offset": 0 // 検索結果の何件目から取得を開始するか
      }
    },
    "visibility": { //【一般】画面表示・非表示の制御
      "{%対象エレメントのオブジェクト%}" : {
        "isVisible": false, // 
      }
    },
    "exclusiveControl": { //【依存】排他制御用
      "isUserLocked": false,
      "businessKeys": {
        "{%ロックしたい画面を特定するキー%}": ""
      }
    },
    "eventGroupKey": {  //【依存】履歴・コメントエレメント用
      "{%履歴・コメントエレメント用に一意に履歴情報を指定するためのキー%}": ""
    }
  }
ヒント

endPoint​

IM-LogicDesignerで作成したAPIを利用する場合に、リクエストパラメータとレスポンスデータを格納します。

ここで説明している変数構造は、IM-LogicDesignerでフロールーティングを作成した場合の例です。そのほかの外部APIを利用する場合は、その仕様にしたがってオブジェクト構造を変更してください。

JSONを表示する
"endPoint": { //【一般】
  "{%エンドポイントごとのオブジェクト%}" : {
    "requestParameter" : {},
    "responseData" : {
      "error": false,
      "errorMessage": "", // フロールーティングがエラーを返した場合のエラーメッセージ
      "{%これ以降に、フロー定義の出力と同じ変数を定義%}": {}
    }
  }
}

IM-BloomMakerのIM-LogicDesigner フロールーティング〇にリクエストを送信するアクションに、リクエストパラメータ（requestParameter）とレスポンスデータ（responseData）を関連付けます。

temporary​

state、controlおよびendPointに属さない、たとえば一時保存のために使用する変数を定義します。カスタムスクリプト内の計算で利用することが考えられます。

JSONを表示する
  "temporary": { //【特殊】
    "{%一時保存用ごとのオブジェクト%}": "",
  }
ヒント

temporaryに定義するオブジェクト構造については、用途やどのアクションで利用しているかが明確になるように定義しておくことをおすすめします。メンテナンスやデバッグ、レビューのときに変数の役割がわかりやすくなるためです。

オブジェクト構造の定義のしかたは、state、control、endPointに記載の説明を参考にしてください。