フィールド

フィールドは、文字列、数値、色などのユーザーが編集可能な値を定義するため、コード生成の重要な部分です。

生成されたコードにフィールド値を含めるには、フィールドの値を取得して使用可能な文字列に変換し、その文字列をコードの残りの部分と連結します。

import {javascriptGenerator} from 'blockly/javascript';

javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) {
  // Get the field value.
  const fieldValue = block.getFieldValue('MY_FIELD');

  // Concatenate the code.
  const code = `some code ${fieldValue} some more code`;

  // Return the code.
  return code;
}

値を取得する

フィールド値には getFieldValue を使用してアクセスできます。返される内容はフィールドによって異なるため、特定のフィールドに関する情報については、組み込みフィールドのドキュメントをご覧ください。たとえば、テキスト入力フィールドの場合はユーザーが入力したテキストをそのまま返しますが、プルダウン フィールドの場合はユーザーが選択したアイテムに関連付けられた言語中立の文字列を返します。

値を変換する

ほとんどのフィールド値は、すぐにコード文字列に連結できます。ただし、一部のフィールドの値は、使用するために追加の作業を必要とします。

文字列

文字列を連結するには、コード生成ツールで文字列を引用符で囲む必要があります。

// For a single line text field.
const str = generator.quote_(block.getFieldValue('STR'));

// For a multiline text field.
const str = generator.multiline_quote_(block.getFieldValue('STR'));

変数

変数名は、連結する前にコード生成ツールでスクラブする必要があります。この処理が必要な理由は 2 つあります。

  1. 変数は、ユーザーが選択した言語で入力します。つまり、ASCII 文字への変換が必要になる場合があります。たとえば、「متغير」は「_D9_85_D8_AA_D8_BA_D9_8A_D8_B1」に変換されます。
  2. 変数は予約語と競合する可能性があります。つまり、競合しないように変更する必要があります。たとえば、「for」は「for2」に変換されます。
const identifier = generator.getVariableName(block.getFieldValue('VAR'));

コードを連結する

フィールドの値を取得して文字列に変換したら、コード文字列と正しい場所に連結できます。

const code = `some code ${value} some more code`;

戻りコード

ブロックの種類に応じて、コード文字列を返す方法も異なります。詳しくは、それぞれのページをご覧ください。