tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightning CLI Heroku Pluginを試してみました

2016年4月にLightning CLI Heroku Pluginというツールが公開され、Salesforce Developer Blogで紹介されていました。このツールを利用すると開発しているLightning Componentのセキュリティチェックてきなことができるみたいです。

f:id:tyoshikawa1106:20160506223322p:plain

Lightning CLI Heroku Plugin | Salesforce Developers Japan Blog

事前準備

このツールを利用するには、Node.jsとHeroku Toolbeltが必要となっているみたいです。一番最初に実行できるようにインストールしておきます。(Heroku Toolbeltとはコマンドラインからherokuコマンドを実行できるライブラリです)


次のコマンドでインストール済みか確認できると思います。

$ heroku version

f:id:tyoshikawa1106:20160506223732p:plain

Lightning CLI Heroku Pluginのインストール方法

次のコマンドを実行するだけでインストールできます。

$ heroku plugins:install salesforce-lightning-cli

f:id:tyoshikawa1106:20160506223911p:plain


インストール後に『$ heroku version』を実行するとInstalled Pluginsのところにsalesforce-lightning-cli@1.0.0が表示されるようになっていました。
f:id:tyoshikawa1106:20160506224134p:plain

使い方

このツールを利用するには対象コンポーネントのファイルパスを以下のように指定して実行します。

$ heroku lightning:lint ./path/to/lightning/components/


たとえばこんなプロジェクトがあった場合
f:id:tyoshikawa1106:20160506224501p:plain

f:id:tyoshikawa1106:20160506224657p:plain

f:id:tyoshikawa1106:20160506224912p:plain


次のような感じで実行すればいいと思います。

$ heroku lightning:lint /Users/tyoshikawa1106/pg/salesforce/workspace/tyoshikawa1106_work/src/aura


実行してみると次のような結果が取得できました。
f:id:tyoshikawa1106:20160506224949p:plain


errorが見つかりましたが、Lightning CLI Heroku Plugin自体は問題なく実行できていると思います。今回のエラーですが、利用していない引数が存在するためにエラーとなっているみたいです。
f:id:tyoshikawa1106:20160506225217p:plain


試しに引数をすべて除外してもう一度実行してみました。
f:id:tyoshikawa1106:20160506225252p:plain


これで先程のerrorは無事に解決したみたいです。
f:id:tyoshikawa1106:20160506225340p:plain


ツールの基本的な使い方は確認できたので、次はLightning Componentがたくさん作成されているプロジェクトで確認してみます。
f:id:tyoshikawa1106:20160506225757p:plain


ターミナルでファイルのパスを確認して・・・

f:id:tyoshikawa1106:20160506225904p:plain


先ほどと同じようにコマンドを実行します。

$ heroku lightning:lint /Users/tyoshikawa1106/pg/salesforce/workspace/tyoshikawa1106_app/src/aura


実行結果はこんな感じ。
f:id:tyoshikawa1106:20160506230307p:plain


結構キレイにかけているつもりでしたが、warningとerrorのメッセージが大量に表示されました。せっかくなのでいくつか紹介します。

Lightning Component開発実装注意点

arning comma-dangle Unexpected trailing comma

controller.jsなどで『}』の後ろに不要な『,』を宣言しない。
f:id:tyoshikawa1106:20160506230601p:plain

warning no-trailing-spaces Trailing spaces not allowed

行の末尾に不要な空白スペースを宣言しない(おそらく)
f:id:tyoshikawa1106:20160506230844p:plain

error no-unused-vars 'event' is defined but never used

使われてない変数を宣言しない。(この場合引数のevent変数が不要だった)

doSaveBtn : function(component, event) {
warning comma-spacing A space is required after ','

区切り文字『,』の後にスペースを宣言していない

component.set("v.ext","plus");
arning no-trailing-spaces Trailing spaces not allowed

『 } 』の後ろに不要な半角スペースが宣言されている
f:id:tyoshikawa1106:20160506231224p:plain

error eqeqeq Expected '===' and instead saw '=='

文字列の一致判定に '==' を利用している。ここは '===' であるべき

if (e.style.display == 'block' || e.style.display==''){
error no-unused-vars 'self' is defined but never use

『this』変数の値を『self』変数にセットして利用している
f:id:tyoshikawa1106:20160506231509p:plain

warning brace-style Closing curly brace should be on the same line as opening curly brace or on the line after the previous block

『{ ... }』の処理を一行で表記している。
f:id:tyoshikawa1106:20160506231638p:plain

error no-undef 'Chart' is not defined

未定義のものを利用している。(解決方法ちょっと不明かも)
f:id:tyoshikawa1106:20160506231941p:plain

warning semi Missing semicolon

セミコロンの宣言がない(...おそらくこれ)

warning no-param-reassign Assignment to function parameter 'isError'

引数の渡し方がよくない?
f:id:tyoshikawa1106:20160506232252p:plain

error no-redeclare 'errorMsgKey' is already defined

既に定義済みの変数?引数の変数と処理中の変数で名前が重複していた。
f:id:tyoshikawa1106:20160506232510p:plain

warning camelcase Identifier 'value_title_icon' is not in camel case

変数名にキャメルケースが利用されていない。

value_close_icon = value_close_icon.replace("", "");
error no-console Unexpected console statement

予期しないコンソールステートメント。(console.logの宣言は残してはいけない?)

error no-alert Unexpected confirm

予期しない確認。confirmの宣言の仕方が間違っているのかも。(そもそも使ってはいけない可能性?)

f (confirm('Are you Sure?')) {
error consistent-return Expected to return a value at the end of this function

return の宣言が正しくできていない。(たぶんこの場合処理の最後にも必要だった)
f:id:tyoshikawa1106:20160506233046p:plain

error consistent-return Expected no return value

これもreturnの使い方が正しくない。

return alert('Image file not supported');
warning curly Expected { after 'if' condition

if処理の{}が省略されている。

if (aData < bData) return -1;
error aura-api Invalid Aura API

無効になったAPIを利用している

$A.clientService.runActions([action]);
error secure-document Invalid SecureDocument API

これダメなのか・・・

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");


だいたいこんな感じでした。たくさん出ていましたが、基本的には同じ理由の問題がいろんな場所で使われていることが原因です。末尾に不要な半角スペースが宣言されているのは気づかない内にやってしまったパターンが多いのでこまめにツールでチェックしておいた方が良さそうです。

Lightning CLI Heroku Pluginのオプション

helpコマンドで利用できるコマンドとオプションを確認できるみたいです。

$ heroku lightning:lint --help

f:id:tyoshikawa1106:20160506233831p:plain


Lightning CLI Heroku Pluginではこんな感じのことができるみたいです。最後にチェックして修正していくのは大変なので、Lightning Componentを開発する場合はこまめにこのツールを実行してチェックするようにしておいた方がいいみたいです。

追記

このツールでチェックしてくれるのはController.jsやHelper.jsなどのJS側の処理となるみたいです。例えばcomponentファイルとcssファイルしかない場合は、『Did not find matching files.』となりました。

追記の追記

まじめにエラー解決してみようとやってみたのですが、ちょっとムリっぽい感じがしました。