調査アンケート: Blockly のご利用体験についてお聞かせください
アンケートを開始
コード生成
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
コード生成は、ワークスペースのブロックを実行可能なコード文字列に変換するプロセスです。
コード生成は非常に重要です。ブロックが実際に実行できるようにするためです。たとえば、ブロックは算術式の評価、迷路内のキャラクターの移動、オンライン ショップの構成などを実行できます。
ブロックを直接「実行」することはできません。代わりに、コード文字列を生成し、それを実行します。
言語コード生成ツール
コードを生成するには、生成するテキストベースの言語を選択する必要があります。これは、各言語に独自のコード生成ツールがあるためです。
言語コード生成ツール（一般にコード生成ツールと呼ばれます）は、特定の言語に固有のコード生成ルールを処理するクラスです。ただし、個々のブロックに固有のコード生成ルールは処理しません。たとえば、コメントの書式設定、ステートメントのインデント、文字列の引用符などの処理を行います。
Blockly には、次の 5 つの組み込みコード生成ツールがあります。
- JavaScript ES5
- Python 3
- Lua 5.1
- Dart 2
- PHP 7
このリストにコードを生成したい言語が含まれていない場合は、カスタム言語コード生成ツールを作成できます。簡単な例については、カスタム生成ツールを作成する Codelab をご覧ください。ここでは、JSON 言語コード生成ツールを作成します。より複雑な例については、JavaScript コード生成ツールをご覧ください。使用する組み込みブロックのブロックコード生成ツールも作成する必要があります。
ブロックコード生成ツール
各ブロックは独自のコードを生成します。ブロックを作成する場合は、サポートする言語ごとに個別のブロックコード ジェネレータを作成する必要があります。
ブロックコード生成ツールは、そのブロックのコード文字列を返す関数です。たとえば、2 つの数値を比較するブロックは 'a < b' 形式の文字列を返します。if ステートメントを表すブロックは 'if (...) {\n...\n};\n' 形式の文字列を返します。
import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
// Write block-code generators for JavaScript and Python.
javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ };
pythonGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ };
ブロックコード生成ツールは、言語コード生成ツールによって呼び出されます。
詳細については、ブロックコード生成ツールをご覧ください。
コードを生成して実行する
アプリケーションはいつでもコードを生成できます。たとえば、エンドユーザーがボタンをクリックしたときや、ユーザーが変更を加えるたびにコードが生成される場合があります。
コードを生成したら、そのコードを実行する方法を見つける必要があります。実行方法の決定はアプリケーション固有であり、Blockly の範囲外です。
詳細については、コードを生成して実行するをご覧ください。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2025-07-25 UTC。
[null,null,["最終更新日 2025-07-25 UTC。"],[[["\u003cp\u003eCode generation transforms Blockly blocks into executable code strings in various programming languages like JavaScript, Python, Lua, Dart, and PHP.\u003c/p\u003e\n"],["\u003cp\u003eBlockly offers built-in code generators for these languages, accessible through modules, Unpkg, or local scripts, along with the option to create custom generators.\u003c/p\u003e\n"],["\u003cp\u003eGenerating code involves defining how individual blocks translate to code in each target language, including handling fields, inner blocks, and code concatenation.\u003c/p\u003e\n"],["\u003cp\u003eCode generation can be triggered on demand or continuously as the user interacts with the blocks, allowing for dynamic updates and code execution.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can add preamble or postscript code to the generated output for including external definitions or initiating specific behaviors.\u003c/p\u003e\n"]]],["Code generation transforms visual blocks into executable code strings. A code generator handles language-specific formatting. Blockly offers built-in generators for JavaScript, Python, Lua, Dart, and PHP, accessible via modules, Unpkg, or local scripts. Custom generators are also supported. Each block's code generation rules must be defined per language. Generation occurs on demand or continuously via event listeners. Optional preamble/postscript code can be added. Execution of generated code is application-specific, and for JavaScript, JSInterpreter is suggested.\n"],null,["# Code generation is the process of turning the blocks on a workspace into a\nstring of code that can be executed.\n\nCode generation is extremely important, because it is what allows your blocks to\nactually *do* things, like evaluate arithmetic expressions, move a character\nthrough a maze, or configure an online shop!\n\nYou can't \"run\" blocks directly. Instead you generate code strings, and then\nexecute those.\n\nLanguage code generators\n------------------------\n\nTo generate code, you have to pick what text-based language you want to\ngenerate. This is because each language has its own code generator.\n\nA **language code generator** (commonly called a **code generator**) is a class\nthat handles the rules for generating code that are specific to a given\nlanguage, but not specific to an individual block. For example, it handles\nthings like formatting comments, indenting statements, and quoting strings.\n\nBlockly provides 5 built-in code generators:\n\n- JavaScript ES5\n- Python 3\n- Lua 5.1\n- Dart 2\n- PHP 7\n\nIf this list doesn't include the language you want to generate code for, you can\ncreate a custom language code generator. For a simple example, see the [Build a\ncustom generator](https://blocklycodelabs.dev/codelabs/custom-generator/index.html?index=..%2F..index#0) codelab, which creates a JSON language\ncode generator. For a more complex example, see the [JavaScript code\ngenerator](https://github.com/google/blockly/blob/master/generators/javascript/javascript_generator.ts). Note that you also need to write block-code\ngenerators for any built-in blocks that you want to use.\n\nBlock-code generators\n---------------------\n\nEach block is responsible for generating its own code. When you create a block,\nyou need to write a separate block-code generator for each language you want to\nsupport.\n\nA **block-code generator** is a function that returns the code for that block as\na string. For example, a block that compares two numbers returns a string of the\nform `'a \u003c b'` and a block that represents an if statement returns a string of\nthe form `'if (...) {\\n...\\n};\\n'`. \n\n import {javascriptGenerator} from 'blockly/javascript';\n import {pythonGenerator} from 'blockly/python';\n\n // Write block-code generators for JavaScript and Python.\n javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ };\n pythonGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ };\n\nBlock-code generators are called by language code generators.\n\nFor more information, see [Block-code\ngenerators](/blockly/guides/create-custom-blocks/code-generation/block-code).\n\nGenerate and run code\n---------------------\n\nYour application can generate code at any time. For example, it might generate\ncode when the end-user clicks a button or every time the user makes a change.\n\nAfter you've generated the code, you need to figure out how to execute it.\nDeciding how to execute it is very application-specific, and outside the scope\nof Blockly.\n\nFor more information, see [Generate and run\ncode](/blockly/guides/app-integration/run-code)."]]
