抽象的なJavaScript構文ツリーを使用する

コードを解析する理由 たとえば、コミットする前に忘れられたconsole.logを見つけるため。 しかし、コードの何百ものエントリの関数のシグネチャを変更する必要がある場合はどうでしょうか？ 正規表現はここで対処できますか？ この記事では、抽象構文ツリーが開発者に提供する可能性を示します。







Under the cut- HolyJS 2018 PiterカンファレンスからのKirill Cherkashin（ z6Dabrata ）によるレポートのビデオおよびテキストのトランスクリプト。





著者について

シリルはモスクワで生まれ、現在はニューヨークに住んでおり、Firebaseで働いています。 Googleだけでなく世界中でAngularを教えています。 世界最大のAngular mitapのオーガナイザーはAngularNYC（およびVueNYCとReactNYC）です。 プログラミングの余暇には、タンゴ、本、楽しい会話が好きです。

弓のこまたは木？

例から始めましょう。プログラムをデバッグし、gitに加えた変更を送信した後、静かに寝たとしましょう。 朝、同僚があなたの変更をダウンロードし、前日コンソールへのデバッグ情報の出力を削除するのを忘れたため、それを表示して出力を詰まらせることが判明しました。 多くの人がこの問題に直面しました。



EsLintなどの状況を修正するツールがありますが、教育目的のために、自分で解決策を見つけてみましょう。

コードからすべてのconsole.log()



を削除するには、どのツールを使用する必要がありますか？

正規表現とAbstract Sitax Trees（ASD）の使用から選択します。 findConsoleLog



関数を作成して、正規表現でこれを解決してみましょう。 入力時に、プログラムコードを引数として受け取り、プログラムテキストのどこかにconsole.log（）が見つかった場合にtrueを表示します。

 function findConsoleLog(code) { return !!code.match(/console.log/); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私たちの機能を壊すさまざまな方法を考えて、17のテストを書きました。 このリストは完全にはほど遠い。







最も単純なテストに合格しました。

また、関数の名前に文字列「console.log」が含まれている場合はどうなりますか？

 function findConsoleLog(code) { return !!code.match(/\bconsole.log/); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

console.log



が単語の先頭にあることを示す文字を追加しました。







2つのテストのみが合格しましたが、 console.log



がコメント内にあり、削除する必要がない場合はどうなりますか？



パーサーがコメントに触れないように書き直します。

 function findConsoleLog(code) { return !!code   .replace(/\/\/.*/)   .match(/\bconsole.log/); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

行から「console.log」の削除を除外します。

 function findConsoleLog(code) { return !!code   .replace(/\/\/.*|'.*'/, '')   .match(/\bconsole.log/); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

いくつかのテストの合格を妨げる可能性のあるスペースやその他の文字がまだあることを忘れないでください：







アイデアは非常に単純ではなかったという事実にもかかわらず、正規表現を使用した17のテストすべてに合格できます。 この場合、ソリューションコードは次のようになります。

 function findConsoleLog(code) { return code   .replace(/\/\/.*|'.*?[^\\]'|".*?"|`[\s\S]*`|\/\*[\s\S]*\*\//)   .match(/\bconsole\s*.log\(/); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

問題は、このコードがすべての可能なケースをカバーしているわけではなく、それを維持するのがかなり難しいことです。



ASDを使用してこの問題を解決する方法を検討してください。

木はどのように成長しますか？

パーサーがアプリケーションのコードを操作した結果として、抽象構文ツリーが取得されます。 パーサー@ babel / parserがデモンストレーションに使用されました。

例として、文字列console.log('holy')



取得し、パーサーに渡します。

 import { parse } from 'babylon'; parse("console.log('holy')");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

彼の仕事の結果、約300行のJSONファイルが取得されます。 サービス情報のある番号行から除外します。 ボディセクションに興味があります。 メタ情報も私たちには興味がありません。 結果は約100行です。 ブラウザーが1つの本体変数（約300行）に対して生成する構造と比較すると、これはそれほど多くありません。



構文ツリーのコードでさまざまなリテラルがどのように表されるかの例をいくつか見てみましょう。







これは、数値リテラルである数値リテラルが存在する式です。







すでに馴染みのあるconsole.log式。 プロパティを持つオブジェクトがあります。







logが関数呼び出しの場合、説明は次のとおりです。呼び出し式があり、引数-数値リテラルがあります。 同時に、呼び出し式には名前-logがあります。



リテラルは異なる場合があります：数値、文字列、正規表現、ブール値、null。

console.log呼び出しに戻る







これは、内部にメンバー式を持つ呼び出し式です。 このことから、内部のコンソールオブジェクトにはlogというプロパティがあることが明らかです。

ASDバイパス

次に、コード内でこの構造を操作してみましょう。 babel-traverseライブラリーは、treeをトラバースするために使用されます。



同じ17のテストが行​​われます。 このようなコードは、プログラムの構文ツリーを分析し、「console.log」のエントリを検索することで取得できます。

 function traverseConsoleLog(code, {babylon, babelTraverse, types, log}) { const ast = babylon.parse(code); let hasConsoleLog = false; babelTraverse(ast, {   MemberExpression(path){     if (       path.node.property.type === 'Identifier' &&       path.node.property.name === 'log' &&       path.node.object.type === 'Identifier' &&       path.node.object.name === 'console' &&       path.parent.type === 'CallExpression' &&       path.Parentkey === 'callee'     ) {       hasConsoleLog = true;     }   } }) return hasConsoleLog; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここに書かれていることを分析しましょう。 const ast = babylon.parse(code);



ast変数にコードから構文木を解析します。 次に、このツリーを処理のためにbabel-parseライブラリに渡します。 呼び出し式内で一致する名前を持つノードとプロパティを探しています。 ノードとその名前の必要な組み合わせが見つかった場合、hasConsoleLog変数をtrueに設定します。



ツリー内を移動し、ノードの親、子孫を取得し、それらが持っている引数とプロパティを探し、これらのプロパティの名前を見て、タイプすることができます-これは非常に便利です。



babel-typesライブラリを使用して簡単に修正できる不快なニュアンスがあります。 たとえば、 path.parent.type === 'CallExpression'



代わりに誤った名前のためにツリーを検索する際のエラーを回避するために、誤ってpath.parent.type === 'CallExpression'



を作成しました。 ：

 // Before path.node.property.type === 'Identifier' path.node.property.name === 'log' // with babel types import {isIdentifier} from 'babel-types'; isIdentifier(path.node.property, {name: log}) //         ,  ,    isIdentifier,     
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

babel-typesを使用して以前のコードを書き換えます。

 function traverseConsoleLogSolved2(code, {babylon, babelTraverse, types}) { const ast = babylon.parse(code); let hasConsoleLog = false; babelTraverse(ast, {   MemberExpression(path) {     if (       types.isIdentifier(path.node.object, { name: 'console'}) &&       types.isIdentifier(path.node.property, { name: 'log'}) &&       types.isCallExpression(path.parent) &&       path.parentKey === 'callee'     ) {       hasConsoleLog = true;     }   } }); return hasConsoleLog; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

babel-traverseを使用してASDを変換する

人件費を削減するために、 console.log



コードからすぐに削除する必要がありconsole.log



コード内にあるという信号ではなく）。



MemberExpression自体ではなく、その親を削除する必要があるため、代わりにhasConsoleLog = true;



path.parentPath.remove();



。



removeConsoleLog



関数から、まだブール値を返します。 次のように、その出力をbabel-generatorを生成するコードに置き換えます。

hasConsoleLog



=> babelGenerator(ast).code







Babel-generatorは、修正された抽象構文ツリーをパラメーターとして受け取り、codeプロパティを持つオブジェクトを返します。このオブジェクト内では、 console.log



なしでコードが再生成されます。 ところで、コードマップを取得する場合は、このオブジェクトのsourceMapsプロパティを呼び出すことができます。

そして、デバッガを見つける必要がある場合は？

今回は、 ASTexplorerを使用してタスクを完了します。 デバッガーは、デバッガーステートメントノードの一種です。 これは特別な種類のノードであるため、全体の構造を見る必要はありません。デバッガーステートメントを見つけるだけです。 ESLint用のプラグインを作成します（ASTexplorer上）。



ASTexplorerは、左側にコードを記述し、右側に完成したASDを取得するように設計されています。 受信する形式を選択できます：JSONまたはツリー形式。







ESLintを使用しているため、ファイルを見つけるためのすべての作業が行われ、目的のファイルが提供されるため、その中のデバッガー行を見つけることができます。 このツールは、異なるASDパーサーを使用します。 ただし、JavaScriptにはいくつかのタイプのASDがあります。 さまざまなブラウザがさまざまな方法で仕様を実装していた過去を連想させるもの。 したがって、デバッガー検索を実装します。

 export default function(context) { return {   DebuggerStatement(node) { // ,     console.log    path,    -  ,     path         context.report(node, 'LOL Debugger!!!'); //   ESLint ,   debugger, node     ,    ,    debugger   } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

書かれたプラグインの動作を確認する：







同様に、デバッガーをコードから削除できます。

他に役立つASD

私は個人的にASDを使用して、Angularやその他のフロントエンドフレームワークでの作業を簡素化します。 ボタンをクリックするだけで、インターフェース、メソッド、デコレーターなどをインポート、拡張、追加できます。 このケースではJavascriptについて説明していますが、TypeScriptには独自のASDもありますが、唯一の違いはノードタイプと構造の名前の違いです。 同じASTExplorerで言語TypeScriptとして選択できます。



だから：

• コードをより細かく制御し、リファクタリングを容易にし、codemodを使用します。 たとえば、コミットする前に、1つのキーを押すことにより、ガイドラインに従ってコード全体をフォーマットできます。 codemodsは、必要なフレームワークのバージョンに応じた自動コードマッチングを意味します。
  
  
• コード設計に関する論争の減少。
  
  
• ゲームプロジェクトを作成できます。 たとえば、プログラマが書いたコードに関するフィードバックを自動的に提供します。
  
  
• JavaScriptのより良い理解。
  
  

Babelの便利なリンク

1. すべてのBabel変換は、このAPIを使用します： プラグインとプリセット 。
   
   
2. ECMAScriptに新しい機能を追加するプロセスの一部は、Babelのプラグインを作成することです。 これは、人々が新しい機能をテストできるようにするために必要です。 リンクをたどると、同じ方法でASDの機能が使用されていることがわかります。 たとえば、 logical-assignment-operator 。
   
   
3. Babel Generatorは、コードを生成するときにフォーマットを失います。 このツールが開発チームで使用される場合、ASDからコードを生成した後、すべての人に同じように見えるため、これは部分的には良いことです。 ただし、フォーマットを維持したい場合は、次のいずれかのツールを使用できます： RecastまたはBabel CodeMod
   
   
4. このリンクから、Babel Awesome Babelに関する豊富な情報を見つけることができます。
   
   
5. Babelはオープンソースプロジェクトであり、ボランティアチームがそれに取り組んでいます。 あなたが助けることができます。 これを行うには3つの方法があります：財政支援、あなたはpabelonウェブサイトをサポートできます。
   
   

ボーナス

コードでconsole.log



を見つける方法は他にありますか？ IDEを使用してください！ コードの検索場所を選択した後、検索と置換ツールを使用します。

Intellij IDEAには、コード内の適切な場所を見つけるのに役立つ「構造検索」ツールもあります。ちなみに、ASDを使用しています。

11月24〜25日に、 Kirillは、 モスクワのHolyJSでJavaScript * LOVES *バイナリデータに関するプレゼンテーションを行います。バイナリデータレベルに進み、* .gifファイルを使用してバイナリファイルを掘り、ProtobufやThriftなどのシリアル化フレームワークを扱います。 報告後、Cyrilと話し合い、議論の分野で関心のあるすべての問題について議論することが可能になります。