独自の言語を作成する: JavaScript トランスパイラーをゼロから構築する-jsチュートリアル-php.cn

Craft Your Own Language: Build a JavaScript Transpiler from Scratch

カスタム言語トランスパイラーを構築して、JavaScript でのコンパイラー構築の魅力的な世界を探索してみましょう。この旅では、核となる概念と実践的な実装を説明し、独自のプログラミング言語を作成するためのツールを提供します。

まず、トランスパイラーとは何かを理解する必要があります。これは、ソースコードをあるプログラミング言語から別のプログラミング言語に変換するコンパイラーの一種です。私たちの場合、カスタム言語を JavaScript に変換します。

トランスパイラーを構築するプロセスには、字句解析、解析、コード生成など、いくつかの重要なステップが含まれます。字句解析から始めましょう。

字句解析、またはトークン化は、入力ソースコードを一連のトークンに分解するプロセスです。各トークンは、キーワード、識別子、演算子など、言語内の意味のある単位を表します。簡単なレクサーの実装を次に示します。

function lexer(input) {
  const tokens = [];
  let current = 0;

  while (current < input.length) {
    let char = input[current];

    if (char === '(') {
      tokens.push({ type: 'paren', value: '(' });
      current++;
      continue;
    }

    if (char === ')') {
      tokens.push({ type: 'paren', value: ')' });
      current++;
      continue;
    }

    if (/\s/.test(char)) {
      current++;
      continue;
    }

    if (/[0-9]/.test(char)) {
      let value = '';
      while (/[0-9]/.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'number', value });
      continue;
    }

    if (/[a-z]/i.test(char)) {
      let value = '';
      while (/[a-z]/i.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'name', value });
      continue;
    }

    throw new TypeError('Unknown character: ' + char);
  }

  return tokens;
}

ログイン後にコピー

このレクサーは、括弧、数字、名前 (識別子) を認識します。これは基本的な実装ですが、良い出発点となります。

次に、解析に進みます。パーサーは、レクサーによって生成されたトークンのストリームを取得し、抽象構文ツリー (AST) を構築します。 AST は、コンパイラが扱いやすい方法でプログラムの構造を表します。簡単なパーサーは次のとおりです:

function parser(tokens) {
  let current = 0;

  function walk() {
    let token = tokens[current];

    if (token.type === 'number') {
      current++;
      return {
        type: 'NumberLiteral',
        value: token.value,
      };
    }

    if (token.type === 'paren' && token.value === '(') {
      token = tokens[++current];

      let node = {
        type: 'CallExpression',
        name: token.value,
        params: [],
      };

      token = tokens[++current];

      while (
        (token.type !== 'paren') ||
        (token.type === 'paren' && token.value !== ')')
      ) {
        node.params.push(walk());
        token = tokens[current];
      }

      current++;

      return node;
    }

    throw new TypeError(token.type);
  }

  let ast = {
    type: 'Program',
    body: [],
  };

  while (current < tokens.length) {
    ast.body.push(walk());
  }

  return ast;
}

ログイン後にコピー

このパーサーは、関数呼び出しと数値リテラルを含む単純な言語の AST を作成します。これは、より複雑な言語を構築できる優れた基盤です。

AST を手に入れたら、コード生成に進むことができます。ここで、AST を有効な JavaScript コードに変換します。基本的なコードジェネレーターは次のとおりです:

function codeGenerator(node) {
  switch (node.type) {
    case 'Program':
      return node.body.map(codeGenerator).join('\n');

    case 'ExpressionStatement':
      return codeGenerator(node.expression) + ';';

    case 'CallExpression':
      return (
        codeGenerator(node.callee) +
        '(' +
        node.arguments.map(codeGenerator).join(', ') +
        ')'
      );

    case 'Identifier':
      return node.name;

    case 'NumberLiteral':
      return node.value;

    case 'StringLiteral':
      return '"' + node.value + '"';

    default:
      throw new TypeError(node.type);
  }
}

ログイン後にコピー

このコードジェネレーターは AST を取得し、JavaScript コードを生成します。簡易版ではありますが、基本原理を示しています。

これらのコアコンポーネントが揃ったので、より高度な機能について考え始めることができます。たとえば、型チェックは多くのプログラミング言語にとって重要です。 AST を走査し、互換性のある型に対して操作が実行されていることを確認することで、基本的な型チェッカーを実装できます。

最適化はコンパイラー設計のもう 1 つの重要な側面です。定数の折りたたみ (コンパイル時に定数式を評価する) やデッドコードの削除 (プログラムの出力に影響を与えないコードを削除する) などの単純な最適化を実装できます。

エラー処理は、使いやすい言語を作成するために非常に重要です。コンパイラで問題が発生した場合は、明確で役立つエラーメッセージを提供する必要があります。これには、字句解析と解析中に行番号と列番号を追跡し、この情報をエラーメッセージに含めることが含まれる場合があります。

簡単なカスタムコントロール構造を実装する方法を見てみましょう。コードのブロックを指定された回数繰り返す「repeat」ステートメントを言語に追加するとします。

function lexer(input) {
  const tokens = [];
  let current = 0;

  while (current < input.length) {
    let char = input[current];

    if (char === '(') {
      tokens.push({ type: 'paren', value: '(' });
      current++;
      continue;
    }

    if (char === ')') {
      tokens.push({ type: 'paren', value: ')' });
      current++;
      continue;
    }

    if (/\s/.test(char)) {
      current++;
      continue;
    }

    if (/[0-9]/.test(char)) {
      let value = '';
      while (/[0-9]/.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'number', value });
      continue;
    }

    if (/[a-z]/i.test(char)) {
      let value = '';
      while (/[a-z]/i.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'name', value });
      continue;
    }

    throw new TypeError('Unknown character: ' + char);
  }

  return tokens;
}

ログイン後にコピー

これは、標準の JavaScript に翻訳されるカスタム構造を使用して言語を拡張する方法を示しています。

ソースマッピングも重要な考慮事項です。これにより、生成された JavaScript を元のソースコードにマッピングし直すことができます。これはデバッグに重要です。コードを生成するときに元のソースの位置を追跡し、生成された JavaScript と一緒にソースマップを出力することで、これを実装できます。

トランスパイラーをビルドプロセスに統合すると、開発者のエクスペリエンスが大幅に向上します。 Webpack や Rollup などの一般的なビルドツール用のプラグインを作成して、開発者がプロジェクトで当社の言語をシームレスに使用できるようにすることができます。

言語を開発するにつれて、より高度な機能を追加したくなるでしょう。モジュールシステムを実装したり、オブジェクト指向プログラミングのサポートを追加したり、組み込み関数の標準ライブラリを作成したりする可能性があります。

このプロセス全体を通じて、パフォーマンスを念頭に置くことが重要です。コンパイラーのパフォーマンスは、特に大規模なプロジェクトの場合、開発者の生産性に大きな影響を与える可能性があります。コンパイラのプロファイルを作成し、最も時間のかかる部分を最適化する必要があります。

トランスパイラーの構築は複雑ですが、やりがいのあるプロセスです。これにより、プログラミング言語が内部でどのように機能するかを深く理解し、コードでアイデアを表現する方法を形作ることができます。特定の問題ドメイン向けにドメイン固有の言語を作成する場合でも、新しい言語機能を実験する場合でも、ここで学んだスキルは可能性の世界を開きます。

覚えておいてください、学ぶための最良の方法は実践することです。おそらく単純な電卓言語から始めて、概念に慣れてきたら徐々に機能を追加していきます。実験して間違いを犯すことを恐れないでください。それが私たちが開発者として学び、成長する方法です。

結論として、JavaScript でのコンパイラー構築は、ニーズに合わせたカスタム言語を作成できる強力なツールです。字句解析、解析、コード生成の原理を理解することで、コードの問題について新しい考え方や解決方法を開くトランスパイラーを構築できます。さあ、創作に挑戦してください。制限できるのはあなたの想像力だけです!