Sider Blog

コードレビュー自動化サービス「Sider」を運営するSider株式会社のコーポレートブログです。

Yarnサポートのお知らせ

こんにちは、Sider開発チームの木庭です。

本日、事前アナウンスで予告していたとおり、Yarnサポートをリリースいたしました!

今回のリリースでは、Yarnサポートを含む npm 関連のいくつかの動作変更があります。かいつまんで列挙すると、次の通りです。

  • Yarnサポート(yarn.lock から必要なパッケージを自動インストールします)
  • 自動 npm パッケージインストール(特別な設定なしで package.json から解析に必要なパッケージをインストールします)

その他の詳細については、前述の事前アナウンスのブログ記事をご覧ください。

何かお気づきの点や疑問点がございましたら、お気軽にSiderの右下のチャットからお問い合わせください。

Yarnサポートおよびnpmパッケージのインストール動作変更のお知らせ

こんにちは、Sider開発チームの木庭です。

このたび、待望のYarnサポートの紹介と、npmパッケージをインストールする際の動作変更についてアナウンスをいたします。これらの変更はまだ適用されておらず、2019/8/20に皆様に提供する予定です。

今回の変更の影響を受けるのは、npmからインストール可能な以下の解析ツールとなります。

特に、ESLint、styelintを使用中で package.json がリポジトリ内に存在しないケースでは、解析が正しく動作しなくなる可能性があります。そのため、事前に本記事をご覧いただき、設定をご確認いただけますと幸いです。

以下、それぞれの変更点について、詳しく見ていきます。

Yarnサポート

かねてよりご要望の多かった、Yarnサポートを実施いたします。この変更をリリース後、Siderはリポジトリ内に yarn.lock ファイルを見つけると、npm install コマンドを実行する代わりに yarn install コマンドを実行します。

これにより、package.json に書かれてあるツールのバージョンではなく yarn.lock に書かれてあるバージョンで解析が実行されるため、より皆様の開発環境に近い状態で解析が実行されることになります。結果として、Siderでの解析失敗を減らすことにつながり、解析失敗時のデバッグがより容易になると私たちは考えています。

例えば、以下のような package.jsonyarn.lock ファイルがリポジトリ内にあるとします。

package.json:

{
  "devDependencies": {
    "eslint": "^5.10.0"
  }
}

yarn.lock:

eslint@^5.10.0:
  version "5.10.0"

Yarnサポート以前は、ESLint 5の最新バージョンである eslint@5.16.0 が解析に使用されます。一方、Yarnサポート以後は yarn.lock 内に記載してある eslint@5.10.0 が解析に使われることになります。

npm ci の利用

Yarnと同様に、Siderはリポジトリ内に package-lock.json ファイルを見つけると、npm install コマンドの代わりに npm ci コマンドを実行するようになります。この場合も、yarn.lock と同様 package-lock.json に記載されているバージョンがインストールされますので、より開発環境に近い動作が期待できます。

また、npm cinpm install よりも高速ですので、解析時間の短縮が期待できます(npm ci の詳細については、npmのドキュメントをご参照ください)。

ちなみに、まれなケースだとは思いますが、 yarn.lockpackage-lock.json が同時に存在する場合、エラーとなりますのでご注意ください(Yarnもまた、その場合は警告を表示します)。

npmパッケージインストールの動作変更

今回のリリースで、npmパッケージインストールのデフォルトの挙動が変更になります。具体的には、sider.yml で制御可能な npm_install オプションを省略した場合の挙動が変わります。

npm_install オプションの初期値:

  • 変更前: false
  • 変更後: true

この初期値の変更と、Yarnおよび npm ci のサポートをまとめると、変更後の動作は以下のステップとなります。

  1. package.json が存在するかチェックする。存在しない場合は、Sider提供のデフォルトバージョンを使用する。
  2. package.json かつ yarn.lock が存在する場合、yarn install を実行する。
  3. package.json かつ package-lock.json が存在する場合、npm ci を実行する。
  4. package.json が存在するが yarn.lockpackage-lock.json も存在しない場合、npm install を実行する。
  5. node_modules ディレクトリに対象となる解析ツールがインストールされたかチェックする。
  6. ツールがインストールされている場合、そのインストールされたバージョンを使用する。
  7. (何らかの理由で)ツールがインストールされてない場合、デフォルトバージョンを使用する。

ツールがインストールされなかった場合、Siderの解析結果ページとログページに警告が出力されます。それらの警告やログを参考に、package.json などの設定を見直してみてください。

この npm_install 省略時の挙動は、明示的に npm_install: true を指定した場合でも変わりません。

また、npm_install: false が指定された場合は、これまでと同様にインストールは実行されず、デフォルトバージョンが使用されます。インストールを回避したい場合は、明示的に npm_install: false を指定してください。

ツールバージョン制約の追加

npmやYarnによってインストールされるツールのバージョンについて、制約が追加されました。ここでの「制約」とは、サポートされるバージョン範囲のことです。これは、Siderの動作を保証するための措置です。この制約に違反すると、解析が失敗します。

最低バージョンはSider解析の実行統計データをもとに決めたので、ほとんどのケースでは問題にならないと思われます。しかし、万が一この制約の範囲外のバージョンを使用したいケースが発生した場合は、サポートまでお知らせください。

以下、各ツールのバージョン制約となります。

  • ESLint: 3.19.0 ≦ x < 7.0.0
  • TSLint: 5.0.0 ≦ x < 6.0.0
  • CoffeeLint: 1.16.0 ≦ x < 3.0.0
  • stylelint: 8.3.0 ≦ x < 11.0.0

いずれのツールも、最新バージョンは利用可能です。この制約については、変更リリース後にドキュメントに反映します。

ツール設定ファイルからの自動インストール機能の廃止

今回の変更で、各ツールの設定ファイルの内容から必要なプラグインを自動で検出してインストールする機能が廃止されます。対象のツールは以下の通りです。

  • ESLint
  • stylelint

例えば、ESLintの設定ファイル(例..eslintrc.json)に以下のように記述されていた場合、Siderは eslint-plugin-react を自動でインストールしようとします。

{
  "plugins": ["react"]
}

しかし、この機能は様々なフォーマットの設定ファイル(例えば、JSONやYAML、JavaScriptなど)を解析する必要があるために実装の難易度が高く、加えてユーザーの皆様の環境でこの挙動を再現することが難しいため、廃止とすることが決定しました。

もしこの機能を使用している場合は、以下の例のように package.json に依存プラグインを明示的に追加することで代用できます。詳細は、各プラグインのドキュメントをご確認ください。

{
  "devDependencies": {
    "eslint": "^5.15.1",
    "eslint-plugin-react": "^7.14.3"
  }
}

まとめ

変更内容は以上の通りです。今回の変更は、ユーザーの皆様の体験をより良いものすることを目的としており、できるだけ既存の解析を失敗させないように配慮しています。しかしながら、万が一リリース後に解析が失敗するようになった場合は、サポートまでフィードバックをいただけると幸いです。

再度繰り返しますが、リリース予定日は2019/8/20となります。

今回のアナウンスについて、フィードバックをいただけると非常に助かります。何かお気づきの点や疑問点がございましたら、お気軽にSiderの右下のチャットからお問い合わせください。

2019年7月度の解析ツール更新を行いました

Siderは毎月解析ツールのバージョンを見直しております。このたび、7月分のバージョンアップデートを行いましたのでお知らせいたします。

現在のバージョンについてはドキュメントもあわせてご確認ください。

なお、Ruby gems(RuboCop, Reekなど)およびnpmパッケージ(ESLint, TSLint, stylelint)に関しては、それぞれ任意のバージョンをSider上で動作させることが可能なため、上記のアップデートはデフォルトバージョンの更新になります。詳しくはドキュメントの各解析ツールの設定をご覧ください。

何かご不明点がございましたら、お気軽にSiderの右下のチャットからお問い合わせください。

2019年6月度の解析ツール更新を行いました

Siderは毎月解析ツールのバージョンを見直しております。このたび、6月分のバージョンアップデートを行いましたのでお知らせいたします。

現在のバージョンについてはドキュメントもあわせてご確認ください。

なお、Ruby gems(RuboCop, Reekなど)およびnpmパッケージ(ESLint, TSLint, stylelint)に関しては、それぞれ任意のバージョンをSider上で動作させることが可能なため、上記のアップデートはデフォルトバージョンの更新になります。詳しくはドキュメントの各解析ツールの設定をご覧ください。

何かご不明点がございましたら、お気軽にSiderの右下のチャットからお問い合わせください。

解析結果画面で、目的のIssueを絞り込めるようになりました

解析結果画面でIssueをさまざまな条件で検索・絞り込みが行えるようになりました。 この機能では、解析ツール名やルールIDでIssueを絞り込める他、ディレクトリツリーからの絞り込みも行うことができます。

解析結果画面で表示されているIssue件数が多い時、フィルタリング機能を使うことで表示件数を減らし、Siderを利用したレビューをより行いやすくします。

Issue検索機能

f:id:a_ksi19:20190610171205p:plain

この機能は解析結果画面の「高度な検索」から利用することができ、ツール名やルールIDを選択することでIssueを絞り込みます。 絞り込み時に検索モーダルから表示されていないルールIDなどは、テキストエリアに入力することで絞り込むことも可能です。

f:id:a_ksi19:20190610171316p:plain

ディレクトリツリー

ディレクトリツリーは解析結果画面左側にあるトグルボタンから開くことができます。ディレクトリツリーに表示されるのは、Siderが報告したIssueがあるファイルに限られ、目的のファイルやディレクトリを選択することでIssueを絞り込むことができます。

f:id:a_ksi19:20190610171343p:plain

今回の機能やその他Siderの機能やUXについて、お気づきの点やご要望がありましたらSiderプロダクトチームにお知らせください!