「;」や「\n」のあるなしで処理が変わるんだと実感した話

この記事で解決できるかもしれないエラー

SyntaxError: Unexpected identifier
JavaScriptだと珍しくないエラーのようです。Blocklyを使っている時にこのエラーが出た際はこの記事が参考になるかもしれません。

プログラムの流れ

ブロックを作成するファイル

Blocklyを使ってLOGOのようなビジュアル言語を作成しています。

ブロックの定義はこんな感じ

turtleBlock.js

Blockly.Blocks['turtleforward'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("前に")
        .appendField(new Blockly.FieldNumber(0, -10, 10), "step")
        .appendField("進む");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(60);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};

実行されたの動きはこんな感じ

turtleBlock.js

Blockly.JavaScript['turtleforward'] = function(block) {
    var number_step = block.getFieldValue('step');
    var fowardCode = `TurtleForward(${number_step})`; 
    return fowardCode;
};

• 引数の数字を読み取る
• 別の場所で定義されているTurtleForward()を実行するためにforwardCodeを定義
• returnで渡す

実行するファイル

turtleBlock.jsから値を受け取り、実行します。

turtleCommand.js

TurtleForward = (value) => {
    console.log('実行された'+value);
    var code = 'TurtleForward(turtle,'+value+')';
    ggbApplet.evalCommand(code);
}

実際の挙動

ブロックを並べて実行すると

画像のような挙動が確認されます。
しかし、ブロックを繋げて実行すると

上述したエラーが出てしまいます。

解決方法

タイトルにもありますが、ブロックの定義の際に;や\nをつけていないことが原因でした。試しにブロックによって作成されるコードを表示させてみると

TurtleForward(1)TurtleForward(1)

定義されているTurtleForward()を認識することができず、エラーを起こしてしまうようです。

turtleBlock.js

Blockly.JavaScript['turtleforward'] = function(block) {
    var number_step = block.getFieldValue('step');
    console.log(number_step+'進む');
    var fowardCode = `TurtleForward(${number_step})\n`; //変更点
    return fowardCode;
  };

あるいは

turtleBlock.js

Blockly.JavaScript['turtleforward'] = function(block) {
    var number_step = block.getFieldValue('step');
    console.log(number_step+'進む');
    var fowardCode = `TurtleForward(${number_step});`; //変更点
    return fowardCode;
  };

のように\n、;を定義された関数を文字列として扱ったものを最後に入れることでエラーを解決することができました。

;