Aura Components(旧Lightning Components)の静的解析をしてみるの巻 #Salesforce

これはなに?

SFDC開発をすることになりましてん。

さしあたってAura Componentsの勉強をしています。その中でSalesforce CLIの存在を知り、force:lightning:lintでいわゆる静的解析のようなことが出来るそうなので、それを確かめたかった次第です。

force:lightning:lintとは

開発時にコードをスキャンして、Locker Serviceの競合とアンチパターンを回避出来るだけでなく、コードの質と一貫性を向上させるのを手助けするツールという位置付けのようです。JavaでいうCheckStyle, SoptBugsと同じようなものと捉えてよさそう。

(Locker Serviceって何だ??)

使い方

公式リファレンスに以下のコマンド例が記載されています。

$ sfdx force:lightning:lint ./path/to/be/linted/

コマンドのオプションにLint対象となるAura Componentsが置かれているパスを指定するのが一番簡単な使い方のようです。

使ってみた

Aura Componentsを作成し、そのControllerのコードを適当に書いてみる。

({
  myAction: function (component, event, helper) {
    var hoge = new Array()
    console.log('hoge', hoge)
  }
})

そして、lintを実行してみる。

fdx force:lightning:lint ./force-app/main/default/aura/DemoComponent

結果は、以下のようになると。

Search for "**/*.js" in folder "./force-app/main/default/aura/DemoComponent"'
' -> Ignoring: **/node_modules/**,**/jsdoc/**,**/htdocs/**,**/invalidTest/**,**/purposelyInvalid/**,**/invalidTestData/**,**/validationTest/**,**/lintTest/**,**/target/**,**/parseError/**,**/*.junk.js,**/*_mock?.js'
Found 3 matching files.
----------------
FILE: /Users/xxx/sfdc/aura-demo/force-app/main/default/aura/DemoComponent/DemoComponentController.js:

  error  no-array-constructor  The array literal notation [] is preferrable
  Line:3:16
      var hoge = new Array()
                  ^

  error       no-console       Unexpected console statement
  Line:4:5
      console.log('hoge', hoge)
       ^


✖ 2 problems (2 errors, 0 warnings)

ESLintで規定されているルールのようですね。

- no-array-constructor
- no-console

他にもどのようなルールが定義されているのか気になりますが、それは一旦横に置いておいて…、昨今のDevOpsの流れからすると、この静的解析結果をJenkinsに読みこませたいと思ってしまいます。

ESLintの結果をJenkinsに読みこませるには、CheckStyleプラグインを使う方法があるようです。(というか、CheckStyleプラグイン以外の方法知らない)
CheckStyleプラグインで読ませるようにするためには、ESLintの結果をxml形式にする必要があります。そのためには、ESLintのオプションで-f checkstyleとすれば良いのです。

しかし、force:lightning:lintのオプションを見てもフォーマッタなるものが見あたらない…。
-jを指定すればJSON形式で出してくれるのですが…。

sfdx force:lightning:lint ./force-app/main/default/aura/DemoComponent -j

[
    {
        "file": "/Users/xxx/sfdc/aura-demo/force-app/main/default/aura/DemoComponent/DemoComponentController.js",
        "result": [
            {
                "ruleId": "no-array-constructor",
                "severity": 2,
                "message": "The array literal notation [] is preferrable.",
                "line": 3,
                "column": 16,
                "nodeType": "NewExpression",
                "source": "    var hoge = new Array()"
            },
            {
                "ruleId": "no-console",
                "severity": 2,
                "message": "Unexpected console statement.",
                "line": 4,
                "column": 5,
                "nodeType": "MemberExpression",
                "source": "    console.log('hoge', hoge)"
            }
        ]
    }
]

JenkinsのCheckStyleプラグインは、たしか、xml形式しか受けつけなかったはずなので、このままではintegrationすら出来ないのですね。

とりあえず、JSON -> xmlに変換するツールを作ればどうにか出来そうな気がするので、ちょっとそれを作ってみたいと思います。今回はここまで。