コード生成

コード生成は、ワークスペース上のブロックをコードに変えるプロセスです。実行可能なコードの文字列です。

コードの生成は、ブロックがコードを生成することで演算式の評価、文字の移動などのことをする迷路を通り抜けたり、オンラインショップを構成したりできます。

実行できない直接使用できます。コード文字列を生成し、実行します。

コード生成ツール

コードを生成するには、使用するテキストベースの言語を選択する必要があります。生成します。

コードジェネレータは、コードを生成するためのルールを処理するクラスで、特定の言語に固有のものであり、個々のブロックに固有のものではありません。対象たとえば、コメントの書式設定、ステートメントのインデント、サポートしています。

// javascriptGenerator is a code generator that makes javascript strings.
import {javascriptGenerator} from 'blockly/javascript';

const code = javascriptGenerator.workspaceToCode(myWorkspace);

Blockly には、次の 5 つの組み込みコード生成ツールが用意されています。

JavaScript ES5
Python 3
Lua 5.1
Dart 2
PHP 7

次のいずれかの方法でジェネレータをインポートして使用できます。

モジュール

import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
import {phpGenerator} from 'blockly/php';
import {luaGenerator} from 'blockly/lua';
import {dartGenerator} from 'blockly/dart';

const jsCode = javascriptGenerator.workspaceToCode(workspace);
const pythonCode = pythonGenerator.workspaceToCode(workspace);
const phpCode = phpGenerator.workspaceToCode(workspace);
const luaCode = luaGenerator.workspaceToCode(workspace);
const dartCode = dartGenerator.workspaceToCode(workspace);

パッケージ化解除

Blockly を追加した後、ジェネレータを含める必要があります。

<script src="https://unpkg.com/blockly"></script>
<script src="https://unpkg.com/blockly/javascript_compressed"></script>
<script src="https://unpkg.com/blockly/python_compressed"></script>
<script src="https://unpkg.com/blockly/php_compressed"></script>
<script src="https://unpkg.com/blockly/lua_compressed"></script>
<script src="https://unpkg.com/blockly/dart_compressed"></script>

const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

ローカルスクリプト

Blockly を追加した後、ジェネレータを含める必要があります。

<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="python_compressed.js"></script>
<script src="php_compressed.js"></script>
<script src="lua_compressed.js"></script>
<script src="dart_compressed.js"></script>

const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

コードを生成する言語がこのリストに含まれていない場合は、カスタムコード生成ツールも作成します。

ブロックコードジェネレータ

コード生成の 2 つ目の部分では、個々のブロック内のどのコードを生成します。これは、ブロックごと、言語ごとに行う必要があります。指定します。

javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ }

コードジェネレータの動作は、ブロックの種類によって異なります。

ただし、これらはすべてフィールドから値を収集する必要があります。内側のブロックを集めて」そのコードを取得します。

生成

生成はエンドユーザーが要求したときに（たとえば、エンドユーザーが連続的に実行することもできます。

継続的な更新により、ユーザーが更新を行うたびにコードを表示または実行できます。あります。コードの生成は高速処理であるため、パフォーマンスがほとんどない大きな影響を与える可能性があります。そのためには、イベントリスナーを使用します。

const supportedEvents = new Set([
  Blockly.Events.BLOCK_CHANGE,
  Blockly.Events.BLOCK_CREATE,
  Blockly.Events.BLOCK_DELETE,
  Blockly.Events.BLOCK_MOVE,
]);

function updateCode(event) {
  if (workspace.isDragging()) return; // Don't update while changes are happening.
  if (!supportedEvents.has(event.type)) return;

  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}

workspace.addChangeListener(updateCode);

プリアンブルまたはポストスクリプトのコード

コードを生成したら、（必要に応じて）プリアンブルまたはプリアンブルコードを生成したコードの先頭または末尾に配置します。

let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
code = `const def = 'some value';\n${code}\nkickOffSomeFunction();\n`;

プリアンブルコードは通常、最初に外部定義を含めるために使用されます。ありません。PostScript コードは通常、開始するための関数を呼び出すために使用されます。確認します。

生成されたコードをそのまま実行可能な場合、できます。

実行

コードを生成したら、次はその実行方法を考える必要があります。実行方法の決定は、非常にアプリケーション固有であり、対象範囲外ご紹介しました

JavaScript コードについては、 JSInterpreter を取得します。他の言語には他のツールが必要です。

コード生成