変数

変数は重要なプログラミングのコンセプトです。Blockly は、Python や JavaScript などの動的型付け言語をサポートしています。少し追加の作業を行うことで、Java や C などの静的型付け言語をサポートする情報を追加できます。

動的型付け言語と静的型付け言語の詳細については、データ型の概要: 静的、動的、強い型付け、弱い型付けをご覧ください。

Blockly には、ユーザーが指定した変数の名前を表示する動的なプルダウン ボックスである変数フィールドが用意されています。以下に例を示します。

変数を選択したり、現在の変数の名前を変更したり、現在の変数を削除したりするためのプルダウンがある変数フィールド。

デフォルトでは、Blockly では任意の型を変数に割り当てることができ、Blockly が提供するすべてのジェネレータは動的型付け言語用です。型付き言語を使用している場合は、次の手順で Blockly を構成してサポートできます。

型指定なしの変数ブロック

変数にアクセスして操作するための最も基本的なブロックは、ゲッター ブロックとセッター ブロックです。Blockly が提供するゲッター ブロックとセッター ブロックについて説明します。

JSON

// Block for variable getter.
{
  "type": "variables_get",
  "message0": "%1",
  "args0": [
    {    // Beginning of the field variable dropdown
      "type": "field_variable",
      "name": "VAR",    // Static name of the field
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}"    // Given at runtime
    }    // End of the field variable dropdown
  ],
  "output": null,    // Null means the return value can be of any type
  ...
},

// Block for variable setter.
{
  "type": "variables_set",
  "message0": "%{BKY_VARIABLES_SET}",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}"
    },
    {
      "type": "input_value",    // This expects an input of any type
      "name": "VALUE"
    }
  ],
  ...
}

JavaScript

// Block for variable getter.
Blockly.Blocks['variables_get'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME");
    this.setOutput(true, null);
    ...
  }
};

// Block for variable setter.
Blockly.Blocks['variables_set'] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck(null)
        .appendField("set")
        .appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME")
        .appendField("to");
    this.setOutput(true, null);
    ...
  }
};

これにより、次の 2 つのブロックが作成されます。

変数 `foo` のゲッター ブロックとセッター ブロック。

重要な点は、変数ゲッターの「出力」を null に設定することで、戻り値の型を任意にできることです。また、変数セッターの入力でチェックが指定されていないことにも注意してください。そのため、変数には任意の型の値を設定できます。

型付き変数ブロック

型チェックを強制するゲッターとセッターを追加できます。たとえば、"Panda" 型の変数を作成した場合、次の定義により、適切な型のゲッターとセッターが作成されます。

JSON

// Block for Panda variable getter.
{
  "type": "variables_get_panda",
  "message0": "%1",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
      "variableTypes": ["Panda"],    // Specifies what types to put in the dropdown
      "defaultType": "Panda"
    }
  ],
  "output": "Panda",    // Returns a value of "Panda"
  ...
},

 // Block for Panda variable setter.
{
  "type": "variables_set_panda",
  "message0": "%{BKY_VARIABLES_SET}",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
      "variableTypes": ["Panda"],
      "defaultType": "Panda"
    },
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "Panda"    // Checks that the input value is of type "Panda"
    }
  ],
  "previousStatement": null,
  "nextStatement": null,
  ...
}

JavaScript

// Block for Panda variable getter.
Blockly.Blocks['variables_get_panda'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldVariable(
          "VAR_NAME", ['Panda'], 'Panda'), "FIELD_NAME");
    this.setOutput(true, 'Panda');
    ...
  }
};

// Block for Panda variable setter.
Blockly.Blocks['variables_set_panda'] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck('Panda')
        .appendField("set")
        .appendField(new Blockly.FieldVariable(
            "VAR_NAME", null, ['Panda'], 'Panda'), "FIELD_NAME")
        .appendField("to");
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
    ...
  }
};

これにより、getter と setter の 2 種類のブロックが作成されます。これらのプルダウンには、"Panda" 型の変数のみが表示されます。入力と出力は、"Panda" タイプの接続のみを受け入れます。フィールドの defaultType は、variableTypes 配列の値のいずれかに設定する必要があります。variableTypes 配列を指定する際に defaultType を設定しないと、エラーがスローされます。

デフォルトでは、どのタイプが使用されているかをユーザーに知らせる視覚的なインジケーターはありません。変数型を区別する簡単な方法の 1 つは、色を使用することです。

ツールボックスに変数を追加する

この新しいタイプの変数をユーザーが使用できるようにするには、新しい変数を作成して使用する方法を追加する必要があります。

まだ作成していない場合は、変数の新しい動的カテゴリを作成します。

[変数] という名前の開いているカテゴリに、[変数を作成] ボタンが含まれています。

新しいゲッターとセッターをカテゴリに追加します。

`foo` 変数と `bar` 変数が作成された後の同じカテゴリ。[変数を作成] ボタン、set-variable-to ブロック、change-variable-by ブロック、getter ブロックが含まれています。

[変数を作成] ボタン

次に、ユーザーが変数を作成する方法が必要です。最も簡単な方法は、[変数の作成] ボタンを使用することです。

ボタンを作成するときにコールバックを呼び出す

Blockly.Variables.createVariableButtonHandler(button.getTargetWorkspace(), null, 'panda');

と入力すると、"Panda" 型の変数が作成されます。

ユーザーが複数のタイプの変数を作成できるようにする最も簡単な方法は、タイプごとに 1 つの「作成」ボタン（文字列変数を作成、数値変数を作成、Panda 変数を作成など）を用意することです。

変数の型が 2 つまたは 3 つを超えると、ボタンが多すぎる状態になる可能性があります。その場合は、@blockly/plugin-typed-variable-modal を使用して、ユーザーが目的の変数タイプを選択できるポップアップを表示することを検討してください。

生成ツールを定義する

最後に、新しい変数ブロックのブロックコード ジェネレータを定義する必要があります。また、Workspace.getVariableMap().getAllVariables() を使用してすべての型のすべての変数を取得するか、Workspace.getVariableMap().getVariablesOfType() を使用して特定の型のすべての変数を取得することで、変数のリストに直接アクセスすることもできます。